Added code for upcoming events

jm20122012 · Jun 30, 2024 · 2bcfdb9 · 2bcfdb9
1 parent d9fee39
commit 2bcfdb9
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 14 deletions.
diff --git a/ui/src/components/UpcomingEventsContainer.jsx b/ui/src/components/UpcomingEventsContainer.jsx
@@ -1,15 +1,80 @@
-import React from 'react'
+import React, {useState, useEffect} from 'react'
+import Table from 'react-bootstrap/Table';
 
 import "../stylesheets/UpcomingEventsContainer.css";
 
 const UpcomingEventsContainer = () => {
+  const [upcomingEvents, setUpcomingEvents] = useState([]);
+
+  const fetchUpcomingEvents = async () => {
+    const resp = await fetch("http://localhost:3000/schedule");
+    const d = await resp.json();
+    console.log("Schedule: ", d);
+    return d;
+  };
+
+  useEffect(() => {
+    console.log("Upcoming events rendered");
+    const fetchData = async () => {
+      const data = await fetchUpcomingEvents();
+      setUpcomingEvents(data);
+    };
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    console.log("Upcoming events updated: ", upcomingEvents);
+  },[upcomingEvents]);
+
   return (
     <>
-        <div className="upcoming-events-container">
-            UpcomingEventsContainer
-        </div>
+      <div className="upcoming-events-container d-flex flex-column">
+        <h4>Upcoming Events</h4>
+        {upcomingEvents && upcomingEvents.length > 0 ? (
+          <UpcomingEventsTableComponent upcomingEvents={upcomingEvents}/>
+        ) : (
+          <p className="text-white">No upcoming events</p>
+        )}
+      </div>
     </>
   )
 }
 
-export default UpcomingEventsContainer
+const UpcomingEventsTableComponent = (props) => {
+  return (
+    <>
+      <div className="d-flex w-100">
+        <Table striped bordered hover variant='dark' className="m-3">
+          <thead>
+            <tr>
+              <th>Event ID</th>
+              <th>Zone ID</th>
+              <th>Start Time</th>
+              <th>Stop Time</th>
+              <th>Duration (minutes)</th>
+              <th>Active</th>
+            </tr>
+          </thead>
+          <tbody>
+            {
+              props.upcomingEvents.map((ue, idx) => {
+                return (
+                  <tr key={`${ue.zoneID}-${idx}`}>
+                    <td>{ue.eventID}</td>
+                    <td>{ue.zoneID}</td>
+                    <td>{ue.startTime}</td>
+                    <td>{ue.stopTime}</td>
+                    <td>{ue.duration}</td>
+                    <td>{ue.active ? "TRUE" : "FALSE"}</td>
+                  </tr>
+                )
+              })
+            }
+          </tbody>
+        </Table>
+      </div>
+    </>
+  )
+};
+
+export default UpcomingEventsContainer;
diff --git a/ui/src/components/ZoneStatusItem.jsx b/ui/src/components/ZoneStatusItem.jsx
@@ -15,7 +15,7 @@ const ZoneStatusItem = (props) => {
         <>
             <div className="zone-status-item-container">
                 <div className="zone-status-item-info-container">
-                    <ZoneStatusInfoRow label="Zone Label" value={props.zoneLabel} />
+                    <ZoneStatusInfoRow label="Zone Label" value={props.zoneID} />
                     <ZoneStatusInfoRow label="Zone Status" value="On" />
                     <ZoneStatusInfoRow label="Next Event" value="13:00" />
                     <hr style={{"width": "80%"}}></hr>
@@ -41,7 +41,6 @@ const ZoneStatusInfoRow = (props) => {
         </>
     )
 };
