From 4cfc891e88825f05df7456712201c64593ba22c3 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Thu, 5 Dec 2024 21:51:33 +0100
Subject: [PATCH] webapp: show precise data age for inverters

since we reduced the DTU polling interval minimum value, it is desirable
to have the data age value increment at the right time point, which is
dependent on the sub-second data age when the data was crafted.
---
 src/WebApi_ws_live.cpp             |  2 +-
 webapp/src/types/LiveDataStatus.ts |  2 +-
 webapp/src/views/HomeView.vue      | 40 ++++++++++++++++++++----------
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/WebApi_ws_live.cpp b/src/WebApi_ws_live.cpp
index 36031a357..02e15aac9 100644
--- a/src/WebApi_ws_live.cpp
+++ b/src/WebApi_ws_live.cpp
@@ -235,7 +235,7 @@ void WebApiWsLiveClass::generateInverterCommonJsonResponse(JsonObject& root, std
     root["serial"] = inv->serialString();
     root["name"] = inv->name();
     root["order"] = inv_cfg->Order;
-    root["data_age"] = (millis() - inv->Statistics()->getLastUpdate()) / 1000;
+    root["data_age_ms"] = millis() - inv->Statistics()->getLastUpdate();
     root["poll_enabled"] = inv->getEnablePolling();
     root["reachable"] = inv->isReachable();
     root["producing"] = inv->isProducing();
diff --git a/webapp/src/types/LiveDataStatus.ts b/webapp/src/types/LiveDataStatus.ts
index 13f93ee7e..70035ba4f 100644
--- a/webapp/src/types/LiveDataStatus.ts
+++ b/webapp/src/types/LiveDataStatus.ts
@@ -35,7 +35,7 @@ export interface Inverter {
     serial: string;
     name: string;
     order: number;
-    data_age: number;
+    data_age_ms: number;
     poll_enabled: boolean;
     reachable: boolean;
     producing: boolean;
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index d1c772097..0aeb7d808 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -96,9 +96,9 @@
                                     </div>
                                     <div style="padding-right: 2em">
                                         {{ $t('home.DataAge') }}
-                                        {{ $t('home.Seconds', { val: $n(inverter.data_age) }) }}
-                                        <template v-if="inverter.data_age > 300">
-                                            / {{ calculateAbsoluteTime(inverter.data_age) }}
+                                        {{ $t('home.Seconds', { val: $n(Math.floor(inverter.data_age_ms / 1000)) }) }}
+                                        <template v-if="inverter.data_age_ms > 300000">
+                                            / {{ calculateAbsoluteTime(inverter.data_age_ms) }}
                                         </template>
                                     </div>
                                 </div>
@@ -574,7 +574,7 @@ export default defineComponent({
 
             socket: {} as WebSocket,
             heartInterval: 0,
-            dataAgeInterval: 0,
+            dataAgeTimers: {} as Record<string, number>,
             dataLoading: true,
             liveData: {} as LiveData,
             isFirstFetchAfterConnect: true,
@@ -619,7 +619,6 @@ export default defineComponent({
     created() {
         this.getInitialData();
         this.initSocket();
-        this.initDataAgeing();
         this.$emitter.on('logged-in', () => {
             this.isLogged = this.isLoggedIn();
         });
@@ -739,8 +738,10 @@ export default defineComponent({
                     );
                     if (foundIdx == -1) {
                         Object.assign(this.liveData.inverters, newData.inverters);
+                        this.liveData.inverters.forEach((inv) => this.resetDataAging(inv));
                     } else {
                         Object.assign(this.liveData.inverters[foundIdx], newData.inverters[0]);
+                        this.resetDataAging(this.liveData.inverters[foundIdx]);
                     }
                     this.dataLoading = false;
                     this.heartCheck(); // Reset heartbeat detection
@@ -767,13 +768,26 @@ export default defineComponent({
                 this.closeSocket();
             };
         },
-        initDataAgeing() {
-            this.dataAgeInterval = setInterval(() => {
-                if (this.inverterData) {
-                    this.inverterData.forEach((element) => {
-                        element.data_age++;
-                    });
-                }
+        resetDataAging(inv: Inverter) {
+            if (this.dataAgeTimers[inv.serial] !== undefined) {
+                clearTimeout(this.dataAgeTimers[inv.serial]);
+            }
+
+            const nextMs = 1000 - (inv.data_age_ms % 1000);
+            this.dataAgeTimers[inv.serial] = setTimeout(() => {
+                this.doDataAging(inv.serial);
+            }, nextMs);
+        },
+        doDataAging(serial: string) {
+            const inv = this.liveData?.inverters?.find((inv) => inv.serial === serial);
+            if (inv === undefined) {
+                return;
+            }
+
+            inv.data_age_ms += 1000;
+
+            this.dataAgeTimers[serial] = setTimeout(() => {
+                this.doDataAging(serial);
             }, 1000);
         },
         // Send heartbeat packets regularly * 59s Send a heartbeat
@@ -952,7 +966,7 @@ export default defineComponent({
                 });
         },
         calculateAbsoluteTime(lastTime: number): string {
-            const date = new Date(Date.now() - lastTime * 1000);
+            const date = new Date(Date.now() - lastTime);
             return this.$d(date, 'datetime');
         },
         getSumIrridiation(inv: Inverter): number {