Switch new display to Vue

WebDisplay/src/App.scss

@@ -1,24 +0,0 @@
-$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

@@ -1,43 +0,0 @@
-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/App.vue

@@ -0,0 +1,33 @@
+<template>
+    <v-app>
+        <v-app-bar title="Home Monitor" color="primary"></v-app-bar>
+
+        <v-navigation-drawer expand-on-hover rail>
+            <v-list density="compact" nav>
+                <v-list-item
+                    prepend-icon="mdi-view-dashboard"
+                    title="Dashboard"
+                    to="/">
+                </v-list-item>
+                <v-list-item
+                    prepend-icon="mdi-sun-thermometer"
+                    title="Outside"
+                    to="outside">
+                </v-list-item>
+                <v-list-item
+                    prepend-icon="mdi-home-analytics"
+                    title="Inside"
+                    to="inside">
+                </v-list-item>
+            </v-list>
+        </v-navigation-drawer>
+
+        <v-main>
+            <router-view />
+        </v-main>
+    </v-app>
+</template>
+
+<script lang="ts" setup>
+    //
+</script>

WebDisplay/src/components/Almanac.vue

@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+    import DashboardItem from './DashboardItem.vue';
+    import { useAlmanacStore } from '@/stores/almanacStore';
+    import { format, formatDuration, intervalToDuration } from 'date-fns';
+
+    const almanacStore = useAlmanacStore();
+    almanacStore.load();
+
+    const dayLength = (): string => {
+        const duration = intervalToDuration({
+            start: almanacStore.sunTimes!.sunrise,
+            end: almanacStore.sunTimes!.sunset
+        });
+
+        return formatDuration(duration, { format: ['hours', 'minutes'] });
+    };
+
+    const moonPhaseName = (): string => {
+        const phase = almanacStore.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 = almanacStore.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 '';
+    };
+</script>
+
+<template>
+    <DashboardItem title="Almanac">
+        <div className="almanac-content">
+            <div v-if="!almanacStore.sunTimes || !almanacStore.moonIllumination">Loading...</div>
+            <table v-else>
+                <tbody>
+                    <tr>
+                        <td className="almanac-table-header">Sunrise</td>
+                        <td colSpan="{2}">
+                            {{
+                                format(
+                                    almanacStore.sunTimes.sunrise,
+                                    'hh:mm:ss aa'
+                                )
+                            }}
+                        </td>
+                    </tr>
+                    <tr>
+                        <td className="almanac-table-header">Sunset</td>
+                        <td colSpan="{2}">
+                            {{
+                                format(
+                                    almanacStore.sunTimes.sunset,
+                                    'hh:mm:ss aa'
+                                )
+                            }}
+                        </td>
+                    </tr>
+                    <tr>
+                        <td className="almanac-table-header">Day length</td>
+                        <td colSpan="{2}">{{ dayLength() }}</td>
+                    </tr>
+                    <tr v-if="almanacStore.moonTimes?.rise">
+                        <td className="almanac-table-header">Moonrise</td>
+                        <td colSpan="{2}">
+                            {{
+                                format(
+                                    almanacStore.moonTimes.rise,
+                                    'hh:mm:ss aa'
+                                )
+                            }}
+                        </td>
+                    </tr>
+                    <tr v-if="almanacStore.moonTimes?.set">
+                        <td className="almanac-table-header">Moonset</td>
+                        <td colSpan="{2}">
+                            {{
+                                format(
+                                    almanacStore.moonTimes.set,
+                                    'hh:mm:ss aa'
+                                )
+                            }}
+                        </td>
+                    </tr>
+                    <tr>
+                        <td className="almanac-table-header">Moon</td>
+                        <td>
+                            {{ moonPhaseName() }}
+                            <br />
+                            {{
+                                (
+                                    almanacStore.moonIllumination.fraction *
+                                    100
+                                ).toFixed(1)
+                            }}% illuminated
+                        </td>
+                        <td>
+                            <div className="moon-phase">
+                                {{ moonPhaseLetter() }}
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DashboardItem>
+</template>
+
+<style scoped>
+    @font-face {
+        font-family: moon;
+        src: url(/src/assets/moon_phases.ttf) format('opentype');
+    }
+
+    .almanac-content {
+        font-size: 14px;
+        padding: 6px 12px;
+    }
+
+    .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;
+    }
+</style>

