Pushing

ui-subsystem/src/components/Landing.css

@@ -93,7 +93,7 @@
     /* padding: 10px; */
     margin: 1.25rem; 
     width: 60.3125rem;
-    height: 3.5625rem;
+    height: 5rem;
     background-color: #A8FF35;
     border-radius: 2.5rem;
     display: flex;
@@ -102,7 +102,7 @@
 
 .new-plant-text {
     color: white;
-    font-size: large;
+    font-size: x-large;
     font-weight: 750;
 
 }
@@ -157,7 +157,7 @@
 .health-text {
     color: white;
     width: 11.25rem;
-    height: 3.5625rem;
+    height: 5rem;
     border-radius: 2.5rem;
     background-color: #FFBF00;
     border: none;

ui-subsystem/src/components/Landing.js

@@ -14,7 +14,6 @@ function Landing() {
     // station: '192.168.4.1'  localWiFi(AP): 172.16.107.184
     const ESP32_IP_ADDRESS = '172.16.107.184';  
     const { sendMessage, lastMessage, readyState } = useWebSocket(`ws://${ESP32_IP_ADDRESS}/ws`);
-
     // For Data Transmission testing purposes
 
     const handleClickSendMessage = () => {
@@ -88,6 +87,30 @@ function Landing() {
     }, [plants]);
    
 
+    const [warnModalIsOpen, setWarnModalIsOpen] = useState(false);
+    const [warnedPlants, setWarnedPlants] = useState([]);
+
+    useEffect(() => {
+        if (lastMessage !== null) {
+        try {
+            const data = JSON.parse(lastMessage.data);
+            console.log(data);
+            setDataObjects(data);
+            // Check for plants with flags -1 or 1 and set warned plants
+            const flaggedPlants = data.plant_data.filter((plant) => plant.flag === -1 || plant.flag === 1);
+            if (flaggedPlants.length > 0) {
+            setWarnedPlants(flaggedPlants);
+            setWarnModalIsOpen(true); // Open the warning modal
+            } else {
+            setWarnModalIsOpen(false);
+            }
+        } catch (e) {
+            console.error("Failed to parse JSON:", e);
+        }
+        }
+    }, [lastMessage]);
+
+
     return (
         <div className='bg'>
             <div className='container'>
@@ -112,6 +135,8 @@ function Landing() {
                                 <span>The WebSocket is currently {connectionStatus}</span>
                             </div>
                         </div>
+                        <WarnModal isOpen={warnModalIsOpen} warnedPlants={warnedPlants} closeModal={() => setWarnModalIsOpen(false)} />
+
                         
                     </div>
                     <div className='split-container'>
@@ -124,7 +149,6 @@ function Landing() {
                                     <p className='options-text'>Watering Days</p>
                                 </div>
                             </div>
-                            <MyModal isOpen = {modalIsOpen} closeModal={closeModal} sendDataToParent={receiveData} />
                             <div className='plant-container'>
                                 {plants.length > 0 ? (plants.map((plant, index) => (
                                     <div className='new-plant' key={index}>
@@ -137,6 +161,8 @@ function Landing() {
                                 ) : (<p>No Plants added yet.</p>
                                 )}
                             </div>
+                            <MyModal isOpen = {modalIsOpen} closeModal={closeModal} sendDataToParent={receiveData} />
+
                         </div>
 
                         <div className='health-wrap'>
@@ -144,13 +170,14 @@ function Landing() {
                             <div className='adjust'>
                                 <div className='health-container'>
                                     {dataObjects.plant_data.map((item, index) => (
-                                        <p key={index} className='health-text'> Address: {item.address} <br /> Health: {item.health} </p>
+                                        <p key={index} className='health-text'> Address: {item.address} <br /> Health: {item.health} <br/> Moisture: {item.moisture}</p>
                                     ))}
                                 </div>
                             </div>
                         </div>
                                         
                     </div>
+
                     
                 </div>
                 

ui-subsystem/src/components/WarnModal.css

+.warn-modal-backdrop {
+    background-color: darkblue;
+    width: 27rem;
+    height: 15rem;
+    font-size: large;
+    margin-bottom: 20px;
+}
\ No newline at end of file

ui-subsystem/src/components/WarnModal.js

+import React from 'react';
+import './WarnModal.css'
+
+const WarnModal = ({ isOpen, warnedPlants, closeModal }) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="warn-modal-backdrop">
+      <div className="warn-modal-content">
+        <h2>Warning</h2>
+        <div className="warn-modal-body">
+          {warnedPlants.map((plant, index) => (
+            <p key={index}>Plant Address: {plant.address}, Health: {plant.health}</p>
+          ))}
+        </div>
+        <button onClick={closeModal}>Close</button>
+      </div>
+    </div>
+  );
+};
+
+export default WarnModal;