From 7d022c21eb16f2ad67c5af937a17de126ae35996 Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Fri, 25 Jul 2025 09:58:36 +0200
Subject: [PATCH 1/3] cleanup

---
 .../source/src/components/BaseCarousel.vue    |  2 +-
 .../source/src/components/BatteryCard.vue     | 34 +++++++++----------
 .../src/components/BatteryInformation.vue     | 13 ++++---
 .../koala/source/src/pages/IndexPage.vue      |  6 ++--
 4 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
index b4d20a0014..f878c9a988 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
@@ -10,7 +10,7 @@
     padding
     :navigation="groupedItems.length > 1"
     :arrows="groupedItems.length > 1 && $q.screen.gt.xs"
-    class="carousel-height q-mt-md"
+    class="carousel-height"
     transition-next="slide-left"
     transition-prev="slide-right"
     @mousedown.prevent
diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
index dc287d4563..31d2edaaab 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -1,16 +1,12 @@
 <template>
-  <q-card ref="cardRef" class="full-height card-width">
+  <q-card
+    ref="cardRef"
+    class="full-height card-width"
+    :class="{ 'battery-sum': props.batteryId === -1 }"
+  >
     <q-card-section>
       <div class="row text-h6 items-center text-bold justify-between">
-        <div>
-          <q-icon
-            name="battery_full"
-            size="sm"
-            class="q-mr-sm"
-            color="primary"
-          />
-          {{ cardTitle }}
-        </div>
+        {{ cardTitle }}
         <q-icon
           class="cursor-pointer"
           v-if="showSettings"
