BREAKING CHANGE: Web API!

In order to support multiple AC channels in future the WebAPI had to be changed. AC and DC channels are now grouped in a sub object containing the channels beginning with 0.

webapp/src/components/InverterChannelInfo.vue

@@ -1,11 +1,21 @@
 <template>
-    <div class="card" :class="{ 'border-info': channelNumber == 0 }">
-        <div v-if="channelNumber >= 1" class="card-header">
-            <template v-if="channelData.name.u != ''">{{ channelData.name.u }}</template>
-            <template v-else>{{ $t('inverterchannelinfo.String', { num: channelNumber }) }}</template>
+    <div class="card" :class="{
+        'border-info': channelType == 'AC',
+        'border-secondary': channelType == 'INV'
+    }">
+        <div v-if="channelType == 'INV'" class="card-header text-bg-secondary">
+            {{ $t('inverterchannelinfo.General') }}
         </div>
-        <div v-if="channelNumber == 0" class="card-header text-bg-info">
-            {{ $t('inverterchannelinfo.Phase', { num: channelNumber + 1 }) }}</div>
+
+        <div v-if="channelType == 'DC'" class="card-header">
+            <template v-if="channelData.name.u != ''">{{ channelData.name.u }}</template>
+            <template v-else>{{ $t('inverterchannelinfo.String', { num: channelNumber + 1 }) }}</template>
+        </div>
+
+        <div v-if="channelType == 'AC'" class="card-header text-bg-info">
+            {{ $t('inverterchannelinfo.Phase', { num: channelNumber + 1 }) }}
+        </div>
+
         <div class="card-body">
             <table class="table table-striped table-hover">
                 <thead>
@@ -21,10 +31,10 @@
                             <th scope="row">{{ $t('inverterchannelproperty.' + key) }}</th>
                             <td style="text-align: right">
                                 {{ $n(property.v, 'decimal', {
-                                    minimumFractionDigits: property.d,
-                                    maximumFractionDigits: property.d})
+                                      minimumFractionDigits: property.d,
+                                      maximumFractionDigits: property.d})
                                 }}
-                             </td>
+                            </td>
                             <td>{{ property.u }}</td>
                         </template>
                     </tr>
@@ -41,6 +51,7 @@ import { defineComponent, type PropType } from 'vue';
 export default defineComponent({
     props: {
         channelData: { type: Object as PropType<InverterStatistics>, required: true },
+        channelType: { type: String, required: true },
         channelNumber: { type: Number, required: true },
     },
 });

webapp/src/locales/de.json

@@ -263,6 +263,7 @@
     "inverterchannelinfo": {
         "String": "String {num}",
         "Phase": "Phase {num}",
+        "General": "Allgemein",
         "Property": "Eigenschaft",
         "Value": "Wert",
         "Unit": "Einheit"

webapp/src/locales/en.json

@@ -263,6 +263,7 @@
     "inverterchannelinfo": {
         "String": "String {num}",
         "Phase": "Phase {num}",
+        "General": "General",
         "Property": "Property",
         "Value": "Value",
         "Unit": "Unit"

webapp/src/locales/fr.json

@@ -263,6 +263,7 @@
     "inverterchannelinfo": {
         "String": "Ligne {num}",
         "Phase": "Phase {num}",
+        "General": "General",
         "Property": "Propriété",
         "Value": "Valeur",
         "Unit": "Unité"

webapp/src/types/LiveDataStatus.ts

@@ -29,7 +29,9 @@ export interface Inverter {
     limit_relative: number;
     limit_absolute: number;
     events: number;
-    [key: number]: InverterStatistics;
+    AC: InverterStatistics[];
+    DC: InverterStatistics[];
+    INV: InverterStatistics[];
 }
 
 export interface Total {

webapp/src/views/HomeView.vue

@@ -92,11 +92,12 @@
                             </div>
                         </div>
                         <div class="card-body">
-                            <div class="row flex-row-reverse flex-wrap-reverse align-items-end g-3">
-                                <template v-for="channel in 5" :key="channel">
-                                    <div v-if="inverter[channel - 1]" :class="`col order-${5 - channel}`">
-                                        <InverterChannelInfo :channelData="inverter[channel - 1]"
-                                            :channelNumber="channel - 1" />
+                            <div class="row flex-row-reverse flex-wrap-reverse g-3">
+                                <template v-for="chanType in [{obj: inverter.INV, name: 'INV'}, {obj: inverter.AC, name: 'AC'}, {obj: inverter.DC, name: 'DC'}].reverse()">
+                                    <div v-for="channel in Object.keys(chanType.obj).sort().reverse().map(x=>+x)" :key="channel" class="col">
+                                        <InverterChannelInfo :channelData="chanType.obj[channel]"
+                                            :channelType="chanType.name"
+                                            :channelNumber="channel" />
                                     </div>
                                 </template>
                             </div>