Start work on new web display

2026-01-13 17:22:54 -05:00 · 2024-02-10 03:27:13 +00:00
parent 3617c0cf5f
commit 122d417026
38 changed files with 3268 additions and 0 deletions
--- a/WebDisplay/.eslintrc.cjs
+++ b/WebDisplay/.eslintrc.cjs
@@ -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 },
+        ],
+    },
+};
--- a/WebDisplay/.gitignore
+++ b/WebDisplay/.gitignore
@@ -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?
--- a/WebDisplay/.prettierrc
+++ b/WebDisplay/.prettierrc
@@ -0,0 +1,10 @@
+{
+    "tabWidth": 4,
+    "useTabs": false,
+    "singleQuote": true,
+    "semi": true,
+    "singleAttributePerLine": true,
+    "bracketSpacing": true,
+    "printWidth": 150,
+    "bracketSameLine": true
+}
--- a/WebDisplay/README.md
+++ b/WebDisplay/README.md
@@ -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
--- a/WebDisplay/index.html
+++ b/WebDisplay/index.html
@@ -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>
--- a/WebDisplay/package.json
+++ b/WebDisplay/package.json
@@ -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"
+    }
+}
--- a/WebDisplay/pnpm-lock.yaml
+++ b/WebDisplay/pnpm-lock.yaml
--- a/WebDisplay/public/favicon.svg
+++ b/WebDisplay/public/favicon.svg
@@ -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>
--- a/WebDisplay/src/App.scss
+++ b/WebDisplay/src/App.scss
@@ -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;
+}
--- a/WebDisplay/src/App.tsx
+++ b/WebDisplay/src/App.tsx
@@ -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;
--- a/WebDisplay/src/assets/moon_phases.ttf
+++ b/WebDisplay/src/assets/moon_phases.ttf
--- a/WebDisplay/src/components/almanac/main.scss
+++ b/WebDisplay/src/components/almanac/main.scss
@@ -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;
+}
--- a/WebDisplay/src/components/almanac/main.tsx
+++ b/WebDisplay/src/components/almanac/main.tsx
@@ -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;
--- a/WebDisplay/src/components/dashboard-item/main.scss
+++ b/WebDisplay/src/components/dashboard-item/main.scss
@@ -0,0 +1,7 @@
+.dashboard-item-header {
+    padding: 8px;
+}
+
+.dashboard-item-content {
+    padding: 0px 4px;
+}
--- a/WebDisplay/src/components/dashboard-item/main.tsx
+++ b/WebDisplay/src/components/dashboard-item/main.tsx
@@ -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;
--- a/WebDisplay/src/components/laundry/main.scss
+++ b/WebDisplay/src/components/laundry/main.scss
@@ -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;
+}
--- a/WebDisplay/src/components/laundry/main.tsx
+++ b/WebDisplay/src/components/laundry/main.tsx
@@ -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;
--- a/WebDisplay/src/components/power/main.scss
+++ b/WebDisplay/src/components/power/main.scss
@@ -0,0 +1,10 @@
+.power-current {
+    font-size: 14px;
+    padding: 10px;
+}
+
+.power-current-header {
+    font-weight: 500;
+    text-align: right;
+    padding-right: 10px;
+}
--- a/WebDisplay/src/components/power/main.tsx
+++ b/WebDisplay/src/components/power/main.tsx
@@ -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;
--- a/WebDisplay/src/components/weather/current/main.scss
+++ b/WebDisplay/src/components/weather/current/main.scss
@@ -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);
+}
--- a/WebDisplay/src/components/weather/current/main.tsx
+++ b/WebDisplay/src/components/weather/current/main.tsx
@@ -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;
--- a/WebDisplay/src/config.json
+++ b/WebDisplay/src/config.json
@@ -0,0 +1,3 @@
+{
+    "API_PREFIX": ""
+}
--- a/WebDisplay/src/environment.ts
+++ b/WebDisplay/src/environment.ts
@@ -0,0 +1,7 @@
+import config from './config.json';
+
+export default class Environment {
+    public static getUrlPrefix(): string {
+        return config.API_PREFIX;
+    }
+}
--- a/WebDisplay/src/main.tsx
+++ b/WebDisplay/src/main.tsx
@@ -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>
+);
--- a/WebDisplay/src/services/laundry/device-message.ts
+++ b/WebDisplay/src/services/laundry/device-message.ts
@@ -0,0 +1,4 @@
+export default class DeviceMessage {
+    name: string = '';
+    status: boolean = false;
+}
--- a/WebDisplay/src/services/laundry/laundry-status.ts
+++ b/WebDisplay/src/services/laundry/laundry-status.ts
@@ -0,0 +1,4 @@
+export default class LaundryStatus {
+    washer: boolean | undefined = false;
+    dryer: boolean | undefined = false;
+}
--- a/WebDisplay/src/services/laundry/main.ts
+++ b/WebDisplay/src/services/laundry/main.ts
@@ -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);
+        });
+    }
+}
--- a/WebDisplay/src/services/power/main.ts
+++ b/WebDisplay/src/services/power/main.ts
@@ -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));
+        });
+    }
+}
--- a/WebDisplay/src/services/power/power-status.ts
+++ b/WebDisplay/src/services/power/power-status.ts
@@ -0,0 +1,4 @@
+export default class PowerStatus {
+    Generation: number = 0;
+    Consumption: number = 0;
+}
--- a/WebDisplay/src/services/weather/main.ts
+++ b/WebDisplay/src/services/weather/main.ts
@@ -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));
+        });
+    }
+}
--- a/WebDisplay/src/services/weather/weather-recent.ts
+++ b/WebDisplay/src/services/weather/weather-recent.ts
@@ -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;
+}
--- a/WebDisplay/src/services/weather/weather-update.ts
+++ b/WebDisplay/src/services/weather/weather-update.ts
@@ -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;
+}
--- a/WebDisplay/src/views/dashboard/main.scss
+++ b/WebDisplay/src/views/dashboard/main.scss
@@ -0,0 +1,6 @@
+@import '/node_modules/react-grid-layout/css/styles.css';
+
+.dashboard-item {
+    background-color: white;
+    border: 1px solid lightgray;
+}
--- a/WebDisplay/src/views/dashboard/main.tsx
+++ b/WebDisplay/src/views/dashboard/main.tsx
@@ -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;
--- a/WebDisplay/src/vite-env.d.ts
+++ b/WebDisplay/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/WebDisplay/tsconfig.json
+++ b/WebDisplay/tsconfig.json
@@ -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" }]
+}
--- a/WebDisplay/tsconfig.node.json
+++ b/WebDisplay/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true,
+        "strict": true
+    },
+    "include": ["vite.config.ts"]
+}
--- a/WebDisplay/vite.config.ts
+++ b/WebDisplay/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+});
				`@@ -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>