From 8f60a3a12a14168b5f990fe74f36c326fb57121f Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Wed, 18 Dec 2024 21:21:10 +0100
Subject: [PATCH] Feature: Show inverter status and current power in overview
 (if multiple inverters are available)

---
 webapp/src/views/HomeView.vue | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index dd2da79d..b52f2507 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -31,12 +31,22 @@
                     >
                         <div class="d-flex align-items-center">
                             <div class="me-2">
-                                <BIconXCircleFill class="fs-4" v-if="!inverter.reachable" />
-                                <BIconExclamationCircleFill
-                                    class="fs-4"
-                                    v-if="inverter.reachable && !inverter.producing"
-                                />
-                                <BIconCheckCircleFill class="fs-4" v-if="inverter.reachable && inverter.producing" />
+                                <span
+                                    v-if="inverter.AC"
+                                    class="badge"
+                                    :class="{
+                                        'text-bg-secondary': !inverter.poll_enabled,
+                                        'text-bg-danger': inverter.poll_enabled && !inverter.reachable,
+                                        'text-bg-warning':
+                                            inverter.poll_enabled && inverter.reachable && !inverter.producing,
+                                        'text-bg-success':
+                                            inverter.poll_enabled && inverter.reachable && inverter.producing,
+                                    }"
+                                >
+                                    {{ $n(inverter.AC[0]?.Power?.v || 0, 'decimalNoDigits') }}
+                                    {{ inverter.AC[0].Power?.u }}
+                                </span>
+                                <span v-else class="badge text-bg-light">-</span>
                             </div>
                             <div class="ms-auto me-auto">
                                 {{ inverter.name }}
@@ -513,9 +523,7 @@ import * as bootstrap from 'bootstrap';
 import {
     BIconArrowCounterclockwise,
     BIconBroadcast,
-    BIconCheckCircleFill,
     BIconCpu,
-    BIconExclamationCircleFill,
     BIconInfoCircle,
     BIconJournalText,
     BIconOutlet,
@@ -523,7 +531,6 @@ import {
     BIconSpeedometer,
     BIconToggleOff,
     BIconToggleOn,
-    BIconXCircleFill,
 } from 'bootstrap-icons-vue';
 import { defineComponent } from 'vue';
 
@@ -540,9 +547,7 @@ export default defineComponent({
         ModalDialog,
         BIconArrowCounterclockwise,
         BIconBroadcast,
-        BIconCheckCircleFill,
         BIconCpu,
-        BIconExclamationCircleFill,
         BIconInfoCircle,
         BIconJournalText,
         BIconOutlet,
@@ -550,7 +555,6 @@ export default defineComponent({
         BIconSpeedometer,
         BIconToggleOff,
         BIconToggleOn,
-        BIconXCircleFill,
     },
     data() {
         return {