@@ -78,7 +74,7 @@ const setCardWidth = inject<((width: number | undefined) => void) | undefined>(
 );
 
 const props = defineProps<{
-  batteryId: number | undefined;
+  batteryId: number;
 }>();
 
 const singleBattery = computed(() => {
@@ -86,11 +82,15 @@ const singleBattery = computed(() => {
 });
 
 const showSettings = computed(() => {
-  return props.batteryId === undefined || singleBattery.value;
+  return isOverview.value || singleBattery.value;
 });
 
 const { batteryModes } = useBatteryModes();
 
+const isOverview = computed(() => {
+  return props.batteryId === -1;
+});
+
 const batteryMode = computed(() => {
   const mode = mqttStore.batteryMode();
   return batteryModes.find((m) => m.value === mode.value) || batteryModes[0];
@@ -101,28 +101,28 @@ const dialog = ref();
 const mqttStore = useMqttStore();
 
 const cardTitle = computed(() => {
-  if (props.batteryId === undefined) {
+  if (isOverview.value) {
     return 'Speicher Übersicht';
   }
   return mqttStore.batteryName(props.batteryId);
 });
 
 const soc = computed(() => {
-  if (props.batteryId === undefined) {
+  if (isOverview.value) {
     return mqttStore.batterySocTotal;
   }
   return mqttStore.batterySoc(props.batteryId);
 });
 
 const power = computed(() => {
-  if (props.batteryId === undefined) {
+  if (isOverview.value) {
     return mqttStore.batteryTotalPower('textValue') as string | '---';
   }
   return mqttStore.batteryPower(props.batteryId, 'textValue') as string | '---';
 });
 
 const dailyImportedEnergy = computed(() => {
-  if (props.batteryId === undefined) {
+  if (isOverview.value) {
     return mqttStore.batteryDailyImportedTotal('textValue') as string | '---';
   }
   return (
@@ -132,7 +132,7 @@ const dailyImportedEnergy = computed(() => {
 });
 
 const dailyExportedEnergy = computed(() => {
-  if (props.batteryId === undefined) {
+  if (isOverview.value) {
     return mqttStore.batteryDailyExportedTotal('textValue') as string | '---';
   }
   return (
diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue b/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue
index 0924078c35..324decef87 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue
@@ -1,7 +1,4 @@
 <template>
-  <div v-if="showBatteryOverview" class="row justify-center">
-    <BatteryCard :battery-id="undefined" />
-  </div>
   <BaseCarousel :items="batteryIds">
     <template #item="{ item }">
       <BatteryCard :battery-id="item" />
@@ -18,9 +15,11 @@ import BatteryCard from 'src/components/BatteryCard.vue';
 
 const mqttStore = useMqttStore();
 
-const batteryIds = computed(() => mqttStore.batteryIds);
-
-const showBatteryOverview = computed(() => {
-  return mqttStore.batteryIds.length > 1;
+const batteryIds = computed(() => {
+  let ids = mqttStore.batteryIds;
+  if (ids.length > 1) {
+    ids.unshift(-1); // add overview card if more than one battery
+  }
+  return ids;
 });
 </script>
diff --git a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
index 87d0aea851..37d5e5a091 100644
--- a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
+++ b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
@@ -24,15 +24,15 @@
       <!-- Tab Panels -->
       <q-tab-panels v-model="tab" class="col">
         <!-- Charge Points -->
-        <q-tab-panel name="charge-points" class="q-pa-none column">
+        <q-tab-panel name="charge-points">
           <ChargePointInformation />
         </q-tab-panel>
         <!-- Vehicles -->
-        <q-tab-panel name="vehicles" class="q-pa-none column">
+        <q-tab-panel name="vehicles">
           <VehicleInformation />
         </q-tab-panel>
         <!-- Batteries -->
-        <q-tab-panel name="batteries" class="remove-flex-properties">
+        <q-tab-panel name="batteries">
           <BatteryInformation />
         </q-tab-panel>
         <!-- Smart Home -->

From da0469478090c40f7b4876f4551c49756a1f6fc8 Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Fri, 25 Jul 2025 10:01:51 +0200
Subject: [PATCH 2/3] linting and formatting

---
 .../koala/source/src/components/ChargePointPvSettings.vue   | 4 +++-
 .../source/src/components/ChargePointTimeChargingPlans.vue  | 4 +++-
 .../web_themes/koala/source/src/stores/mqtt-store.ts        | 6 +++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
index da5db1e6be..64ab501075 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
@@ -116,7 +116,9 @@
     </div>
   </div>
 
-  <div class="row items-center justify-between q-ma-none q-pa-none no-wrap q-mt-md">
+  <div
+    class="row items-center justify-between q-ma-none q-pa-none no-wrap q-mt-md"
+  >
     <div class="text-subtitle2 q-mr-sm">Einspeisegrenze beachten</div>
     <div>
       <ToggleStandard dense v-model="feedInLimit.value" />
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlans.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlans.vue
index 0fac309850..92210d547f 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlans.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlans.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="row items-center q-ma-none q-pa-none no-wrap items-center justify-between">
+  <div
+    class="row items-center q-ma-none q-pa-none no-wrap items-center justify-between"
+  >
     <div class="text-subtitle2">Zeitladen</div>
     <div>
       <ChargePointTimeCharging :charge-point-id="props.chargePointId" dense />
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index dbc1041905..c40c6cd711 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -978,7 +978,7 @@ export const useMqttStore = defineStore('mqtt', () => {
    */
   const convertDcCurrentToPower = (dcCurrent: number): number => {
     return Math.round((dcCurrent * 3 * 230) / 1000);
-  }
+  };
 
   /**
    * Converts power in Kilowatts to DC current in Ampere.
@@ -991,8 +991,8 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @returns number
    */
   const convertPowerToDcCurrent = (power: number): number => {
-    return Math.round(power * 1000 / (230 * 3));
-  }
+    return Math.round((power * 1000) / (230 * 3));
+  };
 
   /**
    * Get or set the charge point connected vehicle instant charging DC power identified by the charge point id

From 5710d171266410ad1981540881d41e2f083cb725 Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Fri, 25 Jul 2025 11:54:39 +0200
Subject: [PATCH 3/3] fix adding overview battery id

---
 .../koala/source/src/components/BatteryInformation.vue       | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue b/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue
index 324decef87..dfb30c8ac7 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue
@@ -17,8 +17,9 @@ const mqttStore = useMqttStore();
 
 const batteryIds = computed(() => {
   let ids = mqttStore.batteryIds;
-  if (ids.length > 1) {
-    ids.unshift(-1); // add overview card if more than one battery
+  console.log('Battery IDs:' + ids);
+  if (ids.length > 0) {
+    return [-1].concat(ids); // add overview card if more than one battery
   }
   return ids;
 });