Switch new display to Vue

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;