From 45ca65ce3f9688ff2cdaae0d27c8b3e24ffe10b9 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 19 Feb 2026 17:33:21 +0100
Subject: [PATCH 01/19] add charge limit dialog

---
 .../source/src/components/ChargeLimits.vue    | 137 ++++++++++++++++++
 .../source/src/components/ChargePointCard.vue |  61 ++++++--
 2 files changed, 187 insertions(+), 11 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/ChargeLimits.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargeLimits.vue b/packages/modules/web_themes/koala/source/src/components/ChargeLimits.vue
new file mode 100644
index 0000000000..89f98c5532
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/ChargeLimits.vue
@@ -0,0 +1,137 @@
+<template>
+  <q-dialog
+    v-model="visible"
+    :backdrop-filter="isSmallScreen ? '' : 'blur(4px)'"
+  >
+    <q-card>
+      <q-card-section>
+      <div class="row nowrap q-mb-sm">
+        <div class="text-h6">Begrenzung</div>
+        <q-space />
+        <q-btn icon="close" flat round dense v-close-popup />
+      </div>
+      <q-separator class="q-mt-sm q-mb-sm" />
+
+        <div
+          class="row items-center justify-center q-ma-none q-pa-none no-wrap"
+        >
+          <q-btn-group class="col">
+            <q-btn
+              v-for="mode in limitModes"
+              :key="mode.value"
+              :color="limitMode.value === mode.value ? 'primary' : 'grey'"
+              :label="mode.label"
+              size="sm"
+              class="col"
+              @click="limitMode.value = mode.value"
+            />
+          </q-btn-group>
+        </div>
+        <SliderStandard
+          v-if="limitMode.value === 'soc'"
+          title="SoC-Limit für das Fahrzeug"
+          :min="5"
+          :max="100"
+          :step="5"
+          unit="%"
+          v-model="limitSoC.value"
+          class="q-mt-md"
+        />
+        <SliderStandard
+          v-if="limitMode.value === 'amount'"
+          title="Energie-Limit"
+          :min="1"
+          :max="50"
+          unit="kWh"
+          v-model="limitEnergy.value"
+          class="q-mt-md"
+        />
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { Screen, QDialog } from 'quasar';
+import { useMqttStore } from 'src/stores/mqtt-store';
+import SliderStandard from './SliderStandard.vue';
+import { computed, ref, watch } from 'vue';
+
+const props = defineProps<{
+  chargePointId: number;
+  modelValue: boolean;
+  energyTargetEnabled: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:model-value': [value: boolean];
+}>();
+
+const mqttStore = useMqttStore();
+
+const isSmallScreen = computed(() => Screen.lt.sm);
+const tempValue = ref<boolean>(props.modelValue);
+
+  const baseLimitModes = [
+  { value: 'none', label: 'keine' },
+  { value: 'soc', label: 'EV-SoC' },
+  { value: 'amount', label: 'Energie' },
+]
+
+const limitModes = computed(() => {
+  return baseLimitModes.filter((mode) => {
+    // If vehicle has no SoC module → remove soc
+    if (!vehicleSocType.value && mode.value === 'soc') {
+      return false
+    }
+    return true
+  })
+})
+
+const vehicleSocType = computed(() =>
+  mqttStore.chargePointConnectedVehicleSocType(props.chargePointId),
+)?.value;
+
+const limitMode = computed(() =>
+  mqttStore.chargePointConnectedVehicleInstantChargeLimit(props.chargePointId),
+);
+
+const limitSoC = computed(() =>
+  mqttStore.chargePointConnectedVehicleInstantChargeLimitSoC(
+    props.chargePointId,
+  ),
+);
+
+const limitEnergy = computed(() =>
+  mqttStore.chargePointConnectedVehicleInstantChargeLimitEnergy(
+    props.chargePointId,
+  ),
+);
+
+const visible = computed({
+  get: () => tempValue.value,
+  set: (value) => {
+    tempValue.value = value;
+    emit('update:model-value', value );
+  },
+});
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    tempValue.value = value;
+  },
+);
+</script>
+
+<style scoped>
+.q-btn-group .q-btn {
+  min-width: 100px !important;
+}
+
+body.mobile .q-btn-group .q-btn {
+  padding: 4px 8px;
+  font-size: 12px !important;
+  min-height: 30px;
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index d5e29d099a..8400992333 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -59,6 +59,7 @@
     <q-card-section>
       <ChargePointModeButtons :charge-point-id="props.chargePointId" />
     </q-card-section>
+
     <q-card-section class="row q-mt-sm">
       <div class="col">
         <div class="text-subtitle2">Leistung</div>
@@ -75,10 +76,19 @@
         {{ energyChargedPlugged }}
       </div>
     </q-card-section>
+    <q-card-section>
+      <div v-if="!hasSocModule" class="row items-center justify-between">
+        <div class="text-subtitle2">Energie-Ziel aktiv</div>
+        <q-toggle
+          v-model="energyTargetEnabled"
+          @update:model-value="onEnergyToggle"
+        />
+      </div>
+    </q-card-section>
     <q-card-section>
       <SliderDouble
-        v-if="showSocTargetSlider"
-        class="q-mt-sm"
+        v-if="showSlider"
+        class="q-mt-sm cursor-pointer"
         :model-value="target"
         :readonly="true"
         :charge-mode="chargeMode"
@@ -88,6 +98,7 @@
         :vehicle-soc-type="vehicleSocType"
         :on-edit-soc="openSocDialog"
         :on-refresh-soc="refreshSoc"
+        @click="chargeLimitsVisible = true"
       />
     </q-card-section>
     <q-card-actions v-if="$slots['card-actions']" align="right">
@@ -98,6 +109,12 @@
       :chargePointId="props.chargePointId"
       v-model="settingsVisible"
     />
+    <!-- //////////////////////  modal charge limit settings dialog   //////////////////// -->
+    <ChargeLimits
+      :chargePointId="props.chargePointId"
+      :energyTargetEnabled="energyTargetEnabled"
+      v-model="chargeLimitsVisible"
+    />
     <!-- //////////////////////  modal soc dialog   //////////////////// -->
     <ManualSocDialog
       :vehicleId="vehicleId"
@@ -117,6 +134,7 @@ import ChargePointModeButtons from './ChargePointModeButtons.vue';
 import ChargePointMessage from './ChargePointMessage.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 import ChargePointSettings from './ChargePointSettings.vue';
+import ChargeLimits from './ChargeLimits.vue';
 import ManualSocDialog from './ManualSocDialog.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import ChargePointPowerData from './ChargePointPowerData.vue';
@@ -161,6 +179,7 @@ const limitMode = computed(() => {
 });
 
 const settingsVisible = ref<boolean>(false);
+const chargeLimitsVisible = ref<boolean>(false);
 
 const socInputVisible = ref<boolean>(false);
 const openSocDialog = () => {
@@ -272,18 +291,26 @@ const target = computed(() => {
   }
 });
 
-const showSocTargetSlider = computed(() => {
-  if (target.value && target.value > 999) {
-    // we have a energy based target
-    return true;
-  }
-  if (vehicleSocType.value) {
-    // we have a soc module defined
-    return true;
+const hasSocModule = computed(() => !!vehicleSocType.value);
+
+const instantLimit = computed(() =>
+  mqttStore.chargePointConnectedVehicleInstantChargeLimit(
+    props.chargePointId
+  )
+);
+
+const energyTargetEnabled = computed({
+  get: () => instantLimit.value.value === 'amount',
+  set: (enabled: boolean) => {
+    instantLimit.value.value = enabled ? 'amount' : 'none'
   }
-  return false;
 });
 
+const showSlider = computed(() => {
+  if (hasSocModule.value) return true
+  return limitMode.value === 'amount'
+})
+
 const vehicleTarget = computed(() => {
   return mqttStore.vehicleChargeTarget(props.chargePointId).value;
 });
@@ -292,6 +319,18 @@ const vehicleSocType = computed(() =>
   mqttStore.chargePointConnectedVehicleSocType(props.chargePointId),
 )?.value;
 
+const onEnergyToggle = (enabled: boolean) => {
+  const limit = mqttStore.chargePointConnectedVehicleInstantChargeLimit(
+    props.chargePointId,
+  );
+
+  if (enabled) {
+    limit.value = 'amount';
+  } else {
+    limit.value = 'none';
+  }
+};
+
 const refreshSoc = () => {
   mqttStore.chargePointConnectedVehicleForceSocUpdate(props.chargePointId);
   $q.notify({

From 69bf5504fd45e27588182a714d166cbfb1f98699 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 20 Feb 2026 09:36:15 +0100
Subject: [PATCH 02/19] add toggle icon

---
 .../web_themes/koala/source/src/components/ChargePointCard.vue  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index 8400992333..50c6100554 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -81,6 +81,8 @@
         <div class="text-subtitle2">Energie-Ziel aktiv</div>
         <q-toggle
           v-model="energyTargetEnabled"
+          icon="ev_station"
+          size="lg"
           @update:model-value="onEnergyToggle"
         />
       </div>

From 01577054d46c9efff2a7c58a00117e7cebf89385 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 20 Feb 2026 11:56:07 +0100
Subject: [PATCH 03/19] switch case to update charge Limit based on charge mode

---
 .../source/src/components/ChargeLimits.vue    | 93 +++++++++++++------
 1 file changed, 66 insertions(+), 27 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargeLimits.vue b/packages/modules/web_themes/koala/source/src/components/ChargeLimits.vue
index 89f98c5532..7bd7b9c106 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargeLimits.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargeLimits.vue
@@ -5,13 +5,12 @@
   >
     <q-card>
       <q-card-section>
-      <div class="row nowrap q-mb-sm">
-        <div class="text-h6">Begrenzung</div>
-        <q-space />
-        <q-btn icon="close" flat round dense v-close-popup />
-      </div>
-      <q-separator class="q-mt-sm q-mb-sm" />
-
+        <div class="row nowrap q-mb-sm">
+          <div class="text-h6">Begrenzung</div>
+          <q-space />
+          <q-btn icon="close" flat round dense v-close-popup />
+        </div>
+        <q-separator class="q-mt-sm q-mb-sm" />
         <div
           class="row items-center justify-center q-ma-none q-pa-none no-wrap"
         >
@@ -72,47 +71,87 @@ const mqttStore = useMqttStore();
 const isSmallScreen = computed(() => Screen.lt.sm);
 const tempValue = ref<boolean>(props.modelValue);
 
-  const baseLimitModes = [
+const baseLimitModes = [
   { value: 'none', label: 'keine' },
   { value: 'soc', label: 'EV-SoC' },
   { value: 'amount', label: 'Energie' },
-]
+];
 
 const limitModes = computed(() => {
   return baseLimitModes.filter((mode) => {
-    // If vehicle has no SoC module → remove soc
+    // If vehicle has no SoC module - remove soc
     if (!vehicleSocType.value && mode.value === 'soc') {
-      return false
+      return false;
     }
-    return true
-  })
-})
+    return true;
+  });
+});
 
 const vehicleSocType = computed(() =>
   mqttStore.chargePointConnectedVehicleSocType(props.chargePointId),
 )?.value;
 
-const limitMode = computed(() =>
-  mqttStore.chargePointConnectedVehicleInstantChargeLimit(props.chargePointId),
+const chargeMode = computed(
+  () =>
+    mqttStore.chargePointConnectedVehicleChargeMode(props.chargePointId)?.value,
 );
 
-const limitSoC = computed(() =>
-  mqttStore.chargePointConnectedVehicleInstantChargeLimitSoC(
-    props.chargePointId,
-  ),
-);
+const activeLimitConfig = computed(() => {
+  switch (chargeMode.value) {
+    case 'instant_charging':
+      return {
+        mode: mqttStore.chargePointConnectedVehicleInstantChargeLimit(
+          props.chargePointId,
+        ),
+        soc: mqttStore.chargePointConnectedVehicleInstantChargeLimitSoC(
+          props.chargePointId,
+        ),
+        energy: mqttStore.chargePointConnectedVehicleInstantChargeLimitEnergy(
+          props.chargePointId,
+        ),
+      };
+    case 'pv_charging':
+      return {
+        mode: mqttStore.chargePointConnectedVehiclePvChargeLimit(
+          props.chargePointId,
+        ),
+        soc: mqttStore.chargePointConnectedVehiclePvChargeLimitSoC(
+          props.chargePointId,
+        ),
+        energy: mqttStore.chargePointConnectedVehiclePvChargeLimitEnergy(
+          props.chargePointId,
+        ),
+      };
+    case 'eco_charging':
+      return {
+        mode: mqttStore.chargePointConnectedVehicleEcoChargeLimit(
+          props.chargePointId,
+        ),
+        soc: mqttStore.chargePointConnectedVehicleEcoChargeLimitSoC(
+          props.chargePointId,
+        ),
+        energy: mqttStore.chargePointConnectedVehicleEcoChargeLimitEnergy(
+          props.chargePointId,
+        ),
+      };
+    default:
+      return {
+        mode: ref('none'),
+        soc: ref(0),
+        energy: ref(0),
+      };
+  }
+});
 
-const limitEnergy = computed(() =>
-  mqttStore.chargePointConnectedVehicleInstantChargeLimitEnergy(
-    props.chargePointId,
-  ),
-);
+const limitMode = computed(() => activeLimitConfig.value.mode);
+const limitSoC = computed(() => activeLimitConfig.value.soc);
+const limitEnergy = computed(() => activeLimitConfig.value.energy);
 
 const visible = computed({
   get: () => tempValue.value,
   set: (value) => {
     tempValue.value = value;
-    emit('update:model-value', value );
+    emit('update:model-value', value);
   },
 });
 

From 9aab8c649511f079613b131f0dacde04e875792f Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 20 Feb 2026 11:58:05 +0100
Subject: [PATCH 04/19] Limit dialog - only modes instant, pv and eco clickable

---
 .../source/src/components/ChargePointCard.vue | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index 50c6100554..1b14b9f54d 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -78,7 +78,7 @@
     </q-card-section>
     <q-card-section>
       <div v-if="!hasSocModule" class="row items-center justify-between">
-        <div class="text-subtitle2">Energie-Ziel aktiv</div>
+        <div class="text-subtitle2">Energie Begrenzung</div>
         <q-toggle
           v-model="energyTargetEnabled"
           icon="ev_station"
@@ -90,7 +90,10 @@
     <q-card-section>
       <SliderDouble
         v-if="showSlider"
-        class="q-mt-sm cursor-pointer"
+        :class="[
+          'q-mt-sm',
+          limitEditable && 'cursor-pointer',
+        ]"
         :model-value="target"
         :readonly="true"
         :charge-mode="chargeMode"
@@ -100,7 +103,7 @@
         :vehicle-soc-type="vehicleSocType"
         :on-edit-soc="openSocDialog"
         :on-refresh-soc="refreshSoc"
-        @click="chargeLimitsVisible = true"
+        @click="openLimitDialog"
       />
     </q-card-section>
     <q-card-actions v-if="$slots['card-actions']" align="right">
@@ -183,6 +186,15 @@ const limitMode = computed(() => {
 const settingsVisible = ref<boolean>(false);
 const chargeLimitsVisible = ref<boolean>(false);
 
+const limitEditable = computed(() => {
+  return !['scheduled_charging', 'stop'].includes(chargeMode.value);
+});
+
+const openLimitDialog = () => {
+  if (!limitEditable.value) return;
+  chargeLimitsVisible.value = true;
+};
+
 const socInputVisible = ref<boolean>(false);
 const openSocDialog = () => {
   socInputVisible.value = true;
@@ -296,22 +308,20 @@ const target = computed(() => {
 const hasSocModule = computed(() => !!vehicleSocType.value);
 
 const instantLimit = computed(() =>
-  mqttStore.chargePointConnectedVehicleInstantChargeLimit(
-    props.chargePointId
-  )
+  mqttStore.chargePointConnectedVehicleInstantChargeLimit(props.chargePointId),
 );
 
 const energyTargetEnabled = computed({
   get: () => instantLimit.value.value === 'amount',
   set: (enabled: boolean) => {
-    instantLimit.value.value = enabled ? 'amount' : 'none'
-  }
+    instantLimit.value.value = enabled ? 'amount' : 'none';
+  },
 });
 
 const showSlider = computed(() => {
-  if (hasSocModule.value) return true
-  return limitMode.value === 'amount'
-})
+  if (hasSocModule.value) return true;
+  return limitMode.value === 'amount';
+});
 
 const vehicleTarget = computed(() => {
   return mqttStore.vehicleChargeTarget(props.chargePointId).value;

From 846858a6228650e26a3d81e3f2990d3b2fc5a0f2 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 20 Feb 2026 12:00:10 +0100
Subject: [PATCH 05/19] stop event propagation for SoC edit buttons

---
 .../web_themes/koala/source/src/components/SliderDouble.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
index 22164a3e10..a954fcf6df 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
@@ -46,7 +46,7 @@
             name="edit"
             size="xs"
             class="q-ml-xs cursor-pointer"
-            @click="onEditSoc"
+            @click.stop="onEditSoc"
           >
             <q-tooltip>Ladestand eingeben</q-tooltip>
           </q-icon>
@@ -55,7 +55,7 @@
             name="refresh"
             size="xs"
             class="q-ml-xs cursor-pointer"
-            @click="onRefreshSoc"
+            @click.stop="onRefreshSoc"
           >
             <q-tooltip>Ladestand aktualisieren</q-tooltip>
           </q-icon>

From 92166b66d4874ecf3576659378fb4955b3116654 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 20 Feb 2026 14:38:34 +0100
Subject: [PATCH 06/19] enable energy limit toggle for modes instant, pv and
 eco

---
 .../source/src/components/ChargePointCard.vue | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index 1b14b9f54d..39a8a19413 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -90,10 +90,7 @@
     <q-card-section>
       <SliderDouble
         v-if="showSlider"
-        :class="[
-          'q-mt-sm',
-          limitEditable && 'cursor-pointer',
-        ]"
+        :class="['q-mt-sm', limitEditable && 'cursor-pointer']"
         :model-value="target"
         :readonly="true"
         :charge-mode="chargeMode"
@@ -307,14 +304,30 @@ const target = computed(() => {
 
 const hasSocModule = computed(() => !!vehicleSocType.value);
 
-const instantLimit = computed(() =>
-  mqttStore.chargePointConnectedVehicleInstantChargeLimit(props.chargePointId),
-);
+const activeChargeLimit = computed(() => {
+  switch (chargeMode.value) {
+    case 'instant_charging':
+      return mqttStore.chargePointConnectedVehicleInstantChargeLimit(
+        props.chargePointId,
+      );
+    case 'pv_charging':
+      return mqttStore.chargePointConnectedVehiclePvChargeLimit(
+        props.chargePointId,
+      );
+    case 'eco_charging':
+      return mqttStore.chargePointConnectedVehicleEcoChargeLimit(
+        props.chargePointId,
+      );
+    default:
+      return undefined;
+  }
+});
 
 const energyTargetEnabled = computed({
-  get: () => instantLimit.value.value === 'amount',
+  get: () => activeChargeLimit.value?.value === 'amount',
   set: (enabled: boolean) => {
-    instantLimit.value.value = enabled ? 'amount' : 'none';
+    if (!activeChargeLimit.value) return;
+    activeChargeLimit.value.value = enabled ? 'amount' : 'none';
   },
 });
 

From 39452d08b6176236a65287c2626cd8e320597a47 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 20 Feb 2026 14:40:47 +0100
Subject: [PATCH 07/19] rename computed prop

---
 .../koala/source/src/components/ChargeLimits.vue          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargeLimits.vue b/packages/modules/web_themes/koala/source/src/components/ChargeLimits.vue
index 7bd7b9c106..8410f037d6 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargeLimits.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargeLimits.vue
@@ -96,7 +96,7 @@ const chargeMode = computed(
     mqttStore.chargePointConnectedVehicleChargeMode(props.chargePointId)?.value,
 );
 
-const activeLimitConfig = computed(() => {
+const activeChargeLimitConfig = computed(() => {
   switch (chargeMode.value) {
     case 'instant_charging':
       return {
@@ -143,9 +143,9 @@ const activeLimitConfig = computed(() => {
   }
 });
 
-const limitMode = computed(() => activeLimitConfig.value.mode);
-const limitSoC = computed(() => activeLimitConfig.value.soc);
-const limitEnergy = computed(() => activeLimitConfig.value.energy);
+const limitMode = computed(() => activeChargeLimitConfig.value.mode);
+const limitSoC = computed(() => activeChargeLimitConfig.value.soc);
+const limitEnergy = computed(() => activeChargeLimitConfig.value.energy);
 
 const visible = computed({
   get: () => tempValue.value,

From ab931b6857bc4eb7d23b10c29aee551accff2fbf Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 20 Feb 2026 14:52:47 +0100
Subject: [PATCH 08/19] hide energy limit toggle when not required

---
 .../koala/source/src/components/ChargePointCard.vue  | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index 39a8a19413..d440a1cadb 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -77,7 +77,7 @@
       </div>
     </q-card-section>
     <q-card-section>
-      <div v-if="!hasSocModule" class="row items-center justify-between">
+      <div v-if="showEnergyLimitToggle" class="row items-center justify-between">
         <div class="text-subtitle2">Energie Begrenzung</div>
         <q-toggle
           v-model="energyTargetEnabled"
@@ -336,6 +336,16 @@ const showSlider = computed(() => {
   return limitMode.value === 'amount';
 });
 
+const showEnergyLimitToggle = computed(() => {
+  if (
+    hasSocModule.value ||
+    chargeMode.value === 'scheduled_charging' ||
+    chargeMode.value === 'stop'
+  )
+    return false;
+  return true;
+});
+
 const vehicleTarget = computed(() => {
   return mqttStore.vehicleChargeTarget(props.chargePointId).value;
 });

From 3a01a84fe6d3d7f13a9df90b0bdce23645be7851 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 20 Feb 2026 15:33:34 +0100
Subject: [PATCH 09/19] Add tooltip - limit slider

---
 .../koala/source/src/components/ChargePointCard.vue   | 11 +++++++++--
 .../koala/source/src/components/SliderDouble.vue      |  1 +
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index d440a1cadb..bb3a982e4e 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -77,7 +77,10 @@
       </div>
     </q-card-section>
     <q-card-section>
-      <div v-if="showEnergyLimitToggle" class="row items-center justify-between">
+      <div
+        v-if="showEnergyLimitToggle"
+        class="row items-center justify-between"
+      >
         <div class="text-subtitle2">Energie Begrenzung</div>
         <q-toggle
           v-model="energyTargetEnabled"
@@ -101,7 +104,11 @@
         :on-edit-soc="openSocDialog"
         :on-refresh-soc="refreshSoc"
         @click="openLimitDialog"
-      />
+      >
+        <template #tooltip>
+          <q-tooltip> Begrenzung einstellen </q-tooltip>
+        </template>
+      </SliderDouble>
     </q-card-section>
     <q-card-actions v-if="$slots['card-actions']" align="right">
       <slot name="card-actions"></slot>
diff --git a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
index a954fcf6df..c2c71a3c55 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
@@ -16,6 +16,7 @@
         @touchmove.stop
         @touchend.stop
       />
+      <slot name="tooltip" />
       <q-slider
         v-if="props.limitMode == 'soc'"
         v-model="target"

From d943e3bd92e06e45cea6cc4faffdacec9ed2c6b3 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 20 Feb 2026 16:07:33 +0100
Subject: [PATCH 10/19] only show tool tip for relevant charge modes

---
 .../source/src/components/ChargePointCard.vue     | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index bb3a982e4e..68331e35dc 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -87,7 +87,13 @@
           icon="ev_station"
           size="lg"
           @update:model-value="onEnergyToggle"
-        />
+        >
+          <q-tooltip>
+            {{
+              energyTargetEnabled ? 'Energie Begrenzung' : 'keine Begrenzung'
+            }}
+          </q-tooltip>
+        </q-toggle>
       </div>
     </q-card-section>
     <q-card-section>
@@ -106,7 +112,11 @@
         @click="openLimitDialog"
       >
         <template #tooltip>
-          <q-tooltip> Begrenzung einstellen </q-tooltip>
+          <q-tooltip
+            v-if="chargeMode !== 'scheduled_charging' && chargeMode !== 'stop'"
+          >
+            Begrenzung einstellen
+          </q-tooltip>
         </template>
       </SliderDouble>
     </q-card-section>
@@ -365,7 +375,6 @@ const onEnergyToggle = (enabled: boolean) => {
   const limit = mqttStore.chargePointConnectedVehicleInstantChargeLimit(
     props.chargePointId,
   );
-
   if (enabled) {
     limit.value = 'amount';
   } else {

From 7d54bde53dc192d4a3d5976a1f2f4a7faf130a8d Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 23 Feb 2026 09:14:27 +0100
Subject: [PATCH 11/19] Rename charge limits dialog - add slider attributes

---
 .../source/src/components/ChargePointCard.vue     |  4 ++--
 ...argeLimits.vue => ChargePointChargeLimits.vue} | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)
 rename packages/modules/web_themes/koala/source/src/components/{ChargeLimits.vue => ChargePointChargeLimits.vue} (92%)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index 68331e35dc..7bdb87fe61 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -129,7 +129,7 @@
       v-model="settingsVisible"
     />
     <!-- //////////////////////  modal charge limit settings dialog   //////////////////// -->
-    <ChargeLimits
+    <ChargePointChargeLimits
       :chargePointId="props.chargePointId"
       :energyTargetEnabled="energyTargetEnabled"
       v-model="chargeLimitsVisible"
@@ -153,7 +153,7 @@ import ChargePointModeButtons from './ChargePointModeButtons.vue';
 import ChargePointMessage from './ChargePointMessage.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 import ChargePointSettings from './ChargePointSettings.vue';
-import ChargeLimits from './ChargeLimits.vue';
+import ChargePointChargeLimits from './ChargePointChargeLimits.vue';
 import ManualSocDialog from './ManualSocDialog.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import ChargePointPowerData from './ChargePointPowerData.vue';
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargeLimits.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue
similarity index 92%
rename from packages/modules/web_themes/koala/source/src/components/ChargeLimits.vue
rename to packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue
index 8410f037d6..81fc6fee6f 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargeLimits.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue
@@ -3,7 +3,7 @@
     v-model="visible"
     :backdrop-filter="isSmallScreen ? '' : 'blur(4px)'"
   >
-    <q-card>
+    <q-card class="card-width">
       <q-card-section>
         <div class="row nowrap q-mb-sm">
           <div class="text-h6">Begrenzung</div>
@@ -32,6 +32,11 @@
           :min="5"
           :max="100"
           :step="5"
+          color="light-green-14"
+          :track-size="'1em'"
+          :limit-mode="limitMode.value"
+          thumb-size="2.3em"
+          thumb-color="light-green-14"
           unit="%"
           v-model="limitSoC.value"
           class="q-mt-md"
@@ -41,6 +46,11 @@
           title="Energie-Limit"
           :min="1"
           :max="50"
+          color="green-7"
+          :track-size="'1em'"
+          :limit-mode="limitMode.value"
+          thumb-size="2.3em"
+          thumb-color="green-7"
           unit="kWh"
           v-model="limitEnergy.value"
           class="q-mt-md"
@@ -164,6 +174,9 @@ watch(
 </script>
 
 <style scoped>
+.card-width {
+  width: 25em;
+}
 .q-btn-group .q-btn {
   min-width: 100px !important;
 }

From 962de2fab256c67b9071e72efdcd3369584255f6 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 23 Feb 2026 09:16:35 +0100
Subject: [PATCH 12/19] remove unused CSS class

---
 .../web_themes/koala/source/src/components/SliderDouble.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
index c2c71a3c55..30d0c83968 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="double-slider-container">
+  <div>
     <div class="slider-container">
       <q-slider
         :model-value="currentValue"

From f062cec247f1b14db5893e5d4145e9df5e2d9cc3 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 23 Feb 2026 09:17:25 +0100
Subject: [PATCH 13/19] Add slider props

---
 .../source/src/components/SliderStandard.vue  | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue b/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
index 6e05b1b7bb..328d83ad84 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
@@ -11,10 +11,11 @@
           props.discreteValues ? props.discreteValues.length - 1 : props.max
         "
         :step="props.step"
-        color="primary"
+        :color="props.color"
         class="col"
-        track-size="0.5em"
-        thumb-size="1.7em"
+        :track-size="props.trackSize"
+        :thumb-size="props.thumbSize"
+        :thumb-color="props.thumbColor"
         @touchstart.stop
         @touchmove.stop
         @touchend.stop
@@ -70,6 +71,26 @@ const props = defineProps({
     type: Array as () => number[],
     default: undefined,
   },
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  trackSize: {
+    type: String,
+    default: '0.5em',
+  },
+  thumbSize: {
+    type: String,
+    default: '1.5em',
+  },
+  thumbColor: {
+    type: String,
+    default: 'primary',
+  },
+  limitMode: {
+    type: String,
+    default: undefined,
+  },
 });
 
 const emit = defineEmits<{

From 507b17ea380ba35e85e4176806f83ea7d981ebf2 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 23 Feb 2026 09:58:52 +0100
Subject: [PATCH 14/19] Remove unnecessary model-value update

---
 .../koala/source/src/components/ChargePointCard.vue  | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index 7bdb87fe61..62b672bd5e 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -86,7 +86,6 @@
           v-model="energyTargetEnabled"
           icon="ev_station"
           size="lg"
-          @update:model-value="onEnergyToggle"
         >
           <q-tooltip>
             {{
@@ -371,17 +370,6 @@ const vehicleSocType = computed(() =>
   mqttStore.chargePointConnectedVehicleSocType(props.chargePointId),
 )?.value;
 
-const onEnergyToggle = (enabled: boolean) => {
-  const limit = mqttStore.chargePointConnectedVehicleInstantChargeLimit(
-    props.chargePointId,
-  );
-  if (enabled) {
-    limit.value = 'amount';
-  } else {
-    limit.value = 'none';
-  }
-};
-
 const refreshSoc = () => {
   mqttStore.chargePointConnectedVehicleForceSocUpdate(props.chargePointId);
   $q.notify({

From daf94d44c5ef6396619328b7d8cb1cd6ef9f6ae8 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 23 Feb 2026 10:48:29 +0100
Subject: [PATCH 15/19] remove unnecassary prop

---
 .../web_themes/koala/source/src/components/ChargePointCard.vue   | 1 -
 .../koala/source/src/components/ChargePointChargeLimits.vue      | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index 62b672bd5e..4c57f3245a 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -130,7 +130,6 @@
     <!-- //////////////////////  modal charge limit settings dialog   //////////////////// -->
     <ChargePointChargeLimits
       :chargePointId="props.chargePointId"
-      :energyTargetEnabled="energyTargetEnabled"
       v-model="chargeLimitsVisible"
     />
     <!-- //////////////////////  modal soc dialog   //////////////////// -->
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue
index 81fc6fee6f..833878348e 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue
@@ -69,7 +69,6 @@ import { computed, ref, watch } from 'vue';
 const props = defineProps<{
   chargePointId: number;
   modelValue: boolean;
-  energyTargetEnabled: boolean;
 }>();
 
 const emit = defineEmits<{

From 87c6676e043a4461c2a6604906a9604e44ab6c1c Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 23 Feb 2026 15:38:38 +0100
Subject: [PATCH 16/19] Add dropdown button group for mobile

---
 .../components/ChargePointChargeLimits.vue    | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue
index 833878348e..1acda3d59a 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue
@@ -11,7 +11,41 @@
           <q-btn icon="close" flat round dense v-close-popup />
         </div>
         <q-separator class="q-mt-sm q-mb-sm" />
+        <div v-if="isSmallScreen" class="row q-pt-md full-width">
+          <q-btn-dropdown
+            class="col"
+            transition-show="scale"
+            transition-hide="scale"
+            transition-duration="500"
+            color="primary"
+            :label="currentLimitModeLabel"
+            size="md"
+            dropdown-icon="none"
+            cover
+            push
+          >
+            <q-list>
+              <template v-for="(mode, index) in limitModes" :key="mode.value">
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="limitMode.value = mode.value"
+                  :active="limitMode.value === mode.value"
+                  active-class="bg-primary text-white"
+                >
+                  <q-item-section class="text-center text-weight-bold">
+                    <q-item-label>{{
+                      mode.label.toLocaleUpperCase()
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-separator v-if="index < limitModes.length - 1" />
+              </template>
+            </q-list>
+          </q-btn-dropdown>
+        </div>
         <div
+          v-else
           class="row items-center justify-center q-ma-none q-pa-none no-wrap"
         >
           <q-btn-group class="col">
@@ -164,6 +198,12 @@ const visible = computed({
   },
 });
 
+const currentLimitModeLabel = computed(
+  () =>
+    limitModes.value.find((mode) => mode.value === limitMode.value.value)
+      ?.label,
+);
+
 watch(
   () => props.modelValue,
   (value) => {
@@ -185,4 +225,10 @@ body.mobile .q-btn-group .q-btn {
   font-size: 12px !important;
   min-height: 30px;
 }
+
+:deep(.q-btn-dropdown__arrow-container) {
+  width: 0;
+  padding: 0;
+  margin: 0;
+}
 </style>

From 0beb6706300cf5f911ac3943e1701b2a28702277 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 5 Mar 2026 08:52:01 +0100
Subject: [PATCH 17/19] remove unnecessary prop from slider

---
 .../koala/source/src/components/ChargePointChargeLimits.vue   | 2 --
 .../web_themes/koala/source/src/components/SliderStandard.vue | 4 ----
 2 files changed, 6 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue
index 1acda3d59a..9373f7473d 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue
@@ -68,7 +68,6 @@
           :step="5"
           color="light-green-14"
           :track-size="'1em'"
-          :limit-mode="limitMode.value"
           thumb-size="2.3em"
           thumb-color="light-green-14"
           unit="%"
@@ -82,7 +81,6 @@
           :max="50"
           color="green-7"
           :track-size="'1em'"
-          :limit-mode="limitMode.value"
           thumb-size="2.3em"
           thumb-color="green-7"
           unit="kWh"
diff --git a/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue b/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
index 328d83ad84..94e418666b 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
@@ -87,10 +87,6 @@ const props = defineProps({
     type: String,
     default: 'primary',
   },
-  limitMode: {
-    type: String,
-    default: undefined,
-  },
 });
 
 const emit = defineEmits<{

From c2070706695eb1e74387d36bc98a14eecf8e343e Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 10 Mar 2026 16:43:22 +0100
Subject: [PATCH 18/19] Remove toggle, clickable slider always displayed

---
 .../source/src/components/ChargePointCard.vue | 64 -------------------
 .../components/ChargePointChargeLimits.vue    | 19 ++----
 .../source/src/components/SliderDouble.vue    | 13 ++--
 3 files changed, 12 insertions(+), 84 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index 4c57f3245a..b89293897c 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -76,28 +76,8 @@
         {{ energyChargedPlugged }}
       </div>
     </q-card-section>
-    <q-card-section>
-      <div
-        v-if="showEnergyLimitToggle"
-        class="row items-center justify-between"
-      >
-        <div class="text-subtitle2">Energie Begrenzung</div>
-        <q-toggle
-          v-model="energyTargetEnabled"
-          icon="ev_station"
-          size="lg"
-        >
-          <q-tooltip>
-            {{
-              energyTargetEnabled ? 'Energie Begrenzung' : 'keine Begrenzung'
-            }}
-          </q-tooltip>
-        </q-toggle>
-      </div>
-    </q-card-section>
     <q-card-section>
       <SliderDouble
-        v-if="showSlider"
         :class="['q-mt-sm', limitEditable && 'cursor-pointer']"
         :model-value="target"
         :readonly="true"
@@ -317,50 +297,6 @@ const target = computed(() => {
   }
 });
 
-const hasSocModule = computed(() => !!vehicleSocType.value);
-
-const activeChargeLimit = computed(() => {
-  switch (chargeMode.value) {
-    case 'instant_charging':
-      return mqttStore.chargePointConnectedVehicleInstantChargeLimit(
-        props.chargePointId,
-      );
-    case 'pv_charging':
-      return mqttStore.chargePointConnectedVehiclePvChargeLimit(
-        props.chargePointId,
-      );
-    case 'eco_charging':
-      return mqttStore.chargePointConnectedVehicleEcoChargeLimit(
-        props.chargePointId,
-      );
-    default:
-      return undefined;
-  }
-});
-
-const energyTargetEnabled = computed({
-  get: () => activeChargeLimit.value?.value === 'amount',
-  set: (enabled: boolean) => {
-    if (!activeChargeLimit.value) return;
-    activeChargeLimit.value.value = enabled ? 'amount' : 'none';
-  },
-});
-
-const showSlider = computed(() => {
-  if (hasSocModule.value) return true;
-  return limitMode.value === 'amount';
-});
-
-const showEnergyLimitToggle = computed(() => {
-  if (
-    hasSocModule.value ||
-    chargeMode.value === 'scheduled_charging' ||
-    chargeMode.value === 'stop'
-  )
-    return false;
-  return true;
-});
-
 const vehicleTarget = computed(() => {
   return mqttStore.vehicleChargeTarget(props.chargePointId).value;
 });
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue
index 9373f7473d..e2acd404a4 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointChargeLimits.vue
@@ -31,6 +31,7 @@
                   v-close-popup
                   @click="limitMode.value = mode.value"
                   :active="limitMode.value === mode.value"
+                  :disable="mode.value === 'soc' && !vehicleSocType"
                   active-class="bg-primary text-white"
                 >
                   <q-item-section class="text-center text-weight-bold">
@@ -54,6 +55,8 @@
               :key="mode.value"
               :color="limitMode.value === mode.value ? 'primary' : 'grey'"
               :label="mode.label"
+              :disable="mode.value === 'soc' && !vehicleSocType"
+              :outline="mode.value === 'soc' && !vehicleSocType"
               size="sm"
               class="col"
               @click="limitMode.value = mode.value"
@@ -112,22 +115,12 @@ const mqttStore = useMqttStore();
 const isSmallScreen = computed(() => Screen.lt.sm);
 const tempValue = ref<boolean>(props.modelValue);
 
-const baseLimitModes = [
+const limitModes = [
   { value: 'none', label: 'keine' },
   { value: 'soc', label: 'EV-SoC' },
   { value: 'amount', label: 'Energie' },
 ];
 
-const limitModes = computed(() => {
-  return baseLimitModes.filter((mode) => {
-    // If vehicle has no SoC module - remove soc
-    if (!vehicleSocType.value && mode.value === 'soc') {
-      return false;
-    }
-    return true;
-  });
-});
-
 const vehicleSocType = computed(() =>
   mqttStore.chargePointConnectedVehicleSocType(props.chargePointId),
 )?.value;
@@ -197,9 +190,7 @@ const visible = computed({
 });
 
 const currentLimitModeLabel = computed(
-  () =>
-    limitModes.value.find((mode) => mode.value === limitMode.value.value)
-      ?.label,
+  () => limitModes.find((mode) => mode.value === limitMode.value.value)?.label,
 );
 
 watch(
diff --git a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
index 30d0c83968..5abcfaee8f 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="slider-container">
       <q-slider
-        :model-value="currentValue"
+        :model-value="props.currentValue"
         :min="0"
         :max="maxValue"
         :markers="props.limitMode == 'amount' ? 10000 : 10"
@@ -39,11 +39,11 @@
         <div>
           {{
             props.limitMode == 'amount'
-              ? formatEnergy(currentValue)
-              : currentValue + '%'
+              ? formatEnergy(props.currentValue)
+              : props.currentValue + '%'
           }}
           <q-icon
-            v-if="vehicleSocType === 'manual' && limitMode !== 'amount'"
+            v-if="props.vehicleSocType === 'manual' && props.limitMode !== 'amount'"
             name="edit"
             size="xs"
             class="q-ml-xs cursor-pointer"
@@ -52,7 +52,7 @@
             <q-tooltip>Ladestand eingeben</q-tooltip>
           </q-icon>
           <q-icon
-            v-else-if="vehicleSocType !== undefined && limitMode !== 'amount'"
+            v-else-if="props.vehicleSocType && props.vehicleSocType !== 'manual' && props.limitMode !== 'amount'"
             name="refresh"
             size="xs"
             class="q-ml-xs cursor-pointer"
@@ -60,6 +60,7 @@
           >
             <q-tooltip>Ladestand aktualisieren</q-tooltip>
           </q-icon>
+          <span v-if="!props.vehicleSocType && props.limitMode !== 'amount'" class="row">Kein SoC-Modul konfiguriert</span>
         </div>
       </div>
       <div v-if="props.targetTime" class="col text-center">
@@ -117,7 +118,7 @@ const props = defineProps({
   vehicleSocType: {
     type: String,
     required: false,
-    default: undefined,
+    default: null,
   },
   onEditSoc: {
     type: Function,

From 2a69bf41da0e421a7b9b768be9cb6d0cc13308ee Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 12 Mar 2026 15:49:53 +0100
Subject: [PATCH 19/19] Replace the SoC figure with info text if no SoC-Modul
 configured

---
 .../koala/source/src/components/SliderDouble.vue           | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
index 5abcfaee8f..e8e163c8dd 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
@@ -38,9 +38,11 @@
         <div>{{ props.limitMode == 'amount' ? 'Geladen' : 'Ladestand' }}</div>
         <div>
           {{
-            props.limitMode == 'amount'
+            props.limitMode === 'amount'
               ? formatEnergy(props.currentValue)
-              : props.currentValue + '%'
+              : !props.vehicleSocType
+                ? 'Kein SoC-Modul konfiguriert'
+                : props.currentValue + '%'
           }}
           <q-icon
             v-if="props.vehicleSocType === 'manual' && props.limitMode !== 'amount'"
@@ -60,7 +62,6 @@
           >
             <q-tooltip>Ladestand aktualisieren</q-tooltip>
           </q-icon>
-          <span v-if="!props.vehicleSocType && props.limitMode !== 'amount'" class="row">Kein SoC-Modul konfiguriert</span>
         </div>
       </div>
       <div v-if="props.targetTime" class="col text-center">