diff --git a/src/App.css b/src/App.css index b7a43c8..567bc19 100644 --- a/src/App.css +++ b/src/App.css @@ -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 { diff --git a/src/App.tsx b/src/App.tsx index c085d4b..5805078 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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() {
+
diff --git a/src/components/soil/index.tsx b/src/components/soil/index.tsx index b73105b..75c25be 100644 --- a/src/components/soil/index.tsx +++ b/src/components/soil/index.tsx @@ -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 ?? ''); diff --git a/src/components/teasense/index.tsx b/src/components/teasense/index.tsx new file mode 100644 index 0000000..fa726de --- /dev/null +++ b/src/components/teasense/index.tsx @@ -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 ( +
+
TeaSense
+
Temperature (in C)
+
{temp}
+
+ ); +}; + +export default Sensor; \ No newline at end of file diff --git a/src/components/teasense/style.css b/src/components/teasense/style.css new file mode 100644 index 0000000..f9011df --- /dev/null +++ b/src/components/teasense/style.css @@ -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; +} \ No newline at end of file