Switch new display to Vue

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