WebDisplay/src/components/CurrentLaundryStatus.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+    import { useLaundryStore } from '@/stores/laundryStore';
+
+    const laundryStore = useLaundryStore();
+    laundryStore.start();
+</script>
+
+<template>
+    <DashboardItem title="Laundry">
+        <div className="laundry-current">
+            <div v-if="!laundryStore.current">Loading...</div>
+            <table v-else>
+                <tbody>
+                    <tr v-if="laundryStore.current.dryer != null">
+                        <td className="laundry-current-header">Dryer</td>
+                        <td :className="laundryStore.current.dryer.toString()">
+                            {{ laundryStore.current.dryer ? 'On' : 'Off' }}
+                        </td>
+                    </tr>
+                    <tr v-if="laundryStore.current.washer != null">
+                        <td className="laundry-current-header">Washer</td>
+                        <td :className="laundryStore.current.washer.toString()">
+                            {{ laundryStore.current.washer ? 'On' : 'Off' }}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DashboardItem>
+</template>
+
+<style>
+    .laundry-current {
+        font-size: 14px;
+        padding: 6px 12px;
+    }
+
+    .laundry-current-header {
+        font-weight: 500;
+        text-align: right;
+        padding-right: 10px;
+    }
+
+    .true {
+        color: darkgoldenrod;
+    }
+
+    .false {
+        color: darkgreen;
+    }
+</style>

WebDisplay/src/components/CurrentPower.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+    import { usePowerStore } from '@/stores/powerStore';
+
+    const powerStore = usePowerStore();
+    powerStore.start();
+</script>
+
+<template>
+    <DashboardItem title="Power">
+        <div className="power-current">
+            <div v-if="!powerStore.current">Loading...</div>
+            <table v-else>
+                <tbody>
+                    <tr>
+                        <td className="power-current-header">Generation</td>
+                        <td>
+                            {{
+                                powerStore.current!.Generation < 0
+                                    ? 0
+                                    : powerStore.current!.Generation
+                            }}
+                            W
+                        </td>
+                    </tr>
+                    <tr>
+                        <td className="power-current-header">Consumption</td>
+                        <td>
+                            {{ powerStore.current!.Consumption }}
+                            W
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DashboardItem>
+</template>
+
+<style>
+    .power-current {
+        font-size: 14px;
+        padding: 6px 12px;
+    }
+
+    .power-current-header {
+        font-weight: 500;
+        text-align: right;
+        padding-right: 10px;
+    }
+</style>

WebDisplay/src/components/CurrentWeather.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+    import { useWeatherStore } from '@/stores/weatherStore';
+
+    const weatherStore = useWeatherStore();
+    weatherStore.start();
+
+    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 '';
+    };
+</script>
+
+<template>
+    <DashboardItem title="Weather">
+        <div className="weather-current">
+            <div v-if="!weatherStore.current">Loading...</div>
+            <table v-else>
+                <tbody>
+                    <tr>
+                        <td className="weather-current-header">Temperature</td>
+                        <td>
+                            {{
+                                weatherStore.current?.Temperature?.toFixed(2)
+                            }}°F
+                        </td>
+                    </tr>
+                    <tr v-if="weatherStore.current?.HeatIndex">
+                        <td className="weather-current-header">Heat index</td>
+                        <td>
+                            {{ weatherStore.current?.HeatIndex?.toFixed(2) }}°F
+                        </td>
+                    </tr>
+
+                    <tr v-if="weatherStore.current?.WindChill">
+                        <td className="weather-current-header">Wind chill</td>
+                        <td>
+                            {{ weatherStore.current?.WindChill?.toFixed(2) }}°F
+                        </td>
+                    </tr>
+                    <tr>
+                        <td className="weather-current-header">Humidity</td>
+                        <td>
+                            {{ weatherStore.current?.Humidity?.toFixed(2) }}%
+                        </td>
+                    </tr>
+                    <tr>
+                        <td className="weather-current-header">Dew point</td>
+                        <td>
+                            {{ weatherStore.current?.DewPoint?.toFixed(2) }}°F
+                        </td>
+                    </tr>
+                    <tr>
+                        <td className="weather-current-header">Pressure</td>
+                        <td>
+                            {{
+                                weatherStore.current?.Pressure &&
+                                (
+                                    weatherStore.current?.Pressure /
+                                    33.864 /
+                                    100
+                                )?.toFixed(2)
+                            }}"
+                            <span
+                                class="pressure-trend-arrow"
+                                :class="
+                                    rotationClass(
+                                        weatherStore.current
+                                            ?.PressureDifferenceThreeHour
+                                    )
+                                "
+                                :title="
+                                    '3 Hour Change: ' +
+                                    weatherStore.current?.PressureDifferenceThreeHour?.toFixed(
+                                        1
+                                    )
+                                ">
+                                ➜
+                            </span>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td className="weather-current-header">Wind</td>
+                        <td>
+                            {{ weatherStore.current?.WindSpeed?.toFixed(2) }}
+                            mph {{ weatherStore.current?.WindDirection }}
+                        </td>
+                    </tr>
+                    <tr>
+                        <td className="weather-current-header">Rain</td>
+                        <td>
+                            {{
+                                weatherStore.current?.RainLastHour?.toFixed(2)
+                            }}" (last hour)
+                        </td>
+                    </tr>
+                    <tr>
+                        <td className="weather-current-header">Light</td>
+                        <td>
+                            {{ weatherStore.current?.LightLevel?.toFixed(2) }}
+                            lx
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DashboardItem>
+</template>
+
+<style>
+    .weather-current {
+        font-size: 14px;
+        padding: 6px 12px;
+    }
+
+    .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);
+    }
+</style>

