From b6931398829e7b8c212b989264df928cfff20678 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 12 Mar 2025 17:01:01 +0100
Subject: [PATCH 01/10] Add power meter (counter) name to history chart from
 hierarchy ID

---
 .../charts/historyChart/HistoryChart.vue      | 13 +++++++++++--
 .../source/src/stores/mqtt-store-model.ts     | 11 +++++++++++
 .../koala/source/src/stores/mqtt-store.ts     | 19 +++++++++++++++++++
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index ad61324aab..e7fae84c02 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -53,6 +53,15 @@ const selectedData = computed(() => {
 
 const chargePointIds = computed(() => mqttStore.chargePointIds);
 const chargePointNames = computed(() => mqttStore.chargePointName);
+
+const meterName = computed(() => {
+  const gridId = mqttStore.getGridId;
+  if (gridId !== undefined) {
+    return mqttStore.getCounterName(gridId);
+  }
+  return 'Zähler';
+});
+
 const vehicles = computed(() => mqttStore.vehicleList());
 const chartRange = computed(
   () => mqttStore.themeConfiguration?.history_chart_range || 3600,
@@ -108,7 +117,7 @@ const lineChartData = computed(() => {
     labels: selectedData.value.map((item) => item.time),
     datasets: [
       {
-        label: 'Grid Power',
+        label: meterName.value,
         unit: 'kW',
         borderColor: '#a33c42',
         backgroundColor: 'rgba(239,182,188, 0.2)',
@@ -134,7 +143,7 @@ const lineChartData = computed(() => {
         yAxisID: 'y',
       },
       {
-        label: 'PV Power',
+        label: 'PV ges.',
         unit: 'kW',
         borderColor: 'green',
         backgroundColor: 'rgba(144, 238, 144, 0.2)',
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
index 7a3c63cad5..b92fc357d3 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
@@ -165,3 +165,14 @@ export interface BatteryConfiguration {
   id: number;
   configuration: object;
 }
+
+export interface CounterConfiguration {
+  name: string;
+  info: {
+    manufacturer: string;
+    model: string;
+  };
+  type: string;
+  id: number;
+  configuration: object;
+}
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 8f8c4992f4..66e54313b0 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
@@ -19,6 +19,7 @@ import type {
   ChargePointConnectedVehicleSoc,
   GraphDataPoint,
   BatteryConfiguration,
+  CounterConfiguration,
   ThemeConfiguration,
 } from './mqtt-store-model';
 
@@ -2244,6 +2245,23 @@ export const useMqttStore = defineStore('mqtt', () => {
     return undefined;
   });
 
+  /**
+   * Get the power meter(counter) name identified by the Grid ID
+   * @param counterId counter ID
+   * @returns string
+   */
+  const getCounterName = computed(() => {
+    return (counterId: number): string => {
+      const configurations = getWildcardValues.value(
+        `openWB/system/device/+/component/${counterId}/config`,
+      ) as { [key: string]: CounterConfiguration };
+      if (Object.keys(configurations).length === 0) {
+        return `Zähler ${counterId}`;
+      }
+      return Object.values(configurations)[0].name;
+    };
+  });
+
   /**
    * Get grid power identified from root of component hierarchy
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
@@ -2455,6 +2473,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     batteryMode,
     // Grid data
     getGridId,
+    getCounterName,
     getGridPower,
     // Home data
     getHomePower,

From 949bfeac44ad4efd40be82f7719b2c8fb39177e6 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Thu, 13 Mar 2025 12:38:19 +0100
Subject: [PATCH 02/10] Fix X-Axis time data display method in history chart

---
 .../charts/historyChart/HistoryChart.vue      | 38 ++++++++++++++-----
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index e7fae84c02..85c289b95f 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -73,7 +73,10 @@ const chargePointDatasets = computed(() =>
     unit: 'kW',
     borderColor: '#4766b5',
     backgroundColor: 'rgba(71, 102, 181, 0.2)',
-    data: selectedData.value.map((item) => item[`cp${cpId}-power`] as number),
+    data: selectedData.value.map((item) => ({
+      x: item.timestamp * 1000,
+      y: item[`cp${cpId}-power`] as number,
+    })),
     borderWidth: 2,
     pointRadius: 0,
     pointHoverRadius: 4,
@@ -97,9 +100,10 @@ const vehicleDatasets = computed(() =>
           pointRadius: 0,
           pointHoverRadius: 4,
           pointHitRadius: 5,
-          data: selectedData.value.map(
-            (item) => item[socKey as keyof typeof item] as number,
-          ),
+          data: selectedData.value.map((item) => ({
+            x: item.timestamp * 1000,
+            y: item[socKey as keyof typeof item] as number,
+          })),
           fill: false,
           yAxisID: 'y2',
         };
@@ -114,14 +118,16 @@ const vehicleDatasets = computed(() =>
 
 const lineChartData = computed(() => {
   return {
-    labels: selectedData.value.map((item) => item.time),
     datasets: [
       {
         label: meterName.value,
         unit: 'kW',
         borderColor: '#a33c42',
         backgroundColor: 'rgba(239,182,188, 0.2)',
-        data: selectedData.value.map((item) => item.grid),
+        data: selectedData.value.map((item) => ({
+          x: item.timestamp * 1000,
+          y: item.grid,
+        })),
         borderWidth: 2,
         pointRadius: 0,
         pointHoverRadius: 4,
@@ -134,7 +140,10 @@ const lineChartData = computed(() => {
         unit: 'kW',
         borderColor: '#949aa1',
         backgroundColor: 'rgba(148, 154, 161, 0.2)',
-        data: selectedData.value.map((item) => item['house-power'] as number),
+        data: selectedData.value.map((item) => ({
+          x: item.timestamp * 1000,
+          y: item['house-power'] as number,
+        })),
         borderWidth: 2,
         pointRadius: 0,
         pointHoverRadius: 4,
@@ -147,7 +156,10 @@ const lineChartData = computed(() => {
         unit: 'kW',
         borderColor: 'green',
         backgroundColor: 'rgba(144, 238, 144, 0.2)',
-        data: selectedData.value.map((item) => item['pv-all'] as number),
+        data: selectedData.value.map((item) => ({
+          x: item.timestamp * 1000,
+          y: item['pv-all'] as number,
+        })),
         borderWidth: 2,
         pointRadius: 0,
         pointHoverRadius: 4,
@@ -160,7 +172,10 @@ const lineChartData = computed(() => {
         unit: 'kW',
         borderColor: '#b5a647',
         backgroundColor: 'rgba(181, 166, 71, 0.2)',
-        data: selectedData.value.map((item) => item['bat-all-power'] as number),
+        data: selectedData.value.map((item) => ({
+          x: item.timestamp * 1000,
+          y: item['bat-all-power'] as number,
+        })),
         borderWidth: 2,
         pointRadius: 0,
         pointHoverRadius: 4,
@@ -177,7 +192,10 @@ const lineChartData = computed(() => {
         pointRadius: 0,
         pointHoverRadius: 4,
         pointHitRadius: 5,
-        data: selectedData.value.map((item) => item['bat-all-soc'] as number),
+        data: selectedData.value.map((item) => ({
+          x: item.timestamp * 1000,
+          y: item['bat-all-soc'] as number,
+        })),
         fill: false,
         yAxisID: 'y2',
       },

From 18aecb524a46263eb4debabccc85866fa087bc97 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Thu, 13 Mar 2025 15:40:26 +0100
Subject: [PATCH 03/10] Import / register tooltip plugin for history chart

---
 .../source/src/components/charts/historyChart/HistoryChart.vue  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index 85c289b95f..055b6a13f2 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -20,6 +20,7 @@ import {
   PointElement,
   LinearScale,
   TimeScale,
+  Tooltip,
   Filler,
 } from 'chart.js';
 import { useMqttStore } from 'src/stores/mqtt-store';
@@ -33,6 +34,7 @@ Chart.register(
   PointElement,
   LinearScale,
   TimeScale,
+  Tooltip,
   Filler,
 );
 const $q = useQuasar();

From f73896dea4844eb6ac6b2fee553f43325be36333 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 14 Mar 2025 17:09:42 +0100
Subject: [PATCH 04/10] History Chart - preserve legend item visibility on
 reload

---
 .../charts/historyChart/HistoryChart.vue      | 85 ++++++++++++++++++-
 1 file changed, 82 insertions(+), 3 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index 055b6a13f2..ae9db911a7 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -4,12 +4,13 @@
       :data="lineChartData"
       :options="chartOptions"
       :class="'chart'"
+      ref="chartRef"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, onMounted, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import { Line as ChartjsLine } from 'vue-chartjs';
 import {
@@ -22,6 +23,10 @@ import {
   TimeScale,
   Tooltip,
   Filler,
+  ChartEvent,
+  LegendItem,
+  LegendElement,
+  ChartTypeRegistry
 } from 'chart.js';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import 'chartjs-adapter-luxon';
@@ -37,12 +42,73 @@ Chart.register(
   Tooltip,
   Filler,
 );
-const $q = useQuasar();
 
+// Define a type for the component that contains the Chart instance
+interface ChartComponentRef {
+  chart?: Chart;
+}
+
+const chartRef = ref<ChartComponentRef | null>(null);
+const $q = useQuasar();
 const props = defineProps<{
   showLegend: boolean;
 }>();
 
+const hiddenDatasets = ref<string[]>([]);
+
+// ******  on mount hook to preserve legend item state (hidden/shown) on card swipe / page reload *****
+onMounted(() => {
+  const savedHiddenDatasets = localStorage.getItem('historyChartHiddenDatasets');
+  if (savedHiddenDatasets) {
+    hiddenDatasets.value = JSON.parse(savedHiddenDatasets);
+  }
+
+  //delay to ensure the chart is fully rendered
+  setTimeout(() => {
+    if (chartRef.value?.chart) {
+      const chart = chartRef.value.chart;
+
+      if (chart.options.plugins && chart.options.plugins.legend) {
+        chart.options.plugins.legend.onClick = function(
+          e: ChartEvent,
+          legendItem: LegendItem,
+          legend: LegendElement<keyof ChartTypeRegistry>
+        ) {
+          // Get the dataset index
+          const index = legendItem.datasetIndex!;
+          const chartInstance = legend.chart;
+
+         // Toggle visibility
+         if (chartInstance.isDatasetVisible(index)) {
+            chartInstance.hide(index);
+            hiddenDatasets.value.push(legendItem.text);
+          } else {
+            chartInstance.show(index);
+            hiddenDatasets.value = hiddenDatasets.value.filter(
+              item => item !== legendItem.text
+            );
+          }
+
+          localStorage.setItem(
+            'historyChartHiddenDatasets',
+            JSON.stringify(hiddenDatasets.value)
+          );
+
+          chartInstance.update();
+        };
+      }
+
+      // Apply initial hidden datasets
+      chart.data.datasets.forEach((dataset, index) => {
+        if (hiddenDatasets.value.includes(dataset.label as string)) {
+          chart.hide(index);
+        }
+      });
+      chart.update();
+    }
+  }, 100);
+});
+
 const legendDisplay = computed(() => props.showLegend);
 
 const mqttStore = useMqttStore();
@@ -235,7 +301,6 @@ const chartOptions = computed(() => ({
       type: 'time' as const,
       time: {
         unit: 'minute' as const,
-        // stepSize: 5,
         displayFormats: {
           minute: 'HH:mm' as const,
         },
@@ -288,6 +353,20 @@ const chartOptions = computed(() => ({
     },
   },
 }));
+
+watch(() => lineChartData.value, () => {
+    if (chartRef.value?.chart) {
+      const chart = chartRef.value.chart;
+      chart.data.datasets.forEach((dataset, index) => {
+        if (hiddenDatasets.value.includes(dataset.label as string)) {
+          chart.hide(index);
+        } else {
+          chart.show(index);
+        }
+      });
+      chart.update();
+    }
+}, { deep: true });
 </script>
 
 <style scoped>

From 8e140a57a5253be476f320143379684b981f6d6a Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 14 Mar 2025 17:13:05 +0100
Subject: [PATCH 05/10] History Chart remove unnecessary watcher for legend
 visibility

---
 .../charts/historyChart/HistoryChart.vue          | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index ae9db911a7..04a27078c7 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, watch } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 import { Line as ChartjsLine } from 'vue-chartjs';
 import {
@@ -354,19 +354,6 @@ const chartOptions = computed(() => ({
   },
 }));
 
-watch(() => lineChartData.value, () => {
-    if (chartRef.value?.chart) {
-      const chart = chartRef.value.chart;
-      chart.data.datasets.forEach((dataset, index) => {
-        if (hiddenDatasets.value.includes(dataset.label as string)) {
-          chart.hide(index);
-        } else {
-          chart.show(index);
-        }
-      });
-      chart.update();
-    }
-}, { deep: true });
 </script>
 
 <style scoped>

From 3d663db8f54f6d74be4d21e4f8a5d06ba8ad3e3b Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 17 Mar 2025 09:45:10 +0100
Subject: [PATCH 06/10] Refactor chart legend item visibility persistence

---
 .../charts/historyChart/HistoryChart.vue      | 123 ++++++++++--------
 .../historyChart/history-chart-model.ts       |   8 +-
 2 files changed, 72 insertions(+), 59 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index 04a27078c7..0cd0c88eda 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import { Line as ChartjsLine } from 'vue-chartjs';
 import {
@@ -26,11 +26,14 @@ import {
   ChartEvent,
   LegendItem,
   LegendElement,
-  ChartTypeRegistry
+  ChartTypeRegistry,
 } from 'chart.js';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import 'chartjs-adapter-luxon';
-import type { HistoryChartTooltipItem } from './history-chart-model';
+import type {
+  HistoryChartTooltipItem,
+  ChartComponentRef,
+} from './history-chart-model';
 
 Chart.register(
   Legend,
@@ -43,75 +46,82 @@ Chart.register(
   Filler,
 );
 
-// Define a type for the component that contains the Chart instance
-interface ChartComponentRef {
-  chart?: Chart;
-}
-
-const chartRef = ref<ChartComponentRef | null>(null);
+const legendDisplay = computed(() => props.showLegend);
+const mqttStore = useMqttStore();
 const $q = useQuasar();
 const props = defineProps<{
   showLegend: boolean;
 }>();
 
+const chartRef = ref<ChartComponentRef | null>(null);
 const hiddenDatasets = ref<string[]>([]);
 
-// ******  on mount hook to preserve legend item state (hidden/shown) on card swipe / page reload *****
+// on mount hook to preserve legend item state (hidden/shown) on card swipe / page reload
 onMounted(() => {
-  const savedHiddenDatasets = localStorage.getItem('historyChartHiddenDatasets');
+  loadSavedHiddenDatasets();
+});
+
+const loadSavedHiddenDatasets = (): void => {
+  const savedHiddenDatasets = localStorage.getItem(
+    'historyChartHiddenDatasets',
+  );
   if (savedHiddenDatasets) {
     hiddenDatasets.value = JSON.parse(savedHiddenDatasets);
   }
+};
 
-  //delay to ensure the chart is fully rendered
-  setTimeout(() => {
-    if (chartRef.value?.chart) {
-      const chart = chartRef.value.chart;
-
-      if (chart.options.plugins && chart.options.plugins.legend) {
-        chart.options.plugins.legend.onClick = function(
-          e: ChartEvent,
-          legendItem: LegendItem,
-          legend: LegendElement<keyof ChartTypeRegistry>
-        ) {
-          // Get the dataset index
-          const index = legendItem.datasetIndex!;
-          const chartInstance = legend.chart;
-
-         // Toggle visibility
-         if (chartInstance.isDatasetVisible(index)) {
-            chartInstance.hide(index);
-            hiddenDatasets.value.push(legendItem.text);
-          } else {
-            chartInstance.show(index);
-            hiddenDatasets.value = hiddenDatasets.value.filter(
-              item => item !== legendItem.text
-            );
-          }
-
-          localStorage.setItem(
-            'historyChartHiddenDatasets',
-            JSON.stringify(hiddenDatasets.value)
-          );
+const updateChartLegend = (chart?: Chart): void => {
+  if (!chartRef.value?.chart) return;
+  chart = chartRef.value.chart;
+  if (chart.options.plugins && chart.options.plugins.legend) {
+    chart.options.plugins.legend.onClick = handleLegendClick;
+  }
+  applyHiddenDatasetsToChart(chart);
+};
 
-          chartInstance.update();
-        };
-      }
+// Custom legend click handler to toggle dataset visibility
+const handleLegendClick = (
+  e: ChartEvent,
+  legendItem: LegendItem,
+  legend: LegendElement<keyof ChartTypeRegistry>,
+): void => {
+  const index = legendItem.datasetIndex!;
+  const chartInstance = legend.chart;
+  // Toggle visibility
+  if (chartInstance.isDatasetVisible(index)) {
+    chartInstance.hide(index);
+    hiddenDatasets.value.push(legendItem.text);
+  } else {
+    chartInstance.show(index);
+    hiddenDatasets.value = hiddenDatasets.value.filter(
+      (item) => item !== legendItem.text,
+    );
+  }
+  localStorage.setItem(
+    'historyChartHiddenDatasets',
+    JSON.stringify(hiddenDatasets.value),
+  );
+  chartInstance.update();
+};
 
-      // Apply initial hidden datasets
-      chart.data.datasets.forEach((dataset, index) => {
-        if (hiddenDatasets.value.includes(dataset.label as string)) {
-          chart.hide(index);
-        }
-      });
-      chart.update();
+const applyHiddenDatasetsToChart = (chart: Chart): void => {
+  chart.data.datasets.forEach((dataset, index) => {
+    if (hiddenDatasets.value.includes(dataset.label as string)) {
+      chart.hide(index);
     }
-  }, 100);
-});
-
-const legendDisplay = computed(() => props.showLegend);
+  });
+  chart.update();
+};
 
-const mqttStore = useMqttStore();
+watch(
+  () => chartRef.value?.chart,
+  (chart) => {
+    if (chart) {
+      updateChartLegend(chart);
+    }
+  },
+  { immediate: true },
+);
 
 const selectedData = computed(() => {
   const data = mqttStore.chartData;
@@ -353,7 +363,6 @@ const chartOptions = computed(() => ({
     },
   },
 }));
-
 </script>
 
 <style scoped>
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 f219c7840f..efacd28589 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
@@ -1,7 +1,11 @@
-import { TooltipItem } from 'chart.js'; // Importieren des TooltipItem-Typs
-
+import { TooltipItem, Chart } from 'chart.js'; // Importieren des TooltipItem-Typs
 export interface HistoryChartTooltipItem extends TooltipItem<'line'> {
   dataset: TooltipItem<'line'>['dataset'] & {
     unit?: string;
   };
 }
+
+// Define a type for the component that contains the Chart instance
+export interface ChartComponentRef {
+  chart?: Chart;
+}

From d6e42baccda06d1f56b3422e9c1a15c7ef69352f Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 21 Mar 2025 09:31:02 +0100
Subject: [PATCH 07/10] Refactor history chart legend visibility / persistence

---
 .../source/src/components/ChartCarousel.vue   |  10 +-
 .../charts/historyChart/HistoryChart.vue      | 109 +++++++-----------
 .../source/src/stores/localData-store.ts      |  54 +++++++++
 .../koala/source/src/stores/mqtt-store.ts     |  10 +-
 4 files changed, 108 insertions(+), 75 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/stores/localData-store.ts

diff --git a/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue b/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
index e5c112005d..2613a0bd9d 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
@@ -42,22 +42,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useQuasar } from 'quasar';
 import EnergyFlowChart from './charts/energyFlowChart/EnergyFlowChart.vue';
 import HistoryChart from './charts/historyChart/HistoryChart.vue';
+import { useLocalDataStore } from 'src/stores/localData-store';
 
 defineOptions({
   name: 'ChartCarousel',
 });
 const $q = useQuasar();
-
-const legendVisible = ref(!$q.platform.is.mobile);
+const localDataStore = useLocalDataStore();
 
 const toggleLegend = () => {
-  legendVisible.value = !legendVisible.value;
+  localDataStore.toggleLegendVisibility();
 };
-
+const legendVisible = computed(() => localDataStore.legendVisible);
 const fullscreen = ref(false);
 const chartCarouselItems = [
   {
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index 0cd0c88eda..18aa3ce040 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import { Line as ChartjsLine } from 'vue-chartjs';
 import {
@@ -27,8 +27,12 @@ import {
   LegendItem,
   LegendElement,
   ChartTypeRegistry,
+  ChartDataset,
+  ChartType,
 } from 'chart.js';
 import { useMqttStore } from 'src/stores/mqtt-store';
+import { useLocalDataStore } from 'src/stores/localData-store';
+import { GraphDataPoint } from 'src/stores/mqtt-store-model';
 import 'chartjs-adapter-luxon';
 import type {
   HistoryChartTooltipItem,
@@ -48,65 +52,22 @@ Chart.register(
 
 const legendDisplay = computed(() => props.showLegend);
 const mqttStore = useMqttStore();
+const localDataStore = useLocalDataStore();
 const $q = useQuasar();
 const props = defineProps<{
   showLegend: boolean;
 }>();
 
 const chartRef = ref<ChartComponentRef | null>(null);
-const hiddenDatasets = ref<string[]>([]);
 
-// on mount hook to preserve legend item state (hidden/shown) on card swipe / page reload
-onMounted(() => {
-  loadSavedHiddenDatasets();
-});
-
-const loadSavedHiddenDatasets = (): void => {
-  const savedHiddenDatasets = localStorage.getItem(
-    'historyChartHiddenDatasets',
-  );
-  if (savedHiddenDatasets) {
-    hiddenDatasets.value = JSON.parse(savedHiddenDatasets);
-  }
-};
-
-const updateChartLegend = (chart?: Chart): void => {
-  if (!chartRef.value?.chart) return;
-  chart = chartRef.value.chart;
-  if (chart.options.plugins && chart.options.plugins.legend) {
-    chart.options.plugins.legend.onClick = handleLegendClick;
-  }
-  applyHiddenDatasetsToChart(chart);
-};
-
-// Custom legend click handler to toggle dataset visibility
-const handleLegendClick = (
-  e: ChartEvent,
-  legendItem: LegendItem,
-  legend: LegendElement<keyof ChartTypeRegistry>,
+const applyHiddenDatasetsToChart = <TType extends ChartType, TData>(
+  chart: Chart<TType, TData>,
 ): void => {
-  const index = legendItem.datasetIndex!;
-  const chartInstance = legend.chart;
-  // Toggle visibility
-  if (chartInstance.isDatasetVisible(index)) {
-    chartInstance.hide(index);
-    hiddenDatasets.value.push(legendItem.text);
-  } else {
-    chartInstance.show(index);
-    hiddenDatasets.value = hiddenDatasets.value.filter(
-      (item) => item !== legendItem.text,
-    );
-  }
-  localStorage.setItem(
-    'historyChartHiddenDatasets',
-    JSON.stringify(hiddenDatasets.value),
-  );
-  chartInstance.update();
-};
-
-const applyHiddenDatasetsToChart = (chart: Chart): void => {
-  chart.data.datasets.forEach((dataset, index) => {
-    if (hiddenDatasets.value.includes(dataset.label as string)) {
+  chart.data.datasets.forEach((dataset: ChartDataset<TType, TData>, index) => {
+    if (
+      typeof dataset.label === 'string' &&
+      localDataStore.isDatasetHidden(dataset.label)
+    ) {
       chart.hide(index);
     }
   });
@@ -117,13 +78,13 @@ watch(
   () => chartRef.value?.chart,
   (chart) => {
     if (chart) {
-      updateChartLegend(chart);
+      applyHiddenDatasetsToChart(chart);
     }
   },
   { immediate: true },
 );
 
-const selectedData = computed(() => {
+const selectedData = computed((): GraphDataPoint[] => {
   const data = mqttStore.chartData;
   const currentTime = Math.floor(Date.now() / 1000);
   return data.filter((item) => item.timestamp > currentTime - chartRange.value);
@@ -132,10 +93,10 @@ const selectedData = computed(() => {
 const chargePointIds = computed(() => mqttStore.chargePointIds);
 const chargePointNames = computed(() => mqttStore.chargePointName);
 
-const meterName = computed(() => {
+const gridMeterName = computed(() => {
   const gridId = mqttStore.getGridId;
   if (gridId !== undefined) {
-    return mqttStore.getCounterName(gridId);
+    return mqttStore.getComponentName(gridId);
   }
   return 'Zähler';
 });
@@ -153,7 +114,7 @@ const chargePointDatasets = computed(() =>
     backgroundColor: 'rgba(71, 102, 181, 0.2)',
     data: selectedData.value.map((item) => ({
       x: item.timestamp * 1000,
-      y: item[`cp${cpId}-power`] as number,
+      y: item[`cp${cpId}-power`] || 0,
     })),
     borderWidth: 2,
     pointRadius: 0,
@@ -167,7 +128,7 @@ const chargePointDatasets = computed(() =>
 const vehicleDatasets = computed(() =>
   vehicles.value
     .map((vehicle) => {
-      const socKey = `ev${vehicle.id}-soc`;
+      const socKey = `ev${vehicle.id}-soc` as keyof GraphDataPoint;
       if (selectedData.value.some((item) => socKey in item)) {
         return {
           label: `${vehicle.name} SoC`,
@@ -180,7 +141,7 @@ const vehicleDatasets = computed(() =>
           pointHitRadius: 5,
           data: selectedData.value.map((item) => ({
             x: item.timestamp * 1000,
-            y: item[socKey as keyof typeof item] as number,
+            y: Number(item[socKey] ?? 0),
           })),
           fill: false,
           yAxisID: 'y2',
@@ -193,12 +154,11 @@ const vehicleDatasets = computed(() =>
         dataset !== undefined,
     ),
 );
-
 const lineChartData = computed(() => {
   return {
     datasets: [
       {
-        label: meterName.value,
+        label: gridMeterName.value,
         unit: 'kW',
         borderColor: '#a33c42',
         backgroundColor: 'rgba(239,182,188, 0.2)',
@@ -220,7 +180,7 @@ const lineChartData = computed(() => {
         backgroundColor: 'rgba(148, 154, 161, 0.2)',
         data: selectedData.value.map((item) => ({
           x: item.timestamp * 1000,
-          y: item['house-power'] as number,
+          y: item['house-power'],
         })),
         borderWidth: 2,
         pointRadius: 0,
@@ -236,7 +196,7 @@ const lineChartData = computed(() => {
         backgroundColor: 'rgba(144, 238, 144, 0.2)',
         data: selectedData.value.map((item) => ({
           x: item.timestamp * 1000,
-          y: item['pv-all'] as number,
+          y: item['pv-all'],
         })),
         borderWidth: 2,
         pointRadius: 0,
@@ -252,7 +212,7 @@ const lineChartData = computed(() => {
         backgroundColor: 'rgba(181, 166, 71, 0.2)',
         data: selectedData.value.map((item) => ({
           x: item.timestamp * 1000,
-          y: item['bat-all-power'] as number,
+          y: item['bat-all-power'],
         })),
         borderWidth: 2,
         pointRadius: 0,
@@ -272,7 +232,7 @@ const lineChartData = computed(() => {
         pointHitRadius: 5,
         data: selectedData.value.map((item) => ({
           x: item.timestamp * 1000,
-          y: item['bat-all-soc'] as number,
+          y: item['bat-all-soc'],
         })),
         fill: false,
         yAxisID: 'y2',
@@ -296,6 +256,25 @@ const chartOptions = computed(() => ({
         boxWidth: 19,
         boxHeight: 0.1,
       },
+      onClick: (
+        e: ChartEvent,
+        legendItem: LegendItem,
+        legend: LegendElement<keyof ChartTypeRegistry>,
+      ) => {
+        const index = legendItem.datasetIndex!;
+        const chartInstance = legend.chart;
+        const datasetName = legendItem.text;
+
+        // Toggle visibility using the store
+        localDataStore.toggleDataset(datasetName);
+
+        // Update chart visibility
+        if (localDataStore.isDatasetHidden(datasetName)) {
+          chartInstance.hide(index);
+        } else {
+          chartInstance.show(index);
+        }
+      },
     },
     tooltip: {
       mode: 'index' as const,
diff --git a/packages/modules/web_themes/koala/source/src/stores/localData-store.ts b/packages/modules/web_themes/koala/source/src/stores/localData-store.ts
new file mode 100644
index 0000000000..7fa748fb1d
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/stores/localData-store.ts
@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { useQuasar } from 'quasar';
+
+export const useLocalDataStore = defineStore('localData', () => {
+  const $q = useQuasar();
+
+  //////////////    Legend Visibility     ///////////////////////
+
+  const legendVisible = ref(!$q.platform.is.mobile);
+
+  const toggleLegendVisibility = () => {
+    legendVisible.value = !legendVisible.value;
+  };
+
+  //////////////    Legend Item Visibility     ///////////////////////
+
+  const hiddenDatasets = ref<string[]>([]);
+
+  // Function to add a dataset to hidden list
+  const hideDataset = (datasetName: string) => {
+    if (!hiddenDatasets.value.includes(datasetName)) {
+      hiddenDatasets.value.push(datasetName);
+    }
+  };
+
+  const showDataset = (datasetName: string) => {
+    hiddenDatasets.value = hiddenDatasets.value.filter(
+      (item) => item !== datasetName,
+    );
+  };
+
+  const toggleDataset = (datasetName: string) => {
+    if (hiddenDatasets.value.includes(datasetName)) {
+      showDataset(datasetName);
+    } else {
+      hideDataset(datasetName);
+    }
+  };
+
+  const isDatasetHidden = (datasetName: string): boolean => {
+    return hiddenDatasets.value.includes(datasetName);
+  };
+
+  return {
+    hiddenDatasets,
+    isDatasetHidden,
+    toggleDataset,
+    hideDataset,
+    showDataset,
+    legendVisible,
+    toggleLegendVisibility,
+  };
+});
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 66e54313b0..7a9506bc74 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
@@ -2250,13 +2250,13 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @param counterId counter ID
    * @returns string
    */
-  const getCounterName = computed(() => {
-    return (counterId: number): string => {
+  const getComponentName = computed(() => {
+    return (componentId: number): string => {
       const configurations = getWildcardValues.value(
-        `openWB/system/device/+/component/${counterId}/config`,
+        `openWB/system/device/+/component/${componentId}/config`,
       ) as { [key: string]: CounterConfiguration };
       if (Object.keys(configurations).length === 0) {
-        return `Zähler ${counterId}`;
+        return `Zähler ${componentId}`;
       }
       return Object.values(configurations)[0].name;
     };
@@ -2473,7 +2473,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     batteryMode,
     // Grid data
     getGridId,
-    getCounterName,
+    getComponentName,
     getGridPower,
     // Home data
     getHomePower,

From 9e8d3c1d5e0ba049f8ff1bab909210894d3c78c9 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 24 Mar 2025 19:04:43 +0100
Subject: [PATCH 08/10] Add energy limit to slider in ChargePointCard

---
 .../source/src/components/ChargePointCard.vue |  75 ++++++++++-
 .../source/src/components/SliderDouble.vue    | 125 +++++++++++++-----
 2 files changed, 161 insertions(+), 39 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 c48a4e6388..465266347e 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -4,18 +4,22 @@
       <div class="row items-center text-h6 text-bold">
         <div class="col flex items-center">
           {{ name }}
-          <ChargePointLock :charge-point-id="props.chargePointId" />
-          <ChargePointStateIcon :charge-point-id="props.chargePointId" />
+          <ChargePointLock :charge-point-id="Number(props.chargePointId)" />
+          <ChargePointStateIcon
+            :charge-point-id="Number(props.chargePointId)"
+          />
         </div>
         <q-icon name="settings" size="sm" @click="settingsVisible = true" />
       </div>
-      <ChargePointFaultMessage :charge-point-id="props.chargePointId" />
-      <ChargePointStateMessage :charge-point-id="props.chargePointId" />
+      <ChargePointFaultMessage :charge-point-id="Number(props.chargePointId)" />
+      <ChargePointStateMessage :charge-point-id="Number(props.chargePointId)" />
       <div class="row items-center q-mt-sm">
-        <ChargePointVehicleSelect :charge-point-id="props.chargePointId" />
-        <ChargePointPriority :charge-point-id="props.chargePointId" />
+        <ChargePointVehicleSelect
+          :charge-point-id="Number(props.chargePointId)"
+        />
+        <ChargePointPriority :charge-point-id="Number(props.chargePointId)" />
       </div>
-      <ChargePointModeButtons :charge-point-id="props.chargePointId" />
+      <ChargePointModeButtons :charge-point-id="Number(props.chargePointId)" />
       <div class="row q-mt-sm">
         <div class="col">
           <div class="text-subtitle2">Leistung</div>
@@ -39,6 +43,9 @@
         :connected-vehicle-soc="connectedVehicleSoc"
         :target-soc="targetSoc"
         :target-time="targetTime"
+        :limit-mode="limitMode"
+        :current-energy-charged="currentEnergyCharged"
+        :target-energy-amount="targetEnergyAmount"
       />
     </q-card-section>
   </q-card>
@@ -69,6 +76,60 @@ const props = defineProps<{
   chargePointId: number;
 }>();
 
+// Add these computed properties
+const limitMode = computed(() => {
+  switch (chargeMode.value) {
+    case 'instant_charging':
+      return mqttStore.chargePointConnectedVehicleInstantChargeLimit(
+        props.chargePointId,
+      ).value;
+    case 'pv_charging':
+      return mqttStore.chargePointConnectedVehiclePvChargeLimit(
+        props.chargePointId,
+      ).value;
+    case 'eco_charging':
+      return mqttStore.chargePointConnectedVehicleEcoChargeLimit(
+        props.chargePointId,
+      ).value;
+    default:
+      return 'soc';
+  }
+});
+
+const currentEnergyCharged = computed(() => {
+  const energyValue = mqttStore.chargePointEnergyChargedPlugged(
+    props.chargePointId,
+    'value',
+  );
+  return typeof energyValue === 'number' ? energyValue : 0;
+});
+
+const targetEnergyAmount = computed(() => {
+  if (limitMode.value !== 'amount') return 0;
+  switch (chargeMode.value) {
+    case 'instant_charging':
+      return (
+        (mqttStore.chargePointConnectedVehicleInstantChargeLimitEnergy(
+          props.chargePointId,
+        ).value ?? 0) * 1000
+      );
+    case 'pv_charging':
+      return (
+        (mqttStore.chargePointConnectedVehiclePvChargeLimitEnergy(
+          props.chargePointId,
+        ).value ?? 0) * 1000
+      );
+    case 'eco_charging':
+      return (
+        (mqttStore.chargePointConnectedVehicleEcoChargeLimitEnergy(
+          props.chargePointId,
+        ).value ?? 0) * 1000
+      );
+    default:
+      return 0;
+  }
+});
+
 const settingsVisible = ref<boolean>(false);
 const name = computed(() => mqttStore.chargePointName(props.chargePointId));
 const power = computed(() =>
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 181c4fa987..a4ce428054 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
@@ -1,48 +1,81 @@
 <template>
   <div class="my-card">
     <div class="relative-position" style="height: 40px">
-      <q-slider
-        v-model="currentCharge"
-        :min="0"
-        :max="100"
-        color="green-7"
-        track-size="1.5em"
-        thumb-size="0px"
-        readonly
-        no-focus
-        @touchstart.stop
-        @touchmove.stop
-        @touchend.stop
-        style="position: absolute; width: 100%; z-index: 1"
-      />
-      <q-slider
-        v-model="targetCharge"
-        :min="0"
-        :max="100"
-        color="light-green-5"
-        inner-track-color="blue-grey-2"
-        track-size="1.5em"
-        :thumb-size="props.readonly ? '0' : '2em'"
-        :readonly="props.readonly"
-        @touchstart.stop
-        @touchmove.stop
-        @touchend.stop
-        style="position: absolute; width: 100%"
-      />
+      <!-- For SoC mode -->
+      <div v-if="displayMode === 'soc'">
+        <q-slider
+          v-model="currentCharge"
+          :min="0"
+          :max="100"
+          color="green-7"
+          track-size="1.5em"
+          thumb-size="0px"
+          readonly
+          no-focus
+          @touchstart.stop
+          @touchmove.stop
+          @touchend.stop
+          style="position: absolute; width: 100%; z-index: 1"
+        />
+        <q-slider
+          v-model="targetCharge"
+          :min="0"
+          :max="100"
+          color="light-green-5"
+          inner-track-color="blue-grey-2"
+          track-size="1.5em"
+          :thumb-size="props.readonly ? '0' : '2em'"
+          :readonly="props.readonly"
+          @touchstart.stop
+          @touchmove.stop
+          @touchend.stop
+          style="position: absolute; width: 100%"
+        />
+      </div>
+
+      <!-- For Energy Amount mode -->
+      <div v-else-if="displayMode === 'energy'">
+        <q-slider
+          v-model="currentEnergy"
+          :min="0"
+          :max="targetEnergy"
+          color="green-7"
+          track-size="1.5em"
+          thumb-size="0px"
+          readonly
+          no-focus
+          @touchstart.stop
+          @touchmove.stop
+          @touchend.stop
+          style="position: absolute; width: 100%; z-index: 1"
+        />
+      </div>
     </div>
 
     <div class="row justify-between no-wrap">
       <div class="col">
-        <div>Ladestand</div>
-        <div>{{ currentCharge }}%</div>
+        <div>{{ displayMode === 'soc' ? 'Ladestand' : 'Geladen' }}</div>
+        <div>
+          {{
+            displayMode === 'soc'
+              ? currentCharge + '%'
+              : formatEnergy(currentEnergy)
+          }}
+        </div>
       </div>
       <div v-if="showTargetTime" class="col text-center">
         <div>Zielzeit</div>
         <div>{{ targetTime }}</div>
       </div>
       <div class="col text-right">
-        <div>Ladeziel</div>
-        <div>{{ targetCharge }}%</div>
+        <div>{{ displayMode === 'soc' ? 'Ladeziel' : 'Energieziel' }}</div>
+        <div>
+          {{
+            displayMode === 'soc'
+              ? targetCharge + '%'
+              : formatEnergy(targetEnergy)
+          }}
+        </div>
       </div>
     </div>
   </div>
@@ -76,13 +109,41 @@ const props = defineProps({
     type: String,
     default: 'keine',
   },
+  limitMode: {
+    type: String,
+    default: 'soc',
+  },
+  currentEnergyCharged: {
+    type: Number,
+    default: 0,
+  },
+  targetEnergyAmount: {
+    type: Number,
+    default: 0,
+  },
 });
 
 const showTargetTime = computed(
   () => props.chargeMode === 'scheduled_charging',
 );
+
+const displayMode = computed(() => {
+  return props.limitMode === 'amount' ? 'energy' : 'soc';
+});
+
 const currentCharge = computed(() => props.connectedVehicleSoc);
 const targetCharge = computed(() => props.targetSoc);
+
+const currentEnergy = computed(() => props.currentEnergyCharged);
+const targetEnergy = computed(() => props.targetEnergyAmount);
+
+const formatEnergy = (value: number) => {
+  if (value >= 1000) {
+    return (value / 1000).toFixed(2) + ' kWh';
+  } else {
+    return value.toFixed(0) + ' Wh';
+  }
+};
 </script>
 
 <style scoped>

From 9a03696fefa4f541403d47225af960622341e62e Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Thu, 27 Mar 2025 15:21:25 +0100
Subject: [PATCH 09/10] Refactor charge point card and SliderDouble components

---
 .../source/src/components/ChargePointCard.vue | 15 ++--
 .../source/src/components/SliderDouble.vue    | 80 ++++++++++++-------
 2 files changed, 55 insertions(+), 40 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 465266347e..5946e55338 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -4,22 +4,22 @@
       <div class="row items-center text-h6 text-bold">
         <div class="col flex items-center">
           {{ name }}
-          <ChargePointLock :charge-point-id="Number(props.chargePointId)" />
+          <ChargePointLock :charge-point-id="props.chargePointId" />
           <ChargePointStateIcon
             :charge-point-id="Number(props.chargePointId)"
           />
         </div>
         <q-icon name="settings" size="sm" @click="settingsVisible = true" />
       </div>
-      <ChargePointFaultMessage :charge-point-id="Number(props.chargePointId)" />
-      <ChargePointStateMessage :charge-point-id="Number(props.chargePointId)" />
+      <ChargePointFaultMessage :charge-point-id="props.chargePointId" />
+      <ChargePointStateMessage :charge-point-id="props.chargePointId" />
       <div class="row items-center q-mt-sm">
         <ChargePointVehicleSelect
           :charge-point-id="Number(props.chargePointId)"
         />
-        <ChargePointPriority :charge-point-id="Number(props.chargePointId)" />
+        <ChargePointPriority :charge-point-id="props.chargePointId" />
       </div>
-      <ChargePointModeButtons :charge-point-id="Number(props.chargePointId)" />
+      <ChargePointModeButtons :charge-point-id="props.chargePointId" />
       <div class="row q-mt-sm">
         <div class="col">
           <div class="text-subtitle2">Leistung</div>
@@ -197,10 +197,7 @@ const targetSoc = computed<number | undefined>(() => {
 });
 
 const showSocTargetSlider = computed(() => {
-  return (
-    chargeMode.value !== undefined &&
-    !['stop', 'standby'].includes(chargeMode.value)
-  );
+  return chargeMode.value !== undefined && !'stop'.includes(chargeMode.value);
 });
 
 const targetTime = computed(() => {
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 a4ce428054..f3c8bb6cad 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="my-card">
-    <div class="relative-position" style="height: 40px">
+    <div class="slider-container">
       <!-- For SoC mode -->
-      <div v-if="displayMode === 'soc'">
+      <div v-if="props.limitMode !== 'amount'">
         <q-slider
-          v-model="currentCharge"
+          v-model="currentValue"
           :min="0"
           :max="100"
           color="green-7"
+          class="current-slider"
           track-size="1.5em"
           thumb-size="0px"
           readonly
@@ -15,31 +16,31 @@
           @touchstart.stop
           @touchmove.stop
           @touchend.stop
-          style="position: absolute; width: 100%; z-index: 1"
         />
         <q-slider
-          v-model="targetCharge"
+          v-model="targetValue"
           :min="0"
           :max="100"
           color="light-green-5"
           inner-track-color="blue-grey-2"
+          class="target-slider"
           track-size="1.5em"
           :thumb-size="props.readonly ? '0' : '2em'"
           :readonly="props.readonly"
           @touchstart.stop
           @touchmove.stop
           @touchend.stop
-          style="position: absolute; width: 100%"
         />
       </div>
 
       <!-- For Energy Amount mode -->
-      <div v-else-if="displayMode === 'energy'">
+      <div v-else>
         <q-slider
-          v-model="currentEnergy"
+          v-model="currentValue"
           :min="0"
-          :max="targetEnergy"
+          :max="targetValue"
           color="green-7"
+          class="current-slider"
           track-size="1.5em"
           thumb-size="0px"
           readonly
@@ -47,33 +48,37 @@
           @touchstart.stop
           @touchmove.stop
           @touchend.stop
-          style="position: absolute; width: 100%; z-index: 1"
         />
       </div>
     </div>
 
     <div class="row justify-between no-wrap">
       <div class="col">
-        <div>{{ displayMode === 'soc' ? 'Ladestand' : 'Geladen' }}</div>
+        <div>{{ props.limitMode !== 'amount' ? 'Ladestand' : 'Geladen' }}</div>
         <div>
           {{
-            displayMode === 'soc'
-              ? currentCharge + '%'
-              : formatEnergy(currentEnergy)
+            props.limitMode !== 'amount'
+              ? currentValue + '%'
+              : formatEnergy(currentValue)
           }}
         </div>
       </div>
-      <div v-if="showTargetTime" class="col text-center">
+      <div
+        v-if="props.chargeMode === 'scheduled_charging'"
+        class="col text-center"
+      >
         <div>Zielzeit</div>
-        <div>{{ targetTime }}</div>
+        <div>{{ props.targetTime }}</div>
       </div>
       <div class="col text-right">
-        <div>{{ displayMode === 'soc' ? 'Ladeziel' : 'Energieziel' }}</div>
+        <div>
+          {{ props.limitMode !== 'amount' ? 'Ladeziel' : 'Energieziel' }}
+        </div>
         <div>
           {{
-            displayMode === 'soc'
-              ? targetCharge + '%'
-              : formatEnergy(targetEnergy)
+            props.limitMode !== 'amount'
+              ? targetValue + '%'
+              : formatEnergy(targetValue)
           }}
         </div>
       </div>
@@ -123,19 +128,16 @@ const props = defineProps({
   },
 });
 
-const showTargetTime = computed(
-  () => props.chargeMode === 'scheduled_charging',
+// Unified current and target values that adapt based on the limitMode
+const currentValue = computed(() =>
+  props.limitMode === 'amount'
+    ? props.currentEnergyCharged
+    : props.connectedVehicleSoc,
 );
 
-const displayMode = computed(() => {
-  return props.limitMode === 'amount' ? 'energy' : 'soc';
-});
-
-const currentCharge = computed(() => props.connectedVehicleSoc);
-const targetCharge = computed(() => props.targetSoc);
-
-const currentEnergy = computed(() => props.currentEnergyCharged);
-const targetEnergy = computed(() => props.targetEnergyAmount);
+const targetValue = computed(() =>
+  props.limitMode === 'amount' ? props.targetEnergyAmount : props.targetSoc,
+);
 
 const formatEnergy = (value: number) => {
   if (value >= 1000) {
@@ -151,4 +153,20 @@ const formatEnergy = (value: number) => {
   width: 100%;
   max-width: 300px;
 }
+
+.slider-container {
+  position: relative;
+  height: 40px;
+}
+
+.current-slider {
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+}
+
+.target-slider {
+  position: absolute;
+  width: 100%;
+}
 </style>

From b7ba1aa10738e2940b0c39b321082fb96c8e6fda Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 1 Apr 2025 08:19:09 +0200
Subject: [PATCH 10/10] Refactor SliderDouble - two sliders only

---
 .../source/src/components/ChargePointCard.vue | 100 ++++--------
 .../source/src/components/SliderDouble.vue    | 152 +++++++-----------
 2 files changed, 91 insertions(+), 161 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 5946e55338..5b2b6a844e 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -31,32 +31,27 @@
         </div>
         <div class="col q-pl-sm">
           <div class="text-subtitle2">geladen</div>
-          <!-- {{ energyCharged }} -->
           {{ energyChargedPlugged }}
         </div>
       </div>
       <SliderDouble
         v-if="showSocTargetSlider"
         class="q-mt-sm"
+        :model-value="target"
         :readonly="true"
         :charge-mode="chargeMode"
-        :connected-vehicle-soc="connectedVehicleSoc"
-        :target-soc="targetSoc"
-        :target-time="targetTime"
         :limit-mode="limitMode"
-        :current-energy-charged="currentEnergyCharged"
-        :target-energy-amount="targetEnergyAmount"
+        :current-value="currentValue"
+        :target-time="targetTime"
       />
     </q-card-section>
   </q-card>
-
   <!-- //////////////////////  Settings popup dialog   //////////////////// -->
   <ChargePointSettings
     :chargePointId="props.chargePointId"
     v-model="settingsVisible"
   />
 </template>
-
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
@@ -69,14 +64,10 @@ import ChargePointStateMessage from './ChargePointStateMessage.vue';
 import ChargePointFaultMessage from './ChargePointFaultMessage.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 import ChargePointSettings from './ChargePointSettings.vue';
-
 const mqttStore = useMqttStore();
-
 const props = defineProps<{
   chargePointId: number;
 }>();
-
-// Add these computed properties
 const limitMode = computed(() => {
   switch (chargeMode.value) {
     case 'instant_charging':
@@ -95,47 +86,11 @@ const limitMode = computed(() => {
       return 'soc';
   }
 });
-
-const currentEnergyCharged = computed(() => {
-  const energyValue = mqttStore.chargePointEnergyChargedPlugged(
-    props.chargePointId,
-    'value',
-  );
-  return typeof energyValue === 'number' ? energyValue : 0;
-});
-
-const targetEnergyAmount = computed(() => {
-  if (limitMode.value !== 'amount') return 0;
-  switch (chargeMode.value) {
-    case 'instant_charging':
-      return (
-        (mqttStore.chargePointConnectedVehicleInstantChargeLimitEnergy(
-          props.chargePointId,
-        ).value ?? 0) * 1000
-      );
-    case 'pv_charging':
-      return (
-        (mqttStore.chargePointConnectedVehiclePvChargeLimitEnergy(
-          props.chargePointId,
-        ).value ?? 0) * 1000
-      );
-    case 'eco_charging':
-      return (
-        (mqttStore.chargePointConnectedVehicleEcoChargeLimitEnergy(
-          props.chargePointId,
-        ).value ?? 0) * 1000
-      );
-    default:
-      return 0;
-  }
-});
-
 const settingsVisible = ref<boolean>(false);
 const name = computed(() => mqttStore.chargePointName(props.chargePointId));
 const power = computed(() =>
   mqttStore.chargePointPower(props.chargePointId, 'textValue'),
 );
-
 const energyChargedPlugged = computed(() =>
   mqttStore.chargePointEnergyChargedPlugged(props.chargePointId, 'textValue'),
 );
@@ -145,20 +100,24 @@ const phaseNumber = computed(() =>
 const chargingCurrent = computed(() =>
   mqttStore.chargePointChargingCurrent(props.chargePointId),
 );
-
-const connectedVehicleSoc = computed(() =>
-  Math.round(
-    mqttStore.chargePointConnectedVehicleSoc(props.chargePointId).value?.soc ??
+const currentValue = computed(() => {
+  if (limitMode.value === 'soc') {
+    return Math.round(
+      mqttStore.chargePointConnectedVehicleSoc(props.chargePointId).value?.soc ??
       0,
-  ),
-);
-
+    );
+  } else {
+    return mqttStore.chargePointEnergyChargedPlugged(
+      props.chargePointId,
+      'value',
+    ) as number;
+  }
+});
 const chargeMode = computed(
   () =>
     mqttStore.chargePointConnectedVehicleChargeMode(props.chargePointId).value,
 );
-
-const targetSoc = computed<number | undefined>(() => {
+const target = computed(() => {
   switch (chargeMode.value) {
     case 'scheduled_charging':
       return mqttStore.vehicleScheduledChargingTarget(props.chargePointId).value
@@ -171,8 +130,10 @@ const targetSoc = computed<number | undefined>(() => {
       return instantLimitMode === 'soc'
         ? mqttStore.chargePointConnectedVehicleInstantChargeLimitSoC(
             props.chargePointId,
-          ).value
-        : undefined;
+          ).value ?? 0
+        : (mqttStore.chargePointConnectedVehicleInstantChargeLimitEnergy(
+          props.chargePointId,
+        ).value ?? 0) * 1000;
     case 'pv_charging':
       const pvLimitMode = mqttStore.chargePointConnectedVehiclePvChargeLimit(
         props.chargePointId,
@@ -180,8 +141,10 @@ const targetSoc = computed<number | undefined>(() => {
       return pvLimitMode === 'soc'
         ? mqttStore.chargePointConnectedVehiclePvChargeLimitSoC(
             props.chargePointId,
-          ).value
-        : undefined;
+          ).value ?? 0
+        : (mqttStore.chargePointConnectedVehiclePvChargeLimitEnergy(
+          props.chargePointId,
+        ).value ?? 0) * 1000;
     case 'eco_charging':
       const ecoLimitMode = mqttStore.chargePointConnectedVehicleEcoChargeLimit(
         props.chargePointId,
@@ -189,28 +152,27 @@ const targetSoc = computed<number | undefined>(() => {
       return ecoLimitMode === 'soc'
         ? mqttStore.chargePointConnectedVehicleEcoChargeLimitSoC(
             props.chargePointId,
-          ).value
-        : undefined;
+          ).value ?? 0
+        : (mqttStore.chargePointConnectedVehicleEcoChargeLimitEnergy(
+          props.chargePointId,
+        ).value ?? 0) * 1000;
     default:
-      return undefined;
+      return 0;
   }
 });
-
 const showSocTargetSlider = computed(() => {
-  return chargeMode.value !== undefined && !'stop'.includes(chargeMode.value);
+  return chargeMode.value !== undefined && !'stop'.includes(chargeMode.value) && limitMode.value !== 'none';
 });
-
 const targetTime = computed(() => {
   const target = mqttStore.vehicleScheduledChargingTarget(
     props.chargePointId,
   ).value;
   if (!target || !target.time || chargeMode.value !== 'scheduled_charging') {
-    return 'keine';
+    return undefined;
   }
   return target.time;
 });
 </script>
-
 <style lang="scss" scoped>
 .card-width {
   max-width: 24em;
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 f3c8bb6cad..618608d2ed 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
@@ -1,70 +1,49 @@
 <template>
   <div class="my-card">
     <div class="slider-container">
-      <!-- For SoC mode -->
-      <div v-if="props.limitMode !== 'amount'">
-        <q-slider
-          v-model="currentValue"
-          :min="0"
-          :max="100"
-          color="green-7"
-          class="current-slider"
-          track-size="1.5em"
-          thumb-size="0px"
-          readonly
-          no-focus
-          @touchstart.stop
-          @touchmove.stop
-          @touchend.stop
-        />
-        <q-slider
-          v-model="targetValue"
-          :min="0"
-          :max="100"
-          color="light-green-5"
-          inner-track-color="blue-grey-2"
-          class="target-slider"
-          track-size="1.5em"
-          :thumb-size="props.readonly ? '0' : '2em'"
-          :readonly="props.readonly"
-          @touchstart.stop
-          @touchmove.stop
-          @touchend.stop
-        />
-      </div>
-
-      <!-- For Energy Amount mode -->
-      <div v-else>
-        <q-slider
-          v-model="currentValue"
-          :min="0"
-          :max="targetValue"
-          color="green-7"
-          class="current-slider"
-          track-size="1.5em"
-          thumb-size="0px"
-          readonly
-          no-focus
-          @touchstart.stop
-          @touchmove.stop
-          @touchend.stop
-        />
-      </div>
+      <q-slider
+        :model-value="currentValue"
+        :min="0"
+        :max="maxValue"
+        color="green-7"
+        class="current-slider"
+        track-size="1.5em"
+        thumb-size="0px"
+        readonly
+        no-focus
+        @touchstart.stop
+        @touchmove.stop
+        @touchend.stop
+      />
+      <q-slider
+        v-if="props.limitMode == 'soc'"
+        v-model="target"
+        :min="0"
+        :max="100"
+        color="light-green-5"
+        inner-track-color="blue-grey-2"
+        class="target-slider"
+        track-size="1.5em"
+        :thumb-size="props.readonly ? '0' : '2em'"
+        :readonly="props.readonly"
+        @touchstart.stop
+        @touchmove.stop
+        @touchend.stop
+      />
     </div>
-
     <div class="row justify-between no-wrap">
       <div class="col">
-        <div>{{ props.limitMode !== 'amount' ? 'Ladestand' : 'Geladen' }}</div>
+        <div>{{ props.limitMode == 'soc' ? 'Ladestand' : 'Geladen' }}</div>
         <div>
           {{
-            props.limitMode !== 'amount'
+            props.limitMode == 'soc'
               ? currentValue + '%'
               : formatEnergy(currentValue)
           }}
         </div>
       </div>
       <div
-        v-if="props.chargeMode === 'scheduled_charging'"
+        v-if="props.targetTime"
         class="col text-center"
       >
         <div>Zielzeit</div>
@@ -72,28 +51,30 @@
       </div>
       <div class="col text-right">
         <div>
-          {{ props.limitMode !== 'amount' ? 'Ladeziel' : 'Energieziel' }}
+          {{ props.limitMode == 'soc' ? 'Ladeziel' : 'Energieziel' }}
         </div>
         <div>
           {{
-            props.limitMode !== 'amount'
-              ? targetValue + '%'
-              : formatEnergy(targetValue)
+            props.limitMode == 'soc'
+              ? target + '%'
+              : formatEnergy(target)
           }}
         </div>
       </div>
     </div>
   </div>
 </template>
-
 <script setup lang="ts">
 import { computed } from 'vue';
-
 defineOptions({
   name: 'SliderQuasar',
 });
-
+const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: true,
+  },
   readonly: {
     type: Boolean,
     default: false,
@@ -102,43 +83,34 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  connectedVehicleSoc: {
-    type: Number,
-    default: 0,
-  },
-  targetSoc: {
-    type: Number,
-    default: 0,
-  },
-  targetTime: {
-    type: String,
-    default: 'keine',
-  },
   limitMode: {
     type: String,
     default: 'soc',
   },
-  currentEnergyCharged: {
+  currentValue: {
     type: Number,
     default: 0,
   },
-  targetEnergyAmount: {
-    type: Number,
-    default: 0,
+  targetTime: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+});
+const target = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    if (!props.readonly) {
+      emit('update:modelValue', value);
+    }
   },
 });
-
-// Unified current and target values that adapt based on the limitMode
-const currentValue = computed(() =>
-  props.limitMode === 'amount'
-    ? props.currentEnergyCharged
-    : props.connectedVehicleSoc,
-);
-
-const targetValue = computed(() =>
-  props.limitMode === 'amount' ? props.targetEnergyAmount : props.targetSoc,
-);
-
+const maxValue = computed(() => {
+  if (props.limitMode == 'soc') {
+    return 100;
+  }
+  return target.value;
+});
 const formatEnergy = (value: number) => {
   if (value >= 1000) {
     return (value / 1000).toFixed(2) + ' kWh';
@@ -147,24 +119,20 @@ const formatEnergy = (value: number) => {
   }
 };
 </script>
-
 <style scoped>
 .my-card {
   width: 100%;
   max-width: 300px;
 }
-
 .slider-container {
   position: relative;
   height: 40px;
 }
-
 .current-slider {
   position: absolute;
   width: 100%;
   z-index: 1;
 }
-
 .target-slider {
   position: absolute;
   width: 100%;