From 9909b9ba59acc02c8c11b537eb1ba0498e6d08a3 Mon Sep 17 00:00:00 2001
From: defining-art <118932320+defining-art@users.noreply.github.com>
Date: Tue, 23 Apr 2024 14:44:51 -0400
Subject: [PATCH 1/3] Display for devices

---
 intelligest-ui/src/app/page.js | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/intelligest-ui/src/app/page.js b/intelligest-ui/src/app/page.js
index 54a85fa99..bddcc6396 100644
--- a/intelligest-ui/src/app/page.js
+++ b/intelligest-ui/src/app/page.js
@@ -15,6 +15,10 @@ import { mdiAccount, mdiAccountMultiple, mdiHomeAssistant } from '@mdi/js';
 
 export default function Home() {
   const [data, setData] = useState({}); // Declare 'data' in your component's state
+  const [lightState, setLightState] = useState(false);
+  const [lockState, setLockState] = useState(false);
+  const [thermostatState, setThermostatState] = useState(false);
+  const [tvState, setTvState] = useState(false);
   const handleClick = (buttonName) => {
     console.log(buttonName);
   };
@@ -35,6 +39,19 @@ export default function Home() {
     eventSource.onmessage = function (event) {
       setData(JSON.parse(event.data));
     };
+    //Capture the change of states in devices.
+    switch(data.deviceChoice){
+      case 'Light':
+        (data.deviceStatus == 'on') && (setLightState(true));
+      case 'Lock':
+        (data.deviceStatus == 'on') && (setLockState(true));
+      case 'Thermostat':
+        (data.deviceStatus == 'on') && (setThermostatState(true));
+      case 'TV':
+        (data.deviceStatus == 'on') && (setTvState(true));
+      default:
+        console.log("Eroor");
+    }
 
     return () => {
       eventSource.close();      
@@ -59,6 +76,17 @@ export default function Home() {
             Device Status: {data.deviceStatus} <br />
           </div>
         </div>
+
+        <div> Devices
+          <select>
+            <option label=" "> </option>
+            <option>Light : {lightState}</option>
+            <option>Lock : {lockState}</option>
+            <option>Thermostat : {thermostatState}</option>
+            <option>TV : {tvState}</option>
+          </select>
+        </div>
+
         <div data-testid="button-test" className="grid grid-cols-4 gap-4">
           <button onClick={() => handleClick("TV Button Pressed")} className="hover:bg-gray-300 text-black font-bold py-2 px-4 rounded">
             <Image src={tv} alt="TV" width={140} height={50} />

From 040226ed3c682b0beaddca53c1ec65a170b308b8 Mon Sep 17 00:00:00 2001
From: defining-art <118932320+defining-art@users.noreply.github.com>
Date: Tue, 23 Apr 2024 14:58:03 -0400
Subject: [PATCH 2/3] Positioning display

---
 intelligest-ui/src/app/page.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/intelligest-ui/src/app/page.js b/intelligest-ui/src/app/page.js
index bddcc6396..a85ab454c 100644
--- a/intelligest-ui/src/app/page.js
+++ b/intelligest-ui/src/app/page.js
@@ -77,7 +77,7 @@ export default function Home() {
           </div>
         </div>
 
-        <div> Devices
+        <div style={{position:"absolute", top:"5px", right:"5px"}}> Devices
           <select>
             <option label=" "> </option>
             <option>Light : {lightState}</option>

From c97f1940749628f65d054d464b299f1641e39314 Mon Sep 17 00:00:00 2001
From: defining-art <118932320+defining-art@users.noreply.github.com>
Date: Tue, 23 Apr 2024 16:04:39 -0400
Subject: [PATCH 3/3] Alternate Device Display Approach

---
 intelligest-ui/src/app/page.js | 39 ++++++++++++++++++----------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/intelligest-ui/src/app/page.js b/intelligest-ui/src/app/page.js
index a85ab454c..ea26bc8ba 100644
--- a/intelligest-ui/src/app/page.js
+++ b/intelligest-ui/src/app/page.js
@@ -15,10 +15,10 @@ import { mdiAccount, mdiAccountMultiple, mdiHomeAssistant } from '@mdi/js';
 
 export default function Home() {
   const [data, setData] = useState({}); // Declare 'data' in your component's state
-  const [lightState, setLightState] = useState(false);
-  const [lockState, setLockState] = useState(false);
-  const [thermostatState, setThermostatState] = useState(false);
-  const [tvState, setTvState] = useState(false);
+  const [lightState, setLightState] = useState("Inactive");
+  const [lockState, setLockState] = useState("Inactive");
+  const [thermostatState, setThermostatState] = useState("Inactive");
+  const [tvState, setTvState] = useState("Inactive");
   const handleClick = (buttonName) => {
     console.log(buttonName);
   };
@@ -39,24 +39,27 @@ export default function Home() {
     eventSource.onmessage = function (event) {
       setData(JSON.parse(event.data));
     };
-    //Capture the change of states in devices.
+
+    return () => {
+      eventSource.close();      
+    };
+  }, []);
+
+  //Capture the change of states in devices.
+  useEffect(() => {
     switch(data.deviceChoice){
       case 'Light':
-        (data.deviceStatus == 'on') && (setLightState(true));
+        (data.deviceStatus == 'on') && (setLightState("Active"));
       case 'Lock':
-        (data.deviceStatus == 'on') && (setLockState(true));
+        (data.deviceStatus == 'on') && (setLockState("Active"));
       case 'Thermostat':
-        (data.deviceStatus == 'on') && (setThermostatState(true));
+        (data.deviceStatus == 'on') && (setThermostatState("Active"));
       case 'TV':
-        (data.deviceStatus == 'on') && (setTvState(true));
+        (data.deviceStatus == 'on') && (setTvState("Active"));
       default:
-        console.log("Eroor");
+        console.log("Error");
     }
-
-    return () => {
-      eventSource.close();      
-    };
-  }, []);
+  },[data.lastestGesture]);
  
   return (
     <main className="flex min-h-screen flex-col">
@@ -77,10 +80,10 @@ export default function Home() {
           </div>
         </div>
 
-        <div style={{position:"absolute", top:"5px", right:"5px"}}> Devices
-          <select>
+        <div style={{ color:"gray",position:"absolute", top:"5px", right:"5px"}}>Devices 
+          <select style={{border:"black"}}>
             <option label=" "> </option>
-            <option>Light : {lightState}</option>
+            <option>Light : {lightState} </option>
             <option>Lock : {lockState}</option>
             <option>Thermostat : {thermostatState}</option>
             <option>TV : {tvState}</option>