LKuemmel · Oct 26, 2026 · Oct 27, 2026 · Oct 27, 2026
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
@@ -27,11 +27,19 @@
           >
             <i-row>
               <i-column>
-                <font-awesome-icon
-                  fixed-width
-                  :icon="mode.symbol.icon"
-                  :rotation="mode.symbol.rotation"
-                />
+                <template
+                  v-for="(symbol, index) in mode.symbols"
+                  :key="index"
+                >
+                  <font-awesome-icon
+                    fixed-width
+                    :icon="symbol.icon"
+                    :rotation="symbol.rotation"
+                  />
+                  <span v-if="index < mode.symbols.length - 1">
+                    /
+                  </span>
+                </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,27 +80,30 @@ export default {
       batteryModes: [
         {
           value: 'ev_mode',
-          label: 'Fahrzeuge',
+          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
@@ -301,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
@@ -944,14 +958,29 @@ export default {
                   opacity="1"
                   filter="url(#f-shadow)"
                 />
-                <component
-                  :is="batteryModeIcon"
-                  :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)' }"
-                />
+                <template
+                  v-for="(icon, index) in batteryModeIcons"
+                  :key="index"
+                >
+                  <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
+                    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
@@ -39,7 +39,12 @@
       >
         <div>Ladepriorität:</div>
         <div class="row items-center">
-          <q-icon :name="batteryMode.icon" 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 }}
           </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
@@ -4,12 +4,15 @@
       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"
     >
+      <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>
     </q-btn>
   </q-btn-group>

diff --git 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/...modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts b/...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.';
 

diff --git a/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts b/packages/modules/web_themes/koala/source/src/composables/useBatteryModes.ts
@@ -2,23 +2,23 @@ export const useBatteryModes = () => {
   const batteryModes = [
     {
       value: 'ev_mode',
-      label: 'Fahrzeuge',
+      label: 'Verbraucher',
       color: 'primary',
-      icon: 'directions_car',
-      tooltip: 'Fahrzeuge',
+      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',
     },
   ];