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"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <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="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" 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 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/ 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. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>MooreForge Weather Station</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("./serviceworker.js");
}
</script>
<!-- <!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. 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", "short_name": "Weather Station",
"name": "Create React App Sample", "name": "MooreForge Weather Station",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.png",
"sizes": "64x64 32x32 24x24 16x16", "sizes": "32x32",
"type": "image/x-icon" "type": "image/png"
}, },
{ {
"src": "logo192.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 { .rainfall-gauge {
border: .01em solid black; border: .01em solid black;
padding: .6em; padding: .6em;
height: 3vh;
} }
@media (max-width: 400px) { @media (max-width: 400px) {
.sensors { .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; padding: .5em;
} }
.merrysky {
width: 100%;
height: 80vh;
border: 0;
flex: 10 !important;
}
.sensors { .sensors {
display: flex; display: flex;
flex-direction: column-reverse;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-content: space-between; align-content: space-between;
} }
@ -31,3 +56,7 @@
.sensor-col { .sensor-col {
flex: 1; flex: 1;
} }
.sensors >* {
flex: 1 1 160px;
}

2
src/App.tsx
View File

@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import logo from './logo.svg';
import './App.css'; import './App.css';
import Rainfall from './components/rainfall'; 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> <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={'sensors'}>
<div className={'rainfall-gauge sensor-col'}><Rainfall /></div> <div className={'rainfall-gauge sensor-col'}><Rainfall /></div>
<iframe src={'https://merrysky.net/'} className={'sensor-col merrysky'} title={'Merry Sky'}></iframe>
</div> </div>
</div> </div>
); );

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

@ -7,9 +7,9 @@ const INCHES_PER_CLICK = .01;
const Sensor = () => { const Sensor = () => {
const [totalRainfall, setTotalRainfall] = useState(0); const [totalRainfall, setTotalRainfall] = useState(0);
console.log(process.env);
async function pullDataFromBackend() { 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 data = await response.json();
const rainfall = data const rainfall = data
.map((datum: any) => datum.value) .map((datum: any) => datum.value)