Update to add soil measurement

This commit is contained in:
William Moore 2023-01-19 17:18:41 -06:00
parent f13bd41558
commit 50cb9c2816
8 changed files with 103 additions and 5 deletions

18
package-lock.json generated
View File

@ -15,6 +15,7 @@
"@types/node": "^16.18.11", "@types/node": "^16.18.11",
"@types/react": "^18.0.27", "@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10", "@types/react-dom": "^18.0.10",
"date-fns": "^2.29.3",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
@ -6068,6 +6069,18 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/date-fns": {
"version": "2.29.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/debug": { "node_modules/debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -21115,6 +21128,11 @@
"whatwg-url": "^8.0.0" "whatwg-url": "^8.0.0"
} }
}, },
"date-fns": {
"version": "2.29.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
},
"debug": { "debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

View File

@ -10,6 +10,7 @@
"@types/node": "^16.18.11", "@types/node": "^16.18.11",
"@types/react": "^18.0.27", "@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10", "@types/react-dom": "^18.0.10",
"date-fns": "^2.29.3",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",

View File

@ -8,14 +8,31 @@
height: 3vh; height: 3vh;
} }
@media (max-width: 400px) { .soil-gauge {
border: .01em solid black;
padding: .6em;
height: 5vh;
}
@media (max-width: 501px) {
.sensors { .sensors {
display: display !important; display: display !important;
} }
.sensors>* {
margin: .6em !important;
}
.merrysky {
height: 50vh !important;
}
.soil-gauge {
height: 10vh;
}
.rainfall-gauge { .rainfall-gauge {
color: blue; height: 6vh;
height: 5vh;
} }
} }
@ -27,6 +44,10 @@
.rainfall-gauge { .rainfall-gauge {
height: 5vh; height: 5vh;
} }
.merrysky {
height: 80vh !important;
}
} }
.header { .header {
@ -59,4 +80,5 @@
.sensors >* { .sensors >* {
flex: 1 1 160px; flex: 1 1 160px;
margin: .2em;
} }

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import './App.css'; import './App.css';
import Rainfall from './components/rainfall'; import Rainfall from './components/rainfall';
import Soil from './components/soil';
function App() { function App() {
return ( return (
@ -9,6 +10,7 @@ function App() {
<p>Welcome to the MooreForge Weather Station. While a work in progress, there are some functional sensors shown below.</p> <p>Welcome to the MooreForge Weather Station. While a work in progress, there are some functional sensors shown below.</p>
<div className={'sensors'}> <div className={'sensors'}>
<div className={'rainfall-gauge sensor-col'}><Rainfall /></div> <div className={'rainfall-gauge sensor-col'}><Rainfall /></div>
<div className={'soil-gauge sensor-col'}><Soil /></div>
<iframe src={'https://merrysky.net/'} className={'sensor-col merrysky'} title={'Merry Sky'}></iframe> <iframe src={'https://merrysky.net/'} className={'sensor-col merrysky'} title={'Merry Sky'}></iframe>
</div> </div>
</div> </div>

View File

@ -1,13 +1,13 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import './rainfall.css'; import './style.css';
const MM_PER_CLICK = .254; const MM_PER_CLICK = .254;
const INCHES_PER_CLICK = .01; const INCHES_PER_CLICK = .01;
const Sensor = () => { const Sensor = () => {
const [totalRainfall, setTotalRainfall] = useState(0); const [totalRainfall, setTotalRainfall] = useState(0);
console.log(process.env);
async function pullDataFromBackend() { async function pullDataFromBackend() {
const response = await fetch(process.env.REACT_APP_RAIN_GAUGE_DATA ?? ''); const response = await fetch(process.env.REACT_APP_RAIN_GAUGE_DATA ?? '');
const data = await response.json(); const data = await response.json();

View File

@ -0,0 +1,44 @@
import React, { useEffect, useState } from 'react';
import { isBefore } from 'date-fns';
import './style.css';
const Sensor = () => {
const [temp, setTemp] = useState(0);
const [cap, setCap] = useState(0);
async function pullTempFromBackend() {
const response = await fetch(process.env.REACT_APP_SOIL_TEMP_DATA ?? '');
const data = await response.json();
const result = data
.reduce((accum: any, datum: any) => ( ((accum && isBefore(new Date(accum?.timestamp), new Date(datum?.timestamp))) || !accum ) ? datum : accum ));
setTemp(result.value);
}
async function pullCapFromBackend() {
const response = await fetch(process.env.REACT_APP_SOIL_CAP_DATA ?? '');
const data = await response.json();
const result = data
.reduce((accum: any, datum: any) => ( ((accum && isBefore(new Date(accum?.timestamp), new Date(datum?.timestamp))) || !accum ) ? datum : accum ));
setCap(result.value);
}
useEffect(() => {
setInterval(() => pullTempFromBackend(), 1000);
setInterval(() => pullCapFromBackend(), 1000);
}, []);
return (
<div className={'gauge-body'}>
<div className={'gauge-label'}>Temperature (in C)</div>
<div>{temp}</div>
<div className={'gauge-label'}>Capacitance</div>
<div>{cap}</div>
</div>
);
};
export default Sensor;

View File

@ -0,0 +1,11 @@
.gauge-body {
display: flex;
flex-direction: column;
justify-content: space-between;
align-content: space-between;
text-align: center;
}
.gauge-label {
font-weight: bold;
}