WebDisplay/src/components/DashboardItem.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+    defineProps(['title']);
+</script>
+
+<template>
+    <div class="bg-primary dashboard-item-header">
+        {{ title }}
+    </div>
+    <div class="dashboard-item-content">
+        <slot></slot>
+    </div>
+</template>
+
+<style scoped>
+    .dashboard-item-header {
+        padding: 2px 10px;
+    }
+
+    .dashboard-item-content {
+        background-color: white;
+        border: 1px solid lightgray;
+    }
+</style>

WebDisplay/src/components/almanac/main.scss

@@ -1,24 +0,0 @@
-@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

@@ -1,134 +0,0 @@
-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

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

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

@@ -1,20 +0,0 @@
-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

@@ -1,18 +0,0 @@
-.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

@@ -1,48 +0,0 @@
-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

@@ -1,10 +0,0 @@
-.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

@@ -1,44 +0,0 @@
-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

@@ -1,33 +0,0 @@
-.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

@@ -1,110 +0,0 @@
-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

@@ -1,3 +1,3 @@
 {
-    "API_PREFIX": ""
+    "API_PREFIX": "http://home.kaczorzoo.net"
 }

WebDisplay/src/main.ts

@@ -0,0 +1,14 @@
+import { registerPlugins } from '@/plugins';
+
+import App from './App.vue';
+
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+
+const pinia = createPinia();
+const app = createApp(App);
+
+registerPlugins(app);
+
+app.use(pinia);
+app.mount('#app');

WebDisplay/src/main.tsx

@@ -1,13 +0,0 @@
-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/models/weather/weather-value-grouped.ts

@@ -0,0 +1,4 @@
+export default class WeatherValueGrouped {
+    bucket: string | undefined;
+    averageValue: number | undefined;
+}

WebDisplay/src/models/weather/weather-value-type.ts

@@ -0,0 +1,8 @@
+export enum WeatherValueType {
+    Humidity = 'Humidity',
+    HumidityTemperature = 'HumidityTemperature',
+    PressureTemperature = 'PressureTemperature',
+    Pressure = 'Pressure'
+}
+
+export default WeatherValueType;

WebDisplay/src/models/weather/weather-value.ts

@@ -0,0 +1,4 @@
+export default class WeatherValue {
+    timestamp: string | undefined;
+    value: number | undefined;
+}

WebDisplay/src/pages/index.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+    import CurrentWeather from '../components/CurrentWeather.vue';
+    import CurrentPower from '../components/CurrentPower.vue';
+</script>
+
+<template>
+    <v-container fluid class="container">
+        <v-row align="start">
+            <v-col cols="3">
+                <CurrentWeather></CurrentWeather>
+            </v-col>
+            <v-col cols="3">
+                <Almanac></Almanac>
+            </v-col>
+            <v-col cols="2">
+                <CurrentPower></CurrentPower>
+            </v-col>
+            <v-col cols="2">
+                <CurrentLaundryStatus></CurrentLaundryStatus>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<style scoped>
+    .container {
+        height: 100%;
+        background-color: #fafafa;
+    }
+</style>

