MooreForge/sensorui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update to CSS for PWA and make PWA

Browse Source
This commit is contained in:
William Moore 2023-01-19 13:28:40 -06:00
parent adc171edb2
commit f13bd41558
10 changed files with 53 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

BIN
public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

12
public/index.html
View File

@ -2,14 +2,13 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
content="MooreForge weather station of sensors"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@ -24,11 +23,16 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>MooreForge Weather Station</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("./serviceworker.js");
}
</script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

BIN
public/logo192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 75 KiB

BIN
public/logo512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 471 KiB

10
public/manifest.json
View File

@ -1,11 +1,11 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "Weather Station",
"name": "MooreForge Weather Station",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
"src": "favicon.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "logo192.png",

6
public/serviceworker.js Normal file
View File

@ -0,0 +1,6 @@
// This code executes in its own worker or thread
self.addEventListener("install", event => {
});
self.addEventListener("activate", event => {
});
self.addEventListener('fetch',() => console.log("fetch"));

31
src/App.css
View File

@ -5,11 +5,27 @@
.rainfall-gauge {
border: .01em solid black;
padding: .6em;
height: 3vh;
}
@media (max-width: 400px) {
.sensors {
display: block;
display: display !important;
}
.rainfall-gauge {
color: blue;
height: 5vh;
}
}
@media (max-width: 501px) and (display-mode: standalone) {
.sensors {
display: block !important;
}
.rainfall-gauge {
height: 5vh;
}
}
@ -21,9 +37,18 @@
padding: .5em;
}
.merrysky {
width: 100%;
height: 80vh;
border: 0;
flex: 10 !important;
}
.sensors {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
align-content: space-between;
}
@ -31,3 +56,7 @@
.sensor-col {
flex: 1;
}
.sensors >* {
flex: 1 1 160px;
}

2
src/App.tsx
View File

@ -1,5 +1,4 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Rainfall from './components/rainfall';
@ -10,6 +9,7 @@ function App() {
<p>Welcome to the MooreForge Weather Station. While a work in progress, there are some functional sensors shown below.</p>
<div className={'sensors'}>
<div className={'rainfall-gauge sensor-col'}><Rainfall /></div>
<iframe src={'https://merrysky.net/'} className={'sensor-col merrysky'} title={'Merry Sky'}></iframe>
</div>
</div>
);

4
src/components/rainfall/index.tsx
View File

@ -7,9 +7,9 @@ const INCHES_PER_CLICK = .01;
const Sensor = () => {
const [totalRainfall, setTotalRainfall] = useState(0);
console.log(process.env);
async function pullDataFromBackend() {
const response = await fetch('http://localhost:4050/rainfall');
const response = await fetch(process.env.REACT_APP_RAIN_GAUGE_DATA ?? '');
const data = await response.json();
const rainfall = data
.map((datum: any) => datum.value)