webapp: create interface for LiveDataStatus

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>
+                        <template v-if="property">
-                        <td style="text-align: right">{{ formatNumber(property.v) }}</td>
+                            <th scope="row">{{ key }}</th>
-                        <td>{{ property.u }}</td>
+                            <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);
         },
     },
 });

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>{};

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';
-
+import type { Inverters } from '@/types/LiveDataStatus';
-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,
-}
 
 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,