WebDisplay/src/pages/inside.vue

@@ -0,0 +1,11 @@
+<template>
+    <v-container class="fill-height">
+        <v-responsive class="align-center text-center fill-height">
+            Inside
+        </v-responsive>
+    </v-container>
+</template>
+
+<script lang="ts" setup>
+    //
+</script>

WebDisplay/src/pages/outside.vue

@@ -0,0 +1,11 @@
+<template>
+    <v-container class="fill-height">
+        <v-responsive class="align-center text-center fill-height">
+            Outside
+        </v-responsive>
+    </v-container>
+</template>
+
+<script lang="ts" setup>
+    //
+</script>

WebDisplay/src/plugins/index.ts

@@ -0,0 +1,8 @@
+import vuetify from './vuetify';
+import router from '../router';
+
+import type { App } from 'vue';
+
+export function registerPlugins(app: App) {
+    app.use(vuetify).use(router);
+}

WebDisplay/src/plugins/vuetify.ts

@@ -0,0 +1,20 @@
+import '@mdi/font/css/materialdesignicons.css';
+import 'vuetify/styles';
+
+import { ThemeDefinition, createVuetify } from 'vuetify';
+
+const theme: ThemeDefinition = {
+    dark: false,
+    colors: {
+        primary: '#602f6b'
+    }
+};
+
+export default createVuetify({
+    theme: {
+        defaultTheme: 'theme',
+        themes: {
+            theme
+        }
+    }
+});

WebDisplay/src/router/index.ts

@@ -0,0 +1,7 @@
+import { createRouter, createWebHistory } from 'vue-router/auto';
+
+const router = createRouter({
+    history: createWebHistory(process.env.BASE_URL)
+});
+
+export default router;

WebDisplay/src/services/laundry/main.ts

@@ -1,64 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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/weather/main.ts

@@ -1,38 +0,0 @@
-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/stores/almanacStore.ts

@@ -0,0 +1,37 @@
+import { defineStore } from 'pinia';
+import * as SunCalc from 'suncalc';
+import WeatherRecent from '@/models/weather/weather-recent';
+import { useWeatherStore } from './weatherStore';
+
+export const useAlmanacStore = defineStore('almanac', {
+    state: () => {
+        return {
+            sunTimes: null as SunCalc.GetTimesResult | null,
+            moonTimes: null as SunCalc.GetMoonTimes | null,
+            moonIllumination: null as SunCalc.GetMoonIlluminationResult | null
+        };
+    },
+    actions: {
+        async load() {
+            const weatherStore = useWeatherStore();
+
+            weatherStore.getLatest().then((weatherRecent: WeatherRecent) => {
+                const date = new Date();
+
+                this.sunTimes = SunCalc.getTimes(
+                    date,
+                    weatherRecent?.latitude!,
+                    weatherRecent?.longitude!
+                );
+
+                this.moonTimes = SunCalc.getMoonTimes(
+                    date,
+                    weatherRecent?.latitude!,
+                    weatherRecent?.longitude!
+                );
+
+                this.moonIllumination = SunCalc.getMoonIllumination(date);
+            });
+        }
+    }
+});

WebDisplay/src/stores/laundryStore.ts

@@ -0,0 +1,78 @@
+import { defineStore } from 'pinia';
+import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
+import axios from 'axios';
+import Environment from '@/environment';
+import LaundryStatus from '@/models/laundry/laundry-status';
+import DeviceMessage from '@/models/laundry/device-message';
+
+export const useLaundryStore = defineStore('laundry', {
+    state: () => {
+        return {
+            current: null as LaundryStatus | null,
+            _connection: null as HubConnection | null
+        };
+    },
+    actions: {
+        async start() {
+            if (this._connection) {
+                return;
+            }
+
+            this._connection = new HubConnectionBuilder()
+                .withUrl(
+                    Environment.getUrlPrefix() + '/api/hub/device-status',
+                    {
+                        withCredentials: false
+                    }
+                )
+                .build();
+
+            await this._connection.start();
+
+            this._connection.on('LatestStatus', (message: string) => {
+                const deviceMessage = JSON.parse(message) as DeviceMessage;
+
+                const newStatus = new LaundryStatus();
+
+                newStatus.dryer = this.current?.dryer;
+                newStatus.washer = this.current?.washer;
+
+                if (deviceMessage.name === 'washer') {
+                    newStatus.washer = deviceMessage.status;
+                } else if (deviceMessage.name === 'dryer') {
+                    newStatus.dryer = deviceMessage.status;
+                }
+
+                this.$patch({ current: newStatus });
+            });
+
+            this._connection.send('RequestLatestStatus');
+        },
+        async stop() {
+            if (!this._connection) {
+                return;
+            }
+
+            await this._connection.stop();
+
+            this._connection = null;
+        },
+        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: DeviceMessage) => {
+                if (deviceMessage.name === 'washer') {
+                    newStatus.washer = deviceMessage.status;
+                } else if (deviceMessage.name === 'dryer') {
+                    newStatus.dryer = deviceMessage.status;
+                }
+            });
+
+            return newStatus;
+        }
+    }
+});

