Feature: hide inverter totals if no inverters configured

hoylabs · Dec 1, 2024 · 9b4f3d2 · 9b4f3d2
1 parent 6dde6ae
commit 9b4f3d2
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 5 deletions.
diff --git a/webapp/src/components/InverterTotalInfo.vue b/webapp/src/components/InverterTotalInfo.vue
@@ -1,5 +1,8 @@
 <template>
-    <div class="row row-cols-1 row-cols-md-3 g-3">
+    <BootstrapAlert :show="noTotals" variant="info">
+        <BIconGear class="fs-4" /> {{ $t('hints.NoTotals') }}
+    </BootstrapAlert>
+    <div class="row row-cols-1 row-cols-md-3 g-3" ref="totals-container">
         <div class="col" v-if="totalVeData.enabled">
             <CardElement
                 centerContent
@@ -43,7 +46,7 @@
                 </h2>
             </CardElement>
         </div>
-        <div class="col">
+        <div class="col" v-if="hasInverters">
             <CardElement
                 centerContent
                 textVariant="text-bg-success"
@@ -60,7 +63,7 @@
                 </h2>
             </CardElement>
         </div>
-        <div class="col">
+        <div class="col" v-if="hasInverters">
             <CardElement
                 centerContent
                 textVariant="text-bg-success"
@@ -77,7 +80,7 @@
                 </h2>
             </CardElement>
         </div>
-        <div class="col">
+        <div class="col" v-if="hasInverters">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.InverterTotalPower')">
                 <h2>
                     {{
@@ -186,20 +189,34 @@
 </template>
 
 <script lang="ts">
+import BootstrapAlert from '@/components/BootstrapAlert.vue';
+import { BIconGear } from 'bootstrap-icons-vue';
 import type { Battery, Total, Vedirect, Huawei, PowerMeter } from '@/types/LiveDataStatus';
 import CardElement from './CardElement.vue';
-import { defineComponent, type PropType } from 'vue';
+import { defineComponent, type PropType, useTemplateRef } from 'vue';
 
 export default defineComponent({
     components: {
+        BootstrapAlert,
+        BIconGear,
         CardElement,
     },
     props: {
         totalData: { type: Object as PropType<Total>, required: true },
+        hasInverters: { type: Boolean, required: true },
         totalVeData: { type: Object as PropType<Vedirect>, required: true },
         totalBattData: { type: Object as PropType<Battery>, required: true },
         powerMeterData: { type: Object as PropType<PowerMeter>, required: true },
         huaweiData: { type: Object as PropType<Huawei>, required: true },
     },
+    data() {
+        return {
+            totalsContainer: useTemplateRef<HTMLDivElement>('totals-container'),
+            noTotals: false,
+        };
+    },
+    mounted() {
+        this.noTotals = this.totalsContainer?.children.length === 0 || false;
+    },
 });
 </script>
diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
@@ -873,6 +873,7 @@
         "DiscussionBody": "Diskutieren Sie mit uns auf <a href=\"https://discord.gg/WzhxEY62mB\" target=\"_blank\">Discord</a> oder <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/discussions\" target=\"_blank\">Github</a>."
     },
     "hints": {
+        "NoTotals": "Aktivieren und konfigurieren Sie Funktionen, z.B. die Registrierung eines Inverters, um Daten anzuzeigen",
         "RadioProblem": "Es konnte keine Verbindung zu einem der konfigurierten Funkmodule hergestellt werden. Bitte überprüfen Sie die Verdrahtung.",
         "TimeSync": "Die Uhr wurde noch nicht synchronisiert. Ohne eine korrekt eingestellte Uhr werden keine Anfragen an den Wechselrichter gesendet. Dies ist kurz nach dem Start normal. Nach einer längeren Laufzeit (>1 Minute) bedeutet es jedoch, dass der NTP-Server nicht erreichbar ist.",
         "TimeSyncLink": "Bitte überprüfen Sie Ihre Zeiteinstellungen.",

diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
@@ -876,6 +876,7 @@
         "DiscussionBody": "Discuss with us on <a href=\"https://discord.gg/WzhxEY62mB\" target=\"_blank\">Discord</a> or <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/discussions\" target=\"_blank\">Github</a>."
     },
     "hints": {
+        "NoTotals": "Enable and configure features, e.g., by registering an inverter, to show data.",
         "RadioProblem": "Could not connect to a configured radio module. Please check the wiring.",
         "TimeSync": "The clock has not yet been synchronised. Without a correctly set clock, no requests are made to the inverter. This is normal shortly after the start. However, after a longer runtime (>1 minute), it indicates that the NTP server is not accessible.",
         "TimeSyncLink": "Please check your time settings.",

diff --git a/webapp/src/locales/fr.json b/webapp/src/locales/fr.json
@@ -828,6 +828,7 @@
         "DiscussionBody": "Discutez avec nous sur <a href=\"https://discord.gg/WzhxEY62mB\" target=\"_blank\">Discord</a> ou sur <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/discussions\" target=\"_blank\">Github</a>."
     },
     "hints": {
+        "NoTotals": "Enable and configure features, e.g., by registering an inverter, to show data.",
         "RadioProblem": "Impossible de se connecter à un module radio configuré.. Veuillez vérifier le câblage.",
         "TimeSync": "L'horloge n'a pas encore été synchronisée. Sans une horloge correctement réglée, aucune demande n'est adressée à l'onduleur. Ceci est normal peu de temps après le démarrage. Cependant, après un temps de fonctionnement plus long (>1 minute), cela indique que le serveur NTP n'est pas accessible.",
         "TimeSyncLink": "Veuillez vérifier vos paramètres horaires.",

diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
@@ -10,6 +10,7 @@
         <HintView :hints="liveData.hints" />
         <InverterTotalInfo
             :totalData="liveData.total"
+            :hasInverters="hasInverters"
             :totalVeData="liveData.vedirect"
             :totalBattData="liveData.battery"
             :powerMeterData="liveData.power_meter"
@@ -672,6 +673,9 @@ export default defineComponent({
                 return a.order - b.order;
             });
         },
+        hasInverters(): boolean {
+            return this.liveData?.inverters?.length > 0 || false;
+        },
     },
     methods: {
         isLoggedIn,