Update to make sensorUI be the main source of notifications
This commit is contained in:
parent
77763a4189
commit
2bdd988b0b
1372
package-lock.json
generated
1372
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -11,6 +11,7 @@
|
||||
"@types/react": "^18.0.27",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"date-fns": "^2.29.3",
|
||||
"firebase": "^9.16.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
|
@ -72,7 +72,7 @@
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #282c34;
|
||||
background-color: #146b37;
|
||||
color: white;
|
||||
text-align: center;
|
||||
border: .01em solid black;
|
||||
|
11
src/App.tsx
11
src/App.tsx
@ -1,10 +1,17 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import './App.css';
|
||||
import Rainfall from './components/rainfall';
|
||||
import Soil from './components/soil';
|
||||
import TeaSense from './components/teasense';
|
||||
|
||||
function App() {
|
||||
|
||||
useEffect(() => {
|
||||
Notification.requestPermission().then((permission) => {
|
||||
if (permission === 'granted') {
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<h1 className={'header'}>MooreForge Sensor Station</h1>
|
||||
|
@ -5,39 +5,26 @@ import { isBefore } from 'date-fns';
|
||||
import './style.css';
|
||||
|
||||
const Sensor = () => {
|
||||
const [temp, setTemp] = useState();
|
||||
const [cap, setCap] = useState();
|
||||
const [moisture, setMoisture] = useState();
|
||||
|
||||
async function pullTempFromBackend() {
|
||||
const response = await fetch(process.env.REACT_APP_SOIL_TEMP_DATA ?? '');
|
||||
async function pullMoistureFromBackend() {
|
||||
const response = await fetch(process.env.REACT_APP_SOIL_MOISTURE_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);
|
||||
setMoisture(result.value);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setInterval(() => pullTempFromBackend(), 1000);
|
||||
setInterval(() => pullCapFromBackend(), 1000);
|
||||
setInterval(() => pullMoistureFromBackend(), 1000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={'gauge-body'}>
|
||||
<div className={'gauge-label'}>Soil</div>
|
||||
<div className={'gauge-label'}>Temperature (in C)</div>
|
||||
<div>{temp}</div>
|
||||
<div className={'gauge-label'}>Capacitance</div>
|
||||
<div>{cap}</div>
|
||||
<div className={'gauge-label'}>Moisture</div>
|
||||
<div>{moisture} V</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -3,6 +3,9 @@ import React, { useEffect, useState } from 'react';
|
||||
|
||||
import './style.css';
|
||||
|
||||
const ALERT_THRESHOLD = parseInt(process.env.REACT_APP_TEASENSE_ALERT_THRESHOLD ?? '80.0');
|
||||
const WARNING_THRESHOLD = parseInt(process.env.REACT_APP_TEASENSE_WARNING_THRESHOLD ?? '75.0');
|
||||
|
||||
const Sensor = () => {
|
||||
const [temp, setTemp] = useState();
|
||||
|
||||
@ -11,31 +14,45 @@ const Sensor = () => {
|
||||
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);
|
||||
}
|
||||
|
||||
function checkNotificationPromise() {
|
||||
try {
|
||||
Notification.requestPermission().then();
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setInterval(() => pullTempFromBackend(), 1000);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function handleNotification(title: string, notif: any) {
|
||||
navigator.serviceWorker.ready.then((registration) => {
|
||||
if (checkNotificationPromise()) {
|
||||
registration.showNotification(title, notif);
|
||||
} else {
|
||||
registration.showNotification(title, notif);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (temp) {
|
||||
if (temp >= 82.2) {
|
||||
Notification.requestPermission().then((result) => {
|
||||
if (result === 'granted') {
|
||||
new Notification('TeaSense Alert', {
|
||||
body: '♨️',
|
||||
});
|
||||
}
|
||||
if (temp >= ALERT_THRESHOLD) {
|
||||
handleNotification('TeaSense Alert', {
|
||||
body: process.env.REACT_APP_TEASENSE_ALERT_MESSAGE,
|
||||
tag: 1,
|
||||
});
|
||||
} else if (temp >= 80.0) {
|
||||
Notification.requestPermission().then((result) => {
|
||||
if (result === 'granted') {
|
||||
new Notification('TeaSense Warning', {
|
||||
body: '🫖',
|
||||
});
|
||||
}
|
||||
} else if (temp < ALERT_THRESHOLD && temp > WARNING_THRESHOLD) {
|
||||
handleNotification('TeaSense Warning', {
|
||||
body: process.env.REACT_APP_TEASENSE_WARNING_MESSAGE,
|
||||
tag: 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user