Skip to content

Commit

Permalink
Changes in frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
@rajatbalyan
rajatbalyan committed Feb 12, 2024
1 parent f9cc70a commit b96324c
Show file tree
Hide file tree
Showing 4 changed files with 186 additions and 74 deletions.
Binary file added api/predictAPI/__pycache__/main.cpython-310.pyc
View file
Binary file not shown.
182 changes: 120 additions & 62 deletions web/src/components/Dashboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,64 +113,105 @@ function Dashboard() {
humidity: "updating", //60,
gasLevels1: "updating",
gasLevels2: "updating",
gasLevels3: "updating",
});

// Generates Random Data for Sensors
// Fetch Device Data
// useEffect(() => {
// const interval = setInterval(() => {
// // Fetch real-time sensor data every 5 seconds
// Requests.fetchDevice_realTime((res) => {
// // Extract temperature and humidity data
// const { temp, humidity } = res;

// // Extract gas levels data for each container
// const gasLevels = res.containers.map((container) => ({
// O2: container.o2,
// CO2: container.co2,
// }));

// // Update the sensorData state
// setSensorData({
// temperature: temp,
// humidity: humidity,
// gasLevels: gasLevels,
// });
// });
// }, 5000);

// return () => clearInterval(interval); // Cleanup interval on unmount
// }, []);

useEffect(() => {
// Simulate real-time updates every 5 seconds
const interval = setInterval(() => {
// Replace the following lines with actual data fetching from your sensors

// For temperature, it's common for all containers
const newTemperature = getTemperature();
const newHumidity = getHumidity();

// For gas levels, we set data for each container individually
const newO2Level1 = getGasLevel1();
const newCO2Level1 = getGasLevel1();

const newO2Level2 = getGasLevel2();
const newCO2Level2 = getGasLevel2();

const newO2Level3 = getGasLevel3();
const newCO2Level3 = getGasLevel3();

setSensorData((prevData) => ({
...prevData,
temperature: newTemperature,
humidity: newHumidity,
gasLevels1: {
O2: newO2Level1,
CO2: newCO2Level1,
},
gasLevels2: {
O2: newO2Level2,
CO2: newCO2Level2,
},
gasLevels3: {
O2: newO2Level3,
CO2: newCO2Level3,
},
}));
}, 1000);
// Fetch real-time sensor data every 5 seconds
Requests.fetchDevice_realTime((res) => {
// setSensorData(res);
console.log(res);
});
}, 5000);

return () => clearInterval(interval);
return () => clearInterval(interval); // Cleanup interval on unmount
}, []);

// Fetch Device Data
useEffect(() => {
const interval = setInterval(() => {
// Fetch real-time sensor data every 5 seconds
Requests.fetchDevice_realTime((res) => {
// setSensorData(res);
console.log(res);
Requests.fetchDevice_realTime((stats) => {
if (stats && stats.length > 0) {
const { temp, humidity, containers } = stats[0].data; // Extract temp, humidity, and containers from the first item in stats array
setSensorData({ temp, humidity, containers });
} else {
// If stats is empty or null, set temp, humidity, and containers to null
setSensorData({ temp: null, humidity: null, containers: null });
}
});
}, 1000);
}, 5000);

return () => clearInterval(interval); // Cleanup interval on unmount
}, []);

// Generates Random Data for Sensors
// useEffect(() => {
// // Simulate real-time updates every 5 seconds
// const interval = setInterval(() => {
// // Replace the following lines with actual data fetching from your sensors

// // For temperature, it's common for all containers
// const newTemperature = getTemperature();
// const newHumidity = getHumidity();

// // For gas levels, we set data for each container individually
// const newO2Level1 = getGasLevel1();
// const newCO2Level1 = getGasLevel1();

// const newO2Level2 = getGasLevel2();
// const newCO2Level2 = getGasLevel2();

// const newO2Level3 = getGasLevel3();
// const newCO2Level3 = getGasLevel3();

// setSensorData((prevData) => ({
// ...prevData,
// temperature: newTemperature,
// humidity: newHumidity,
// gasLevels1: {
// O2: newO2Level1,
// CO2: newCO2Level1,
// },
// gasLevels2: {
// O2: newO2Level2,
// CO2: newCO2Level2,
// },
// gasLevels3: {
// O2: newO2Level3,
// CO2: newCO2Level3,
// },
// }));
// }, 1000);

// return () => clearInterval(interval);
// }, []);

