Update to make TeaSense run in the back ground

This commit is contained in:
William Moore 2023-02-02 17:21:02 -06:00
parent 2bdd988b0b
commit 667b8d0e49
5 changed files with 50 additions and 83 deletions

View File

@ -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>
<!--

View File

@ -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;

View File

@ -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;
}
}

View File

@ -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>

View File

@ -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>