Start work on new web display

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

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;

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

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;

WebDisplay/src/components/dashboard-item/main.scss

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

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;

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

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;

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

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;

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);
+}

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;

WebDisplay/src/config.json

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

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

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>
+);

WebDisplay/src/services/laundry/device-message.ts

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

WebDisplay/src/services/laundry/laundry-status.ts

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

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);
+        });
+    }
+}

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));
+        });
+    }
+}

WebDisplay/src/services/power/power-status.ts

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

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));
+        });
+    }
+}

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

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

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

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;

WebDisplay/src/vite-env.d.ts

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