From 37156115a979d9a972ade5447861f65def5f0526 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 27 Apr 2026 08:59:57 +0200
Subject: [PATCH 1/3] Koala Eco settings buttons visibility

---
 .../source/src/components/ChargePointEcoSettings.vue | 12 ++++++------
 .../web_themes/koala/source/src/stores/mqtt-store.ts |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
index a1e24eaadd..4971e4ecbf 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
@@ -46,7 +46,7 @@
     <div class="row no-wrap items-center justify-between q-mb-xs q-gutter-x-xs">
       <div class="col-auto">
         <q-btn
-          v-if="maxPrice.value"
+          v-if="maxPrice.value != null"
           class="col-auto q-mr-xs disable-zoom"
           label="-1,00"
           color="grey"
@@ -55,7 +55,7 @@
           @click="maxPrice.value = maxPrice.value - 1"
         />
         <q-btn
-          v-if="maxPrice.value"
+          v-if="maxPrice.value != null"
           class="col-auto q-mr-xs disable-zoom"
           label="-0,10"
           color="grey"
@@ -64,7 +64,7 @@
           @click="maxPrice.value = maxPrice.value - 0.1"
         />
         <q-btn
-          v-if="maxPrice.value"
+          v-if="maxPrice.value != null"
           class="col-auto disable-zoom"
           label="-0,01"
           color="grey"
@@ -83,7 +83,7 @@
       </div>
       <div class="col-auto">
         <q-btn
-          v-if="maxPrice.value"
+          v-if="maxPrice.value != null"
           class="col-auto q-mr-xs disable-zoom"
           label="+0,01"
           color="grey"
@@ -92,7 +92,7 @@
           @click="maxPrice.value = maxPrice.value + 0.01"
         />
         <q-btn
-          v-if="maxPrice.value"
+          v-if="maxPrice.value != null"
           class="col-auto q-mr-xs disable-zoom"
           label="+0,10"
           color="grey"
@@ -101,7 +101,7 @@
           @click="maxPrice.value = maxPrice.value + 0.1"
         />
         <q-btn