-
 const ManualControlComponent = (props) => {
     const [manualControlSwitch, setManualControlSwitch] = useState(false);
     const [manualControlDuration, setManualControlDuration] = useState(0);
@@ -78,19 +77,20 @@ const ManualControlComponent = (props) => {
         <>
             <p>Manual Control</p>
             <InputGroup 
-                className="align-items-center">
+                className="align-items-center w-100">
                 <Form.Check
                     type="switch"
                     id={`${props.zoneLabel}-manual-control-switch`}
                     label="Off/On"
                     checked={manualControlSwitch}
                     onChange={(e) => handleManualControlToggle(e.target.checked)}
-                    disabled={manualControlDuration === 0 ? true : false}
+                    disabled={manualControlDuration === 0}
                     style={{"marginRight": "10px"}}
                 />
                 <Form.Select
                     value={manualControlDuration}
-                    onChange={(e) => setManualControlDuration(Number(e.target.value))}>
+                    onChange={(e) => setManualControlDuration(Number(e.target.value))}
+                    className="w-100 mb-3">
                     <option value={0}>Select Duration</option>
                     {
                         Array.from(Array(DURATION_MAX - DURATION_MIN + 1).keys()).map((i) => {
@@ -100,6 +100,13 @@ const ManualControlComponent = (props) => {
                         })
                     }
                 </Form.Select>
+                {
+                    manualControlSwitch && 
+                    <InputGroup className="mb-3 d-flex w-100">
+                        <InputGroup.Text id="basic-addon1">Time Remaining: </InputGroup.Text>
+                        <InputGroup.Text className="flex-grow-1" id="manualControlTimeRemaining">5m</InputGroup.Text>
+                    </InputGroup>
+                }
             </InputGroup>
         </>
     )

diff --git a/ui/src/db/db.json b/ui/src/db/db.json
@@ -48,5 +48,71 @@
         "zone2": false,
         "zone3": true,
         "zone4": false
-    }
+    },
+    "schedule": [
+        {
+            "eventID": 1,
+            "zoneID": "zone1",
+            "startTime": "2024-06-05 08:30:00",
+            "stopTime": "2024-06-05 09:00:00",
+            "duration": "30m",
+            "active": true
+        },
+        {
+            "eventID": 2,
+            "zoneID": "zone2",
+            "startTime": "2024-06-05 08:30:00",
+            "stopTime": "2024-06-05 09:00:00",
+            "duration": "30m",
+            "active": true
+        },
+        {
+            "eventID": 3,
+            "zoneID": "zone3",
+            "startTime": "2024-06-05 08:30:00",
+            "stopTime": "2024-06-05 09:00:00",
+            "duration": "30m",
+            "active": true
+        },
+        {
+            "eventID": 4,
+            "zoneID": "zone4",
+            "startTime": "2024-06-05 08:30:00",
+            "stopTime": "2024-06-05 09:00:00",
+            "duration": "30m",
+            "active": true
+        },
+        {
+            "eventID": 5,
+            "zoneID": "zone1",
+            "startTime": "2024-06-05 16:30:00",
+            "stopTime": "2024-06-05 17:00:00",
+            "duration": "30m",
+            "active": false
+        },
+        {
+            "eventID": 6,
+            "zoneID": "zone2",
+            "startTime": "2024-06-05 16:30:00",
+            "stopTime": "2024-06-05 17:00:00",
+            "duration": "30m",
+            "active": false
+        },
+        {
+            "eventID": 7,
+            "zoneID": "zone3",
+            "startTime": "2024-06-05 16:30:00",
+            "stopTime": "2024-06-05 17:00:00",
+            "duration": "30m",
+            "active": false
+        },
+        {
+            "eventID": 8,
+            "zoneID": "zone4",
+            "startTime": "2024-06-05 16:30:00",
+            "stopTime": "2024-06-05 17:00:00",
+            "duration": "30m",
+            "active": false
+        }
+    ]
 }
diff --git a/ui/src/stylesheets/MainContent.css b/ui/src/stylesheets/MainContent.css
@@ -6,5 +6,5 @@
   height: 100%;
   width: 100%;
   /* padding: 1em; */
-  border: 1px solid blue;
+  /* border: 1px solid blue; */
 }
diff --git a/ui/src/stylesheets/UpcomingEventsContainer.css b/ui/src/stylesheets/UpcomingEventsContainer.css
@@ -4,5 +4,5 @@
   justify-content: center;
   width: 100%;
   height: 50%;
-  border: 1px solid red;
+  border: 1px solid grey;
 }
diff --git a/ui/src/stylesheets/ZoneStatusContainer.css b/ui/src/stylesheets/ZoneStatusContainer.css
@@ -5,5 +5,5 @@
     width: 100%;
     height: 50%;
     /* padding: 1em; */
-    border: 1px solid green;
+    /* border: 1px solid green; */
 }