From 4c9e9011ec657e5a7689fb85b345d16b3fb574b2 Mon Sep 17 00:00:00 2001
From: MartinRinas <martrin@microsoft.com>
Date: Fri, 7 Mar 2025 20:41:57 +0000
Subject: [PATCH 1/2] livestatus view

---
 .../web_themes/koala/source/package-lock.json |   7 +
 .../web_themes/koala/source/package.json      |   1 +
 .../source/src/components/ChartCarousel.vue   |   5 +
 .../charts/livestatus/LiveStatus.vue          | 245 ++++++++++++++++++
 .../source/src/css/quasar.variables.scss      |  34 ++-
 5 files changed, 285 insertions(+), 7 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/charts/livestatus/LiveStatus.vue

diff --git a/packages/modules/web_themes/koala/source/package-lock.json b/packages/modules/web_themes/koala/source/package-lock.json
index fb3ee1aa86..2c65ce1ad5 100644
--- a/packages/modules/web_themes/koala/source/package-lock.json
+++ b/packages/modules/web_themes/koala/source/package-lock.json
@@ -8,6 +8,7 @@
       "name": "openwb-koala-web-theme",
       "version": "0.0.1",
       "dependencies": {
+        "@mdi/js": "^7.4.47",
         "@quasar/extras": "^1.16.12",
         "chart.js": "^4.4.8",
         "chartjs-adapter-luxon": "^1.3.1",
@@ -2716,6 +2717,12 @@
       "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
       "license": "MIT"
     },
