From 75f46ceab7b5c69224934f26a2d12c4374513b2f Mon Sep 17 00:00:00 2001
From: LKuemmel <lena.kuemmel@openwb.de>
Date: Mon, 26 Oct 2026 15:28:49 +0100
Subject: [PATCH 1/3] Passive Speichersteuerung: Fahrzeug-Vorrang umbenennen

---
 .../components/Battery/BatteryModeModal.vue   | 15 ++++++++---
 .../src/components/Dashboard/FlowCard.vue     | 27 +++++++++++++++++++
 .../source/src/components/BatteryCard.vue     |  4 +++
 .../src/components/BatteryModeButtons.vue     |  8 ++++--
 .../source/src/composables/useBatteryModes.ts |  4 +--
 5 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/packages/modules/display_themes/cards/source/src/components/Battery/BatteryModeModal.vue b/packages/modules/display_themes/cards/source/src/components/Battery/BatteryModeModal.vue
index 5c99374478..bed3ed2da6 100644
--- a/packages/modules/display_themes/cards/source/src/components/Battery/BatteryModeModal.vue
+++ b/packages/modules/display_themes/cards/source/src/components/Battery/BatteryModeModal.vue
@@ -21,6 +21,7 @@
             outline
             :color="mode.color != 'dark' ? mode.color : 'light'"
             :active="mode.value === mqttStore.getBatteryMode"
+            :title="mode.label"
             @click="
               setBatteryMode(mode.value)
             "
@@ -32,6 +33,13 @@
                   :icon="mode.symbol.icon"
                   :rotation="mode.symbol.rotation"
                 />
+                <template v-if="mode.value === 'ev_mode'">
+                  /
+                  <font-awesome-icon
+                    fixed-width
+                    :icon="['fas', 'plug']"
+                  />
+                </template>
               </i-column>
               <i-column>
                 {{ mode.label }}
@@ -53,10 +61,11 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import {
   faBatteryFull as fasBatteryFull,
   faBatteryHalf as fasBatteryHalf,
-  faCar as fasCar
+  faCar as fasCar,
+  faPlug as fasPlug
 } from "@fortawesome/free-solid-svg-icons";
 /* add icons to the library */
