ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-13 17:22:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

Start work on new web display

Browse Source
This commit is contained in:
Chris Kaczor
2024-02-10 03:27:13 +00:00
parent 3617c0cf5f
commit 122d417026
38 changed files with 3268 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
WebDisplay/.eslintrc.cjs Normal file
View File

@@ -0,0 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
};

24
WebDisplay/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

10
WebDisplay/.prettierrc Normal file
View File

@@ -0,0 +1,10 @@
{
"tabWidth": 4,
"useTabs": false,
"singleQuote": true,
"semi": true,
"singleAttributePerLine": true,
"bracketSpacing": true,
"printWidth": 150,
"bracketSameLine": true
}

30
WebDisplay/README.md Normal file
View File

@@ -0,0 +1,30 @@
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}
```
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

13
WebDisplay/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home Monitor</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

45
WebDisplay/package.json Normal file
View File

@@ -0,0 +1,45 @@
{
"name": "web-display",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@microsoft/signalr": "^8.0.0",
"@types/react-grid-layout": "^1.3.5",
"@types/suncalc": "^1.9.2",
"axios": "^1.6.7",
"bootstrap": "^5.3.2",
"date-fns": "^3.3.1",
"localforage": "^1.10.0",
"match-sorter": "^6.3.4",
"react": "^18.2.0",
"react-bootstrap": "^2.10.0",
"react-dom": "^18.2.0",
"react-grid-layout": "^1.4.4",
"react-router-dom": "^6.22.0",
"sass": "^1.70.0",
"sort-by": "^1.2.0",
"suncalc": "^1.9.0"
},
"devDependencies": {
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"@vitejs/plugin-react-swc": "^3.5.0",
"eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"typescript": "^5.2.2",
"vite": "^5.1.0"
}
}

2268
WebDisplay/pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

1
WebDisplay/public/favicon.svg Normal file
View File

@@ -0,0 +1 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 505 505" xml:space="preserve" width="172px" height="172px" fill="#ffffff" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="3.03"></g><g id="SVGRepo_iconCarrier"> <circle style="fill:#5e7587;" cx="252.5" cy="252.5" r="252.5"></circle> <path style="fill:#FFFFFF;" d="M329.8,405.5h-69v-68.9h-16.6v68.9h-69c-0.9,0-1.6,0.7-1.6,1.6v13.1c0,0.9,0.7,1.6,1.6,1.6h69h16.6 h69c0.9,0,1.6-0.7,1.6-1.6v-13.1C331.4,406.2,330.7,405.5,329.8,405.5z"></path> <circle style="fill:#d24cdc;" cx="252.5" cy="413.3" r="18"></circle> <polygon style="fill:#FFFFFF;" points="370.5,211.2 370.2,210.9 370.2,207.5 366.4,207.5 252.5,105.5 138.6,207.5 134.8,207.5 134.8,210.9 134.5,211.2 134.8,211.2 134.8,355.7 370.2,355.7 370.2,211.2 "></polygon> <g> <rect x="215.8" y="266.6" style="fill:#d24cdc;" width="73.4" height="89.1"></rect> <polygon style="fill:#d24cdc;" points="370.5,211.2 406.2,211.2 252.5,73.6 98.8,211.2 134.5,211.2 252.5,105.5 "></polygon> </g> </g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

24
WebDisplay/src/App.scss Normal file
View File

@@ -0,0 +1,24 @@
$primary: #663399;
@import 'bootstrap';
html {
height: 100%;
width: 100%;
}
body {
height: inherit;
width: inherit;
}
#root {
height: inherit;
width: inherit;
background-color: #fafafa;
}
.dropdown-toggle::after {
content: none !important;
}

43
WebDisplay/src/App.tsx Normal file
View File

@@ -0,0 +1,43 @@
import './App.scss';
import { Routes, Route, Link } from 'react-router-dom';
import { Container, Nav, NavDropdown, Navbar } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars } from '@fortawesome/free-solid-svg-icons';
import Dashboard from './views/dashboard/main';
function App() {
return (
<>
<Navbar variant="dark" bg="primary">
<Container fluid>
<Navbar.Brand as={Link} to="/">
Home Monitor
</Navbar.Brand>
<Nav>
<NavDropdown
title={
<FontAwesomeIcon
width={32}
height={32}
icon={faBars}
/>
}
align="end"
>
<NavDropdown.Item as={Link} to="/summary">
Summary
</NavDropdown.Item>
</NavDropdown>
</Nav>
</Container>
</Navbar>
<Routes>
<Route path="/" element={<Dashboard />} />
</Routes>
</>
);
}
export default App;

BIN
WebDisplay/src/assets/moon_phases.ttf Normal file
View File

Binary file not shown.

24
WebDisplay/src/components/almanac/main.scss Normal file
View File

@@ -0,0 +1,24 @@
@font-face {
font-family: moon;
src: url(/src/assets/moon_phases.ttf) format('opentype');
}
.almanac-content {
font-size: 14px;
padding: 10px;
}
.almanac-table-header {
font-weight: 500;
text-align: right;
padding-right: 10px;
white-space: nowrap;
}
.moon-phase {
font-family: moon;
font-size: 28px;
margin-left: 10px;
display: block;
margin-top: 1px;
}

134
WebDisplay/src/components/almanac/main.tsx Normal file
View File

@@ -0,0 +1,134 @@
import './main.scss';
import { useEffect, useState } from 'react';
import * as SunCalc from 'suncalc';
import DashboardItem from '../dashboard-item/main';
import WeatherService from '../../services/weather/main';
import WeatherRecent from '../../services/weather/weather-recent';
import { format, formatDuration, intervalToDuration } from 'date-fns';
function Almanac() {
const [loaded, setLoaded] = useState<boolean>(false);
const [sunTimes, setSunTimes] = useState<SunCalc.GetTimesResult | null>(null);
const [moonTimes, setMoonTimes] = useState<SunCalc.GetMoonTimes | null>(null);
const [moonIllumination, setMoonIllumination] = useState<SunCalc.GetMoonIlluminationResult | null>(null);
const weatherService = new WeatherService();
const dayLength = (): string => {
const duration = intervalToDuration({
start: sunTimes!.sunrise,
end: sunTimes!.sunset,
});
return formatDuration(duration, { format: ['hours', 'minutes'] });
};
const moonPhaseName = (): string => {
const phase = moonIllumination!.phase;
if (phase === 0) {
return 'New Moon';
} else if (phase < 0.25) {
return 'Waxing Crescent';
} else if (phase === 0.25) {
return 'First Quarter';
} else if (phase < 0.5) {
return 'Waxing Gibbous';
} else if (phase === 0.5) {
return 'Full Moon';
} else if (phase < 0.75) {
return 'Waning Gibbous';
} else if (phase === 0.75) {
return 'Last Quarter';
} else if (phase < 1.0) {
return 'Waning Crescent';
}
return '';
};
const moonPhaseLetter = (): string => {
const phase = moonIllumination!.phase;
if (phase === 0) {
return '0';
} else if (phase < 0.25) {
return 'D';
} else if (phase === 0.25) {
return 'G';
} else if (phase < 0.5) {
return 'I';
} else if (phase === 0.5) {
return '1';
} else if (phase < 0.75) {
return 'Q';
} else if (phase === 0.75) {
return 'T';
} else if (phase < 1.0) {
return 'W';
}
return '';
};
useEffect(() => {
weatherService.getLatest().then((weatherRecent: WeatherRecent) => {
const date = new Date();
setSunTimes(SunCalc.getTimes(date, weatherRecent?.latitude!, weatherRecent?.longitude!));
setMoonTimes(SunCalc.getMoonTimes(date, weatherRecent?.latitude!, weatherRecent?.longitude!));
setMoonIllumination(SunCalc.getMoonIllumination(date));
setLoaded(true);
});
}, []);
return (
<DashboardItem title="Almanac">
<div className="weather-current">
{!loaded && <div>Loading...</div>}
{loaded && (
<table>
<tbody>
<tr>
<td className="almanac-table-header">Sunrise</td>
<td colSpan={2}>{format(sunTimes!.sunrise, 'hh:mm:ss aa')}</td>
</tr>
<tr>
<td className="almanac-table-header">Sunset</td>
<td colSpan={2}>{format(sunTimes!.sunset, 'hh:mm:ss aa')}</td>
</tr>
<tr>
<td className="almanac-table-header">Day length</td>
<td colSpan={2}>{dayLength()}</td>
</tr>
<tr>
<td className="almanac-table-header">Moonrise</td>
<td colSpan={2}>{format(moonTimes!.rise, 'hh:mm:ss aa')}</td>
</tr>
<tr>
<td className="almanac-table-header">Moonset</td>
<td colSpan={2}>{format(moonTimes!.set, 'hh:mm:ss aa')}</td>
</tr>
<tr>
<td className="almanac-table-header">Moon</td>
<td>
{moonPhaseName()}
<br />
{(moonIllumination!.fraction * 100).toFixed(1)}% illuminated
</td>
<td>
<div className="moon-phase">{moonPhaseLetter()}</div>
</td>
</tr>
</tbody>
</table>
)}
</div>
</DashboardItem>
);
}
export default Almanac;

7
WebDisplay/src/components/dashboard-item/main.scss Normal file
View File

@@ -0,0 +1,7 @@
.dashboard-item-header {
padding: 8px;
}
.dashboard-item-content {
padding: 0px 4px;
}

20
WebDisplay/src/components/dashboard-item/main.tsx Normal file
View File

@@ -0,0 +1,20 @@
import './main.scss';
import { PropsWithChildren } from 'react';
type Props = {
title: string;
};
function DashboardItem(props: PropsWithChildren<Props>) {
return (
<>
<div className="dashboard-item-header bg-primary text-white">
{props.title}
</div>
<div className="dashboard-item-content">{props.children}</div>
</>
);
}
export default DashboardItem;

18
WebDisplay/src/components/laundry/main.scss Normal file
View File

@@ -0,0 +1,18 @@
.laundry-current {
font-size: 14px;
padding: 10px;
}
.laundry-current-header {
font-weight: 500;
text-align: right;
padding-right: 10px;
}
.true {
color: darkgoldenrod;
}
.false {
color: darkgreen;
}

48
WebDisplay/src/components/laundry/main.tsx Normal file
View File

@@ -0,0 +1,48 @@
import './main.scss';
import { useEffect, useState } from 'react';
import DashboardItem from '../dashboard-item/main';
import LaundryService from '../../services/laundry/main';
import LaundryStatus from '../../services/laundry/laundry-status';
function Laundry() {
const [latestStatus, setLatestStatus] = useState<LaundryStatus | null>(null);
const laundryService = new LaundryService();
useEffect(() => {
laundryService.getLatest().then((status) => {
setLatestStatus(status);
});
laundryService.start((laundryStatus: LaundryStatus) => {
setLatestStatus(laundryStatus);
});
}, []);
return (
<DashboardItem title="Laundry">
<div className="laundry-current">
{latestStatus === null && <div>Loading...</div>}
{latestStatus !== null && (
<div>
<table>
<tbody>
<tr>
<td className="laundry-current-header">Washer</td>
<td className={latestStatus!.washer!.toString()}>{latestStatus!.washer ? 'On' : 'Off'}</td>
</tr>
<tr>
<td className="laundry-current-header">Dryer</td>
<td className={latestStatus!.dryer!.toString()}>{latestStatus!.dryer ? 'On' : 'Off'}</td>
</tr>
</tbody>
</table>
</div>
)}
</div>
</DashboardItem>
);
}
export default Laundry;

10
WebDisplay/src/components/power/main.scss Normal file
View File

@@ -0,0 +1,10 @@
.power-current {
font-size: 14px;
padding: 10px;
}
.power-current-header {
font-weight: 500;
text-align: right;
padding-right: 10px;
}

44
WebDisplay/src/components/power/main.tsx Normal file
View File

@@ -0,0 +1,44 @@
import './main.scss';
import { useEffect, useState } from 'react';
import DashboardItem from '../dashboard-item/main';
import PowerService from '../../services/power/main';
import PowerStatus from '../../services/power/power-status';
function Power() {
const [latestStatus, setLatestStatus] = useState<PowerStatus | null>(null);
const powerService = new PowerService();
useEffect(() => {
powerService.start((powerStatus: PowerStatus) => {
setLatestStatus(powerStatus);
});
}, []);
return (
<DashboardItem title="Power">
<div className="power-current">
{latestStatus === null && <div>Loading...</div>}
{latestStatus !== null && (
<div>
<table>
<tbody>
<tr>
<td className="power-current-header">Generation</td>
<td>{latestStatus!.Generation < 0 ? 0 : latestStatus!.Generation} W</td>
</tr>
<tr>
<td className="power-current-header">Consumption</td>
<td>{latestStatus!.Consumption < 0 ? 0 : latestStatus!.Consumption} W</td>
</tr>
</tbody>
</table>
</div>
)}
</div>
</DashboardItem>
);
}
export default Power;

33
WebDisplay/src/components/weather/current/main.scss Normal file
View File

@@ -0,0 +1,33 @@
.weather-current {
font-size: 14px;
padding: 10px;
}
.weather-current-header {
font-weight: 500;
text-align: right;
padding-right: 10px;
}
.pressure-trend-arrow {
display: inline-block;
position: relative;
left: 6px;
transform: scale(1.25);
}
.down-high {
transform: rotate(60deg) scale(1.25);
}
.down-low {
transform: rotate(25deg) scale(1.25);
}
.up-high {
transform: rotate(-60deg) scale(1.25);
}
.up-low {
transform: rotate(-25deg) scale(1.25);
}

110
WebDisplay/src/components/weather/current/main.tsx Normal file
View File

@@ -0,0 +1,110 @@
import './main.scss';
import { useEffect, useState } from 'react';
import DashboardItem from '../../dashboard-item/main';
import WeatherService from '../../../services/weather/main';
import WeatherUpdate from '../../../services/weather/weather-update';
function CurrentWeather() {
const [latestReading, setLatestReading] = useState<WeatherUpdate | null>(null);
const weatherService = new WeatherService();
useEffect(() => {
weatherService.start((weatherUpdate: WeatherUpdate) => {
setLatestReading(weatherUpdate);
});
}, []);
const rotationClass = (pressureDifference: number | undefined) => {
if (!pressureDifference) {
return '';
} else if (Math.abs(pressureDifference) <= 1.0) {
return '';
} else if (pressureDifference > 1.0 && pressureDifference <= 2.0) {
return 'up-low';
} else if (pressureDifference > 2.0) {
return 'up-high';
} else if (pressureDifference < -1.0 && pressureDifference >= -2.0) {
return 'down-low';
} else if (pressureDifference < -2.0) {
return 'down-high';
}
return '';
};
return (
<DashboardItem title="Weather">
<div className="weather-current">
{latestReading === null && <div>Loading...</div>}
{latestReading !== null && (
<table>
<tbody>
<tr>
<td className="weather-current-header">Temperature</td>
<td>
{latestReading!.Temperature?.toFixed(2)}
°F
</td>
</tr>
{latestReading!.HeatIndex && (
<tr>
<td className="weather-current-header">Heat index</td>
<td>
{latestReading!.HeatIndex?.toFixed(2)}
°F
</td>
</tr>
)}
{latestReading!.WindChill && (
<tr>
<td className="weather-current-header">Wind chill</td>
<td>{latestReading!.WindChill?.toFixed(2)}°F</td>
</tr>
)}
<tr>
<td className="weather-current-header">Humidity</td>
<td>{latestReading!.Humidity?.toFixed(2)}%</td>
</tr>
<tr>
<td className="weather-current-header">Dew point</td>
<td>
{latestReading!.DewPoint?.toFixed(2)}
°F
</td>
</tr>
<tr>
<td className="weather-current-header">Pressure</td>
<td>
{latestReading!.Pressure && (latestReading!.Pressure / 33.864 / 100)?.toFixed(2)}"
<span
className={'pressure-trend-arrow ' + rotationClass(latestReading!.PressureDifferenceThreeHour)}
title={'3 Hour Change: ' + latestReading!.PressureDifferenceThreeHour?.toFixed(1)}>
➜
</span>
</td>
</tr>
<tr>
<td className="weather-current-header">Wind</td>
<td>
{latestReading!.WindSpeed?.toFixed(2)} mph {latestReading!.WindDirection}
</td>
</tr>
<tr>
<td className="weather-current-header">Rain</td>
<td>{latestReading!.RainLastHour?.toFixed(2)}" (last hour)</td>
</tr>
<tr>
<td className="weather-current-header">Light</td>
<td>{latestReading!.LightLevel?.toFixed(2)} lx</td>
</tr>
</tbody>
</table>
)}
</div>
</DashboardItem>
);
}
export default CurrentWeather;

3
WebDisplay/src/config.json Normal file
View File

@@ -0,0 +1,3 @@
{
"API_PREFIX": ""
}

7
WebDisplay/src/environment.ts Normal file
View File

@@ -0,0 +1,7 @@
import config from './config.json';
export default class Environment {
public static getUrlPrefix(): string {
return config.API_PREFIX;
}
}

13
WebDisplay/src/main.tsx Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

4
WebDisplay/src/services/laundry/device-message.ts Normal file
View File

@@ -0,0 +1,4 @@
export default class DeviceMessage {
name: string = '';
status: boolean = false;
}

4
WebDisplay/src/services/laundry/laundry-status.ts Normal file
View File

@@ -0,0 +1,4 @@
export default class LaundryStatus {
washer: boolean | undefined = false;
dryer: boolean | undefined = false;
}

64
WebDisplay/src/services/laundry/main.ts Normal file
View File

@@ -0,0 +1,64 @@
import { HubConnectionBuilder, HubConnection } from '@microsoft/signalr';
import axios from 'axios';
import DeviceMessage from './device-message';
import LaundryStatus from './laundry-status';
import Environment from '../../environment';
export default class LaundryService {
private connection: HubConnection;
private started: boolean = false;
private latestStatus: LaundryStatus = new LaundryStatus();
constructor() {
this.connection = new HubConnectionBuilder()
.withUrl(Environment.getUrlPrefix() + '/api/hub/device-status', {
withCredentials: false,
})
.build();
}
async getLatest(): Promise<LaundryStatus> {
const response = await axios.get<DeviceMessage[]>(Environment.getUrlPrefix() + `/api/device-status/status/recent`);
const newStatus = new LaundryStatus();
response.data.forEach((deviceMessage) => {
if (deviceMessage.name === 'washer') {
newStatus.washer = deviceMessage.status;
} else if (deviceMessage.name === 'dryer') {
newStatus.dryer = deviceMessage.status;
}
});
return newStatus;
}
async start(callback: (laundryStatus: LaundryStatus) => void) {
if (this.started) {
return;
}
this.started = true;
this.latestStatus = await this.getLatest();
await this.connection.start();
this.connection!.on('LatestStatus', (message: string) => {
const deviceMessage = JSON.parse(message) as DeviceMessage;
const newStatus = new LaundryStatus();
newStatus.dryer = this.latestStatus.dryer;
newStatus.washer = this.latestStatus.washer;
if (deviceMessage.name === 'washer') {
newStatus.washer = deviceMessage.status;
} else if (deviceMessage.name === 'dryer') {
newStatus.dryer = deviceMessage.status;
}
callback(newStatus);
});
}
}

30
WebDisplay/src/services/power/main.ts Normal file
View File

@@ -0,0 +1,30 @@
import { HubConnectionBuilder, HubConnection } from '@microsoft/signalr';
import PowerStatus from './power-status';
import Environment from '../../environment';
export default class PowerService {
private connection: HubConnection;
private started: boolean = false;
constructor() {
this.connection = new HubConnectionBuilder()
.withUrl(Environment.getUrlPrefix() + '/api/hub/power', {
withCredentials: false,
})
.build();
}
async start(callback: (powerStatus: PowerStatus) => void) {
if (this.started) {
return;
}
this.started = true;
await this.connection.start();
this.connection!.on('LatestSample', (message: string) => {
callback(JSON.parse(message));
});
}
}

4
WebDisplay/src/services/power/power-status.ts Normal file
View File

@@ -0,0 +1,4 @@
export default class PowerStatus {
Generation: number = 0;
Consumption: number = 0;
}

38
WebDisplay/src/services/weather/main.ts Normal file
View File

@@ -0,0 +1,38 @@
import { HubConnectionBuilder, HubConnection } from '@microsoft/signalr';
import WeatherUpdate from './weather-update';
import WeatherRecent from './weather-recent';
import Environment from '../../environment';
import axios from 'axios';
export default class WeatherService {
private connection: HubConnection;
private started: boolean = false;
constructor() {
this.connection = new HubConnectionBuilder()
.withUrl(Environment.getUrlPrefix() + '/api/hub/weather', {
withCredentials: false,
})
.build();
}
async getLatest(): Promise<WeatherRecent> {
const response = await axios.get<WeatherRecent>(Environment.getUrlPrefix() + `/api/weather/readings/recent`);
return response.data;
}
async start(callback: (weatherUpdate: WeatherUpdate) => void) {
if (this.started) {
return;
}
this.started = true;
await this.connection.start();
this.connection!.on('LatestReading', (message: string) => {
callback(JSON.parse(message));
});
}
}

25
WebDisplay/src/services/weather/weather-recent.ts Normal file
View File

@@ -0,0 +1,25 @@
export default class WeatherRecent {
type: string | undefined;
message: null | undefined;
timestamp: Date | undefined;
windDirection: string | undefined;
windSpeed: number | undefined;
humidity: number | undefined;
rain: number | undefined;
pressure: number | undefined;
temperature: number | undefined;
batteryLevel: number | undefined;
lightLevel: number | undefined;
latitude: number | undefined;
longitude: number | undefined;
altitude: number | undefined;
satelliteCount: number | undefined;
gpsTimestamp: Date | undefined;
windChill: number | undefined;
heatIndex: number | undefined;
dewPoint: number | undefined;
pressureDifferenceThreeHour: number | undefined;
pressureSlope: number | undefined;
pressureAngle: number | undefined;
rainLastHour: number | undefined;
}

25
WebDisplay/src/services/weather/weather-update.ts Normal file
View File

@@ -0,0 +1,25 @@
export default class WeatherUpdate {
Type: string | undefined;
Message: null | undefined;
Timestamp: Date | undefined;
WindDirection: string | undefined;
WindSpeed: number | undefined;
Humidity: number | undefined;
Rain: number | undefined;
Pressure: number | undefined;
Temperature: number | undefined;
BatteryLevel: number | undefined;
LightLevel: number | undefined;
Latitude: number | undefined;
Longitude: number | undefined;
Altitude: number | undefined;
SatelliteCount: number | undefined;
GpsTimestamp: Date | undefined;
WindChill: number | undefined;
HeatIndex: number | undefined;
DewPoint: number | undefined;
PressureDifferenceThreeHour: number | undefined;
PressureSlope: number | undefined;
PressureAngle: number | undefined;
RainLastHour: number | undefined;
}

6
WebDisplay/src/views/dashboard/main.scss Normal file
View File

@@ -0,0 +1,6 @@
@import '/node_modules/react-grid-layout/css/styles.css';
.dashboard-item {
background-color: white;
border: 1px solid lightgray;
}

77
WebDisplay/src/views/dashboard/main.tsx Normal file
View File

@@ -0,0 +1,77 @@
import './main.scss';
import { useState } from 'react';
import { Container, Form, Navbar } from 'react-bootstrap';
import RGL, { WidthProvider } from 'react-grid-layout';
import CurrentWeather from '../../components/weather/current/main';
import Almanac from '../../components/almanac/main';
import Laundry from '../../components/laundry/main';
import Power from '../../components/power/main';
const ReactGridLayout = WidthProvider(RGL);
function Dashboard() {
const [locked, setLocked] = useState(true);
const defaultLayout = [
{ i: 'current-weather', x: 0, y: 0, w: 6, h: 7 },
{ i: 'almanac', x: 6, y: 0, w: 5, h: 7 },
{ i: 'laundry', x: 0, y: 7, w: 5, h: 5 },
{ i: 'power', x: 5, y: 7, w: 5, h: 5 },
];
const storedLayout = localStorage.getItem('dashboard-layout');
const layout = storedLayout ? JSON.parse(storedLayout) : defaultLayout;
const onLayoutChange = (layout: RGL.Layout[]) => {
localStorage.setItem('dashboard-layout', JSON.stringify(layout));
};
return (
<Container fluid>
<Navbar>
<Form>
<Form.Check
id="dashboard-lock"
type="switch"
label="Locked"
defaultChecked={locked}
onChange={() => setLocked(!locked)}
/>
</Form>
</Navbar>
<ReactGridLayout
className="layout"
layout={layout}
cols={20}
rowHeight={30}
isDraggable={!locked}
isResizable={!locked}
onLayoutChange={onLayoutChange}>
<div
className="dashboard-item"
key="current-weather">
<CurrentWeather />
</div>
<div
className="dashboard-item"
key="almanac">
<Almanac />
</div>
<div
className="dashboard-item"
key="laundry">
<Laundry />
</div>
<div
className="dashboard-item"
key="power">
<Power />
</div>
</ReactGridLayout>
</Container>
);
}
export default Dashboard;

1
WebDisplay/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

25
WebDisplay/tsconfig.json Normal file
View File

@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

11
WebDisplay/tsconfig.node.json Normal file
View File

@@ -0,0 +1,11 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true
},
"include": ["vite.config.ts"]
}

7
WebDisplay/vite.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
});