+    "node_modules/@mdi/js": {
+      "version": "7.4.47",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
+      "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/packages/modules/web_themes/koala/source/package.json b/packages/modules/web_themes/koala/source/package.json
index 03456e3c6d..1bc29aac71 100644
--- a/packages/modules/web_themes/koala/source/package.json
+++ b/packages/modules/web_themes/koala/source/package.json
@@ -14,6 +14,7 @@
     "build": "quasar build"
   },
   "dependencies": {
+    "@mdi/js": "^7.4.47",
     "@quasar/extras": "^1.16.12",
     "chart.js": "^4.4.8",
     "chartjs-adapter-luxon": "^1.3.1",
diff --git a/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue b/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
index e5c112005d..67d3864e23 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
@@ -46,6 +46,7 @@ import { ref } from 'vue';
 import { useQuasar } from 'quasar';
 import EnergyFlowChart from './charts/energyFlowChart/EnergyFlowChart.vue';
 import HistoryChart from './charts/historyChart/HistoryChart.vue';
+import LiveStatus from './charts/livestatus/LiveStatus.vue';
 
 defineOptions({
   name: 'ChartCarousel',
@@ -68,6 +69,10 @@ const chartCarouselItems = [
     name: 'HistoryChart',
     component: HistoryChart,
   },
+  {
+    name: 'LiveStatus',
+    component: LiveStatus,
+  },
 ];
 const currentSlide = ref<string>(chartCarouselItems[0].name);
 </script>
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/livestatus/LiveStatus.vue b/packages/modules/web_themes/koala/source/src/components/charts/livestatus/LiveStatus.vue
new file mode 100644
index 0000000000..0a59a15c59
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/charts/livestatus/LiveStatus.vue
@@ -0,0 +1,245 @@
+<template>
+    <div class="custom-width">
+        <div class="card-container">
+          <!-- PV Card -->
+          <q-card v-if="hasPV" class="item pv" flat>
+              <div class="header">PV</div>
+              <div class="row">
+                <div class="col text-value">
+             {{ formatValue(pvPower*-1) }}W
+                </div>
+                <div class="col icon-container">
+                  <q-badge rounded class="pv-background">
+                    <q-icon name="solar_power" style="font-size: 24px;" class="pv-color" />
+                    <q-tooltip class="bg-primary">Phasenanzahl</q-tooltip>
+                  </q-badge>
+                </div>
+              </div>
+          </q-card>
+  
+          <!-- Grid Card -->
+          <q-card class="item grid" flat>
+              <div class="header" >Netz</div>
+              <div class="row">
+                <div class="col text-value" >
+                  {{ formatValue(gridPower) }}W
+                </div>
+                <div class="col icon-container">
+                  <q-badge rounded class="grid-background">
+                    <q-icon :name="mdiTransmissionTower" style="font-size: 24px;" class="grid-color"/>
+                    <q-tooltip class="bg-primary">EVU</q-tooltip>
+                  </q-badge>
+                </div>
+              </div>
+  
+          </q-card>
+  
+          <!-- House Card -->
+          <q-card class="item house" flat>
+              <div class="header" >Haus</div>
+              <div class="row">
+                <div class="col text-value">
+                  {{ formatValue(homePower)}}W
+                </div>
+                <div class="col icon-container">
+                  <q-badge rounded class="house-background">
+                    <q-icon name="home" style="font-size: 24px;" class="house-color" />
+                    <q-tooltip class="bg-primary">gesamter Hausverbrauch heute:<br></q-tooltip>
+                  </q-badge>
+                </div>
+              </div>
+          </q-card>
+  
+          <!-- Battery Card -->
+          <q-card v-if="hasBattery" class="item battery" flat>
+              <div class="header" >Speicher</div>
+              <div class="row">
+                <div class="col text-value" style="font-size: 14px;">
+                  {{ formatValue(batteryPower) }}W<br />
+                  {{ (batterySoc * 100).toFixed(0) }}%
+                </div>
+                <div class="col icon-container">
+                  <q-badge rounded class="battery-background">
+                    <q-icon name="battery_charging_full" style="font-size: 24px;" class="battery-color" />
+                    <q-tooltip class="bg-primary">Speicher</q-tooltip>
+                  </q-badge>
+                </div>
+              </div>
+          </q-card>
+  
+          <!-- EV Card -->
+          <q-card class="item ev" flat>
+              <div class="header">Ladepunkte</div>
+              <div class="row">
+                <div class="col text-value">
+                  {{ formatValue(evPower) }}W
+                </div>
+                <div class="col icon-container">
+                  <q-badge rounded class="ev-background">
+                    <q-icon name="ev_station" style="font-size: 24px;" class="ev-color" />
+                    <q-tooltip class="bg-primary">Ladepunkte</q-tooltip>
+                  </q-badge>
+                </div>
+              </div>
+          </q-card>
+        </div>
+      
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { onMounted, computed } from 'vue';
+  import { QCard, QIcon } from 'quasar';
+  import { useMqttStore } from 'src/stores/mqtt-store';
+  import { mdiTransmissionTower} from '@mdi/js';
+  
+  const mqttStore = useMqttStore();
+  
+  const gridPower = computed(
+    () => mqttStore.getGridPower('value') as number,
+  );
+  
+  const hasBattery = computed( 
+    () => mqttStore.batteryConfigured as boolean,
+  );
+  
+  const hasPV = computed(
+    () => mqttStore.getPvConfigured as boolean,
+  );
+  
+  const batteryPower = computed(() => mqttStore.batteryTotalPower('value') as number);
+  const batterySoc = computed(() => Number(mqttStore.batterySocTotal) / 100);
+  const homePower = computed(
+    () => mqttStore.getHomePower('value') as number,
+  );
+  const pvPower = computed(() => mqttStore.getPvPower('value') as number);
+  const evPower = computed(() => mqttStore.chargePointSumPower('value') as number);
+  
+  const formatValue = (value: number) => {
+    if (Math.abs(value) >= 1000) {
+      return (value / 1000).toFixed(1) + 'k';
+    }
+    return value.toString();
+  };
+  
+  onMounted(() => {
+    //const interval = setInterval(fetchData, 5000);
+    //onUnmounted(() => clearInterval(interval));
+  });
+  </script>
+  
+  <style scoped>
+  .card-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: 10px;
+  }
+  
+  .item {
+    flex: 1 1 calc(50% - 20px); /* Adjust the width of the cards */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 5px;
+  }
+  
+  .item.pv {
+    flex: 1 1 100%; /* Make the PV card span the entire row */
+    border-left: 8px solid var(--pv-color); /* Add left border with pv-color */
+  }
+  
+  .item.grid {
+    border-left: 8px solid var(--grid-color);
+  }
+  
+  .item.house {
+    border-left: 8px solid var(--house-color);
+  }
+  
+  .item.battery {
+    border-left: 8px solid var(--battery-color);
+  }
+  
+  .item.ev {
+    border-left: 8px solid var(--ev-color);
+  }
+  
+  .header {
+    font-size: 14px;
+    color: #888;
+    text-align: left;
+    width: 100%;
+  }
+  
+  .row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+  
+  .text-value {
+    font-size: 24px;
+    font-weight: bold;
+    text-align: left;
+  }
+  
+  .icon-container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  
+  .q-icon {
+    font-size: 20px;
+  }
+  
+  .custom-width {
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto; /* Center the card horizontally */
+  }
+  
+  /* Define color classes */
+  .pv-background {
+    background-color: var(--pv-background);
+  }
+  
+  .pv-color {
+    color: var(--pv-color);
+  }
+  
+  .grid-background {
+    background-color: var(--grid-background);
+  }
+  
+  .grid-color {
+    color: var(--grid-color);
+  }
+  
+  .house-background {
+    background-color: var(--house-background);
+  }
+  
+  .house-color {
+    color: var(--house-color);
+  }
+  
+  .battery-background {
+    background-color: var(--battery-background);
+  }
+  
+  .battery-color {
+    color: var(--battery-color);
+  }
+  
+  .ev-background {
+    background-color: var(--ev-background);
+  }
+  
+  .ev-color {
+    color: var(--ev-color);
+  }
+  </style>
\ No newline at end of file
diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index 42a1018f06..6691e2db33 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -58,6 +58,16 @@ $battery: #ba7128;
   background-color: var(--q-background-1);
   // Text color
   color: var(--q-brown-text);
+  --pv-color: green;
+  --grid-color: #a33c42;
+  --house-color: #949aa1;
+  --battery-color: #b5a647;
+  --ev-color: #4766b5;
+  --pv-background: rgba(144, 238, 144, 0.2);
+  --grid-background: rgba(239, 182, 188, 0.2);
+  --house-background: rgba(148, 154, 161, 0.2);
+  --battery-background: rgba(181, 166, 71, 0.2);
+  --ev-background: rgba(71, 102, 181, 0.2);
   .theme-text {
     color: var(--q-brown-text) !important;
   }
@@ -112,9 +122,9 @@ $battery: #ba7128;
     background-color: var(--q-background-2);
   }
   // Slide background
