TinyForest system front-end written with ReactJS
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

80 lines
2.4 KiB

import React, { useState, useEffect } from 'react';
const Sysinfo = () => {
const [moisture, setMoisture] = useState([]);
const [light, setLight] = useState([]);
const [temperature, setTemperature] = useState([]);
useEffect(() => {
fetchMoisture();
fetchLight();
fetchTemperature();
}, [])
const fetchMoisture = () => {
fetch('../plantinfo.json')
.then((res) => res.json())
.then(data => setMoisture(data.sensors.moisture))
.catch(err => console.error(err))
}
const fetchLight = () => {
fetch('../plantinfo.json')
.then((res) => res.json())
.then(data => setLight(data.sensors.light))
.catch(err => console.error(err))
}
const fetchTemperature = () => {
fetch('../plantinfo.json')
.then((res) => res.json())
.then(data => setTemperature(data.sensors.temperature))
.catch(err => console.error(err))
}
console.log(moisture.sensor_friendly_name)
console.log(light.sensor_friendly_name)
console.log(temperature.sensor_friendly_name)
//console.log(sensors.light)
//console.log(sensors.temperature)
//console.log(sensors.acidity)
// TODO Pull system info etc.
//const [sysinfo, setSysinfo] = useState([]);
//const jsonFetch = () => {
// fetch('../sysinfo.json')
// .then((res) => res.json())
// .then(data => setSysinfo(data))
// .catch(err => console.error(err))
//}
return (
<div>
<div className="wrapperSys">
<h2 style={{padding:10}}>System Information</h2>
<div className="sensors">
<div className="sys1">
<h5>Sensor name: {moisture.sensor_friendly_name}</h5>
<h5>Connected to pin: {moisture.gpio_pin}</h5>
</div>
<div className="sys1">
<h5>Sensor name: {light.sensor_friendly_name}</h5>
<h5>Connected to pin: {light.gpio_pin}</h5>
</div>
<div className="sys1">
<h5>Sensor name: {temperature.sensor_friendly_name}</h5>
<h5>Connected to pin: {temperature.gpio_pin}</h5>
</div>
</div>
</div>
</div>
);
};
export default Sysinfo;