Update to make TeaSense run in the back ground
This commit is contained in:
parent
2bdd988b0b
commit
667b8d0e49
@ -30,7 +30,7 @@
|
||||
<div id="root"></div>
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register("./serviceworker.js");
|
||||
navigator.serviceWorker.register("./serviceworker.js", {scope: '.'});
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
|
@ -1,6 +1,52 @@
|
||||
// This code executes in its own worker or thread
|
||||
self.addEventListener("install", event => {
|
||||
checkNotificationPromise();
|
||||
interval = setInterval(() => fetchAndCacheLatestNews(), 1000);
|
||||
});
|
||||
self.addEventListener("activate", event => {
|
||||
|
||||
self.addEventListener("fetch", (e) => {
|
||||
console.log(`[Service Worker] Fetched resource ${e.request.url}`);
|
||||
});
|
||||
self.addEventListener('fetch',() => console.log("fetch"));
|
||||
|
||||
let interval = 0;
|
||||
|
||||
function handleNotification(title, notif) {
|
||||
if (checkNotificationPromise()) {
|
||||
self.registration.showNotification(title, notif);
|
||||
} else {
|
||||
self.registration.showNotification(title, notif);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchAndCacheLatestNews() {
|
||||
const response = await fetch('/api/teasense');
|
||||
const data = await response.json();
|
||||
const temp = data[data.length - 1].value;
|
||||
if (temp) {
|
||||
if (temp >= ALERT_THRESHOLD) {
|
||||
handleNotification('TeaSense Alert', {
|
||||
body: '♨️ ',
|
||||
tag: 1,
|
||||
});
|
||||
} else if (temp < ALERT_THRESHOLD && temp > WARNING_THRESHOLD) {
|
||||
handleNotification('TeaSense Warning', {
|
||||
body: '🫖',
|
||||
tag: 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function checkNotificationPromise() {
|
||||
try {
|
||||
Notification.requestPermission().then();
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
const ALERT_THRESHOLD = 80.0;
|
||||
const WARNING_THRESHOLD = 75.0;
|
||||
|
34
src/App.css
34
src/App.css
@ -3,24 +3,15 @@
|
||||
}
|
||||
|
||||
.rainfall-gauge {
|
||||
border: .01em solid black;
|
||||
border-radius: 1em;
|
||||
padding: .6em;
|
||||
height: 5vh;
|
||||
}
|
||||
|
||||
.soil-gauge {
|
||||
border: .01em solid black;
|
||||
border-radius: 1em;
|
||||
padding: .6em;
|
||||
height: 7vh;
|
||||
}
|
||||
|
||||
.teasense {
|
||||
border: .01em solid black;
|
||||
border-radius: 1em;
|
||||
padding: .6em;
|
||||
height: 5vh;
|
||||
}
|
||||
|
||||
@media (max-width: 601px) {
|
||||
@ -32,18 +23,6 @@
|
||||
margin: .6em !important;
|
||||
}
|
||||
|
||||
.merrysky {
|
||||
height: 50vh !important;
|
||||
}
|
||||
|
||||
.soil-gauge {
|
||||
height: 12vh;
|
||||
}
|
||||
|
||||
.teasense {
|
||||
height: 7vh !important;
|
||||
}
|
||||
|
||||
.rainfall-gauge {
|
||||
height: 6vh !important;
|
||||
}
|
||||
@ -54,19 +33,8 @@
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.rainfall-gauge {
|
||||
height: 3vh !important;
|
||||
}
|
||||
|
||||
.soil-gauge {
|
||||
height: 7vh !important;
|
||||
}
|
||||
|
||||
.teasense {
|
||||
height: 4vh !important;
|
||||
}
|
||||
|
||||
.merrysky {
|
||||
width: 90vw !important;
|
||||
height: 80vh !important;
|
||||
}
|
||||
}
|
||||
|
@ -4,14 +4,6 @@ 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>
|
||||
|
@ -3,9 +3,6 @@ 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();
|
||||
|
||||
@ -17,47 +14,11 @@ const Sensor = () => {
|
||||
|
||||
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 >= ALERT_THRESHOLD) {
|
||||
handleNotification('TeaSense Alert', {
|
||||
body: process.env.REACT_APP_TEASENSE_ALERT_MESSAGE,
|
||||
tag: 1,
|
||||
});
|
||||
} else if (temp < ALERT_THRESHOLD && temp > WARNING_THRESHOLD) {
|
||||
handleNotification('TeaSense Warning', {
|
||||
body: process.env.REACT_APP_TEASENSE_WARNING_MESSAGE,
|
||||
tag: 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [temp]);
|
||||
|
||||
return (
|
||||
<div className={'gauge-body'}>
|
||||
<div className={'gauge-label'}>TeaSense</div>
|
||||
|
Loading…
Reference in New Issue
Block a user