Webinterface updates

webapp/src/components/InverterTotalInfo.vue

@@ -1,8 +1,54 @@
 <template>
+  <div v-show="totalVeData.enabled">
     <div class="row row-cols-1 row-cols-md-3 g-3">
       <div class="col">
         <div class="card">
-                <div class="card-header text-bg-success">{{ $t('invertertotalinfo.TotalYieldTotal') }}</div>
+          <div class="card-header text-bg-success">{{ $t('invertertotalinfo.MpptTotalYieldTotal') }}</div>
+          <div class="card-body card-text text-center">
+            <h2>
+              {{ $n(totalVeData.total.YieldTotal.v, 'decimal', {
+                minimumFractionDigits: totalVeData.total.YieldTotal.d,
+                maximumFractionDigits: totalVeData.total.YieldTotal.d
+              }) }}
+              <small class="text-muted">{{ totalVeData.total.YieldTotal.u }}</small>
+            </h2>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card">
+          <div class="card-header text-bg-success">{{ $t('invertertotalinfo.MpptTotalYieldDay') }}</div>
+          <div class="card-body card-text text-center">
+            <h2>
+              {{ $n(totalVeData.total.YieldDay.v, 'decimal', {
+                minimumFractionDigits: totalVeData.total.YieldDay.d,
+                maximumFractionDigits: totalVeData.total.YieldDay.d
+              }) }}
+              <small class="text-muted">{{ totalVeData.total.YieldDay.u }}</small>
+            </h2>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card">
+          <div class="card-header text-bg-success">{{ $t('invertertotalinfo.MpptTotalPower') }}</div>
+          <div class="card-body card-text text-center">
+            <h2>
+              {{ $n(totalVeData.total.Power.v, 'decimal', {
+                minimumFractionDigits: totalVeData.total.Power.d,
+                maximumFractionDigits: totalVeData.total.Power.d
+              }) }}
+              <small class="text-muted">{{ totalVeData.total.Power.u }}</small>
+            </h2>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row row-cols-1 row-cols-md-3 g-3">
+    <div class="col">
+      <div class="card">
+        <div class="card-header text-bg-success">{{ $t('invertertotalinfo.InverterTotalYieldTotal') }}</div>
         <div class="card-body card-text text-center">
           <h2>
             {{ $n(totalData.YieldTotal.v, 'decimal', {
@@ -16,7 +62,7 @@
     </div>
     <div class="col">
       <div class="card">
-                <div class="card-header text-bg-success">{{ $t('invertertotalinfo.TotalYieldDay') }}</div>
+        <div class="card-header text-bg-success">{{ $t('invertertotalinfo.InverterTotalYieldDay') }}</div>
         <div class="card-body card-text text-center">
           <h2>
             {{ $n(totalData.YieldDay.v, 'decimal', {
@@ -30,7 +76,7 @@
     </div>
     <div class="col">
       <div class="card">
-                <div class="card-header text-bg-success">{{ $t('invertertotalinfo.TotalPower') }}</div>
+        <div class="card-header text-bg-success">{{ $t('invertertotalinfo.InverterTotalPower') }}</div>
         <div class="card-body card-text text-center">
           <h2>
             {{ $n(totalData.Power.v, 'decimal', {
@@ -43,15 +89,35 @@
       </div>
     </div>
   </div>
+  <div v-show="totalBattData.enabled">
+    <div class="row row-cols-1 row-cols-md-3 g-3">
+      <div class="col">
+        <div class="card">
+          <div class="card-header text-bg-success">{{ $t('invertertotalinfo.BatterySoc') }}</div>
+          <div class="card-body card-text text-center">
+            <h2>
+              {{ $n(totalBattData.soc.v, 'decimal', {
+                minimumFractionDigits: totalBattData.soc.d,
+                maximumFractionDigits: totalBattData.soc.d
+              }) }}
+              <small class="text-muted">{{ totalBattData.soc.u }}</small>
+            </h2>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-import type { Total } from '@/types/LiveDataStatus';
+import type { Battery, Total, Vedirect } from '@/types/LiveDataStatus';
 import { defineComponent, type PropType } from 'vue';
 
 export default defineComponent({
   props: {
     totalData: { type: Object as PropType<Total>, required: true },
+    totalVeData: { type: Object as PropType<Vedirect>, required: true },
+    totalBattData: { type: Object as PropType<Battery>, required: true },
   },
 });
 </script>

webapp/src/locales/de.json

@@ -325,9 +325,13 @@
         "Unit": "Einheit"
     },
     "invertertotalinfo": {
-        "TotalYieldTotal": "Gesamtertrag Insgesamt",
+        "InverterTotalYieldTotal": "Inverter Gesamtertrag Insgesamt",
-        "TotalYieldDay": "Gesamtertrag Heute",
+        "InverterTotalYieldDay": "Inverter Gesamtertrag Heute",
-        "TotalPower": "Gesamtleistung"
+        "InverterTotalPower": "Inverter Gesamtleistung",
+        "MpptTotalYieldTotal": "MPPT Gesamtertrag Insgesamt",
+        "MpptTotalYieldDay": "MPPT Gesamtertrag Heute",
+        "MpptTotalPower": "MPPT Gesamtleistung",
+        "BatterySoc": "Ladezustand"
     },
     "inverterchannelproperty": {
         "Power": "Leistung",

webapp/src/locales/en.json

@@ -325,9 +325,13 @@
         "Unit": "Unit"
     },
     "invertertotalinfo": {
-        "TotalYieldTotal": "Total Yield Total",
+        "InverterTotalYieldTotal": "Inverter Total Yield Total",
-        "TotalYieldDay": "Total Yield Day",
+        "InverterTotalYieldDay": "Inverter Total Yield Day",
-        "TotalPower": "Total Power"
+        "InverterTotalPower": "Inverter Total Power",
+        "MpptTotalYieldTotal": "MPPT Total Yield Total",
+        "MpptTotalYieldDay": "MPPT Total Yield Day",
+        "MpptTotalPower": "MPPT Total Power",
+        "BatterySoc": "State of charge"
     },
     "inverterchannelproperty": {
         "Power": "Power",

webapp/src/locales/fr.json

@@ -324,9 +324,13 @@
         "Unit": "Unité"
     },
     "invertertotalinfo": {
-        "TotalYieldTotal": "Rendement total",
+        "InverterTotalYieldTotal": "Onduleurs rendement total",
-        "TotalYieldDay": "Rendement du jour",
+        "InverterTotalYieldDay": "Onduleurs rendement du jour",
-        "TotalPower": "Puissance de l'installation"
+        "InverterTotalPower": "Onduleurs puissance de l'installation",
+        "MpptTotalYieldTotal": "MPPT rendement total",
+        "MpptTotalYieldDay": "MPPT rendement du jour",
+        "MpptTotalPower": "MPPT puissance de l'installation",
+        "BatterySoc": "State of charge"
     },
     "inverterchannelproperty": {
         "Power": "Puissance",

webapp/src/types/LiveDataStatus.ts

@@ -48,6 +48,7 @@ export interface Hints {
 
 export interface Vedirect {
     enabled: boolean;
+    total: Total;
 }
 
 export interface Huawei {
@@ -56,6 +57,7 @@ export interface Huawei {
 
 export interface Battery {
   enabled: boolean;
+  soc: ValueObject;
 }
 
 export interface LiveData {

webapp/src/views/HomeView.vue

@@ -1,7 +1,7 @@
 <template>
     <BasePage :title="$t('home.LiveData')" :isLoading="dataLoading" :isWideScreen="true">
         <HintView :hints="liveData.hints" />
-        <InverterTotalInfo :totalData="liveData.total" /><br />
+        <InverterTotalInfo :totalData="liveData.total" :totalVeData="liveData.vedirect" :totalBattData="liveData.battery"/><br />
         <div class="row gy-3">
             <div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { 'display': 'none' } : {}]">
                 <div class="nav nav-pills row-cols-sm-1" id="v-pills-tab" role="tablist" aria-orientation="vertical">