-          v-if="maxPrice.value"
+          v-if="maxPrice.value != null"
           class="col-auto disable-zoom"
           label="+1,00"
           color="grey"
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 e77f432abc..d405a29ebb 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
@@ -1984,7 +1984,7 @@ export const useMqttStore = defineStore('mqtt', () => {
   /**
    * Get or set the charge point connected vehicle eco charging max price identified by the charge point id
    * @param chargePointId charge point id
-   * @returns string | undefined
+   * @returns number | undefined
    */
   const chargePointConnectedVehicleEcoChargeMaxPrice = (
     chargePointId: number,

From d319879fe5978649b327d713c6db1477e132ea5e Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 27 Apr 2026 10:01:30 +0200
Subject: [PATCH 2/3] remove chart animation to allow correct chart rendering

---
 .../koala/source/src/components/ElectricityTariffChart.vue       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/modules/web_themes/koala/source/src/components/ElectricityTariffChart.vue b/packages/modules/web_themes/koala/source/src/components/ElectricityTariffChart.vue
index a11ceab4c6..ed6073f9c7 100644
--- a/packages/modules/web_themes/koala/source/src/components/ElectricityTariffChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ElectricityTariffChart.vue
@@ -201,6 +201,7 @@ const myChartOptions = computed<ChartOptions<'line'>>(() => {
       mode: 'index',
       intersect: false,
     },
+    animation: false,
     scales: {
       x: {
         type: 'time',

From 1b6e85eb432f99a56e7ce1f48c5f3cc44eebab05 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 27 Apr 2026 14:52:56 +0200
Subject: [PATCH 3/3] Refactor component - Eco settings

---
 .../src/components/ChargePointEcoSettings.vue | 47 +++++++++----------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
index 4971e4ecbf..d47cb53675 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
@@ -6,7 +6,7 @@
     :max="16"
     :step="1"
     unit="A"
-    v-model="current.value"
+    v-model="current"
     class="q-mt-md"
   />
 
@@ -30,11 +30,11 @@
         <q-btn
           v-for="option in phaseOptions"
           :key="option.value"
-          :color="numPhases.value === option.value ? 'primary' : 'grey'"
+          :color="numPhases === option.value ? 'primary' : 'grey'"
           :label="option.label"
           size="sm"
           class="col"
-          @click="numPhases.value = option.value"
+          @click="numPhases = option.value"
         />
       </q-btn-group>
     </div>
@@ -46,36 +46,33 @@
     <div class="row no-wrap items-center justify-between q-mb-xs q-gutter-x-xs">
       <div class="col-auto">
         <q-btn
-          v-if="maxPrice.value != null"
           class="col-auto q-mr-xs disable-zoom"
           label="-1,00"
           color="grey"
           size="sm"
           dense
-          @click="maxPrice.value = maxPrice.value - 1"
+          @click="modifyMaxPrice(-1)"
         />
         <q-btn
-          v-if="maxPrice.value != null"
           class="col-auto q-mr-xs disable-zoom"
           label="-0,10"
           color="grey"
           size="sm"
           dense
-          @click="maxPrice.value = maxPrice.value - 0.1"
+          @click="modifyMaxPrice(-0.1)"
         />
         <q-btn
-          v-if="maxPrice.value != null"
           class="col-auto disable-zoom"
           label="-0,01"
           color="grey"
           size="sm"
           dense
-          @click="maxPrice.value = maxPrice.value - 0.01"
+          @click="modifyMaxPrice(-0.01)"
         />
       </div>
       <div class="col-auto q-mx-sm">
         {{
-          maxPrice.value?.toLocaleString(undefined, {
+          maxPrice?.toLocaleString(undefined, {
             minimumFractionDigits: 2,
             maximumFractionDigits: 2,
           }) + ' ct/kWh'
@@ -83,38 +80,35 @@
       </div>
       <div class="col-auto">
         <q-btn
-          v-if="maxPrice.value != null"
           class="col-auto q-mr-xs disable-zoom"
           label="+0,01"
           color="grey"
           size="sm"
           dense
-          @click="maxPrice.value = maxPrice.value + 0.01"
+          @click="modifyMaxPrice(0.01)"
         />
         <q-btn
-          v-if="maxPrice.value != null"
           class="col-auto q-mr-xs disable-zoom"
           label="+0,10"
           color="grey"
           size="sm"
           dense
-          @click="maxPrice.value = maxPrice.value + 0.1"
+          @click="modifyMaxPrice(0.1)"
         />
         <q-btn
-          v-if="maxPrice.value != null"
           class="col-auto disable-zoom"
           label="+1,00"
           color="grey"
           size="sm"
           dense
-          @click="maxPrice.value = maxPrice.value + 1"
+          @click="modifyMaxPrice(1)"
         />
       </div>
     </div>
     <q-field filled class="q-mt-sm">
       <ElectricityTariffChart
-        :modelValue="maxPrice.value"
-        @update:modelValue="maxPrice.value = $event"
+        :modelValue="maxPrice"
+        @update:modelValue="maxPrice = $event"
       />
     </q-field>
   </div>
@@ -132,15 +126,14 @@ const props = defineProps<{
 
 const mqttStore = useMqttStore();
 
-
 const phaseOptions = [
   { value: 1, label: '1' },
   { value: 3, label: 'Maximum' },
   { value: 0, label: 'Automatik' },
 ];
 
-const current = computed(() =>
-  mqttStore.chargePointConnectedVehicleEcoChargeCurrent(props.chargePointId),
+const current = mqttStore.chargePointConnectedVehicleEcoChargeCurrent(
+  props.chargePointId,
 );
 
 const dcChargingEnabled = computed(
@@ -155,15 +148,19 @@ const dcPower = computed(() =>
   mqttStore.chargePointConnectedVehicleEcoChargeDcPower(props.chargePointId),
 );
 
-const numPhases = computed(() =>
-  mqttStore.chargePointConnectedVehicleEcoChargePhases(props.chargePointId),
+const numPhases = mqttStore.chargePointConnectedVehicleEcoChargePhases(
+  props.chargePointId,
 );
 
 const etConfigured = computed(() => mqttStore.etProviderConfigured);
 
-const maxPrice = computed(() =>
-  mqttStore.chargePointConnectedVehicleEcoChargeMaxPrice(props.chargePointId),
+const maxPrice = mqttStore.chargePointConnectedVehicleEcoChargeMaxPrice(
+  props.chargePointId,
 );
+
+const modifyMaxPrice = (delta: number) => {
+  maxPrice.value = (maxPrice.value || 0) + delta;
+};
 </script>
 
 <style scoped>