WebDisplay/src/stores/powerStore.ts

@@ -0,0 +1,41 @@
+import { defineStore } from 'pinia';
+import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
+import Environment from '@/environment';
+import PowerStatus from '@/models/power/power-status';
+
+export const usePowerStore = defineStore('power', {
+    state: () => {
+        return {
+            current: null as PowerStatus | null,
+            _connection: null as HubConnection | null
+        };
+    },
+    actions: {
+        async start() {
+            if (this._connection) {
+                return;
+            }
+
+            this._connection = new HubConnectionBuilder()
+                .withUrl(Environment.getUrlPrefix() + '/api/hub/power', {
+                    withCredentials: false
+                })
+                .build();
+
+            await this._connection.start();
+
+            this._connection.on('LatestSample', (message: string) => {
+                this.$patch({ current: JSON.parse(message) });
+            });
+        },
+        async stop() {
+            if (!this._connection) {
+                return;
+            }
+
+            await this._connection.stop();
+
+            this._connection = null;
+        }
+    }
+});

WebDisplay/src/stores/weatherStore.ts

@@ -0,0 +1,68 @@
+import { defineStore } from 'pinia';
+import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
+import axios from 'axios';
+import Environment from '@/environment';
+import WeatherUpdate from '@/models/weather/weather-update';
+import WeatherRecent from '@/models/weather/weather-recent';
+import WeatherValueType from '@/models/weather/weather-value-type';
+import WeatherValueGrouped from '@/models/weather/weather-value-grouped';
+
+export const useWeatherStore = defineStore('weather', {
+    state: () => {
+        return {
+            current: null as WeatherUpdate | null,
+            _connection: null as HubConnection | null
+        };
+    },
+    actions: {
+        async start() {
+            if (this._connection) {
+                return;
+            }
+
+            this._connection = new HubConnectionBuilder()
+                .withUrl(Environment.getUrlPrefix() + '/api/hub/weather', {
+                    withCredentials: false
+                })
+                .build();
+
+            await this._connection.start();
+
+            this._connection.on('LatestReading', (message: string) => {
+                this.$patch({ current: JSON.parse(message) });
+            });
+        },
+        async stop() {
+            if (!this._connection) {
+                return;
+            }
+
+            await this._connection.stop();
+
+            this._connection = null;
+        },
+        async getLatest(): Promise<WeatherRecent> {
+            const response = await axios.get<WeatherRecent>(
+                Environment.getUrlPrefix() + `/api/weather/readings/recent`
+            );
+
+            return response.data;
+        },
+        async getReadingValueHistoryGrouped(
+            valueType: WeatherValueType,
+            start: Date,
+            end: Date,
+            bucketMinutes: number
+        ): Promise<WeatherValueGrouped[]> {
+            const startString = start.toISOString();
+            const endString = end.toISOString();
+
+            const response = await axios.get<WeatherValueGrouped[]>(
+                Environment.getUrlPrefix() +
+                    `/api/weather/readings/value-history-grouped?weatherValueType=${valueType}&start=${startString}&end=${endString}&bucketMinutes=${bucketMinutes}`
+            );
+
+            return response.data;
+        }
+    }
+});

WebDisplay/src/styles/settings.scss

@@ -0,0 +1,3 @@
+html {
+    overflow: auto;
+}

WebDisplay/src/views/dashboard/main.scss

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

WebDisplay/src/views/dashboard/main.tsx

@@ -1,77 +0,0 @@
-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

@@ -1 +1,7 @@
 /// <reference types="vite/client" />
+
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue';
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}