Update to add TeaSense and some CSS stuffs

This commit is contained in:
William Moore 2023-01-19 21:08:47 -06:00
parent 1a0de9e397
commit d21e9ec466
5 changed files with 69 additions and 6 deletions

View File

@ -6,7 +6,7 @@
border: .01em solid black;
border-radius: 1em;
padding: .6em;
height: 3vh;
height: 5vh;
}
.soil-gauge {
@ -16,12 +16,19 @@
height: 7vh;
}
.teasense {
border: .01em solid black;
border-radius: 1em;
padding: .6em;
height: 5vh;
}
@media (max-width: 501px) {
.sensors {
display: display !important;
}
.sensors>* {
.sensors >* {
margin: .6em !important;
}
@ -33,8 +40,12 @@
height: 12vh;
}
.teasense {
height: 7vh !important;
}
.rainfall-gauge {
height: 6vh;
height: 6vh !important;
}
}
@ -44,7 +55,15 @@
}
.rainfall-gauge {
height: 5vh;
height: 3vh !important;
}
.soil-gauge {
height: 7vh !important;
}
.teasense {
height: 4vh !important;
}
.merrysky {

View File

@ -2,6 +2,7 @@ import React from 'react';
import './App.css';
import Rainfall from './components/rainfall';
import Soil from './components/soil';
import TeaSense from './components/teasense';
function App() {
return (
@ -11,6 +12,7 @@ function App() {
<div className={'sensors'}>
<div className={'rainfall-gauge sensor-col'}><Rainfall /></div>
<div className={'soil-gauge sensor-col'}><Soil /></div>
<div className={'teasense sensor-col'}><TeaSense /></div>
<iframe src={'https://merrysky.net/'} className={'sensor-col merrysky'} title={'Merry Sky'}></iframe>
</div>
</div>

View File

@ -5,8 +5,8 @@ import { isBefore } from 'date-fns';
import './style.css';
const Sensor = () => {
const [temp, setTemp] = useState(0);
const [cap, setCap] = useState(0);
const [temp, setTemp] = useState();
const [cap, setCap] = useState();
async function pullTempFromBackend() {
const response = await fetch(process.env.REACT_APP_SOIL_TEMP_DATA ?? '');

View File

@ -0,0 +1,31 @@
import { isBefore } from 'date-fns';
import React, { useEffect, useState } from 'react';
import './style.css';
const Sensor = () => {
const [temp, setTemp] = useState();
async function pullTempFromBackend() {
const response = await fetch(process.env.REACT_APP_TEASENSE_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));
console.log(result);
setTemp(result.value);
}
useEffect(() => {
setInterval(() => pullTempFromBackend(), 1000);
}, []);
return (
<div className={'gauge-body'}>
<div className={'gauge-label'}>TeaSense</div>
<div className={'gauge-label'}>Temperature (in C)</div>
<div>{temp}</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;
}