Start work on new web display

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;