From 93512e2e0c6abb50c06a56b0f29d007f584b4f96 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Mon, 17 Oct 2022 23:31:20 +0200
Subject: [PATCH] webapp: create interface for LiveDataStatus

---
 webapp/src/components/InverterChannelInfo.vue | 17 ++++++----
 webapp/src/types/LiveDataStatus.ts            | 33 +++++++++++++++++++
 webapp/src/views/HomeView.vue                 | 15 ++-------
 3 files changed, 45 insertions(+), 20 deletions(-)
 create mode 100644 webapp/src/types/LiveDataStatus.ts

diff --git a/webapp/src/components/InverterChannelInfo.vue b/webapp/src/components/InverterChannelInfo.vue
index ffa5320c..1392c6da 100644
--- a/webapp/src/components/InverterChannelInfo.vue
+++ b/webapp/src/components/InverterChannelInfo.vue
@@ -13,9 +13,11 @@
                 </thead>
                 <tbody>
                     <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
-                        <th scope="row">{{ key }}</th>
-                        <td style="text-align: right">{{ formatNumber(property.v) }}</td>
-                        <td>{{ property.u }}</td>
+                        <template v-if="property">
+                            <th scope="row">{{ key }}</th>
+                            <td style="text-align: right">{{ formatNumber(property.v) }}</td>
+                            <td>{{ property.u }}</td>
+                        </template>
                     </tr>
                 </tbody>
             </table>
@@ -24,18 +26,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, type PropType } from 'vue';
+import type { InverterStatistics } from '@/types/LiveDataStatus';
 
 export default defineComponent({
     props: {
-        channelData: Object,
+        channelData: { type: Object as PropType<InverterStatistics>, required: true },
         channelNumber: { type: Number, required: true },
     },
     methods: {
-        formatNumber(num: string) {
+        formatNumber(num: number) {
             return new Intl.NumberFormat(
                 undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }
-            ).format(parseFloat(num));
+            ).format(num);
         },
     },
 });
diff --git a/webapp/src/types/LiveDataStatus.ts b/webapp/src/types/LiveDataStatus.ts
new file mode 100644
index 00000000..a8b00f4c
--- /dev/null
+++ b/webapp/src/types/LiveDataStatus.ts
@@ -0,0 +1,33 @@
+export interface ValueObject {
+    v: number, // value
+    u: string, // unit
+};
+
+export interface InverterStatistics {
+    Power?: ValueObject,
+    Voltage?: ValueObject,
+    Current?: ValueObject,
+    "Power DC"?: ValueObject,
+    YieldDay?: ValueObject,
+    YieldTotal?: ValueObject,
+    Frequency?: ValueObject,
+    Temperature?: ValueObject,
+    PowerFactor?: ValueObject,
+    ReactivePower?: ValueObject,
+    Efficiency?: ValueObject,
+    Irradiation?: ValueObject,
+}
+
+export interface Inverter {
+    serial: number,
+    name: string,
+    data_age: number,
+    reachable: boolean,
+    producing: boolean,
+    limit_relative: number,
+    limit_absolute: number,
+    events: number,
+    [key: number]: InverterStatistics,
+};
+
+export interface Inverters extends Array<Inverter>{};
\ No newline at end of file
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index 0c575741..a317e1bf 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -343,18 +343,7 @@ import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import InverterChannelInfo from "@/components/InverterChannelInfo.vue";
 import type { DevInfoStatus } from '@/types/DevInfoStatus';
 import type { EventlogItems } from '@/types/EventlogStatus';
-
-declare interface Inverter {
-    serial: number,
-    name: string,
-    reachable: boolean,
-    producing: boolean,
-    limit_relative: 0,
-    limit_absolute: 0,
-    data_age: 0,
-    events: 0,
-    [key: number]: any,
-}
+import type { Inverters } from '@/types/LiveDataStatus';
 
 export default defineComponent({
     components: {
@@ -379,7 +368,7 @@ export default defineComponent({
             heartInterval: 0,
             dataAgeInterval: 0,
             dataLoading: true,
-            inverterData: [] as Inverter[],
+            inverterData: [] as Inverters,
             isFirstFetchAfterConnect: true,
             eventLogView: {} as bootstrap.Modal,
             eventLogList: {} as EventlogItems,