-  .q-card {
-    background-color: var(--q-secondary);
-  }
+  //.q-card {
+  //  background-color: var(--q-secondary);
+  //}
   // Expansion item (expand arrow)
   .q-expansion-item__toggle-icon {
     color: var(--q-white);
@@ -169,6 +179,16 @@ $dark-tab-icon: #d7d9e0;
   background-color: $dark-page;
   // Text color
   color: var(--q-white);
+  --pv-color: green;
+  --grid-color: #a33c42;
+  --house-color: #949aa1;
+  --battery-color: #b5a647;
+  --ev-color: #4766b5;
+  --pv-background: rgba(144, 238, 144, 0.2);
+  --grid-background: rgba(239, 182, 188, 0.2);
+  --house-background: rgba(148, 154, 161, 0.2);
+  --battery-background: rgba(181, 166, 71, 0.2);
+  --ev-background: rgba(71, 102, 181, 0.2);
   .theme-text {
     color: var(--q-white) !important;
   }
@@ -226,10 +246,10 @@ $dark-tab-icon: #d7d9e0;
     color: var(--q-white);
   }
   // Slide background
-  .q-card {
-    background-color: var(--q-secondary);
-    color: var(--q-white);
-  }
+  //.q-card {
+  //  background-color: var(--q-secondary);
+  //  color: var(--q-white);
+  //}
   // Input field text label color
   .q-field__label {
     color: var(--q-white);

From 61d03075d1d66d9590840538889b49ea4806ebfe Mon Sep 17 00:00:00 2001
From: MartinRinas <martrin@microsoft.com>
Date: Fri, 7 Mar 2025 20:45:05 +0000
Subject: [PATCH 2/2] remove tooltip, to be added later with daily yield

---
 .../source/src/components/charts/livestatus/LiveStatus.vue   | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/livestatus/LiveStatus.vue b/packages/modules/web_themes/koala/source/src/components/charts/livestatus/LiveStatus.vue
index 0a59a15c59..537d16e8a2 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/livestatus/LiveStatus.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/livestatus/LiveStatus.vue
@@ -11,7 +11,6 @@
                 <div class="col icon-container">
                   <q-badge rounded class="pv-background">
                     <q-icon name="solar_power" style="font-size: 24px;" class="pv-color" />
-                    <q-tooltip class="bg-primary">Phasenanzahl</q-tooltip>
                   </q-badge>
                 </div>
               </div>
@@ -27,7 +26,6 @@
                 <div class="col icon-container">
                   <q-badge rounded class="grid-background">
                     <q-icon :name="mdiTransmissionTower" style="font-size: 24px;" class="grid-color"/>
-                    <q-tooltip class="bg-primary">EVU</q-tooltip>
                   </q-badge>
                 </div>
               </div>
@@ -44,7 +42,6 @@
                 <div class="col icon-container">
                   <q-badge rounded class="house-background">
                     <q-icon name="home" style="font-size: 24px;" class="house-color" />
-                    <q-tooltip class="bg-primary">gesamter Hausverbrauch heute:<br></q-tooltip>
                   </q-badge>
                 </div>
               </div>
@@ -61,7 +58,6 @@
                 <div class="col icon-container">
                   <q-badge rounded class="battery-background">
                     <q-icon name="battery_charging_full" style="font-size: 24px;" class="battery-color" />
-                    <q-tooltip class="bg-primary">Speicher</q-tooltip>
                   </q-badge>
                 </div>
               </div>
@@ -77,7 +73,6 @@
                 <div class="col icon-container">
                   <q-badge rounded class="ev-background">
                     <q-icon name="ev_station" style="font-size: 24px;" class="ev-color" />
-                    <q-tooltip class="bg-primary">Ladepunkte</q-tooltip>
                   </q-badge>
                 </div>
               </div>