const getTemperature = () => {
// Replace this with actual logic to get temperature data
return Math.floor(Math.random() * 30) + 20;
Expand Down Expand Up @@ -420,29 +461,46 @@ function Dashboard() {
<Icon path={mdiThermometer} size={1} />
Sensor Data
</h3>
<p>{`Temperature: ${sensorData.temperature} °C`}</p>
<p>{`Humidity: ${sensorData.humidity}`}</p>
<p>{`Temperature: ${
sensorData.temp ? sensorData.temp + " °C" : "N/A"
}`}</p>
<p>{`Humidity: ${
sensorData.humidity ? sensorData.humidity : "N/A"
}`}</p>

{/* Container 1 */}
<div className={styles.sensorData}>
<h4>Gas Levels Container 1</h4>
<p>{`Gas Levels (O2): ${sensorData.gasLevels1.O2} ppm`}</p>
<p>{`Gas Levels (CO2): ${sensorData.gasLevels1.CO2} ppm`}</p>
</div>
{sensorData.containers && sensorData.containers[0] && (
<div className={styles.sensorData}>
<h4>Gas Levels Container 1</h4>
<p>{`Gas Levels (O2): ${
sensorData.containers[0].o2
? sensorData.containers[0].o2 + " ppm"
: "N/A"
}`}</p>
<p>{`Gas Levels (CO2): ${
sensorData.containers[0].co2
? sensorData.containers[0].co2 + " ppm"
: "N/A"
}`}</p>
</div>
)}

{/* Container 2 */}
<div className={styles.sensorData}>
<h4>Gas Levels Container 2</h4>
<p>{`Gas Levels (O2): ${sensorData.gasLevels2.O2} ppm`}</p>
<p>{`Gas Levels (CO2): ${sensorData.gasLevels2.CO2} ppm`}</p>
</div>

{/* Container 3 */}
<div className={styles.sensorData}>
<h4>Gas Levels Container 3</h4>
<p>{`Gas Levels (O2): ${sensorData.gasLevels3.O2} ppm`}</p>
<p>{`Gas Levels (CO2): ${sensorData.gasLevels3.CO2} ppm`}</p>
</div>
{sensorData.containers && sensorData.containers[1] && (
<div className={styles.sensorData}>
<h4>Gas Levels Container 2</h4>
<p>{`Gas Levels (O2): ${
sensorData.containers[1].o2
? sensorData.containers[1].o2 + " ppm"
: "N/A"
}`}</p>
<p>{`Gas Levels (CO2): ${
sensorData.containers[1].co2
? sensorData.containers[1].co2 + " ppm"
: "N/A"
}`}</p>
</div>
)}
</div>
</div>
);
Expand Down
55 changes: 43 additions & 12 deletions web/src/components/FoodSelection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ function FoodSelection() {
const [selectedFoodIndex, setSelectedFoodIndex] = useState(null);
const [isFoodItemModalOpen, setFoodItemModalOpen] = useState(false);
const [showAlert, setShowAlert] = useState(false);
const [numberOfContainers, setNumberOfContainers] = useState(1);

const foodItems = [
{ id: 1, name: "Apple" },
Expand All @@ -21,20 +22,34 @@ function FoodSelection() {
containerNumber: 1,
containerText: "Container 1",
},
{
id: 2,
imageSrc: conImg,
containerNumber: 2,
containerText: "Container 2",
},
{
id: 3,
imageSrc: conImg,
containerNumber: 3,
containerText: "Container 3",
},
// {
// id: 2,
// imageSrc: conImg,
// containerNumber: 2,
// containerText: "Container 2",
// },
// {
// id: 3,
// imageSrc: conImg,
// containerNumber: 3,
// containerText: "Container 3",
// },
]);

const handleNumberOfContainersChange = (e) => {
const number = parseInt(e.target.value);
setNumberOfContainers(number);

// Generate container data based on the selected number of containers
const newContainers = Array.from({ length: number }, (_, index) => ({
id: index + 1,
imageSrc: conImg,
containerNumber: index + 1,
containerText: `Container ${index + 1}`,
}));
setContainerData(newContainers);
};

const handleContainerClick = (containerID) => {
setSelectedContainer(containerID);
setSelectedFoodIndex(null); // Reset selected food index
Expand Down Expand Up @@ -87,6 +102,22 @@ function FoodSelection() {
<div className={styles.foodSelectionContainer}>
<h2 className={styles.foodSelectionTitle}>Food Container Selection</h2>

{/* Select Number of Containers */}
<div className={styles.numberOfContainers}>
<label htmlFor="numberOfContainers">Select Number of Containers:</label>
<select
id="numberOfContainers"
value={numberOfContainers}
onChange={handleNumberOfContainersChange}
>
{[1, 2, 3, 4, 5].map((number) => (
<option key={number} value={number}>
{number}
</option>
))}
</select>
</div>

{/* Container List */}
<div className={styles.containerList}>
{containerData.map((container) => (
Expand Down
23 changes: 23 additions & 0 deletions web/src/styles/blocks.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,29 @@ h3 {
margin-top: 20px;
}

.numberOfContainers {
margin-bottom: 20px;
}

.numberOfContainers label {
font-size: 16px;
font-weight: bold;
margin-right: 10px;
}

.numberOfContainers select {
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
}

.numberOfContainers select:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.containerList {
display: flex;
align-items: center;
Expand Down

0 comments on commit b96324c

Please sign in to comment.