-library.add(fasBatteryFull, fasBatteryHalf, fasCar);
+library.add(fasBatteryFull, fasBatteryHalf, fasCar, fasPlug);
 
 export default {
   name: "BatteryModeModal",
@@ -71,7 +80,7 @@ export default {
       batteryModes: [
         {
           value: 'ev_mode',
-          label: 'Fahrzeuge',
+          label: 'Verbraucher',
           color: 'primary',
           symbol: { icon: ['fas', 'fa-car'], rotation: 0 },
         },
diff --git a/packages/modules/display_themes/cards/source/src/components/Dashboard/FlowCard.vue b/packages/modules/display_themes/cards/source/src/components/Dashboard/FlowCard.vue
index cccbf1afcb..f1c6234d75 100644
--- a/packages/modules/display_themes/cards/source/src/components/Dashboard/FlowCard.vue
+++ b/packages/modules/display_themes/cards/source/src/components/Dashboard/FlowCard.vue
@@ -18,6 +18,8 @@ export default {
     DashboardCard,
     ChargeModeModal,
     BatteryModeModal,
+    VehicleIcon,
+    ConsumerIcon,
   },
   props: {
     changesLocked: { required: false, type: Boolean, default: false },
@@ -944,8 +946,33 @@ export default {
                   opacity="1"
                   filter="url(#f-shadow)"
                 />
+                <g
+                  v-if="mqttStore.getBatteryMode === 'ev_mode'"
+                  :style="{ color: 'var(--color--warning)' }"
+                >
+                  <title>Verbraucher</title>
+                  <VehicleIcon
+                    :x="svgSize.circleRadius * 1.25"
+                    :y="-svgSize.circleRadius * 1.35"
+                    :height="svgSize.circleRadius * 0.6"
+                    :width="svgSize.circleRadius * 0.5"
+                  />
+                  <text
+                    :x="svgSize.circleRadius * 1.75"
+                    :y="-svgSize.circleRadius * 0.88"
+                    :font-size="svgSize.circleRadius * 0.5"
+                    fill="currentColor"
+                  >/</text>
+                  <ConsumerIcon
+                    :x="svgSize.circleRadius * 1.9"
+                    :y="-svgSize.circleRadius * 1.35"
+                    :height="svgSize.circleRadius * 0.6"
+                    :width="svgSize.circleRadius * 0.4"
+                  />
+                </g>
                 <component
                   :is="batteryModeIcon"
+                  v-else
                   :x="svgSize.circleRadius * 1.45"
                   :y="-svgSize.circleRadius * 1.35"
                   :height="svgSize.circleRadius * 0.6"
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 59fabface5..2068512ffe 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -40,6 +40,10 @@
         <div>Ladepriorität:</div>
         <div class="row items-center">
           <q-icon :name="batteryMode.icon" size="sm" color="primary" />
+          <template v-if="batteryMode.value === 'ev_mode'">
+            <span class="q-mx-xs">/</span>
+            <q-icon name="power" size="sm" color="primary" />
+          </template>
           <div>
             {{ batteryMode.label }}
           </div>
diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryModeButtons.vue b/packages/modules/web_themes/koala/source/src/components/BatteryModeButtons.vue
index 9cf3c6b0bf..4b3b00d70d 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryModeButtons.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryModeButtons.vue
@@ -4,12 +4,16 @@
       v-for="mode in batteryModes"
       :key="mode.value"
       :color="batMode.value === mode.value ? 'primary' : 'grey'"
-      :label="mode.label"
-      :icon="mode.icon"
       :outline="batMode.value !== mode.value"
       size="sm"
       @click="batMode.value = mode.value"
     >
+      <q-icon :name="mode.icon" />
+      <template v-if="mode.value === 'ev_mode'">
+        <span class="q-mx-xs">/</span>
+        <q-icon name="power" />
+      </template>
+      <span class="q-ml-xs">{{ mode.label }}</span>
       <q-tooltip class="bg-primary">{{ mode.tooltip }}</q-tooltip>
     </q-btn>
   </q-btn-group>
diff --git a/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts b/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts
index 12d260b412..d7a2f48233 100644
--- a/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts
+++ b/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts
@@ -2,10 +2,10 @@ export const useBatteryModes = () => {
   const batteryModes = [
     {
       value: 'ev_mode',
-      label: 'Fahrzeuge',
+      label: 'Verbraucher',
       color: 'primary',
       icon: 'directions_car',
-      tooltip: 'Fahrzeuge',
+      tooltip: 'Verbraucher',
     },
     {
       value: 'bat_mode',

From 2c06cb348f45fe908c57d8753a1553cf5a6a30b8 Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Tue, 27 Oct 2026 10:13:35 +0100
Subject: [PATCH 2/3] review fixes: support multiple symbols

---
 .../components/Battery/BatteryModeModal.vue   | 31 ++++----
 .../src/components/Dashboard/FlowCard.vue     | 74 ++++++++++---------
 .../source/src/components/BatteryCard.vue     |  9 ++-
 .../src/components/BatteryModeButtons.vue     |  7 +-
 .../source/src/composables/useBatteryModes.ts |  6 +-
 5 files changed, 66 insertions(+), 61 deletions(-)

diff --git a/packages/modules/display_themes/cards/source/src/components/Battery/BatteryModeModal.vue b/packages/modules/display_themes/cards/source/src/components/Battery/BatteryModeModal.vue
index bed3ed2da6..d995450596 100644
--- a/packages/modules/display_themes/cards/source/src/components/Battery/BatteryModeModal.vue
+++ b/packages/modules/display_themes/cards/source/src/components/Battery/BatteryModeModal.vue
@@ -21,24 +21,24 @@
             outline
             :color="mode.color != 'dark' ? mode.color : 'light'"
             :active="mode.value === mqttStore.getBatteryMode"
-            :title="mode.label"
             @click="
               setBatteryMode(mode.value)
             "
           >
             <i-row>
               <i-column>
-                <font-awesome-icon
-                  fixed-width
-                  :icon="mode.symbol.icon"
-                  :rotation="mode.symbol.rotation"
-                />
-                <template v-if="mode.value === 'ev_mode'">
-                  /
+                <template
+                  v-for="(symbol, index) in mode.symbols"
+                  :key="index"
+                >
                   <font-awesome-icon
                     fixed-width
-                    :icon="['fas', 'plug']"
+                    :icon="symbol.icon"
+                    :rotation="symbol.rotation"
                   />
+                  <span v-if="index < mode.symbols.length - 1">
+                    /
+                  </span>
                 </template>
               </i-column>
               <i-column>
@@ -82,25 +82,28 @@ export default {
           value: 'ev_mode',
           label: 'Verbraucher',
           color: 'primary',
-          symbol: { icon: ['fas', 'fa-car'], rotation: 0 },
+          symbols: [
+            { icon: ['fas', 'car'], rotation: 0 },
+            { icon: ['fas', 'plug'], rotation: 0 }
+          ],
         },
         {
           value: 'bat_mode',
           label: 'Speicher',
           color: 'primary',
-          symbol: {
+          symbols: [{
             icon: ['fas', 'battery-full'],
             rotation: 270,
-          },
+          }],
         },
         {
           value: 'min_soc_bat_mode',
           label: 'Mindest-SoC',
           color: 'primary',
-          symbol: {
+          symbols: [{
             icon: ['fas', 'battery-half'],
             rotation: 270,
-          },
+          }],
         },
       ]
     };
diff --git a/packages/modules/display_themes/cards/source/src/components/Dashboard/FlowCard.vue b/packages/modules/display_themes/cards/source/src/components/Dashboard/FlowCard.vue
index f1c6234d75..b335d463d7 100644
--- a/packages/modules/display_themes/cards/source/src/components/Dashboard/FlowCard.vue
+++ b/packages/modules/display_themes/cards/source/src/components/Dashboard/FlowCard.vue
@@ -18,8 +18,6 @@ export default {
     DashboardCard,
     ChargeModeModal,
     BatteryModeModal,
-    VehicleIcon,
-    ConsumerIcon,
   },
   props: {
     changesLocked: { required: false, type: Boolean, default: false },
@@ -303,19 +301,33 @@ export default {
     chargePoint3Discharging() {
       return this.chargePoint3Power.value < 0;
     },
-    batteryModeIcon() {
+    batteryModeIcons() {
       const mode = this.mqttStore.getBatteryMode;
       switch (mode) {
         case "ev_mode":
-          return VehicleIcon;
+          return [VehicleIcon, ConsumerIcon];
         case "bat_mode":
-          return BatteryIcon;
+          return [BatteryIcon];
         case "min_soc_bat_mode":
-          return Battery40Icon;
+          return [Battery40Icon];
         default:
           return "---";
       }
     },
+    batteryModeIconSize() {
+      return this.svgSize.circleRadius * (this.batteryModeIcons.length > 1 ? 0.45 : 0.6);
+    },
+    batteryModeIconSeparatorWidth() {
+      return this.svgSize.circleRadius * 0.15;
+    },
+    batteryModeIconStartX() {
+      const buttonX = this.svgSize.circleRadius * 1.2;
+      const buttonWidth = this.svgSize.circleRadius * 1.1;
+      const groupWidth =
+        this.batteryModeIcons.length * this.batteryModeIconSize +
+        (this.batteryModeIcons.length - 1) * this.batteryModeIconSeparatorWidth;
+      return buttonX + (buttonWidth - groupWidth) / 2;
+    },
     svgComponents() {
       var components = [];
       // add grid component
@@ -946,39 +958,29 @@ export default {
                   opacity="1"
                   filter="url(#f-shadow)"
                 />
-                <g
-                  v-if="mqttStore.getBatteryMode === 'ev_mode'"
-                  :style="{ color: 'var(--color--warning)' }"
+                <template
+                  v-for="(icon, index) in batteryModeIcons"
+                  :key="index"
                 >
-                  <title>Verbraucher</title>
-                  <VehicleIcon
-                    :x="svgSize.circleRadius * 1.25"
-                    :y="-svgSize.circleRadius * 1.35"
-                    :height="svgSize.circleRadius * 0.6"
-                    :width="svgSize.circleRadius * 0.5"
+                  <component
+                    :is="icon"
+                    :x="batteryModeIconStartX + index * (batteryModeIconSize + batteryModeIconSeparatorWidth)"
+                    :y="-svgSize.circleRadius * 1.4 + (svgSize.circleRadius * 0.7 - batteryModeIconSize) / 2"
+                    :height="batteryModeIconSize"
+                    :width="batteryModeIconSize"
+                    :style="{ color: 'var(--color--warning)' }"
                   />
                   <text
-                    :x="svgSize.circleRadius * 1.75"
-                    :y="-svgSize.circleRadius * 0.88"
-                    :font-size="svgSize.circleRadius * 0.5"
-                    fill="currentColor"
-                  >/</text>
-                  <ConsumerIcon
-                    :x="svgSize.circleRadius * 1.9"
-                    :y="-svgSize.circleRadius * 1.35"
-                    :height="svgSize.circleRadius * 0.6"
-                    :width="svgSize.circleRadius * 0.4"
-                  />
-                </g>
-                <component
-                  :is="batteryModeIcon"
-                  v-else
-                  :x="svgSize.circleRadius * 1.45"
-                  :y="-svgSize.circleRadius * 1.35"
-                  :height="svgSize.circleRadius * 0.6"
-                  :width="svgSize.circleRadius * 0.6"
-                  :style="{ color: 'var(--color--warning)' }"
-                />
+                    v-if="index < batteryModeIcons.length - 1"
+                    :x="batteryModeIconStartX + index * (batteryModeIconSize + batteryModeIconSeparatorWidth) + batteryModeIconSize + batteryModeIconSeparatorWidth / 2"
+                    :y="-svgSize.circleRadius * 1.4 + svgSize.circleRadius * 0.35"
+                    :font-size="batteryModeIconSize"
+                    text-anchor="middle"
+                    dominant-baseline="central"
+                  >
+                    /
+                  </text>
+                </template>
               </g>
             </g>
           </g>
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 2068512ffe..c0d9a72a2f 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -39,10 +39,11 @@
       >
         <div>Ladepriorität:</div>
         <div class="row items-center">
-          <q-icon :name="batteryMode.icon" size="sm" color="primary" />
-          <template v-if="batteryMode.value === 'ev_mode'">
-            <span class="q-mx-xs">/</span>
-            <q-icon name="power" size="sm" color="primary" />
+          <template v-for="(icon, index) in batteryMode.icons" :key="index">
+            <q-icon :name="icon" size="sm" color="primary" />
+            <span class="q-mx-xs" v-if="index < batteryMode.icons.length - 1"
+              >/</span
+            >
           </template>
           <div>
             {{ batteryMode.label }}
diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryModeButtons.vue b/packages/modules/web_themes/koala/source/src/components/BatteryModeButtons.vue
index 4b3b00d70d..b0200d9d66 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryModeButtons.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryModeButtons.vue
@@ -8,10 +8,9 @@
       size="sm"
       @click="batMode.value = mode.value"
     >
-      <q-icon :name="mode.icon" />
-      <template v-if="mode.value === 'ev_mode'">
-        <span class="q-mx-xs">/</span>
-        <q-icon name="power" />
+      <template v-for="(icon, index) in mode.icons" :key="index">
+        <q-icon :name="icon" />
+        <span class="q-mx-xs" v-if="index < mode.icons.length - 1">/</span>
       </template>
       <span class="q-ml-xs">{{ mode.label }}</span>
       <q-tooltip class="bg-primary">{{ mode.tooltip }}</q-tooltip>
diff --git a/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts b/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts
index d7a2f48233..5e4ffaac73 100644
--- a/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts
+++ b/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts
@@ -4,21 +4,21 @@ export const useBatteryModes = () => {
       value: 'ev_mode',
       label: 'Verbraucher',
       color: 'primary',
-      icon: 'directions_car',
+      icons: ['directions_car', 'power'],
       tooltip: 'Verbraucher',
     },
     {
       value: 'bat_mode',
       label: 'Speicher',
       color: 'primary',
-      icon: 'battery_charging_full',
+      icons: ['battery_charging_full'],
       tooltip: 'Speicher',
     },
     {
       value: 'min_soc_bat_mode',
       label: 'Nach SoC des Speichers',
       color: 'primary',
-      icon: 'battery_4_bar',
+      icons: ['battery_4_bar'],
       tooltip: 'Nach SoC des Speichers',
     },
   ];

From 0298af11640006ad1f1d38f1f2848407be6f4a10 Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Tue, 27 Oct 2026 10:13:54 +0100
Subject: [PATCH 3/3] linting

---
 .../source/src/components/ChargePointInstantSettings.vue    | 4 +++-
 .../components/charts/historyChart/history-chart-model.ts   | 6 +-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
index 7cfa0c1660..a13c204194 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
@@ -70,7 +70,9 @@ const acChargingEnabled = computed(
 const DC_POWER_FALLBACK = 300; // entspricht dc_max_current-Default 435 A
 
 const dcMaxPower = computed(
-() => mqttStore.chargePointDcMaxPower(props.chargePointId).value ?? DC_POWER_FALLBACK,
+  () =>
+    mqttStore.chargePointDcMaxPower(props.chargePointId).value ??
+    DC_POWER_FALLBACK,
 );
 
 const dcMinPower = computed(() => -dcMaxPower.value);
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
index c9f60823e7..e534bc1257 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
@@ -12,11 +12,7 @@ export interface ChartComponentRef {
 }
 
 export type Category =
-  | 'chargepoint'
-  | 'vehicle'
-  | 'battery'
-  | 'consumer'
-  | 'component';
+  'chargepoint' | 'vehicle' | 'battery' | 'consumer' | 'component';
 
 export const CONSUMER_TOTAL_LABEL = 'Verbraucher ges.';