Color weather and power values if more than 5 seconds old

WebDisplay/package.json

@@ -1,7 +1,7 @@
 {
     "name": "web-display",
     "version": "1.0.0",
-    "packageManager": "pnpm@10.8.1",
+    "packageManager": "pnpm@10.29.3",
     "scripts": {
         "dev": "cross-env NODE_OPTIONS='--no-warnings' vite",
         "build": "vue-tsc --noEmit && vite build",

WebDisplay/src/dateReviver.ts

@@ -0,0 +1,15 @@
+export function dateReviver(key: string, value: any): any {
+    if (key.indexOf('Timestamp') == -1) {
+        return value;
+    }
+
+    if (typeof value === 'string' && value.match(/^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d(?:\.\d+)?(?:Z|[+-]\d\d:\d\d)?$/)) {
+        const date = new Date(value);
+
+        if (!isNaN(date.getTime())) {
+            return date;
+        }
+    }
+
+    return value;
+}

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

@@ -1,4 +1,5 @@
 export default class PowerStatus {
+    Timestamp: Date | undefined;
     Generation: number = 0;
     Consumption: number = 0;
 }

WebDisplay/src/pages/kiosk.vue

@@ -8,6 +8,8 @@
     import LongPressButton from '@/components/LongPressButton.vue';
     import PressureTrendArrow from '@/components/PressureTrendArrow.vue';
 
+    const outOfDateDuration = 5000;
+
     const showFeelsLike = ref(true);
 
     const weatherStore = useWeatherStore();
@@ -50,8 +52,18 @@
         }
     }
 
+    function weatherOutOfDate(): boolean {
+        return weatherStore.current?.Timestamp !== undefined && Date.now() - weatherStore.current.Timestamp.getTime() >= outOfDateDuration;
+    }
+
+    function powerOutOfDate(): boolean {
+        return powerStore.current?.Timestamp !== undefined && Date.now() - powerStore.current.Timestamp.getTime() >= outOfDateDuration;
+    }
+
     function getTemperatureClass(): string {
-        if (showFeelsLike.value && weatherStore.current?.WindChill) {
+        if (weatherOutOfDate()) {
+            return 'out-of-date-reading';
+        } else if (showFeelsLike.value && weatherStore.current?.WindChill) {
             return 'temperature-wind-chill';
         } else if (showFeelsLike.value && weatherStore.current?.HeatIndex) {
             return 'temperature-heat-index';
@@ -109,6 +121,7 @@
             </div>
             <div
                 class="kiosk-humidity text-center pb-3"
+                :class="{ 'out-of-date-reading': weatherOutOfDate() }"
                 v-if="weatherStore.current">
                 <div class="display-item">
                     <span class="display-item-header">Dew Point</span>
@@ -120,6 +133,7 @@
             </div>
             <div
                 class="kiosk-wind text-center pb-3"
+                :class="{ 'out-of-date-reading': weatherOutOfDate() }"
                 v-if="weatherStore.current">
                 <div class="display-item">
                     <span class="display-item-header">Wind</span>
@@ -134,6 +148,7 @@
             </div>
             <div
                 class="kiosk-pressure text-center pb-3"
+                :class="{ 'out-of-date-reading': weatherOutOfDate() }"
                 v-if="weatherStore.current">
                 <div class="display-item">
                     <span class="display-item-header">Pressure</span>
@@ -148,6 +163,7 @@
             </div>
             <div
                 class="kiosk-generation text-center pt-4"
+                :class="{ 'out-of-date-reading': powerOutOfDate() }"
                 v-if="powerStore.current">
                 <v-icon
                     class="kiosk-device-icon"
@@ -158,6 +174,7 @@
             </div>
             <div
                 class="kiosk-consumption text-center pt-4"
+                :class="{ 'out-of-date-reading': powerOutOfDate() }"
                 v-if="powerStore.current">
                 <v-icon
                     class="kiosk-device-icon"
@@ -385,4 +402,8 @@
     .temperature-heat-index {
         color: #ff4d4d;
     }
+
+    .out-of-date-reading {
+        color: #d09f27;
+    }
 </style>

WebDisplay/src/stores/powerStore.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
+import { dateReviver } from '@/dateReviver';
 import axios from 'axios';
 import Environment from '@/environment';
 import PowerStatus from '@/models/power/power-status';
@@ -27,7 +28,7 @@ export const usePowerStore = defineStore('power', {
             await this._connection.start();
 
             this._connection.on('LatestSample', (message: string) => {
-                this.$patch({ current: JSON.parse(message) });
+                this.$patch({ current: JSON.parse(message, dateReviver) });
             });
         },
         async stop() {

WebDisplay/src/stores/weatherStore.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
+import { dateReviver } from '@/dateReviver';
 import axios from 'axios';
 import Environment from '@/environment';
 import WeatherUpdate from '@/models/weather/weather-update';
@@ -32,7 +33,7 @@ export const useWeatherStore = defineStore('weather', {
             await this._connection.start();
 
             this._connection.on('LatestReading', (message: string) => {
-                const json: WeatherUpdate = JSON.parse(message);
+                const json: WeatherUpdate = JSON.parse(message, dateReviver);
 
                 this.$patch({ current: json });
             });