Fixed styling, all that is left is to integrate everything

ui-subsystem/src/components/Landing.css

@@ -145,11 +145,28 @@
     width: 11.25rem;
     height: 3.5625rem;
     border-radius: 2.5rem;
-    background-color: #FFBF00;
+    /* background-color: #FFBF00; */
     border: none;
     color: white;
     font-size: large;
     font-weight: 750;
     vertical-align: top;
+    
+}
+
+.health-text {
+    color: white;
+    width: 11.25rem;
+    height: 3.5625rem;
+    border-radius: 2.5rem;
+    background-color: #FFBF00;
+    border: none;
+    color: white;
+    font-size: large;
+    font-weight: 750;
+
+}
 
+.adjust {
+    margin-top: -30px;
 }
\ No newline at end of file

ui-subsystem/src/components/Landing.js

@@ -3,14 +3,12 @@ import useWebSocket, { ReadyState } from 'react-use-websocket';
 import './Landing.css';
 import MyModal from './Modal';
 import WarnModal from './WarnModal';
-// import {useQuery} from '@apollo/client';
-// import {USER_QUERY} from "../GraphQL/Queries" ;
-// import { Button, Card } from 'react-bootstrap';
 
 
 function Landing() {
     const [plants,setPlants] = useState([]);
     const [modalIsOpen, setModalIsOpen] = useState(false)
+    const [maxWaterUsage, setMaxWaterUsage] = useState(0);
     var [dataFromModal, setDataFromModal] = useState({});
 
     // station: '192.168.4.1'  localWiFi(AP): 172.16.107.184
@@ -20,7 +18,7 @@ function Landing() {
     // For Data Transmission testing purposes
 
     const handleClickSendMessage = () => {
-        sendMessage('Hello ESP32!');
+        sendMessage('Hello ESP32!');    
       };
 
     const connectionStatus = {
@@ -31,35 +29,6 @@ function Landing() {
         [ReadyState.UNINSTANTIATED]: 'Uninstantiated',
       }[readyState];
 
-    
-
-    //   const loadPlant = () => {
-    //     // Check if all required fields have values
-    //     if (
-    //       dataFromModal['plantName'] ||
-    //       dataFromModal['maxWaterUsage'] ||
-    //       dataFromModal['minMoistureLevel'] ||
-    //       dataFromModal['wateringHours']
-    //     ) {
-    //       const newPlantData = {
-    //         name: dataFromModal['plantName'],
-    //         maxWaterUsage: dataFromModal['maxWaterUsage'],
-    //         minMoistureLevel: dataFromModal['minMoistureLevel'],
-    //         wateringHours: dataFromModal['wateringHours'],
-    //       };
-      
-      
-    //       const newPlants = [...plants, newPlantData];
-      
-    //       setPlants(newPlants);
-      
-    //       // Now, you can log the updated state in a useEffect to ensure it's displayed correctly
-    //     } else {
-    //       // Handle the case when some fields are undefined or empty
-    //       console.error('Some fields are undefined or empty');
-
-    //     }
-    //   };
 
     const loadPlant = (newPlantData) => {
         setPlants(prevPlants => [...prevPlants, newPlantData]);
@@ -74,24 +43,17 @@ function Landing() {
         setModalIsOpen(false);
     }
 
-    // const receiveData = (data) => {
-    //     setDataFromModal(data, () => {
-    //         // Only call loadPlant after the state has been updated
-    //         loadPlant();
-    //         closeModal();
-    //     });
-    // }
-
     const receiveData = (data) => {
         const newPlantData = {
             name: data['plantName'],
-            maxWaterUsage: data['maxWaterUsage'],
+            // maxWaterUsage: data['maxWaterUsage'],
             minMoistureLevel: data['minMoistureLevel'],
             wateringHours: data['wateringHours'],
+            wateringDays: data['wateringDays'],
         };
 
         // Ensure the new plant data is valid before adding
-        if (newPlantData.name && newPlantData.maxWaterUsage && newPlantData.minMoistureLevel && newPlantData.wateringHours) {
+        if (newPlantData.name && newPlantData.minMoistureLevel && newPlantData.wateringHours && newPlantData.wateringDays) {
             loadPlant(newPlantData);
             closeModal();
         } else {
@@ -137,6 +99,9 @@ function Landing() {
                                 Send Message to ESP32
                                 </button>
                             </div>
+                            <div>
+                                <p>Max Water Usage: {maxWaterUsage}</p>
+                            </div>
                             <div>
                                 {lastMessage ? <p>Last message from server: {lastMessage.data}</p> : "Waiting for message"}
                             </div>
@@ -151,9 +116,9 @@ function Landing() {
                             <div className='options-container'>
                                 <div className='options'>
                                     <button className='add-plant-btn' onClick={ () => {openModal();}}>Add Plant</button>
-                                    <p className='options-text'>Max Water Usage</p>
                                     <p className='options-text'>Min Moisture Level</p>
                                     <p className='options-text'>Watering Hours</p>
+                                    <p className='options-text'>Watering Days</p>
                                 </div>
                             </div>
                             <MyModal isOpen = {modalIsOpen} closeModal={closeModal} sendDataToParent={receiveData} />
@@ -161,9 +126,9 @@ function Landing() {
                                 {plants.length > 0 ? (plants.map((plant, index) => (
                                     <div className='new-plant' key={index}>
                                         <p className='new-plant-text'>Plant {index+1}: {plant.name}</p>
-                                        <p className='new-plant-text'>{plant.maxWaterUsage}</p>
                                         <p className='new-plant-text'>{plant.minMoistureLevel}</p>
                                         <p className='new-plant-text'>{plant.wateringHours}</p>
+                                        <p className='new-plant-text'>{plant.wateringDays}</p>
                                     </div>
                                 ))
                                 ) : (<p>No Plants added yet.</p>
@@ -173,18 +138,15 @@ function Landing() {
 
                         <div className='health-wrap'>
                             <p className='health-header'>Plant Health</p>
-                            <div className='health-container'>
-                                {dataObjects.map((item, index) => (
-                                    <p key={index}>
-                                    Address: {item.address}, Health: {item.health}
-                                    </p>
-                                ))}
+                            <div className='adjust'>
+                                <div className='health-container'>
+                                    {dataObjects.map((item, index) => (
+                                        <p key={index} className='health-text'> Address: {item.address} <br /> Health: {item.health} </p>
+                                    ))}
+                                </div>
                             </div>
                         </div>
                                         
-                        
-
-
                     </div>
                     
                 </div>
@@ -196,96 +158,3 @@ function Landing() {
 }
 
 export default Landing;
-
-
-//Random stuff dont need rn
-
-// const {error, loading, configData} = useQuery(USER_QUERY)
-// const [test, getTest] = useState
-
-// useEffect(() => {
-//     console.log(configData.users[0]);
-// }, [configData]);
-
-        // const newPlant = (
-    //     <div className='new-plant'>
-    //         <p className='new-plant-text'>Plant {plants.length + 1}: {dataFromModal['Plant Name']}</p>
-    //         <p className='new-plant-text'>{dataFromModal['Max Water Usage']}</p>
-    //         <p className='new-plant-text'>{dataFromModal['Min Moisture Level']}</p>
-    //         <p className='new-plant-text'>{dataFromModal['Watering Hours']}</p>
-    //     </div>
-    // );
-
-
-// ESP32 -> Frontend
-// const fetchSensorData = async () => {
-//     try {
-//         const response = await fetch("http://${ESP32_IP_ADDRESS}/sensor-data");    
-//         if (response.ok) {
-//             const data = await response.json();
-//             setSensorData(data.sensorValue);
-//         } else {
-//             console.error("Failed to fetch sensor data");
-//         }
-//     } catch (error) {
-//         console.error("Error fetching sensor data:", error);
-//     }
-// };
-
-
-    // Will need 3 of these for: wateringHours, maxWaterUsage, minMoistureLevel
-    // const setThresholdOnESP32 = async (threshold) => {
-    //     try {
-    //         const response = await fetch(`http://${ESP32_IP_ADDRESS}/set-threshold?threshold=${threshold}`);
-    //         if (response.ok) {
-    //             const data = await response.text();
-    //             console.log(data);
-    //         } else {
-    //             console.error("Failed to set threshold on ESP32");
-    //         }
-    //     } catch (error) {
-    //         console.error("Error setting threshold:", error);
-    //     }
-    // };
-    
-
-    // useEffect(() => {
-    //     // Fetch sensor data on component mount
-    //     fetchSensorData();
-    // }, []);
-
-
-
-    // sensorDatas: [(curMoistureLvl, curWaterUsage)]
-    // {sensorDatas.map((sensorData, index) => (
-    //     <div key = {index}>{health}</div>
-    //     <p>{sensorData[0]}, {sensorData[1]}</p>
-    // ))}
-
-
-    // setSensorDatas(lastMessage.data)
-
-
-    // Important, for parsing Data
-    //const [dataObjects, setDataObjects] = useState([]);
-    // useEffect(() => {
-    //     if (lastMessage !== null) {
-    //       try {
-    //         // Parse the message data as JSON and update the state
-    //         const data = JSON.parse(lastMessage.data);
-    //         setDataObjects(data);
-    //       } catch (e) {
-    //         console.error("Failed to parse JSON:", e);
-    //       }
-    //     }
-    //   }, [lastMessage]);
-    // <div>
-    //     <h1>Data Tuples</h1>
-    //     <ul>
-    //       {dataObjects.map((item, index) => (
-    //         <li key={index}>
-    //           Address: {item.address}, Health: {item.health}
-    //         </li>
-    //       ))}
-    //     </ul>
-    //   </div>
\ No newline at end of file