From eec5d9e1b312b06c730c87f36b0dc7399fe84c76 Mon Sep 17 00:00:00 2001
From: kevinle350 <74153829+kevinle350@users.noreply.github.com>
Date: Tue, 28 Nov 2023 13:52:12 -0600
Subject: [PATCH] Pushing
---
ui-subsystem/src/components/Landing.css | 6 ++---
ui-subsystem/src/components/Landing.js | 33 ++++++++++++++++++++---
ui-subsystem/src/components/WarnModal.css | 7 +++++
ui-subsystem/src/components/WarnModal.js | 24 +++++++++++++++++
4 files changed, 64 insertions(+), 6 deletions(-)
create mode 100644 ui-subsystem/src/components/WarnModal.css
create mode 100644 ui-subsystem/src/components/WarnModal.js
diff --git a/ui-subsystem/src/components/Landing.css b/ui-subsystem/src/components/Landing.css
index 64b6ebf..73faa5f 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 315f8f5..7eb8b9d 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 0000000..701f3e4
--- /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 0000000..1f5bab9
--- /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;
--
GitLab