From 8e5ea175bcaf3f53aad0b5d41fc20d779a15b361 Mon Sep 17 00:00:00 2001
From: kevinle350 <74153829+kevinle350@users.noreply.github.com>
Date: Tue, 28 Nov 2023 01:20:51 -0600
Subject: [PATCH] Idek at this point
---
ui-subsystem/src/components/Landing.js | 13 ++++---
ui-subsystem/src/components/Modal.js | 50 ++++++++++++++------------
2 files changed, 36 insertions(+), 27 deletions(-)
diff --git a/ui-subsystem/src/components/Landing.js b/ui-subsystem/src/components/Landing.js
index 9536c60..315f8f5 100644
--- a/ui-subsystem/src/components/Landing.js
+++ b/ui-subsystem/src/components/Landing.js
@@ -18,7 +18,8 @@ function Landing() {
// For Data Transmission testing purposes
const handleClickSendMessage = () => {
- sendMessage('Hello ESP32!');
+ const jsonMsg = JSON.stringify(plants)
+ sendMessage(jsonMsg);
};
const connectionStatus = {
@@ -72,6 +73,7 @@ function Landing() {
try {
// Parse the message data as JSON and update the state
const data = JSON.parse(lastMessage.data);
+ console.log(data)
setDataObjects(data);
} catch (e) {
console.error("Failed to parse JSON:", e);
@@ -81,7 +83,8 @@ function Landing() {
useEffect(() => {
// Log the updated 'plants' state whenever it changes
- console.log(plants);
+ console.log(JSON.stringify(plants));
+ console.log(plants)
}, [plants]);
@@ -100,7 +103,7 @@ function Landing() {
</button>
</div>
<div>
- <p>Max Water Usage: {maxWaterUsage}</p>
+ <p>Max Water Usage: {dataObjects.usage}</p>
</div>
<div>
{lastMessage ? <p>Last message from server: {lastMessage.data}</p> : "Waiting for message"}
@@ -125,7 +128,7 @@ function Landing() {
<div className='plant-container'>
{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 {index}: {plant.name}</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>
@@ -140,7 +143,7 @@ function Landing() {
<p className='health-header'>Plant Health</p>
<div className='adjust'>
<div className='health-container'>
- {dataObjects.map((item, index) => (
+ {dataObjects.plant_data.map((item, index) => (
<p key={index} className='health-text'> Address: {item.address} <br /> Health: {item.health} </p>
))}
</div>
diff --git a/ui-subsystem/src/components/Modal.js b/ui-subsystem/src/components/Modal.js
index fc18242..f8f33aa 100644
--- a/ui-subsystem/src/components/Modal.js
+++ b/ui-subsystem/src/components/Modal.js
@@ -1,5 +1,5 @@
// Modal.js
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
import Modal from 'react-modal';
Modal.setAppElement('#root'); // Set the root element for accessibility
@@ -14,11 +14,8 @@ const MyModal = ({ isOpen, closeModal, sendDataToParent }) => {
const handleSubmit = (e) => {
e.preventDefault();
- // Do something with formData (e.g., send it to the server)
- sendDataToParent(formData);
- closeModal();
- };
-
+ sendDataToParent(formData); // closeModal will be called inside receiveData now
+};
return (
@@ -26,39 +23,48 @@ const MyModal = ({ isOpen, closeModal, sendDataToParent }) => {
<h2>Fill in Information</h2>
<form onSubmit={handleSubmit}>
- <label htmlFor="Plant Name">Plant Name:</label>
+ <label htmlFor="plantName">Plant Name:</label>
<input
type="text"
- id="Plant Name"
- name="Plant Name"
- value={formData['Plant Name']}
+ id="plantName"
+ name="plantName"
+ value={formData['plantName'] || ''}
onChange={handleInputChange}
/>
- <label htmlFor="Max Water Usage">Max Water Usage:</label>
+ {/* <label htmlFor="maxWaterUsage">Max Water Usage:</label>
+ <input
+ type="text"
+ id="maxWaterUsage"
+ name="maxWaterUsage"
+ value={formData['maxWaterUsage'] || ''}
+ onChange={handleInputChange}
+ /> */}
+
+ <label htmlFor="minMoistureLevel">Min Moisture Level:</label>
<input
type="text"
- id="Max Water Usage"
- name="Max Water Usage"
- value={formData['Max Water Usage']}
+ id="minMoistureLevel"
+ name="minMoistureLevel"
+ value={formData['minMoistureLevel'] || ''}
onChange={handleInputChange}
/>
- <label htmlFor="Min Moisture Level">Min Moisture Level:</label>
+ <label htmlFor="wateringHours">Watering Hours:</label>
<input
type="text"
- id="Min Moisture Level"
- name="Min Moisture Level"
- value={formData['Min Moisture Level']}
+ id="wateringHours"
+ name="wateringHours"
+ value={formData['wateringHours'] || ''}
onChange={handleInputChange}
/>
- <label htmlFor="Watering Hours">Watering Hours:</label>
+ <label htmlFor="wateringDays">Watering Days:</label>
<input
type="text"
- id="Watering Hours"
- name="Watering Hours"
- value={formData['Watering Hours']}
+ id="wateringDays"
+ name="wateringDays"
+ value={formData['wateringDays'] || ''}
onChange={handleInputChange}
/>
--
GitLab