diff --git a/ui-subsystem/src/components/Landing.css b/ui-subsystem/src/components/Landing.css index 64b6ebff281f92e5347466f016c86d96c476711a..73faa5f8bd8fdb6cb1440f2424d2074bb795d9bf 100644 --- a/ui-subsystem/src/components/Landing.css +++ b/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; diff --git a/ui-subsystem/src/components/Landing.js b/ui-subsystem/src/components/Landing.js index 315f8f5ce701bb77279ce35c1fb0aba2033bf5eb..7eb8b9daafda85a7ef3f968b636b3e90f4dd0f7e 100644 --- a/ui-subsystem/src/components/Landing.js +++ b/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> diff --git a/ui-subsystem/src/components/WarnModal.css b/ui-subsystem/src/components/WarnModal.css new file mode 100644 index 0000000000000000000000000000000000000000..701f3e4c9bf70fb4b37c4353a6f7ce0aa804b22f --- /dev/null +++ b/ui-subsystem/src/components/WarnModal.css @@ -0,0 +1,7 @@ +.warn-modal-backdrop { + background-color: darkblue; + width: 27rem; + height: 15rem; + font-size: large; + margin-bottom: 20px; +} \ No newline at end of file diff --git a/ui-subsystem/src/components/WarnModal.js b/ui-subsystem/src/components/WarnModal.js new file mode 100644 index 0000000000000000000000000000000000000000..1f5bab92bd635a138436ce42d0a36fe4bf4c4c98 --- /dev/null +++ b/ui-subsystem/src/components/WarnModal.js @@ -0,0 +1,24 @@ +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;