From 95f1a40f56dbbaa6c88e50009529404fa4ae57b3 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 14 May 2025 15:05:46 +0200
Subject: [PATCH 01/33] Add SoC update (VehicleCard) fix current decimal place
 display

---
 .../source/src/components/ChargePointCard.vue | 12 ++-
 ...anualSocDialog.vue => ManualSocDialog.vue} | 19 ++--
 .../source/src/components/VehicleCard.vue     | 72 +++++++++-----
 .../koala/source/src/stores/mqtt-store.ts     | 93 +++++++++++++++----
 4 files changed, 146 insertions(+), 50 deletions(-)
 rename packages/modules/web_themes/koala/source/src/components/{ChargePointManualSocDialog.vue => ManualSocDialog.vue} (88%)

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 0ac9fa33cd..50fcc4a66d 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -33,7 +33,7 @@
           <q-badge rounded color="primary" :label="phaseNumber">
             <q-tooltip class="bg-primary">Phasenanzahl</q-tooltip>
           </q-badge>
-          {{ chargingCurrent + ' A' }}
+          {{ chargingCurrent }}
         </div>
         <div class="col q-pl-sm">
           <div class="text-subtitle2">geladen</div>
@@ -79,7 +79,8 @@
     :chargePointId="props.chargePointId"
     v-model="settingsVisible"
   />
-  <ChargePointManualSocDialog
+  <ManualSocDialog
+    :vehicleId="vehicleId"
     :chargePointId="props.chargePointId"
     v-model:socDialogVisible="socInputVisible"
   />
@@ -96,7 +97,7 @@ import ChargePointStateMessage from './ChargePointStateMessage.vue';
 import ChargePointFaultMessage from './ChargePointFaultMessage.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 import ChargePointSettings from './ChargePointSettings.vue';
-import ChargePointManualSocDialog from './ChargePointManualSocDialog.vue';
+import ManualSocDialog from './ManualSocDialog.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import { useQuasar } from 'quasar';
 
@@ -108,6 +109,11 @@ const props = defineProps<{
   chargePointId: number;
 }>();
 
+const vehicleId = computed(() => {
+  return mqttStore.chargePointConnectedVehicleInfo(props.chargePointId).value
+    ?.id;
+});
+
 const limitMode = computed(() => {
   switch (chargeMode.value) {
     case 'instant_charging':
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointManualSocDialog.vue b/packages/modules/web_themes/koala/source/src/components/ManualSocDialog.vue
similarity index 88%
rename from packages/modules/web_themes/koala/source/src/components/ChargePointManualSocDialog.vue
rename to packages/modules/web_themes/koala/source/src/components/ManualSocDialog.vue
index 12973e9291..e5fc21f1ea 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointManualSocDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ManualSocDialog.vue
@@ -10,7 +10,7 @@
       </q-card-section>
       <q-card-section class="q-py-none">
         <div class="row justify-center items-center">
-          <div class="col-6 col-sm-8 col-md-6">
+          <div class="col-6">
             <q-input
               v-model.number="socInputValue"
               type="text"
@@ -73,7 +73,8 @@ import { computed, ref } from 'vue';
 const mqttStore = useMqttStore();
 
 const props = defineProps<{
-  chargePointId: number;
+  vehicleId: number | undefined;
+  chargePointId?: number | undefined;
   socDialogVisible: boolean;
 }>();
 
@@ -81,6 +82,11 @@ const emit = defineEmits<{
   'update:socDialogVisible': [value: boolean];
 }>();
 
+const vehicleName = computed(() => {
+  const vehicle = mqttStore.vehicleList.find((v) => v.id === props.vehicleId);
+  return vehicle?.name || '';
+});
+
 const visible = computed({
   get: () => props.socDialogVisible,
   set: (value) => {
@@ -88,18 +94,13 @@ const visible = computed({
   },
 });
 
-const vehicleName = computed(() => {
-  return mqttStore.chargePointConnectedVehicleInfo(props.chargePointId).value
-    ?.name;
-});
-
 const socValue = ref<number | undefined>(undefined);
 
 const socInputValue = computed({
   get: () => {
     return (
       socValue.value ??
-      mqttStore.chargePointConnectedVehicleSocManual(props.chargePointId)
+      mqttStore.vehicleSocManualValue(props.vehicleId, props.chargePointId)
         .value ??
       0
     );
@@ -117,7 +118,7 @@ const socSliderMarker = {
 };
 
 const confirmChanges = () => {
-  mqttStore.chargePointConnectedVehicleSocManual(props.chargePointId).value =
+  mqttStore.vehicleSocManualValue(props.vehicleId, props.chargePointId).value =
     socInputValue.value;
 };
 
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
index faa3ac80f0..c62e792d36 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -50,41 +50,61 @@
           </q-chip>
         </div>
       </div>
-      <div v-if="vehicleSocModule !== undefined" class="row q-mt-sm">
-        <div class="col">
-          <div class="text-subtitle2">SoC Modul:</div>
-          {{ vehicleSocModule }}
-        </div>
-      </div>
       <div v-if="vehicleSocValue !== null">
-        <div class="slider-container">
-          <q-slider
-            :model-value="vehicleSocValue"
-            color="green-7"
-            track-size="1.5em"
-            thumb-size="0px"
-            :min="0"
-            :max="100"
-            :markers="10"
-            readonly
-          />
-        </div>
-        <div>Ladestand: {{ vehicleSocValue }}%</div>
+        <SliderDouble
+          class="q-mt-sm"
+          :current-value="vehicleSocValue"
+          :readonly="true"
+          :limit-mode="'none'"
+        >
+          <template #update-soc-icon>
+            <q-icon
+              v-if="vehicleSocModuleType === 'manual'"
+              name="edit"
+              size="xs"
+              class="q-ml-xs cursor-pointer"
+              @click="socInputVisible = true"
+            >
+              <q-tooltip>SoC eingeben</q-tooltip>
+            </q-icon>
+            <q-icon
+              v-else-if="vehicleSocModuleType !== undefined"
+              name="refresh"
+              size="xs"
+              class="q-ml-xs cursor-pointer"
+              @click="refreshSoc"
+            >
+              <q-tooltip>SoC aktualisieren</q-tooltip>
+            </q-icon>
+          </template>
+        </SliderDouble>
       </div>
       <slot name="card-footer"></slot>
     </q-card-section>
   </q-card>
+
+  <!-- //////////////////////  input dialog Manual SoC   //////////////////// -->
+
+  <ManualSocDialog
+    :vehicleId="props.vehicleId"
+    v-model:socDialogVisible="socInputVisible"
+  />
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
+import { useQuasar } from 'quasar';
+import SliderDouble from './SliderDouble.vue';
+import ManualSocDialog from './ManualSocDialog.vue';
 
 const props = defineProps<{
   vehicleId: number;
 }>();
 
 const mqttStore = useMqttStore();
+const $q = useQuasar();
+const socInputVisible = ref<boolean>(false);
 
 const vehicle = computed(() => {
   return mqttStore.vehicleList.find((v) => v.id === props.vehicleId);
@@ -94,8 +114,8 @@ const vehicleInfo = computed(() => {
   return mqttStore.vehicleInfo(props.vehicleId);
 });
 
-const vehicleSocModule = computed(() => {
-  return mqttStore.vehicleSocModuleName(props.vehicleId);
+const vehicleSocModuleType = computed(() => {
+  return mqttStore.vehicleSocModule(props.vehicleId)?.type;
 });
 
 const vehicleSocValue = computed(() => {
@@ -105,6 +125,14 @@ const vehicleSocValue = computed(() => {
 const vehicleState = computed(() => {
   return mqttStore.vehicleConnectionState(props.vehicleId);
 });
+
+const refreshSoc = () => {
+  mqttStore.vehicleForceSocUpdate(props.vehicleId);
+  $q.notify({
+    type: 'positive',
+    message: 'SoC Update angefordert.',
+  });
+};
 </script>
 
 <style lang="scss" scoped>
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 c9db6e7f23..1fd65fdca8 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
@@ -491,6 +491,7 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @param scale flag to scale the value, default is true
    * @param inverted flag to invert the value, default is false
    * @param defaultString default string to use, default is '---'
+   * @param showDecimalPlaces flag to show decimal places, default is false
    * @returns object
    */
   const getValueObject = computed(() => {
@@ -501,6 +502,7 @@ export const useMqttStore = defineStore('mqtt', () => {
       scale: boolean = true,
       inverted: boolean = false,
       defaultString: string = '---',
+      showDecimalPlaces: boolean = false,
     ) => {
       let scaled = false;
       let scaledValue = value;
@@ -534,9 +536,11 @@ export const useMqttStore = defineStore('mqtt', () => {
               break;
           }
         }
+        const hasDecimalPlaces = scaledValue !== Math.floor(scaledValue);
+        const decimalPlaces = scaled || (showDecimalPlaces && hasDecimalPlaces);
         textValue = scaledValue.toLocaleString(undefined, {
-          minimumFractionDigits: scaled ? 2 : 0,
-          maximumFractionDigits: scaled ? 2 : 0,
+          minimumFractionDigits: decimalPlaces ? 2 : 0,
+          maximumFractionDigits: decimalPlaces ? 2 : 0,
         });
       }
       return {
@@ -806,16 +810,25 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
-  /**
-   * Get the charge point charging current identified by the charge point id
-   */
   const chargePointChargingCurrent = computed(() => {
-    return (chargePointId: number) => {
-      return (
+    return (chargePointId: number, returnType: string = 'textValue') => {
+      const current =
         (getValue.value(
           `openWB/chargepoint/${chargePointId}/set/current`,
-        ) as number) || 0
+        ) as number) || 0;
+      const valueObject = getValueObject.value(
+        current,
+        'A',
+        '',
+        true,
+        false,
+        '---',
+        true,
       );
+      if (Object.hasOwn(valueObject, returnType)) {
+        return valueObject[returnType as keyof ValueObject];
+      }
+      console.error('returnType not found!', returnType, current);
     };
   });
 
@@ -1638,7 +1651,7 @@ export const useMqttStore = defineStore('mqtt', () => {
 
   /**
    * Get the battery power identified by the battery point id
-   * @param batteryId battery point id
+   * @param batteryId battery ID
    * @param returnType type of return value, 'textValue', 'absoluteTextValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
    * @returns string | number | ValueObject
    */
@@ -1668,7 +1681,7 @@ export const useMqttStore = defineStore('mqtt', () => {
 
   /**
    * Get the battery daily imported energy of a given battery id
-   * @param batteryId charge point id
+   * @param batteryId battery ID
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
    * @returns string | number | ValueObject
    */
@@ -1693,7 +1706,7 @@ export const useMqttStore = defineStore('mqtt', () => {
 
   /**
    * Get the battery daily exported energy of a given battery id
-   * @param batteryId charge point id
+   * @param batteryId battery ID
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
    * @returns string | number | ValueObject
    */
@@ -1860,16 +1873,16 @@ export const useMqttStore = defineStore('mqtt', () => {
   });
 
   /**
-   * Get vehicle SoC module name identified by the vehicle id
+   * Get vehicle SoC module type identified by the vehicle id
    * @param vehicleId vehicle id
-   * @returns string
+   * @returns vehicleSocModule
    */
-  const vehicleSocModuleName = computed(() => {
+  const vehicleSocModule = computed(() => {
     return (vehicleId: number) => {
       const socModule = getValue.value(
         `openWB/vehicle/${vehicleId}/soc_module/config`,
       ) as vehicleSocModule;
-      return socModule?.name;
+      return socModule;
     };
   });
 
@@ -1886,6 +1899,52 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
+  /**
+   * Get or set the manual SoC by vehicle id
+   * @param vehicleId vehicle id
+   * @param chargePointId charge point id
+   * @returns number | undefined
+   */
+  const vehicleSocManualValue = (
+    vehicleId: number | undefined,
+    chargePointId?: number,
+  ) => {
+    return computed({
+      get() {
+        const topic = `openWB/vehicle/${vehicleId}/soc_module/calculated_soc_state`;
+        const socState = getValue.value(topic) as
+          | CalculatedSocState
+          | undefined;
+        return socState?.manual_soc ?? socState?.soc_start ?? 0;
+      },
+      set(newValue: number) {
+        doPublish(
+          `openWB/set/vehicle/${vehicleId}/soc_module/calculated_soc_state/manual_soc`,
+          newValue,
+        );
+        // Also update the charge point connected vehicle soc to prevent long delay in display update
+        if (chargePointId !== undefined) {
+          const cpTopic = `openWB/chargepoint/${chargePointId}/get/connected_vehicle/soc`;
+          const cpSoc = getValue.value(cpTopic) as { soc?: number };
+          if (cpSoc && cpSoc.soc !== undefined) {
+            updateTopic(cpTopic, newValue, 'soc', true);
+          }
+        }
+      },
+    });
+  };
+
+  /**
+   * trigger a force SOC update for the vehicle by vehicle id
+   */
+  const vehicleForceSocUpdate = (vehicleId: number) => {
+    if (vehicleId !== undefined) {
+      const topic = `openWB/set/vehicle/${vehicleId}/get/force_soc_update`;
+      console.log(topic);
+      sendTopicToBroker(topic, 1);
+    }
+  };
+
   /**
    * Get vehicle state identified by the vehicle id
    * @param vehicleId vehicle id
@@ -2607,8 +2666,10 @@ export const useMqttStore = defineStore('mqtt', () => {
     chargePointConnectedVehicleConfig,
     vehicleInfo,
     vehicleConnectionState,
-    vehicleSocModuleName,
+    vehicleSocModule,
     vehicleSocValue,
+    vehicleSocManualValue,
+    vehicleForceSocUpdate,
     chargePointConnectedVehicleSoc,
     vehicleActivePlan,
     vehicleChargeTarget,

From cda918b947637342d44018bb0d982f8e8b6eb595 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 14 May 2025 15:09:51 +0200
Subject: [PATCH 02/33] Remove Soc module name from vehicle card / table

---
 .../source/src/components/VehicleInformation.vue     | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index 1118ba5090..d11bfa2790 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -109,7 +109,6 @@ const tableRowData = computed(() => {
     const model = info?.model || 'keine Angabe';
     const soc = mqttStore.vehicleSocValue(id);
     const vehicleSocValue = soc !== undefined ? `${Math.round(soc)}%` : '–';
-    const vehicleSocModule = mqttStore.vehicleSocModuleName(id) || 'keine';
     return {
       id,
       name,
@@ -118,27 +117,18 @@ const tableRowData = computed(() => {
       plugState,
       chargeState,
       vehicleSocValue,
-      vehicleSocModule,
     };
   };
 });
 
 const columnConfig = {
-  fields: [
-    'name',
-    'manufacturer',
-    'model',
-    'plugged',
-    'vehicleSocValue',
-    'vehicleSocModule',
-  ],
+  fields: ['name', 'manufacturer', 'model', 'plugged', 'vehicleSocValue'],
   labels: {
     name: 'Fahrzeug',
     manufacturer: 'Hersteller',
     model: 'Modell',
     plugged: 'Status',
     vehicleSocValue: 'Ladestand',
-    vehicleSocModule: 'SoC Modul',
   },
 };
 

From a0790625f69d246cc2d4c94f42e8820b55f4f91e Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 14 May 2025 16:41:31 +0200
Subject: [PATCH 03/33] Add alignment for table columns and dynamic slots

---
 .../koala/source/src/components/BaseTable.vue | 22 ++++++++++++++++---
 .../src/components/ChargePointInformation.vue | 20 +++++++++++++----
 .../src/components/VehicleInformation.vue     | 14 ++++++++++--
 3 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index 8d4391321c..8a02fbfaff 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -40,9 +40,20 @@
       <template
         v-for="(_, name) in $slots"
         :key="name"
-        v-slot:[name]="slotData"
+        v-slot:[name]="slotProps"
       >
-        <slot :name="name" v-bind="slotData"></slot>
+        <!-- Add the column alignment to the slot props -->
+        <slot
+          :name="name"
+          v-bind="{
+            ...slotProps,
+            columnAlignment: getColumnAlignment(
+              typeof name === 'string'
+                ? name.replace('body-cell-', '')
+                : String(name),
+            ),
+          }"
+        ></slot>
       </template>
     </q-table>
   </div>
@@ -60,6 +71,7 @@ const props = defineProps<{
   columnConfig: {
     fields: string[];
     labels?: Record<string, string>;
+    align?: Record<string, 'left' | 'right' | 'center'>;
   };
   rowKey?: string;
   searchInputVisible?: boolean;
@@ -78,6 +90,10 @@ const filterModel = computed({
   set: (value) => emit('update:filter', value),
 });
 
+const getColumnAlignment = (fieldName: string): string => {
+  return props.columnConfig.align?.[fieldName] || 'left';
+};
+
 // Data can be passed to basetable as a normal function or computed property
 const rowMapperFn = computed(() =>
   typeof props.rowData === 'function' ? props.rowData : props.rowData.value,
@@ -89,8 +105,8 @@ const mappedColumns = computed<QTableColumn[]>(() => {
   return props.columnConfig.fields.map((field) => ({
     name: field,
     label: props.columnConfig.labels?.[field] || field,
+    align: props.columnConfig.align?.[field] || 'left',
     field,
-    align: 'left',
     sortable: true,
     headerStyle: 'font-weight: bold',
   }));
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 40128124b8..b3658d52e5 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -19,13 +19,13 @@
     :columns-to-search="['vehicle', 'name']"
     @row-click="onRowClick"
   >
-    <template #body-cell-plugged="{ row }">
-      <q-td>
+    <template #body-cell-plugged="{ row, columnAlignment }">
+      <q-td :class="`text-${columnAlignment}`">
         <ChargePointStateIcon :charge-point-id="row.id" />
       </q-td>
     </template>
-    <template #body-cell-timeCharging="{ row }">
-      <q-td>
+    <template #body-cell-timeCharging="{ row, columnAlignment }">
+      <q-td :class="`text-${columnAlignment}`">
         <ChargePointTimeCharging
           :charge-point-id="row.id"
           :readonly="true"
@@ -124,6 +124,8 @@ const tableRowData = computed(() => {
   };
 });
 
+type AlignmentType = 'left' | 'right' | 'center';
+
 const columnConfig = {
   fields: [
     'name',
@@ -145,6 +147,13 @@ const columnConfig = {
     power: 'Leistung',
     charged: 'Geladen',
   },
+  alignColumns: {
+    plugged: 'center',
+    timeCharging: 'center',
+    soc: 'right',
+    power: 'right',
+    charged: 'right',
+  },
 };
 
 const columnConfigMobile = {
@@ -154,6 +163,9 @@ const columnConfigMobile = {
     vehicle: 'Fahrzeug',
     plugged: 'Status',
   },
+  alignColumns: {
+    plugged: 'center' as AlignmentType,
+  },
 };
 
 const onRowClick = (row: Record<string, unknown>) => {
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index d11bfa2790..13373b1411 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -19,8 +19,8 @@
     :columns-to-search="['name', 'manufacturer', 'model']"
     @row-click="onRowClick"
   >
-    <template #body-cell-plugged="{ row }">
-      <q-td>
+    <template #body-cell-plugged="{ row, columnAlignment }">
+      <q-td :class="`text-${columnAlignment}`">
         <q-icon
           :name="row.plugState ? 'power' : 'power_off'"
           size="sm"
@@ -121,6 +121,8 @@ const tableRowData = computed(() => {
   };
 });
 
+type AlignmentType = 'left' | 'right' | 'center';
+
 const columnConfig = {
   fields: ['name', 'manufacturer', 'model', 'plugged', 'vehicleSocValue'],
   labels: {
@@ -130,6 +132,10 @@ const columnConfig = {
     plugged: 'Status',
     vehicleSocValue: 'Ladestand',
   },
+  alignColumns: {
+    plugged: 'center',
+    vehicleSocValue: 'right',
+  },
 };
 
 const columnConfigMobile = {
@@ -139,6 +145,10 @@ const columnConfigMobile = {
     plugged: 'Status',
     vehicleSocValue: 'Ladestand',
   },
+  alignColumns: {
+    plugged: 'center' as AlignmentType,
+    vehicleSocValue: 'right',
+  },
 };
 
 const onRowClick = (row: Record<string, unknown>) => {

From 771172d55ae82290a1adb03dba82ca9e35ed1a50 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 15 May 2025 08:30:43 +0200
Subject: [PATCH 04/33] Mobile Table alignment removed (not working)

---
 .../source/src/components/ChargePointInformation.vue   |  8 +++-----
 .../koala/source/src/components/VehicleInformation.vue | 10 +++-------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index b3658d52e5..37ad0c16d6 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -124,7 +124,7 @@ const tableRowData = computed(() => {
   };
 });
 
-type AlignmentType = 'left' | 'right' | 'center';
+//type AlignmentType = 'left' | 'right' | 'center';
 
 const columnConfig = {
   fields: [
@@ -147,7 +147,7 @@ const columnConfig = {
     power: 'Leistung',
     charged: 'Geladen',
   },
-  alignColumns: {
+  align: {
     plugged: 'center',
     timeCharging: 'center',
     soc: 'right',
@@ -163,9 +163,7 @@ const columnConfigMobile = {
     vehicle: 'Fahrzeug',
     plugged: 'Status',
   },
-  alignColumns: {
-    plugged: 'center' as AlignmentType,
-  },
+
 };
 
 const onRowClick = (row: Record<string, unknown>) => {
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index 13373b1411..34390ac563 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -121,7 +121,7 @@ const tableRowData = computed(() => {
   };
 });
 
-type AlignmentType = 'left' | 'right' | 'center';
+//type AlignmentType = 'left' | 'right' | 'center';
 
 const columnConfig = {
   fields: ['name', 'manufacturer', 'model', 'plugged', 'vehicleSocValue'],
@@ -132,7 +132,7 @@ const columnConfig = {
     plugged: 'Status',
     vehicleSocValue: 'Ladestand',
   },
-  alignColumns: {
+  align: {
     plugged: 'center',
     vehicleSocValue: 'right',
   },
@@ -144,11 +144,7 @@ const columnConfigMobile = {
     name: 'Fahrzeug',
     plugged: 'Status',
     vehicleSocValue: 'Ladestand',
-  },
-  alignColumns: {
-    plugged: 'center' as AlignmentType,
-    vehicleSocValue: 'right',
-  },
+  }
 };
 
 const onRowClick = (row: Record<string, unknown>) => {

From 7e2c1427bff1e0d9c9ade7d6223dacb5876efb83 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 15 May 2025 09:04:57 +0200
Subject: [PATCH 05/33] Formatting

---
 .../koala/source/src/components/ChargePointInformation.vue    | 3 ---
 .../koala/source/src/components/VehicleInformation.vue        | 4 +---
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 37ad0c16d6..7adaf3efd7 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -124,8 +124,6 @@ const tableRowData = computed(() => {
   };
 });
 
-//type AlignmentType = 'left' | 'right' | 'center';
-
 const columnConfig = {
   fields: [
     'name',
@@ -163,7 +161,6 @@ const columnConfigMobile = {
     vehicle: 'Fahrzeug',
     plugged: 'Status',
   },
-
 };
 
 const onRowClick = (row: Record<string, unknown>) => {
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index 34390ac563..1d55a97d4e 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -121,8 +121,6 @@ const tableRowData = computed(() => {
   };
 });
 
-//type AlignmentType = 'left' | 'right' | 'center';
-
 const columnConfig = {
   fields: ['name', 'manufacturer', 'model', 'plugged', 'vehicleSocValue'],
   labels: {
@@ -144,7 +142,7 @@ const columnConfigMobile = {
     name: 'Fahrzeug',
     plugged: 'Status',
     vehicleSocValue: 'Ladestand',
-  }
+  },
 };
 
 const onRowClick = (row: Record<string, unknown>) => {

From f9a45dbbfdbe83c36c3cd1df05126bc79dce6c78 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 15 May 2025 09:11:30 +0200
Subject: [PATCH 06/33] Add SoC bar graphic to battery card - format text

---
 .../source/src/components/BatteryCard.vue     | 44 ++++++-------------
 1 file changed, 14 insertions(+), 30 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
index 3ce4bd1db2..8d17aae3ea 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -18,30 +18,10 @@
           @click="dialog?.open()"
         />
       </div>
-      <div class="row q-mt-sm text-subtitle2 justify-between no-wrap">
-        <div class="row">
-          <q-icon
-            :name="
-              soc === undefined || soc === null
-                ? 'battery_0_bar'
-                : soc < 85
-                  ? `battery_${Math.floor(soc / 15)}_bar`
-                  : 'battery_full'
-            "
-            size="sm"
-            color="primary"
-            class="rotate90Clockwise q-mr-sm"
-          />
-          <div>SoC:</div>
-          <div class="q-ml-sm">
-            {{ soc === undefined || soc === null ? '___%' : soc + '%' }}
-          </div>
-        </div>
-        <div class="row">
-          <div>Leistung:</div>
-          <div class="q-ml-sm">
-            {{ power }}
-          </div>
+      <div class="row q-mt-sm text-subtitle2 justify-between full-width">
+        <div>Leistung:</div>
+        <div class="q-ml-sm">
+          {{ power }}
         </div>
       </div>
       <div v-if="showSettings" class="row q-mt-md text-subtitle2">
@@ -57,18 +37,24 @@
         </div>
       </div>
       <div class="text-subtitle1 text-weight-bold q-mt-md">Heute:</div>
-      <div class="row q-mt-sm text-subtitle2">
+      <div class="row q-mt-sm text-subtitle2 justify-between full-width">
         <div>Geladen:</div>
         <div class="q-ml-sm">
           {{ dailyImportedEnergy }}
         </div>
       </div>
-      <div class="row q-mt-sm text-subtitle2">
+      <div class="row q-mt-sm text-subtitle2 justify-between full-width">
         <div>Entladen:</div>
         <div class="q-ml-sm">
           {{ dailyExportedEnergy }}
         </div>
       </div>
+      <SliderDouble
+        class="q-mt-sm"
+        :current-value="soc"
+        :readonly="true"
+        :limit-mode="'none'"
+      />
     </q-card-section>
   </q-card>
   <BatterySettingsDialog :battery-id="props.batteryId" ref="dialog" />
@@ -79,6 +65,7 @@ import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import BatterySettingsDialog from './BatterySettingsDialog.vue';
 import { useBatteryModes } from 'src/composables/useBatteryModes.ts';
+import SliderDouble from './SliderDouble.vue';
 
 const props = defineProps<{
   batteryId: number | undefined;
@@ -145,10 +132,7 @@ const dailyExportedEnergy = computed(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.rotate90Clockwise {
-  transform: rotate(90deg);
-}
+<style scoped>
 .card-width {
   min-width: 24em;
 }

From d56429c7bb2025ba7db06a926f76136823f95270 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 16 May 2025 08:48:41 +0200
Subject: [PATCH 07/33] Add power data to table view / align columns

---
 .../src/components/ChargePointInformation.vue | 38 +++++++++++++++----
 .../source/src/components/Models/table.ts     |  7 ++++
 .../src/components/VehicleInformation.vue     | 11 ++++--
 3 files changed, 45 insertions(+), 11 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/Models/table.ts

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 7adaf3efd7..d44ad796f8 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -12,7 +12,7 @@
     v-else
     :items="chargePointIds"
     :row-data="tableRowData"
-    :column-config="mobile ? columnConfigMobile : columnConfig"
+    :column-config="mobile ? columnConfigMobile : columnConfigDesktop"
     :search-input-visible="searchInputVisible"
     :table-height="mobile ? '35vh' : '40vh'"
     v-model:filter="filter"
@@ -34,6 +34,15 @@
         />
       </q-td>
     </template>
+    <template #body-cell-powerColumn="{ row, columnAlignment }">
+      <q-td :class="`text-${columnAlignment}`">
+        {{ row.power }}
+        <q-badge rounded color="primary" :label="row.phaseNumber">
+          <q-tooltip>Phasenanzahl</q-tooltip>
+        </q-badge>
+        {{ row.current }}
+      </q-td>
+    </template>
   </BaseTable>
 
   <!-- ChargePointCard Dialog -->
@@ -76,6 +85,7 @@ import BaseTable from 'src/components/BaseTable.vue';
 import ChargePointCard from 'src/components/ChargePointCard.vue';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
+import { columnConfig } from 'src/components/Models/table.ts';
 
 const mqttStore = useMqttStore();
 const { chargeModes } = useChargeModes();
@@ -90,6 +100,7 @@ const mobile = computed(() => Platform.is.mobile);
 const selectedChargePointId = ref<number | null>(null);
 const modalChargePointCardVisible = ref(false);
 const filter = ref('');
+
 const tableRowData = computed(() => {
   return (id: number) => {
     const name = mqttStore.chargePointName(id);
@@ -110,6 +121,9 @@ const tableRowData = computed(() => {
     const power = mqttStore.chargePointPower(id, 'textValue');
     const charged = mqttStore.chargePointEnergyChargedPlugged(id, 'textValue');
     const timeCharging = mqttStore.chargePointConnectedVehicleTimeCharging(id);
+    const phaseNumber = mqttStore.chargePointPhaseNumber(id);
+    const current = mqttStore.chargePointChargingCurrent(id, 'textValue');
+    const powerColumn = `${power} -- ${phaseNumber} -- ${current}`;
     return {
       id,
       name,
@@ -119,21 +133,24 @@ const tableRowData = computed(() => {
       timeCharging,
       soc,
       power,
+      phaseNumber,
+      current,
+      powerColumn,
       charged,
     };
   };
 });
 
-const columnConfig = {
+const columnConfigDesktop: columnConfig = {
   fields: [
     'name',
     'vehicle',
     'plugged',
     'chargeMode',
     'timeCharging',
-    'soc',
-    'power',
+    'powerColumn',
     'charged',
+    'soc',
   ],
   labels: {
     name: 'Ladepunkt',
@@ -141,26 +158,31 @@ const columnConfig = {
     plugged: 'Status',
     chargeMode: 'Lademodus',
     timeCharging: 'Zeitladen',
-    soc: 'Ladestand',
-    power: 'Leistung',
+    powerColumn: 'Leistung',
     charged: 'Geladen',
+    soc: 'Ladestand',
   },
   align: {
     plugged: 'center',
     timeCharging: 'center',
     soc: 'right',
-    power: 'right',
     charged: 'right',
+    powerColumn: 'right',
   },
 };
 
-const columnConfigMobile = {
+const columnConfigMobile: columnConfig = {
   fields: ['name', 'vehicle', 'plugged'],
   labels: {
     name: 'Ladepunkt',
     vehicle: 'Fahrzeug',
     plugged: 'Status',
   },
+  align: {
+    name: 'center',
+    vehicle: 'left',
+    plugged: 'right',
+  },
 };
 
 const onRowClick = (row: Record<string, unknown>) => {
diff --git a/packages/modules/web_themes/koala/source/src/components/Models/table.ts b/packages/modules/web_themes/koala/source/src/components/Models/table.ts
new file mode 100644
index 0000000000..697c3f881d
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/Models/table.ts
@@ -0,0 +1,7 @@
+export type Align = Record<string, 'left' | 'right' | 'center'>;
+
+export type columnConfig = {
+  fields: string[];
+  labels?: Record<string, string>;
+  align?: Align;
+};
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index 1d55a97d4e..6a38b783b6 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -12,7 +12,7 @@
     v-else
     :items="vehicleIds"
     :row-data="tableRowData"
-    :column-config="mobile ? columnConfigMobile : columnConfig"
+    :column-config="mobile ? columnConfigMobile : columnConfigDesktop"
     :search-input-visible="searchInputVisible"
     :table-height="mobile ? '35vh' : '40vh'"
     v-model:filter="filter"
@@ -83,6 +83,7 @@ import { Platform } from 'quasar';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
 import BaseTable from 'src/components/BaseTable.vue';
 import VehicleCard from 'src/components/VehicleCard.vue';
+import { columnConfig } from 'src/components/Models/table.ts';
 
 const mqttStore = useMqttStore();
 const mobile = computed(() => Platform.is.mobile);
@@ -121,7 +122,7 @@ const tableRowData = computed(() => {
   };
 });
 
-const columnConfig = {
+const columnConfigDesktop: columnConfig = {
   fields: ['name', 'manufacturer', 'model', 'plugged', 'vehicleSocValue'],
   labels: {
     name: 'Fahrzeug',
@@ -136,13 +137,17 @@ const columnConfig = {
   },
 };
 
-const columnConfigMobile = {
+const columnConfigMobile: columnConfig = {
   fields: ['name', 'plugged', 'vehicleSocValue'],
   labels: {
     name: 'Fahrzeug',
     plugged: 'Status',
     vehicleSocValue: 'Ladestand',
   },
+  align: {
+    plugged: 'center',
+    vehicleSocValue: 'right',
+  },
 };
 
 const onRowClick = (row: Record<string, unknown>) => {

From 5e3b5aef1c77fd5d1add53e8f443a2e27fb0ca0c Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 16 May 2025 09:11:45 +0200
Subject: [PATCH 08/33] Fix column alignment mobile view

---
 .../koala/source/src/components/ChargePointInformation.vue    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index d44ad796f8..466efbb810 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -179,9 +179,7 @@ const columnConfigMobile: columnConfig = {
     plugged: 'Status',
   },
   align: {
-    name: 'center',
-    vehicle: 'left',
-    plugged: 'right',
+    plugged: 'center',
   },
 };
 

From f410081d8a09b6db18d53d84d0b6d04e7e5577e8 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 16 May 2025 15:52:19 +0200
Subject: [PATCH 09/33] Simplify table slots using quasar

---
 .../koala/source/src/components/BaseTable.vue | 26 ++++--------------
 .../src/components/ChargePointInformation.vue | 22 +++++++--------
 .../src/components/VehicleInformation.vue     | 27 +++----------------
 3 files changed, 20 insertions(+), 55 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index 8a02fbfaff..353f67fed1 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -35,25 +35,13 @@
           </div>
         </div>
       </template>
-
-      <!-- Dynamic slot for custom cell rendering -->
+      <!-- pass slots to basetable - required as basetable is wrapping q-table -->
       <template
-        v-for="(_, name) in $slots"
-        :key="name"
-        v-slot:[name]="slotProps"
+        v-for="(_, slotName) in $slots"
+        :key="slotName"
+        v-slot:[slotName]="slotProps"
       >
-        <!-- Add the column alignment to the slot props -->
-        <slot
-          :name="name"
-          v-bind="{
-            ...slotProps,
-            columnAlignment: getColumnAlignment(
-              typeof name === 'string'
-                ? name.replace('body-cell-', '')
-                : String(name),
-            ),
-          }"
-        ></slot>
+        <slot :name="slotName" v-bind="slotProps" />
       </template>
     </q-table>
   </div>
@@ -90,10 +78,6 @@ const filterModel = computed({
   set: (value) => emit('update:filter', value),
 });
 
-const getColumnAlignment = (fieldName: string): string => {
-  return props.columnConfig.align?.[fieldName] || 'left';
-};
-
 // Data can be passed to basetable as a normal function or computed property
 const rowMapperFn = computed(() =>
   typeof props.rowData === 'function' ? props.rowData : props.rowData.value,
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 466efbb810..e5e9b4d694 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -19,28 +19,28 @@
     :columns-to-search="['vehicle', 'name']"
     @row-click="onRowClick"
   >
-    <template #body-cell-plugged="{ row, columnAlignment }">
-      <q-td :class="`text-${columnAlignment}`">
-        <ChargePointStateIcon :charge-point-id="row.id" />
+    <template #body-cell-plugged="props">
+      <q-td :class="`text-${props.col.align}`">
+        <ChargePointStateIcon :charge-point-id="props.row.id" />
       </q-td>
     </template>
-    <template #body-cell-timeCharging="{ row, columnAlignment }">
-      <q-td :class="`text-${columnAlignment}`">
+    <template #body-cell-timeCharging="props">
+      <q-td :class="`text-${props.col.align}`">
         <ChargePointTimeCharging
-          :charge-point-id="row.id"
+          :charge-point-id="props.row.id"
           :readonly="true"
           :toolTip="true"
           :icon-size="'xs'"
         />
       </q-td>
     </template>
-    <template #body-cell-powerColumn="{ row, columnAlignment }">
-      <q-td :class="`text-${columnAlignment}`">
-        {{ row.power }}
-        <q-badge rounded color="primary" :label="row.phaseNumber">
+    <template #body-cell-powerColumn="props">
+      <q-td :class="`text-${props.col.align}`">
+        {{ props.row.power }}
+        <q-badge rounded color="primary" :label="props.row.phaseNumber">
           <q-tooltip>Phasenanzahl</q-tooltip>
         </q-badge>
-        {{ row.current }}
+        {{ props.row.current }}
       </q-td>
     </template>
   </BaseTable>
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index 6a38b783b6..0e9e79be2b 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -19,29 +19,9 @@
     :columns-to-search="['name', 'manufacturer', 'model']"
     @row-click="onRowClick"
   >
-    <template #body-cell-plugged="{ row, columnAlignment }">
-      <q-td :class="`text-${columnAlignment}`">
-        <q-icon
-          :name="row.plugState ? 'power' : 'power_off'"
-          size="sm"
-          :color="
-            row.plugState
-              ? row.chargeState
-                ? 'positive'
-                : 'warning'
-              : 'negative'
-          "
-        >
-          <q-tooltip>
-            {{
-              row.plugState
-                ? row.chargeState
-                  ? 'Lädt'
-                  : 'Angesteckt, lädt nicht'
-                : 'Nicht angesteckt'
-            }}
-          </q-tooltip>
-        </q-icon>
+    <template #body-cell-plugged="props">
+      <q-td :class="`text-${props.col.align}`">
+        <ChargePointStateIcon :vehicle-id="props.row.id" />
       </q-td>
     </template>
   </BaseTable>
@@ -82,6 +62,7 @@ import { useMqttStore } from 'src/stores/mqtt-store';
 import { Platform } from 'quasar';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
 import BaseTable from 'src/components/BaseTable.vue';
+import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import VehicleCard from 'src/components/VehicleCard.vue';
 import { columnConfig } from 'src/components/Models/table.ts';
 

From bae3dcb16aa668b90ddd53b58001278b06d02291 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 16 May 2025 15:56:03 +0200
Subject: [PATCH 10/33] Edit chargepoint state icon component (for chargepoint
 & vehicle Id props)

---
 .../src/components/ChargePointStateIcon.vue   | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointStateIcon.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointStateIcon.vue
index ec112f39c9..4902a52edf 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointStateIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointStateIcon.vue
@@ -21,15 +21,29 @@ import { useMqttStore } from 'src/stores/mqtt-store';
 import { computed } from 'vue';
 
 const props = defineProps<{
-  chargePointId: number;
+  chargePointId?: number;
+  vehicleId?: number;
 }>();
 
 const mqttStore = useMqttStore();
 
-const plugState = computed(() =>
-  mqttStore.chargePointPlugState(props.chargePointId),
-);
-const chargeState = computed(() =>
-  mqttStore.chargePointChargeState(props.chargePointId),
-);
+const plugState = computed(() => {
+  if (props.vehicleId !== undefined) {
+    const vehicleState = mqttStore.vehicleConnectionState(props.vehicleId);
+    return vehicleState.some((v) => v.plugged);
+  } else if (props.chargePointId !== undefined) {
+    return mqttStore.chargePointPlugState(props.chargePointId);
+  }
+  return false;
+});
+
+const chargeState = computed(() => {
+  if (props.vehicleId !== undefined) {
+    const vehicleState = mqttStore.vehicleConnectionState(props.vehicleId);
+    return vehicleState.some((v) => v.charging);
+  } else if (props.chargePointId !== undefined) {
+    return mqttStore.chargePointChargeState(props.chargePointId);
+  }
+  return false;
+});
 </script>

From 1c5da6bd61590b85c85f4a2f9011cb7dc53953d9 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 16 May 2025 16:04:25 +0200
Subject: [PATCH 11/33] Remove close button from charge point settings dialog
 (ok existing bottom right)

---
 .../koala/source/src/components/ChargePointSettings.vue          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue
index 586caf5bee..c6561534f0 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointSettings.vue
@@ -9,7 +9,6 @@
         <div class="row">
           <div class="text-h6">Einstellungen {{ name }}</div>
           <q-space />
-          <q-btn icon="close" flat round dense v-close-popup />
         </div>
       </q-card-section>
       <q-card-section class="q-py-none">

From 6953ee0b37241188f01568b2f0ecdb2c8c94962e Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 16 May 2025 16:10:03 +0200
Subject: [PATCH 12/33] q-table css

---
 .../koala/source/src/css/quasar.variables.scss   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index 001ade7642..dd5929b40d 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -191,6 +191,22 @@ $battery: #ba7128;
       scrollbar-color: var(--q-primary) var(--q-secondary);
     }
   }
+
+  //table padding
+  .q-table th,
+  .q-table td {
+    padding: 2px 6px !important;
+  }
+
+  .q-table th:first-child,
+  .q-table td:first-child {
+    padding-left: 12px !important;
+  }
+
+  .q-table th:last-child,
+  .q-table td:last-child {
+    padding-right: 12px !important;
+  }
 }
 // Dark Theme Base Colors
 $dark-page: #000000; // This overrides Quasar's default dark page color

From ea3c2068fa130004cbfce4ab95e62cd30a05bf4e Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 20 May 2025 08:18:19 +0200
Subject: [PATCH 13/33] Add DC charging sliders to charge point settings

---
 .../src/components/ChargePointEcoSettings.vue |  19 +++
 .../components/ChargePointInstantSettings.vue |  20 ++++
 .../src/components/ChargePointPvSettings.vue  |  19 +++
 .../koala/source/src/stores/mqtt-store.ts     | 112 ++++++++++++++++++
 4 files changed, 170 insertions(+)

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 c07dbdebe3..bcf3e369a2 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
@@ -9,6 +9,17 @@
     class="q-mt-md"
   />
 
+  <SliderStandard
+    v-if="dcCharging"
+    title="Minimaler Dauerleistung unter der Preisgrenze"
+    :min="4"
+    :max="300"
+    :step="1"
+    unit="kW"
+    v-model="dcPower.value"
+    class="q-mt-md"
+  />
+
   <div class="text-subtitle2 q-mt-sm q-mr-sm">Anzahl Phasen</div>
   <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
     <q-btn-group class="col">
@@ -136,6 +147,14 @@ const current = computed(() =>
   mqttStore.chargePointConnectedVehicleEcoChargeCurrent(props.chargePointId),
 );
 
+const dcCharging = computed(() =>
+  mqttStore.DCChargingEnabled,
+);
+
+const dcPower = computed(() =>
+  mqttStore.chargePointConnectedVehicleEcoChargeDCPower(props.chargePointId),
+);
+
 const numPhases = computed(() =>
   mqttStore.chargePointConnectedVehicleEcoChargePhases(props.chargePointId),
 );
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
index 882272d161..41deba4702 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
@@ -7,6 +7,16 @@
     v-model="instantChargeCurrent.value"
     class="q-mt-sm"
   />
+  <SliderStandard
+    v-if="dcCharging"
+    title="DC-Sollleistung"
+    :min="4"
+    :max="300"
+    unit="kW"
+    v-model="instantChargeCurrentDC.value"
+    class="q-mt-sm"
+  />
+
   <div class="text-subtitle2 q-mt-sm q-mr-sm">Anzahl Phasen</div>
   <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
     <q-btn-group class="col">
@@ -94,6 +104,16 @@ const instantChargeCurrent = computed(() =>
   ),
 );
 
+const dcCharging = computed(() =>
+  mqttStore.DCChargingEnabled,
+);
+
+const instantChargeCurrentDC = computed(() => {
+  return mqttStore.chargePointConnectedVehicleInstantDCChargePower(
+    props.chargePointId,
+  );
+});
+
 const numPhases = computed(() =>
   mqttStore.chargePointConnectedVehicleInstantChargePhases(props.chargePointId),
 );
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
index 15f1491b13..cc71d3e403 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
@@ -11,6 +11,17 @@
     class="q-mt-md"
   />
 
+  <SliderStandard
+    v-if="dcCharging"
+    title="Minimaler DC-Dauerleistung"
+    :min="0"
+    :max="300"
+    :step="1"
+    unit="kW"
+    v-model="pvMinDCCurrent.value"
+    class="q-mt-md"
+  />
+
   <div class="text-subtitle2 q-mt-sm q-mr-sm">Anzahl Phasen</div>
   <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
     <q-btn-group class="col">
@@ -145,6 +156,14 @@ const pvMinCurrent = computed(() =>
   mqttStore.chargePointConnectedVehiclePVChargeMinCurrent(props.chargePointId),
 );
 
+const dcCharging = computed(() =>
+  mqttStore.DCChargingEnabled,
+);
+
+const pvMinDCCurrent = computed(() =>
+  mqttStore.chargePointConnectedVehiclePV_DC_ChargePower(props.chargePointId),
+);
+
 const numPhases = computed(() =>
   mqttStore.chargePointConnectedVehiclePvChargePhases(props.chargePointId),
 );
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 1fd65fdca8..892f081cf8 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
@@ -954,6 +954,50 @@ export const useMqttStore = defineStore('mqtt', () => {
     });
   };
 
+    /**
+   * Get boolean value for DC charging enabled / disabled
+   * @returns boolean
+   */
+  const DCChargingEnabled = computed(() => {
+      return (
+        (getValue.value(
+          'openWB/optional/dc_charging',
+        ) as boolean) || 0
+      );
+  });
+
+  /**
+   * Get or set the charge point connected vehicle instant charging DC power identified by the charge point id
+   * @param chargePointId charge point id
+   * @returns number
+   */
+  const chargePointConnectedVehicleInstantDCChargePower = (
+    chargePointId: number,
+  ) => {
+    return computed({
+      get() {
+        const DCCurrent =
+          chargePointConnectedVehicleChargeTemplate(chargePointId).value
+            ?.chargemode?.instant_charging?.dc_current;
+        if (DCCurrent !== undefined)    {
+          return (DCCurrent * 3 * 230) / 1000;
+        } else {
+          return 0;
+        }
+      },
+      set(newValue: number) {
+        console.debug('set instant charging power', newValue, chargePointId);
+        const newPower = (newValue * 1000) / 230 / 3;
+        return updateTopic(
+          `openWB/chargepoint/${chargePointId}/set/charge_template`,
+          newPower,
+          'chargemode.instant_charging.dc_current',
+          true,
+        );
+      },
+    });
+  };
+
   /**
    * Get or set the charge point connected vehicle instant charging phases identified by the charge point id
    * @param chargePointId charge point id
@@ -1085,6 +1129,38 @@ export const useMqttStore = defineStore('mqtt', () => {
     });
   };
 
+   /**
+   * Get or set the charge point connected vehicle PV charging DC power identified by the charge point id
+   * @param chargePointId charge point id
+   * @returns number
+   */
+  const chargePointConnectedVehiclePV_DC_ChargePower = (
+    chargePointId: number,
+  ) => {
+    return computed({
+      get() {
+        const DCMinCurrent =
+          chargePointConnectedVehicleChargeTemplate(chargePointId).value
+            ?.chargemode?.pv_charging?.dc_min_current;
+        if (DCMinCurrent !== undefined)    {
+          return (DCMinCurrent * 3 * 230) / 1000;
+        } else {
+          return 0;
+        }
+      },
+      set(newValue: number) {
+        console.debug('set instant charging power', newValue, chargePointId);
+        const newPower = (newValue * 1000) / 230 / 3;
+        return updateTopic(
+          `openWB/chargepoint/${chargePointId}/set/charge_template`,
+          newPower,
+          'chargemode.pv_charging.dc_min_current',
+          true,
+        );
+      },
+    });
+  };
+
   /**
    * Get or set the charge point connected vehicle pv min SoC identified by the charge point id
    * @param chargePointId charge point id
@@ -1314,6 +1390,38 @@ export const useMqttStore = defineStore('mqtt', () => {
     });
   };
 
+	/**
+   * Get or set the charge point connected vehicle eco charging power identified by the charge point id
+   * @param chargePointId charge point id
+   * @returns number
+   */
+  const chargePointConnectedVehicleEcoChargeDCPower = (
+    chargePointId: number,
+  ) => {
+    return computed({
+      get() {
+        const DCCurrent =
+          chargePointConnectedVehicleChargeTemplate(chargePointId).value
+            ?.chargemode?.eco_charging?.dc_current;
+        if (DCCurrent !== undefined)    {
+          return (DCCurrent * 3 * 230) / 1000;
+        } else {
+          return 0;
+        }
+      },
+      set(newValue: number) {
+        console.debug('set instant charging power', newValue, chargePointId);
+        const newPower = (newValue * 1000) / 230 / 3;
+        return updateTopic(
+          `openWB/chargepoint/${chargePointId}/set/charge_template`,
+          newPower,
+          'chargemode.eco_charging.dc_current',
+          true,
+        );
+      },
+    });
+  };
+
   /**
    * Get or set the charge point connected vehicle eco charging phases identified by the charge point id
    * @param chargePointId charge point id
@@ -2635,10 +2743,12 @@ export const useMqttStore = defineStore('mqtt', () => {
     chargePointStateMessage,
     chargePointFaultState,
     chargePointFaultMessage,
+    DCChargingEnabled,
     chargePointConnectedVehicleInfo,
     chargePointConnectedVehicleForceSocUpdate,
     chargePointConnectedVehicleChargeMode,
     chargePointConnectedVehicleInstantChargeCurrent,
+    chargePointConnectedVehicleInstantDCChargePower,
     chargePointConnectedVehicleInstantChargePhases,
     chargePointConnectedVehicleInstantChargeLimit,
     chargePointConnectedVehicleInstantChargeLimitSoC,
@@ -2650,9 +2760,11 @@ export const useMqttStore = defineStore('mqtt', () => {
     chargePointConnectedVehiclePvChargeLimitEnergy,
     chargePointConnectedVehiclePVChargeMinSoc,
     chargePointConnectedVehiclePVChargeMinSocCurrent,
+    chargePointConnectedVehiclePV_DC_ChargePower,
     chargePointConnectedVehiclePvChargePhasesMinSoc,
     chargePointConnectedVehiclePVChargeFeedInLimit,
     chargePointConnectedVehicleEcoChargeCurrent,
+		chargePointConnectedVehicleEcoChargeDCPower,
     chargePointConnectedVehicleEcoChargePhases,
     chargePointConnectedVehicleEcoChargeLimit,
     chargePointConnectedVehicleEcoChargeLimitSoC,

From e59e4d6416abbe449269bae2bdc1a0672c225d71 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 21 May 2025 15:08:40 +0200
Subject: [PATCH 14/33] formatting

---
 .../koala/source/src/stores/mqtt-store.ts     | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

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 892f081cf8..ff57212d8d 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
@@ -954,16 +954,12 @@ export const useMqttStore = defineStore('mqtt', () => {
     });
   };
 
-    /**
+  /**
    * Get boolean value for DC charging enabled / disabled
    * @returns boolean
    */
   const DCChargingEnabled = computed(() => {
-      return (
-        (getValue.value(
-          'openWB/optional/dc_charging',
-        ) as boolean) || 0
-      );
+    return (getValue.value('openWB/optional/dc_charging') as boolean) || 0;
   });
 
   /**
@@ -979,7 +975,7 @@ export const useMqttStore = defineStore('mqtt', () => {
         const DCCurrent =
           chargePointConnectedVehicleChargeTemplate(chargePointId).value
             ?.chargemode?.instant_charging?.dc_current;
-        if (DCCurrent !== undefined)    {
+        if (DCCurrent !== undefined) {
           return (DCCurrent * 3 * 230) / 1000;
         } else {
           return 0;
@@ -1129,7 +1125,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     });
   };
 
-   /**
+  /**
    * Get or set the charge point connected vehicle PV charging DC power identified by the charge point id
    * @param chargePointId charge point id
    * @returns number
@@ -1142,7 +1138,7 @@ export const useMqttStore = defineStore('mqtt', () => {
         const DCMinCurrent =
           chargePointConnectedVehicleChargeTemplate(chargePointId).value
             ?.chargemode?.pv_charging?.dc_min_current;
-        if (DCMinCurrent !== undefined)    {
+        if (DCMinCurrent !== undefined) {
           return (DCMinCurrent * 3 * 230) / 1000;
         } else {
           return 0;
@@ -1390,7 +1386,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     });
   };
 
-	/**
+  /**
    * Get or set the charge point connected vehicle eco charging power identified by the charge point id
    * @param chargePointId charge point id
    * @returns number
@@ -1403,7 +1399,7 @@ export const useMqttStore = defineStore('mqtt', () => {
         const DCCurrent =
           chargePointConnectedVehicleChargeTemplate(chargePointId).value
             ?.chargemode?.eco_charging?.dc_current;
-        if (DCCurrent !== undefined)    {
+        if (DCCurrent !== undefined) {
           return (DCCurrent * 3 * 230) / 1000;
         } else {
           return 0;
@@ -2764,7 +2760,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     chargePointConnectedVehiclePvChargePhasesMinSoc,
     chargePointConnectedVehiclePVChargeFeedInLimit,
     chargePointConnectedVehicleEcoChargeCurrent,
-		chargePointConnectedVehicleEcoChargeDCPower,
+    chargePointConnectedVehicleEcoChargeDCPower,
     chargePointConnectedVehicleEcoChargePhases,
     chargePointConnectedVehicleEcoChargeLimit,
     chargePointConnectedVehicleEcoChargeLimitSoC,

From 2644825ff701e5f3912f54ff3daabe0a4a014be1 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 21 May 2025 15:11:23 +0200
Subject: [PATCH 15/33] formatting

---
 .../koala/source/src/components/ChargePointEcoSettings.vue    | 4 +---
 .../source/src/components/ChargePointInstantSettings.vue      | 4 +---
 .../koala/source/src/components/ChargePointPvSettings.vue     | 4 +---
 3 files changed, 3 insertions(+), 9 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 bcf3e369a2..c793af619b 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
@@ -147,9 +147,7 @@ const current = computed(() =>
   mqttStore.chargePointConnectedVehicleEcoChargeCurrent(props.chargePointId),
 );
 
-const dcCharging = computed(() =>
-  mqttStore.DCChargingEnabled,
-);
+const dcCharging = computed(() => mqttStore.DCChargingEnabled);
 
 const dcPower = computed(() =>
   mqttStore.chargePointConnectedVehicleEcoChargeDCPower(props.chargePointId),
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
index 41deba4702..e0279c30e0 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
@@ -104,9 +104,7 @@ const instantChargeCurrent = computed(() =>
   ),
 );
 
-const dcCharging = computed(() =>
-  mqttStore.DCChargingEnabled,
-);
+const dcCharging = computed(() => mqttStore.DCChargingEnabled);
 
 const instantChargeCurrentDC = computed(() => {
   return mqttStore.chargePointConnectedVehicleInstantDCChargePower(
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
index cc71d3e403..bb7bb4ced2 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
@@ -156,9 +156,7 @@ const pvMinCurrent = computed(() =>
   mqttStore.chargePointConnectedVehiclePVChargeMinCurrent(props.chargePointId),
 );
 
-const dcCharging = computed(() =>
-  mqttStore.DCChargingEnabled,
-);
+const dcCharging = computed(() => mqttStore.DCChargingEnabled);
 
 const pvMinDCCurrent = computed(() =>
   mqttStore.chargePointConnectedVehiclePV_DC_ChargePower(props.chargePointId),

From 6caef14df623f6934180771af8bac98311bcbd4a Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 21 May 2025 15:47:58 +0200
Subject: [PATCH 16/33] Add optional expansion row to BaseTable

---
 .../koala/source/src/components/BaseTable.vue | 145 +++++++++++++++---
 .../src/components/ChargePointInformation.vue |  27 ++--
 .../source/src/components/Models/baseTable.ts |  17 ++
 .../source/src/components/Models/table.ts     |   7 -
 .../src/components/VehicleInformation.vue     |   9 +-
 5 files changed, 162 insertions(+), 43 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/Models/baseTable.ts
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/Models/table.ts

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index 353f67fed1..86a65c0f5f 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -5,6 +5,7 @@
       :rows="mappedRows"
       :columns="mappedColumns"
       row-key="id"
+      v-model:expanded="expanded"
       :filter="filterModel"
       :filter-method="customFilterMethod"
       virtual-scroll
@@ -16,7 +17,8 @@
       :pagination="{ rowsPerPage: 0 }"
       hide-bottom
     >
-      <template v-slot:top v-if="searchInputVisible">
+      <!-- search field ------------------------------------------------------->
+      <template #top v-if="searchInputVisible">
         <div class="row full-width items-center q-mb-sm">
           <div class="col">
             <q-input
@@ -28,16 +30,95 @@
               class="search-field white-outline-input"
               input-class="text-white"
             >
-              <template v-slot:append>
+              <template #append>
                 <q-icon name="search" color="white" />
               </template>
             </q-input>
           </div>
         </div>
       </template>
-      <!-- pass slots to basetable - required as basetable is wrapping q-table -->
+
+      <!-- header ----------------------------------------------------------->
+      <template v-if="props.rowExpandable" #header="hdr">
+        <q-tr :props="hdr">
+          <!-- space for arrow column -->
+          <q-th auto-width :props="{ ...hdr, col: {} }" />
+
+          <!-- the other columns -->
+          <q-th v-for="c in hdr.cols" :key="c.name" :props="{ ...hdr, col: c }">
+            {{ c.label }}
+          </q-th>
+        </q-tr>
+      </template>
+
+      <!-- body ------------------------------------------------------------->
+      <template v-if="props.rowExpandable" #body="rowProps: BodySlotProps">
+        <q-tr
+          :key="`main-${rowProps.key}`"
+          :props="rowProps"
+          @click="onRowClick($event, rowProps.row)"
+          class="mouse-over"
+        >
+          <q-td auto-width>
+            <q-btn
+              dense
+              flat
+              round
+              size="sm"
+              :icon="
+                rowProps.expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
+              "
+              @click.stop="rowProps.expand = !rowProps.expand"
+            />
+          </q-td>
+
+          <template v-for="col in rowProps.cols" :key="col.name">
+            <!-- custom body-cell slot -->
+            <template v-if="$slots[`body-cell-${col.name}`]">
+              <slot
+                :name="`body-cell-${col.name}`"
+                v-bind="{
+                  ...rowProps,
+                  col,
+                  value: getCellValue(rowProps.row, col),
+                }"
+              />
+            </template>
+
+            <!-- all other column data -->
+            <q-td
+              v-else
+              :props="{
+                ...rowProps,
+                col,
+                value: getCellValue(rowProps.row, col),
+              }"
+            >
+              {{ getCellValue(rowProps.row, col) }}
+            </q-td>
+          </template>
+        </q-tr>
+
+        <!-- expansion row -->
+        <q-tr
+          v-show="rowProps.expand"
+          :key="`xp-${rowProps.key}`"
+          :props="rowProps"
+          class="q-virtual-scroll--with-prev"
+        >
+          <q-td colspan="100%">
+            <slot name="row-expand" v-bind="rowProps">
+              <pre class="text-caption q-ma-none">{{
+                `row id ${rowProps.row.id}`
+              }}</pre>
+            </slot>
+          </q-td>
+        </q-tr>
+      </template>
+
+      <!-- forward any other slots not related to table  e.g top search field -------------------->
       <template
-        v-for="(_, slotName) in $slots"
+        v-for="slotName in forwardedSlotNames"
         :key="slotName"
         v-slot:[slotName]="slotProps"
       >
@@ -48,9 +129,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ComputedRef } from 'vue';
-import { QTableColumn, QTableProps } from 'quasar';
+import { computed, ComputedRef, ref, useSlots } from 'vue';
+import type { QTableColumn, QTableProps } from 'quasar';
+import { BodySlotProps } from 'src/components/Models/baseTable';
 
+/* ------------------------------------------------------------------ props */
 const props = defineProps<{
   items: number[];
   rowData:
@@ -66,50 +149,68 @@ const props = defineProps<{
   tableHeight?: string;
   filter?: string;
   columnsToSearch?: string[];
+  rowExpandable?: boolean;
 }>();
 
+/* ------------------------------------------------------------------ utils */
+function getCellValue(row: Record<string, unknown>, col: QTableColumn) {
+  return typeof col.field === 'function'
+    ? col.field(row)
+    : row[col.field as string];
+}
+
+/* ------------------------------------------------------------------ state */
+const expanded = ref<(string | number)[]>([]);
+const slots = useSlots();
+
+const forwardedSlotNames = computed(() => {
+  if (props.rowExpandable)
+    return Object.keys(slots).filter((n) => !n.startsWith('body'));
+  return Object.keys(slots);
+});
+
 const emit = defineEmits<{
   (e: 'row-click', row: Record<string, unknown>): void;
   (e: 'update:filter', value: string): void;
 }>();
 
+/* ---------------------------------------------------------------- helpers */
 const filterModel = computed({
   get: () => props.filter || '',
-  set: (value) => emit('update:filter', value),
+  set: (v) => emit('update:filter', v),
 });
 
-// Data can be passed to basetable as a normal function or computed property
 const rowMapperFn = computed(() =>
   typeof props.rowData === 'function' ? props.rowData : props.rowData.value,
 );
 
 const mappedRows = computed(() => props.items.map(rowMapperFn.value));
 
-const mappedColumns = computed<QTableColumn[]>(() => {
-  return props.columnConfig.fields.map((field) => ({
+const mappedColumns = computed<QTableColumn[]>(() =>
+  props.columnConfig.fields.map((field) => ({
     name: field,
     label: props.columnConfig.labels?.[field] || field,
     align: props.columnConfig.align?.[field] || 'left',
     field,
     sortable: true,
     headerStyle: 'font-weight: bold',
-  }));
-});
+  })),
+);
 
 const customFilterMethod: NonNullable<QTableProps['filterMethod']> = (
   rows,
   terms,
   cols,
 ) => {
-  if (!terms || terms.trim() === '') return rows;
-  const lowerTerms = terms.toLowerCase();
-  const fields =
+  if (!terms?.trim()) return rows;
+  const lower = terms.toLowerCase();
+  const searchFields =
     props.columnsToSearch ||
-    cols.map((col) => (typeof col.field === 'string' ? col.field : ''));
-  return rows.filter((row) =>
-    fields.some((field) => {
-      const val = row[field];
-      return val && String(val).toLowerCase().includes(lowerTerms);
+    cols.map((c) => (typeof c.field === 'string' ? c.field : ''));
+  return rows.filter((r) =>
+    searchFields.some((f) => {
+      const val = r[f];
+      return val && String(val).toLowerCase().includes(lower);
     }),
   );
 };
@@ -123,4 +224,8 @@ const onRowClick = (evt: Event, row: Record<string, unknown>) =>
   width: 100%;
   max-width: 18em;
 }
+
+.mouse-over {
+  cursor: pointer;
+}
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index e5e9b4d694..21f36d63cb 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -17,30 +17,33 @@
     :table-height="mobile ? '35vh' : '40vh'"
     v-model:filter="filter"
     :columns-to-search="['vehicle', 'name']"
+    :row-expandable="false"
     @row-click="onRowClick"
   >
-    <template #body-cell-plugged="props">
-      <q-td :class="`text-${props.col.align}`">
-        <ChargePointStateIcon :charge-point-id="props.row.id" />
+    <template #body-cell-plugged="{ row, col }">
+      <q-td :class="`text-${col.align}`">
+        <ChargePointStateIcon :charge-point-id="row.id as number" />
       </q-td>
     </template>
-    <template #body-cell-timeCharging="props">
-      <q-td :class="`text-${props.col.align}`">
+
+    <template #body-cell-timeCharging="{ row, col }">
+      <q-td :class="`text-${col.align}`">
         <ChargePointTimeCharging
-          :charge-point-id="props.row.id"
+          :charge-point-id="row.id as number"
           :readonly="true"
           :toolTip="true"
           :icon-size="'xs'"
         />
       </q-td>
     </template>
-    <template #body-cell-powerColumn="props">
-      <q-td :class="`text-${props.col.align}`">
-        {{ props.row.power }}
-        <q-badge rounded color="primary" :label="props.row.phaseNumber">
+
+    <template #body-cell-powerColumn="{ row, col }">
+      <q-td :class="`text-${col.align}`">
+        {{ row.power }}
+        <q-badge rounded color="primary" :label="row.phaseNumber as number">
           <q-tooltip>Phasenanzahl</q-tooltip>
         </q-badge>
-        {{ props.row.current }}
+        {{ row.current }}
       </q-td>
     </template>
   </BaseTable>
@@ -85,7 +88,7 @@ import BaseTable from 'src/components/BaseTable.vue';
 import ChargePointCard from 'src/components/ChargePointCard.vue';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
-import { columnConfig } from 'src/components/Models/table.ts';
+import { columnConfig } from 'src/components/Models/baseTable';
 
 const mqttStore = useMqttStore();
 const { chargeModes } = useChargeModes();
diff --git a/packages/modules/web_themes/koala/source/src/components/Models/baseTable.ts b/packages/modules/web_themes/koala/source/src/components/Models/baseTable.ts
new file mode 100644
index 0000000000..4befda5ebc
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/Models/baseTable.ts
@@ -0,0 +1,17 @@
+import { QTableColumn } from 'quasar';
+'';
+
+export type Align = Record<string, 'left' | 'right' | 'center'>;
+
+export type columnConfig = {
+  fields: string[];
+  labels?: Record<string, string>;
+  align?: Align;
+};
+
+export interface BodySlotProps {
+  key: string | number;
+  row: Record<string, unknown>;
+  cols: QTableColumn[];
+  expand: boolean;
+}
diff --git a/packages/modules/web_themes/koala/source/src/components/Models/table.ts b/packages/modules/web_themes/koala/source/src/components/Models/table.ts
deleted file mode 100644
index 697c3f881d..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/Models/table.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export type Align = Record<string, 'left' | 'right' | 'center'>;
-
-export type columnConfig = {
-  fields: string[];
-  labels?: Record<string, string>;
-  align?: Align;
-};
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index 0e9e79be2b..81693ffa86 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -17,11 +17,12 @@
     :table-height="mobile ? '35vh' : '40vh'"
     v-model:filter="filter"
     :columns-to-search="['name', 'manufacturer', 'model']"
+    :row-expandable="true"
     @row-click="onRowClick"
   >
-    <template #body-cell-plugged="props">
-      <q-td :class="`text-${props.col.align}`">
-        <ChargePointStateIcon :vehicle-id="props.row.id" />
+    <template #body-cell-plugged="{ row, col }">
+      <q-td :class="`text-${col.align}`">
+        <ChargePointStateIcon :vehicle-id="row.id as number" />
       </q-td>
     </template>
   </BaseTable>
@@ -64,7 +65,7 @@ import BaseCarousel from 'src/components/BaseCarousel.vue';
 import BaseTable from 'src/components/BaseTable.vue';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import VehicleCard from 'src/components/VehicleCard.vue';
-import { columnConfig } from 'src/components/Models/table.ts';
+import { columnConfig } from 'src/components/Models/baseTable';
 
 const mqttStore = useMqttStore();
 const mobile = computed(() => Platform.is.mobile);

From a3e63452f43f6156e191b6640314701d8ce9db76 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 21 May 2025 16:51:16 +0200
Subject: [PATCH 17/33] Add Vehicle connection status to vehicle table view -
 expansion row

---
 .../koala/source/src/components/BaseTable.vue |  6 +--
 .../source/src/components/Models/baseTable.ts |  1 -
 .../source/src/components/VehicleCard.vue     | 42 ++-------------
 .../components/VehicleConnectionStateIcon.vue | 51 +++++++++++++++++++
 .../src/components/VehicleInformation.vue     |  5 ++
 5 files changed, 62 insertions(+), 43 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index 86a65c0f5f..c985af788b 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -107,11 +107,7 @@
           class="q-virtual-scroll--with-prev"
         >
           <q-td colspan="100%">
-            <slot name="row-expand" v-bind="rowProps">
-              <pre class="text-caption q-ma-none">{{
-                `row id ${rowProps.row.id}`
-              }}</pre>
-            </slot>
+            <slot name="row-expand" v-bind="rowProps"> </slot>
           </q-td>
         </q-tr>
       </template>
diff --git a/packages/modules/web_themes/koala/source/src/components/Models/baseTable.ts b/packages/modules/web_themes/koala/source/src/components/Models/baseTable.ts
index 4befda5ebc..0a977189d7 100644
--- a/packages/modules/web_themes/koala/source/src/components/Models/baseTable.ts
+++ b/packages/modules/web_themes/koala/source/src/components/Models/baseTable.ts
@@ -1,5 +1,4 @@
 import { QTableColumn } from 'quasar';
-'';
 
 export type Align = Record<string, 'left' | 'right' | 'center'>;
 
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
index c62e792d36..f7b1042e56 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -16,40 +16,7 @@
           {{ vehicleInfo?.model || 'keine Angabe' }}
         </div>
       </div>
-      <div class="row q-mt-sm">
-        <div class="col">
-          <div class="text-subtitle2">Status:</div>
-          <q-chip
-            v-if="vehicleState.length < 1"
-            label="Nicht zugeordnet"
-            color="primary"
-          >
-          </q-chip>
-          <q-chip
-            v-for="(chargePoint, index) in vehicleState"
-            :key="index"
-            :icon="chargePoint.plugged ? 'power' : 'power_off'"
-            :color="
-              chargePoint.plugged
-                ? chargePoint.charging
-                  ? 'positive'
-                  : 'warning'
-                : 'negative'
-            "
-            :label="chargePoint.name"
-          >
-            <q-tooltip>
-              {{
-                chargePoint.plugged
-                  ? chargePoint.charging
-                    ? 'Lädt'
-                    : 'Angesteckt, lädt nicht'
-                  : 'Nicht angesteckt'
-              }}
-            </q-tooltip>
-          </q-chip>
-        </div>
-      </div>
+      <VehicleConnectionStateIcon :vehicle-id="vehicleId" />
       <div v-if="vehicleSocValue !== null">
         <SliderDouble
           class="q-mt-sm"
@@ -97,6 +64,7 @@ import { useMqttStore } from 'src/stores/mqtt-store';
 import { useQuasar } from 'quasar';
 import SliderDouble from './SliderDouble.vue';
 import ManualSocDialog from './ManualSocDialog.vue';
+import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
 
 const props = defineProps<{
   vehicleId: number;
@@ -122,9 +90,9 @@ const vehicleSocValue = computed(() => {
   return mqttStore.vehicleSocValue(props.vehicleId);
 });
 
-const vehicleState = computed(() => {
-  return mqttStore.vehicleConnectionState(props.vehicleId);
-});
+// const vehicleState = computed(() => {
+//   return mqttStore.vehicleConnectionState(props.vehicleId);
+// });
 
 const refreshSoc = () => {
   mqttStore.vehicleForceSocUpdate(props.vehicleId);
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue b/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
new file mode 100644
index 0000000000..66fb6ba176
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="row q-mt-sm">
+    <div class="col">
+      <div class="text-subtitle2">Status:</div>
+      <q-chip
+        v-if="vehicleState.length < 1"
+        label="Nicht zugeordnet"
+        color="primary"
+      >
+      </q-chip>
+      <q-chip
+        v-for="(chargePoint, index) in vehicleState"
+        :key="index"
+        :icon="chargePoint.plugged ? 'power' : 'power_off'"
+        :color="
+          chargePoint.plugged
+            ? chargePoint.charging
+              ? 'positive'
+              : 'warning'
+            : 'negative'
+        "
+        :label="chargePoint.name"
+      >
+        <q-tooltip>
+          {{
+            chargePoint.plugged
+              ? chargePoint.charging
+                ? 'Lädt'
+                : 'Angesteckt, lädt nicht'
+              : 'Nicht angesteckt'
+          }}
+        </q-tooltip>
+      </q-chip>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMqttStore } from 'src/stores/mqtt-store';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  vehicleId: number;
+}>();
+
+const mqttStore = useMqttStore();
+
+const vehicleState = computed(() => {
+  return mqttStore.vehicleConnectionState(props.vehicleId);
+});
+</script>
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index 81693ffa86..20cf6d8a65 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -25,6 +25,9 @@
         <ChargePointStateIcon :vehicle-id="row.id as number" />
       </q-td>
     </template>
+    <template #row-expand="{ row }">
+      <VehicleConnectionStateIcon :vehicle-id="row.id as number" />
+    </template>
   </BaseTable>
 
   <!-- VehicleCard Dialog -->
@@ -64,7 +67,9 @@ import { Platform } from 'quasar';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
 import BaseTable from 'src/components/BaseTable.vue';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
+import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
 import VehicleCard from 'src/components/VehicleCard.vue';
+
 import { columnConfig } from 'src/components/Models/baseTable';
 
 const mqttStore = useMqttStore();

From 915e017b49c8593a125f13cc4893ba9efd56cb3e Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 21 May 2025 17:40:58 +0200
Subject: [PATCH 18/33] Rename table models

---
 .../web_themes/koala/source/src/components/BaseTable.vue       | 2 +-
 .../koala/source/src/components/ChargePointInformation.vue     | 2 +-
 .../components/Models/{baseTable.ts => base-table-model.ts}    | 0
 .../koala/source/src/components/VehicleInformation.vue         | 3 +--
 4 files changed, 3 insertions(+), 4 deletions(-)
 rename packages/modules/web_themes/koala/source/src/components/Models/{baseTable.ts => base-table-model.ts} (100%)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index c985af788b..456404efb8 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -127,7 +127,7 @@
 <script setup lang="ts">
 import { computed, ComputedRef, ref, useSlots } from 'vue';
 import type { QTableColumn, QTableProps } from 'quasar';
-import { BodySlotProps } from 'src/components/Models/baseTable';
+import { BodySlotProps } from 'src/components/Models/base-table-model';
 
 /* ------------------------------------------------------------------ props */
 const props = defineProps<{
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 21f36d63cb..80924686df 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -88,7 +88,7 @@ import BaseTable from 'src/components/BaseTable.vue';
 import ChargePointCard from 'src/components/ChargePointCard.vue';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
-import { columnConfig } from 'src/components/Models/baseTable';
+import { columnConfig } from 'src/components/Models/base-table-model';
 
 const mqttStore = useMqttStore();
 const { chargeModes } = useChargeModes();
diff --git a/packages/modules/web_themes/koala/source/src/components/Models/baseTable.ts b/packages/modules/web_themes/koala/source/src/components/Models/base-table-model.ts
similarity index 100%
rename from packages/modules/web_themes/koala/source/src/components/Models/baseTable.ts
rename to packages/modules/web_themes/koala/source/src/components/Models/base-table-model.ts
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index 20cf6d8a65..b2aa362855 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -69,8 +69,7 @@ import BaseTable from 'src/components/BaseTable.vue';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
 import VehicleCard from 'src/components/VehicleCard.vue';
-
-import { columnConfig } from 'src/components/Models/baseTable';
+import { columnConfig } from 'src/components/Models/base-table-model';
 
 const mqttStore = useMqttStore();
 const mobile = computed(() => Platform.is.mobile);

From d67b484a055388dcbd8adf49d13eb7bfaf4ba2dc Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 22 May 2025 10:06:31 +0200
Subject: [PATCH 19/33] Fix css for mobile view table expansion row, wrap chips
 (connection status)

---
 .../source/src/components/VehicleCard.vue     |  5 +-
 .../components/VehicleConnectionStateIcon.vue | 47 ++++++++++---------
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
index f7b1042e56..4108c22a75 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -16,7 +16,10 @@
           {{ vehicleInfo?.model || 'keine Angabe' }}
         </div>
       </div>
-      <VehicleConnectionStateIcon :vehicle-id="vehicleId" />
+      <VehicleConnectionStateIcon
+        :vehicle-id="vehicleId"
+        :pass-c-s-s-style="'q-mt-sm'"
+      />
       <div v-if="vehicleSocValue !== null">
         <SliderDouble
           class="q-mt-sm"
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue b/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
index 66fb6ba176..cd04f0eacf 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row q-mt-sm">
+  <div class="row" :class="props.passCSSStyle">
     <div class="col">
       <div class="text-subtitle2">Status:</div>
       <q-chip
@@ -8,29 +8,31 @@
         color="primary"
       >
       </q-chip>
-      <q-chip
-        v-for="(chargePoint, index) in vehicleState"
-        :key="index"
-        :icon="chargePoint.plugged ? 'power' : 'power_off'"
-        :color="
-          chargePoint.plugged
-            ? chargePoint.charging
-              ? 'positive'
-              : 'warning'
-            : 'negative'
-        "
-        :label="chargePoint.name"
-      >
-        <q-tooltip>
-          {{
+      <div class="row wrap">
+        <q-chip
+          v-for="(chargePoint, index) in vehicleState"
+          :key="index"
+          :icon="chargePoint.plugged ? 'power' : 'power_off'"
+          :color="
             chargePoint.plugged
               ? chargePoint.charging
-                ? 'Lädt'
-                : 'Angesteckt, lädt nicht'
-              : 'Nicht angesteckt'
-          }}
-        </q-tooltip>
-      </q-chip>
+                ? 'positive'
+                : 'warning'
+              : 'negative'
+          "
+          :label="chargePoint.name"
+        >
+          <q-tooltip>
+            {{
+              chargePoint.plugged
+                ? chargePoint.charging
+                  ? 'Lädt'
+                  : 'Angesteckt, lädt nicht'
+                : 'Nicht angesteckt'
+            }}
+          </q-tooltip>
+        </q-chip>
+      </div>
     </div>
   </div>
 </template>
@@ -41,6 +43,7 @@ import { computed } from 'vue';
 
 const props = defineProps<{
   vehicleId: number;
+  passCSSStyle?: string;
 }>();
 
 const mqttStore = useMqttStore();

From eadf994b37e640b9a27c204e99a4eda4caa77361 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 28 May 2025 11:36:28 +0200
Subject: [PATCH 20/33] Add data to expansion rows in vehicle and chargepoint
 tables

---
 .../koala/source/src/components/BaseTable.vue | 28 ++++----
 .../source/src/components/ChargePointCard.vue | 23 +++---
 .../src/components/ChargePointInformation.vue | 71 ++++++++++++++++---
 .../src/components/ChargePointPowerData.vue   | 23 ++++++
 .../src/components/Models/base-table-model.ts |  1 +
 .../source/src/components/VehicleCard.vue     |  9 +--
 .../components/VehicleConnectionStateIcon.vue | 59 ++++++++-------
 .../src/components/VehicleInformation.vue     |  4 +-
 8 files changed, 145 insertions(+), 73 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index 456404efb8..15bb2ed66b 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -45,8 +45,12 @@
           <q-th auto-width :props="{ ...hdr, col: {} }" />
 
           <!-- the other columns -->
-          <q-th v-for="c in hdr.cols" :key="c.name" :props="{ ...hdr, col: c }">
-            {{ c.label }}
+          <q-th
+            v-for="column in hdr.cols"
+            :key="column.name"
+            :props="{ ...hdr, col: column }"
+          >
+            {{ column.label }}
           </q-th>
         </q-tr>
       </template>
@@ -57,7 +61,7 @@
           :key="`main-${rowProps.key}`"
           :props="rowProps"
           @click="onRowClick($event, rowProps.row)"
-          class="mouse-over"
+          class="clickable"
         >
           <q-td auto-width>
             <q-btn
@@ -198,15 +202,15 @@ const customFilterMethod: NonNullable<QTableProps['filterMethod']> = (
   terms,
   cols,
 ) => {
-  if (!terms?.trim()) return rows;
-  const lower = terms.toLowerCase();
-  const searchFields =
+  if (!terms || terms.trim() === '') return rows;
+  const lowerTerms = terms.toLowerCase();
+  const fields =
     props.columnsToSearch ||
-    cols.map((c) => (typeof c.field === 'string' ? c.field : ''));
-  return rows.filter((r) =>
-    searchFields.some((f) => {
-      const val = r[f];
-      return val && String(val).toLowerCase().includes(lower);
+    cols.map((col) => (typeof col.field === 'string' ? col.field : ''));
+  return rows.filter((row) =>
+    fields.some((field) => {
+      const val = row[field];
+      return val && String(val).toLowerCase().includes(lowerTerms);
     }),
   );
 };
@@ -221,7 +225,7 @@ const onRowClick = (evt: Event, row: Record<string, unknown>) =>
   max-width: 18em;
 }
 
-.mouse-over {
+.clickable {
   cursor: pointer;
 }
 </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 50fcc4a66d..5a2d578e4f 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -29,13 +29,15 @@
       <div class="row q-mt-sm">
         <div class="col">
           <div class="text-subtitle2">Leistung</div>
-          {{ power }}
-          <q-badge rounded color="primary" :label="phaseNumber">
-            <q-tooltip class="bg-primary">Phasenanzahl</q-tooltip>
-          </q-badge>
-          {{ chargingCurrent }}
+          <div class="col no-wrap">
+            <ChargePointPowerData
+              :power="power"
+              :phase-number="phaseNumber"
+              :current="chargingCurrent"
+            />
+          </div>
         </div>
-        <div class="col q-pl-sm">
+        <div class="col text-right">
           <div class="text-subtitle2">geladen</div>
           {{ energyChargedPlugged }}
         </div>
@@ -99,6 +101,7 @@ import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 import ChargePointSettings from './ChargePointSettings.vue';
 import ManualSocDialog from './ManualSocDialog.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
+import ChargePointPowerData from './ChargePointPowerData.vue';
 import { useQuasar } from 'quasar';
 
 const mqttStore = useMqttStore();
@@ -140,8 +143,8 @@ const settingsVisible = ref<boolean>(false);
 const socInputVisible = ref<boolean>(false);
 const name = computed(() => mqttStore.chargePointName(props.chargePointId));
 
-const power = computed(() =>
-  mqttStore.chargePointPower(props.chargePointId, 'textValue'),
+const power = computed(
+  () => mqttStore.chargePointPower(props.chargePointId, 'textValue') as string,
 );
 
 const energyChargedPlugged = computed(() =>
@@ -152,8 +155,8 @@ const phaseNumber = computed(() =>
   mqttStore.chargePointPhaseNumber(props.chargePointId),
 );
 
-const chargingCurrent = computed(() =>
-  mqttStore.chargePointChargingCurrent(props.chargePointId),
+const chargingCurrent = computed(
+  () => mqttStore.chargePointChargingCurrent(props.chargePointId) as string,
 );
 
 const currentValue = computed(() => {
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 80924686df..c67748f289 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -17,19 +17,19 @@
     :table-height="mobile ? '35vh' : '40vh'"
     v-model:filter="filter"
     :columns-to-search="['vehicle', 'name']"
-    :row-expandable="false"
+    :row-expandable="mobile"
     @row-click="onRowClick"
   >
     <template #body-cell-plugged="{ row, col }">
       <q-td :class="`text-${col.align}`">
-        <ChargePointStateIcon :charge-point-id="row.id as number" />
+        <ChargePointStateIcon :charge-point-id="(row.id as number)" />
       </q-td>
     </template>
 
     <template #body-cell-timeCharging="{ row, col }">
       <q-td :class="`text-${col.align}`">
         <ChargePointTimeCharging
-          :charge-point-id="row.id as number"
+          :charge-point-id="(row.id as number)"
           :readonly="true"
           :toolTip="true"
           :icon-size="'xs'"
@@ -39,13 +39,46 @@
 
     <template #body-cell-powerColumn="{ row, col }">
       <q-td :class="`text-${col.align}`">
-        {{ row.power }}
-        <q-badge rounded color="primary" :label="row.phaseNumber as number">
-          <q-tooltip>Phasenanzahl</q-tooltip>
-        </q-badge>
-        {{ row.current }}
+        <ChargePointPowerData
+          :power="(row.power as string)"
+          :phase-number="(row.phaseNumber as number)"
+          :current="(row.current as string)"
+        />
       </q-td>
     </template>
+
+    <!-- Pass expansion row data to BaseTable.vue --------------------------------------------------------->
+    <template #row-expand="{ row }">
+      <div v-if="mobile" class="q-pa-xs column q-gutter-y-xs">
+        <div
+          v-for="field in columnConfigMobile?.fieldsExpansionRow"
+          :key="field"
+          class="row items-start"
+        >
+          <!-- label ------------------------------------------------>
+          <div class="col-5 text-caption text-bold">
+            {{ columnConfigMobile?.labels?.[field] }}:
+          </div>
+
+          <!-- value --------------------------------------------------------->
+          <div class="col-7 text-right">
+            <ChargePointPowerData
+              v-if="field === 'powerColumn'"
+              :power="(row.power as string)"
+              :phase-number="(row.phaseNumber as number)"
+              :current="(row.current as string)"
+            />
+            <ChargePointTimeCharging
+              v-if="field === 'timeCharging'"
+              :charge-point-id="(row.id as number)"
+              readonly
+              icon-size="xs"
+            />
+            <span v-else>{{ row[field] }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
   </BaseTable>
 
   <!-- ChargePointCard Dialog -->
@@ -88,6 +121,7 @@ import BaseTable from 'src/components/BaseTable.vue';
 import ChargePointCard from 'src/components/ChargePointCard.vue';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
+import ChargePointPowerData from './ChargePointPowerData.vue';
 import { columnConfig } from 'src/components/Models/base-table-model';
 
 const mqttStore = useMqttStore();
@@ -123,10 +157,11 @@ const tableRowData = computed(() => {
       chargePointSoc !== undefined ? `${Math.round(chargePointSoc)}%` : '0%';
     const power = mqttStore.chargePointPower(id, 'textValue');
     const charged = mqttStore.chargePointEnergyChargedPlugged(id, 'textValue');
-    const timeCharging = mqttStore.chargePointConnectedVehicleTimeCharging(id);
+    const timeCharging =
+      mqttStore.chargePointConnectedVehicleTimeCharging(id).value;
     const phaseNumber = mqttStore.chargePointPhaseNumber(id);
     const current = mqttStore.chargePointChargingCurrent(id, 'textValue');
-    const powerColumn = `${power} -- ${phaseNumber} -- ${current}`;
+    const powerColumn = '';
     return {
       id,
       name,
@@ -176,13 +211,29 @@ const columnConfigDesktop: columnConfig = {
 
 const columnConfigMobile: columnConfig = {
   fields: ['name', 'vehicle', 'plugged'],
+  fieldsExpansionRow: [
+    'powerColumn',
+    'chargeMode',
+    'charged',
+    'soc',
+    'timeCharging',
+  ],
   labels: {
     name: 'Ladepunkt',
     vehicle: 'Fahrzeug',
     plugged: 'Status',
+    chargeMode: 'Lademodus',
+    timeCharging: 'Zeitladen',
+    powerColumn: 'Leistung',
+    charged: 'Geladen',
+    soc: 'Ladestand',
   },
   align: {
     plugged: 'center',
+    timeCharging: 'center',
+    soc: 'right',
+    charged: 'right',
+    powerColumn: 'right',
   },
 };
 
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
new file mode 100644
index 0000000000..2e652e73ea
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="cp-power no-wrap row inline items-center q-gutter-xs">
+    <span>{{ power }}</span>
+    <q-badge rounded color="primary" :label="(phaseNumber as number)">
+      <q-tooltip>Phasenanzahl</q-tooltip>
+    </q-badge>
+    <span>{{ current }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  power: string;
+  phaseNumber: number;
+  current: string;
+}>();
+</script>
+
+<style scoped>
+.cp-power {
+  white-space: nowrap;
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/Models/base-table-model.ts b/packages/modules/web_themes/koala/source/src/components/Models/base-table-model.ts
index 0a977189d7..99cd293048 100644
--- a/packages/modules/web_themes/koala/source/src/components/Models/base-table-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/Models/base-table-model.ts
@@ -4,6 +4,7 @@ export type Align = Record<string, 'left' | 'right' | 'center'>;
 
 export type columnConfig = {
   fields: string[];
+  fieldsExpansionRow?: string[];
   labels?: Record<string, string>;
   align?: Align;
 };
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
index 4108c22a75..588f65d62c 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -16,10 +16,7 @@
           {{ vehicleInfo?.model || 'keine Angabe' }}
         </div>
       </div>
-      <VehicleConnectionStateIcon
-        :vehicle-id="vehicleId"
-        :pass-c-s-s-style="'q-mt-sm'"
-      />
+      <VehicleConnectionStateIcon :vehicle-id="vehicleId" class="q-mt-sm" />
       <div v-if="vehicleSocValue !== null">
         <SliderDouble
           class="q-mt-sm"
@@ -93,10 +90,6 @@ const vehicleSocValue = computed(() => {
   return mqttStore.vehicleSocValue(props.vehicleId);
 });
 
-// const vehicleState = computed(() => {
-//   return mqttStore.vehicleConnectionState(props.vehicleId);
-// });
-
 const refreshSoc = () => {
   mqttStore.vehicleForceSocUpdate(props.vehicleId);
   $q.notify({
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue b/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
index cd04f0eacf..1ad6fb57f3 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
@@ -1,38 +1,36 @@
 <template>
-  <div class="row" :class="props.passCSSStyle">
-    <div class="col">
-      <div class="text-subtitle2">Status:</div>
+  <div class="col">
+    <div class="text-subtitle2">Status:</div>
+    <q-chip
+      v-if="vehicleState.length < 1"
+      label="Nicht zugeordnet"
+      color="primary"
+    >
+    </q-chip>
+    <div class="row wrap">
       <q-chip
-        v-if="vehicleState.length < 1"
-        label="Nicht zugeordnet"
-        color="primary"
+        v-for="(chargePoint, index) in vehicleState"
+        :key="index"
+        :icon="chargePoint.plugged ? 'power' : 'power_off'"
+        :color="
+          chargePoint.plugged
+            ? chargePoint.charging
+              ? 'positive'
+              : 'warning'
+            : 'negative'
+        "
+        :label="chargePoint.name"
       >
-      </q-chip>
-      <div class="row wrap">
-        <q-chip
-          v-for="(chargePoint, index) in vehicleState"
-          :key="index"
-          :icon="chargePoint.plugged ? 'power' : 'power_off'"
-          :color="
+        <q-tooltip>
+          {{
             chargePoint.plugged
               ? chargePoint.charging
-                ? 'positive'
-                : 'warning'
-              : 'negative'
-          "
-          :label="chargePoint.name"
-        >
-          <q-tooltip>
-            {{
-              chargePoint.plugged
-                ? chargePoint.charging
-                  ? 'Lädt'
-                  : 'Angesteckt, lädt nicht'
-                : 'Nicht angesteckt'
-            }}
-          </q-tooltip>
-        </q-chip>
-      </div>
+                ? 'Lädt'
+                : 'Angesteckt, lädt nicht'
+              : 'Nicht angesteckt'
+          }}
+        </q-tooltip>
+      </q-chip>
     </div>
   </div>
 </template>
@@ -43,7 +41,6 @@ import { computed } from 'vue';
 
 const props = defineProps<{
   vehicleId: number;
-  passCSSStyle?: string;
 }>();
 
 const mqttStore = useMqttStore();
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index b2aa362855..5446ebc83b 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -22,11 +22,11 @@
   >
     <template #body-cell-plugged="{ row, col }">
       <q-td :class="`text-${col.align}`">
-        <ChargePointStateIcon :vehicle-id="row.id as number" />
+        <ChargePointStateIcon :vehicle-id="(row.id as number)" />
       </q-td>
     </template>
     <template #row-expand="{ row }">
-      <VehicleConnectionStateIcon :vehicle-id="row.id as number" />
+      <VehicleConnectionStateIcon :vehicle-id="(row.id as number)" />
     </template>
   </BaseTable>
 

From 94764440f8b035586fdfe20a1c9602518c0e9fa9 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 30 May 2025 17:32:55 +0200
Subject: [PATCH 21/33] Add scrollable legend to history chart (standard legacy
 theme)

---
 .../web_themes/standard_legacy/web/index.html |  9 ++-
 .../standard_legacy/web/livechart.js          | 45 ++++++++++-
 .../web_themes/standard_legacy/web/style.css  | 75 +++++++++++++++++++
 3 files changed, 125 insertions(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/standard_legacy/web/index.html b/packages/modules/web_themes/standard_legacy/web/index.html
index 62798e7740..b8376d5a91 100644
--- a/packages/modules/web_themes/standard_legacy/web/index.html
+++ b/packages/modules/web_themes/standard_legacy/web/index.html
@@ -347,7 +347,14 @@
 						<span class="collPlus"></span>
 					</div>
 					<div id="cardGraph" class="card-body collapse show">
-						<div class="row justify-content-center my-2" id="theGraph">
+						<div class="row justify-content-center" >
+							<div class="col-sm-12 mt-2">
+								<div id="custom-legend-container"></div>
+							</div>
+						</div>
+					</div>
+					<div id="cardGraph" class="card-body collapse show">
+						<div class="row justify-content-center mb-2" id="theGraph">
 							<!-- will be refreshed using MQTT (in livechart.js)-->
 							<div class="col-sm-12 text-center smallTextSize">
 								<div id="waitForGraphLoadingDiv">
diff --git a/packages/modules/web_themes/standard_legacy/web/livechart.js b/packages/modules/web_themes/standard_legacy/web/livechart.js
index f8dccba73f..a6dd818041 100644
--- a/packages/modules/web_themes/standard_legacy/web/livechart.js
+++ b/packages/modules/web_themes/standard_legacy/web/livechart.js
@@ -238,6 +238,41 @@ var chartDatasets = [
 	}
 ];
 
+// Generate custom legend
+function generateCustomLegend(chart) {
+    const legendContainer = document.getElementById('custom-legend-container');
+    // Clear existing legend
+    legendContainer.innerHTML = '';
+    // Create legend items
+    chart.data.datasets.forEach((dataset, index) => {
+        if (!dataset.label) return;
+        const legendItem = document.createElement('div');
+        legendItem.className = 'legend-item';
+        if (chart.getDatasetMeta(index).hidden) {
+            legendItem.className += ' hidden';
+        }
+        const colorBox = document.createElement('span');
+        colorBox.className = 'legend-color-box';
+        colorBox.style.backgroundColor = dataset.borderColor;
+        const text = document.createElement('span');
+        text.textContent = dataset.label;
+        legendItem.appendChild(colorBox);
+        legendItem.appendChild(text);
+        // toggle visibility
+        legendItem.onclick = ()=> {
+            const item = chart.getDatasetMeta(index);
+            item.hidden = !item.hidden;
+            if (item.hidden) {
+                legendItem.classList.add('hidden');
+            } else {
+                legendItem.classList.remove('hidden');
+            }
+            chart.update();
+        };
+        legendContainer.appendChild(legendItem);
+    });
+}
+
 function loadGraph(animationDuration = 1000) {
 
 	var chartData = {
@@ -295,8 +330,12 @@ function loadGraph(animationDuration = 1000) {
 	window.myLine = new Chart(ctx, {
 		type: 'line',
 		plugins: [{
-			afterInit: doGraphResponsive,
-			resize: doGraphResponsive
+			afterInit: (chart) => {
+                doGraphResponsive(chart);
+                generateCustomLegend(chart);
+            },
+            resize: doGraphResponsive,
+            afterUpdate: generateCustomLegend
 		}],
 		data: chartData,
 		options: {
@@ -308,7 +347,7 @@ function loadGraph(animationDuration = 1000) {
 					enabled: true
 				},
 				legend: {
-					display: true,
+					display: false,
 					labels: {
 						color: fontColor,
 						// filter: function(item,chart) {
diff --git a/packages/modules/web_themes/standard_legacy/web/style.css b/packages/modules/web_themes/standard_legacy/web/style.css
index c522127e1b..1ba0cf9de3 100644
--- a/packages/modules/web_themes/standard_legacy/web/style.css
+++ b/packages/modules/web_themes/standard_legacy/web/style.css
@@ -476,3 +476,78 @@ h3 {
 	transition: none;
 	display: none;
 }
+
+/* Custom legend container */
+#custom-legend-container {
+    max-height: 120px;
+	margin-bottom: 10px;
+    overflow-y: auto;
+    border: 1px solid #ccc;
+	border-radius: 5px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    text-align: left;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+/* Legend item styling */
+.legend-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    padding: 2px 5px;
+    border-radius: 3px;
+	font-size: 14px;
+	color: rgba(0,0,0,0.65);
+}
+
+.legend-item:hover {
+    background-color: rgba(0,0,0,0.05);
+}
+
+.legend-color-box {
+    display: inline-block;
+    width: 16px;
+    height: 4px;
+    margin-right: 4px;  
+}
+
+.legend-item.hidden {
+    opacity: 0.6;
+	text-decoration: line-through;
+}
+
+/* Make the container responsive */
+@media (max-width: 768px) {
+    #custom-legend-container {
+        max-height: 100px;
+    }
+    
+    .legend-item {
+        font-size: 0.8em;
+        margin-right: 5px;
+        margin-bottom: 3px;
+    }
+
+	.legend-color-box {
+		width: 12px;
+		height: 3px;
+		margin-right: 4px;  
+	}
+}
+
+/* For smaller screens */
+@media (max-width: 576px) {
+    #custom-legend-container {
+        max-height: 80px;
+    }
+
+	.legend-color-box {
+		width: 10px;
+		height: 2px;
+		margin-right: 4px;  
+	}
+}

From 622388426ce805689a3ca62d50b076f5498c1a7e Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 2 Jun 2025 09:04:43 +0200
Subject: [PATCH 22/33] Add scrollable legend to history chart (koala theme)

---
 .../charts/historyChart/HistoryChart.vue      |  41 +++--
 .../historyChart/HistoryChartLegend.vue       | 147 ++++++++++++++++++
 .../source/src/css/quasar.variables.scss      |   8 +
 3 files changed, 185 insertions(+), 11 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue

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 8fd9c6de5a..fe696998c0 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
@@ -1,10 +1,17 @@
 <template>
   <div class="chart-container">
-    <ChartjsLine
-      :data="lineChartData"
-      :options="chartOptions"
-      :class="'chart'"
-      ref="chartRef"
+    <div class="chart-wrapper">
+      <ChartjsLine
+        :key="chartInstanceKey"
+        :data="lineChartData"
+        :options="chartOptions"
+        ref="chartRef"
+      />
+    </div>
+    <HistoryChartLegend
+      v-if="legendDisplay && legendLarge"
+      :chart="chartRef?.chart || null"
+      class="legend-wrapper q-mt-sm"
     />
   </div>
 </template>
@@ -33,6 +40,7 @@ import {
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { useLocalDataStore } from 'src/stores/localData-store';
 import { GraphDataPoint } from 'src/stores/mqtt-store-model';
+import HistoryChartLegend from 'src/components/charts/historyChart/HistoryChartLegend.vue';
 import 'chartjs-adapter-luxon';
 import type {
   HistoryChartTooltipItem,
@@ -60,6 +68,10 @@ const props = defineProps<{
 
 const chartRef = ref<ChartComponentRef | null>(null);
 
+const legendLarge = computed(() =>
+  lineChartData?.value?.datasets.length > 15 ? true : false,
+);
+
 const applyHiddenDatasetsToChart = <TType extends ChartType, TData>(
   chart: Chart<TType, TData>,
 ): void => {
@@ -101,6 +113,9 @@ const gridMeterName = computed(() => {
   return 'Zähler';
 });
 
+//used to recreate chart instance once grid meter name is received from MQTT topic.
+const chartInstanceKey = computed(() => gridMeterName.value);
+
 const vehicles = computed(() => mqttStore.vehicleList);
 const chartRange = computed(
   () => mqttStore.themeConfiguration?.history_chart_range || 3600,
@@ -248,7 +263,7 @@ const chartOptions = computed(() => ({
   maintainAspectRatio: false,
   plugins: {
     legend: {
-      display: legendDisplay.value,
+      display: !legendLarge.value && legendDisplay.value,
       fullSize: true,
       align: 'center' as const,
       position: 'bottom' as const,
@@ -346,14 +361,18 @@ const chartOptions = computed(() => ({
 
 <style scoped>
 .chart-container {
-  position: relative;
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
-.chart {
-  object-fit: contain;
-  height: 100%;
-  width: 100%;
+.legend-wrapper {
+  flex: 0 0 auto;
+}
+
+.chart-wrapper {
+  flex: 1;
+  min-height: 0;
 }
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
new file mode 100644
index 0000000000..393509c390
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
@@ -0,0 +1,147 @@
+<template>
+  <q-scroll-area
+    v-if="chart"
+    :thumb-style="thumbStyle"
+    :bar-style="barStyle"
+    class="custom-legend-container"
+  >
+    <q-list dense class="q-pa-none">
+      <div class="row wrap q-pa-none items-center justify-center">
+        <q-item
+          v-for="(dataset, index) in legendItems"
+          :key="dataset.text || index"
+          clickable
+          dense
+          class="q-py-none"
+          :class="{ 'legend-item-hidden': dataset.hidden }"
+          @click="toggleDataset(dataset.text, dataset.datasetIndex)"
+        >
+          <q-item-section avatar class="q-pr-none">
+            <div
+              class="legend-color-box q-mr-sm"
+              :style="{ backgroundColor: getItemColor(dataset) }"
+            ></div>
+          </q-item-section>
+          <q-item-section>
+            <q-item-label class="text-caption">{{ dataset.text }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </div>
+    </q-list>
+  </q-scroll-area>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useLocalDataStore } from 'src/stores/localData-store';
+import { Chart, LegendItem } from 'chart.js';
+
+const props = defineProps<{
+  chart: Chart | null;
+}>();
+
+const localDataStore = useLocalDataStore();
+const legendItems = ref<LegendItem[]>([]);
+
+const updateLegendItems = () => {
+  if (!props.chart) return;
+  const items =
+    props.chart.options.plugins?.legend?.labels?.generateLabels?.(
+      props.chart,
+    ) || [];
+
+  items.forEach((item) => {
+    if (item.text && localDataStore.isDatasetHidden(item.text)) {
+      item.hidden = true;
+    }
+  });
+  legendItems.value = items;
+};
+
+const getItemColor = (item: LegendItem) => {
+  if (!props.chart || item.datasetIndex === undefined) return '#ccc';
+
+  const dataset = props.chart.data.datasets[item.datasetIndex];
+  return (dataset.borderColor as string) || '#ccc';
+};
+
+const toggleDataset = (datasetName?: string, datasetIndex?: number) => {
+  if (!props.chart || !datasetName || datasetIndex === undefined) return;
+  localDataStore.toggleDataset(datasetName);
+  if (localDataStore.isDatasetHidden(datasetName)) {
+    props.chart.hide(datasetIndex);
+  } else {
+    props.chart.show(datasetIndex);
+  }
+  updateLegendItems();
+  props.chart.update();
+};
+
+watch(
+  () => props.chart,
+  (newChart) => {
+    if (newChart) {
+      newChart.data.datasets.forEach((dataset, index) => {
+        if (
+          typeof dataset.label === 'string' &&
+          localDataStore.isDatasetHidden(dataset.label)
+        ) {
+          newChart.hide(index);
+        }
+      });
+      newChart.update();
+      updateLegendItems();
+    }
+  },
+  { immediate: true },
+);
+
+const thumbStyle = {
+  borderRadius: '5px',
+  backgroundColor: 'var(--q-primary)',
+  width: '6px',
+  opacity: '1',
+};
+
+const barStyle = {
+  borderRadius: '5px',
+  backgroundColor: 'var(--q-secondary)',
+  width: '6px',
+  opacity: '1',
+};
+</script>
+
+<style scoped>
+.custom-legend-container {
+  margin-bottom: 5px;
+  height: 70px;
+  border-radius: 5px;
+  text-align: left;
+  width: 100%;
+}
+
+.legend-color-box {
+  display: inline-block;
+  width: 20px;
+  height: 3px;
+}
+
+.legend-item-hidden {
+  opacity: 0.6 !important;
+  text-decoration: line-through !important;
+}
+
+/* Override the avatar section min-width */
+:deep(.q-item__section--avatar) {
+  min-width: 5px !important;
+  padding-right: 0px !important;
+}
+
+/* For very small screens */
+@media (max-width: 576px) {
+  .legend-color-box {
+    width: 10px;
+    height: 2px;
+  }
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index dd5929b40d..57aa50cd25 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -207,6 +207,10 @@ $battery: #ba7128;
   .q-table td:last-child {
     padding-right: 12px !important;
   }
+  // Scroll area styling
+  .q-scrollarea {
+    border: 1px solid var(--q-secondary) !important;
+  }
 }
 // Dark Theme Base Colors
 $dark-page: #000000; // This overrides Quasar's default dark page color
@@ -392,4 +396,8 @@ $dark-tab-icon: #d7d9e0;
       scrollbar-color: var(--q-primary) var(--q-secondary);
     }
   }
+
+  .q-scrollarea {
+    border: 1px solid var(--q-secondary) !important;
+  }
 }

From ba88d15fc342c73f9cf4daabb760a111d9378bc6 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 6 Jun 2025 14:08:58 +0200
Subject: [PATCH 23/33] Fix: change prop to static prop

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

diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
index 8d17aae3ea..8281c7a728 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -53,7 +53,7 @@
         class="q-mt-sm"
         :current-value="soc"
         :readonly="true"
-        :limit-mode="'none'"
+        limit-mode="none"
       />
     </q-card-section>
   </q-card>

From fd7bf3ddecbe59eb780cd7b406d854b312eba1f1 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 6 Jun 2025 14:12:07 +0200
Subject: [PATCH 24/33] Typecasting explanation

---
 .../koala/source/src/components/ChargePointCard.vue  | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 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 5a2d578e4f..0ec8e4b857 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -142,19 +142,23 @@ const settingsVisible = ref<boolean>(false);
 
 const socInputVisible = ref<boolean>(false);
 const name = computed(() => mqttStore.chargePointName(props.chargePointId));
-
+// Typecast to string is better here because the store method returns a union type which
+// would need to be repeated in child component ChargePointPowerData
+// unnecessary as parameter returnType: string = 'textValue' is already set as default in store
 const power = computed(
-  () => mqttStore.chargePointPower(props.chargePointId, 'textValue') as string,
+  () => mqttStore.chargePointPower(props.chargePointId) as string,
 );
 
 const energyChargedPlugged = computed(() =>
-  mqttStore.chargePointEnergyChargedPlugged(props.chargePointId, 'textValue'),
+  mqttStore.chargePointEnergyChargedPlugged(props.chargePointId),
 );
 
 const phaseNumber = computed(() =>
   mqttStore.chargePointPhaseNumber(props.chargePointId),
 );
-
+// Typecast to string is better here because the store method returns a union type which
+// would need to be repeated in child component ChargePointPowerData
+// unnecessary as parameter returnType: string = 'textValue' is already set as default in store
 const chargingCurrent = computed(
   () => mqttStore.chargePointChargingCurrent(props.chargePointId) as string,
 );

From 08bfc9c52fde6d941d565e2fba2d2445508a534f Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 6 Jun 2025 14:22:23 +0200
Subject: [PATCH 25/33] Rename table models file

---
 .../src/components/Models/base-table-model.ts | 17 -------
 .../src/components/models/table-model.ts      | 47 +++++++++++++++++++
 2 files changed, 47 insertions(+), 17 deletions(-)
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/Models/base-table-model.ts
 create mode 100644 packages/modules/web_themes/koala/source/src/components/models/table-model.ts

diff --git a/packages/modules/web_themes/koala/source/src/components/Models/base-table-model.ts b/packages/modules/web_themes/koala/source/src/components/Models/base-table-model.ts
deleted file mode 100644
index 99cd293048..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/Models/base-table-model.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { QTableColumn } from 'quasar';
-
-export type Align = Record<string, 'left' | 'right' | 'center'>;
-
-export type columnConfig = {
-  fields: string[];
-  fieldsExpansionRow?: string[];
-  labels?: Record<string, string>;
-  align?: Align;
-};
-
-export interface BodySlotProps {
-  key: string | number;
-  row: Record<string, unknown>;
-  cols: QTableColumn[];
-  expand: boolean;
-}
diff --git a/packages/modules/web_themes/koala/source/src/components/models/table-model.ts b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
new file mode 100644
index 0000000000..38e898916c
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
@@ -0,0 +1,47 @@
+import { QTableColumn } from 'quasar';
+
+// export type columnConfig = {
+//   fields: string[];
+//   fieldsExpansionRow?: string[];
+//   labels?: Record<string, string>;
+//   align?: Align;
+// };
+
+export type columnConfiguration = {
+  field: string;
+  label: string;
+  align?: 'left' | 'right' | 'center';
+  expandField?: boolean;
+};
+
+export interface BodySlotProps<T> {
+  key: string | number;
+  row: T;
+  cols: QTableColumn[];
+  expand: boolean;
+}
+
+export interface ChargePointRow extends Record<string, unknown> {
+  id: number;
+  name: string | undefined;
+  vehicle: string;
+  plugged: boolean;
+  chargeMode: string | undefined;
+  timeCharging: boolean | undefined;
+  soc: string;
+  power: string;
+  phaseNumber: number;
+  current: string;
+  powerColumn: '';
+  charged: string;
+}
+
+export interface VehicleRow extends Record<string, unknown> {
+  id: number;
+  name: string;
+  manufacturer: string;
+  model: string;
+  plugState: boolean;
+  chargeState: boolean;
+  vehicleSocValue: string;
+}

From 4528e1fb000046e80f50eb54ca911fd808729fc5 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 6 Jun 2025 14:23:04 +0200
Subject: [PATCH 26/33] Fix html structure

---
 packages/modules/web_themes/standard_legacy/web/index.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/modules/web_themes/standard_legacy/web/index.html b/packages/modules/web_themes/standard_legacy/web/index.html
index b8376d5a91..9f3470d807 100644
--- a/packages/modules/web_themes/standard_legacy/web/index.html
+++ b/packages/modules/web_themes/standard_legacy/web/index.html
@@ -352,8 +352,6 @@
 								<div id="custom-legend-container"></div>
 							</div>
 						</div>
-					</div>
-					<div id="cardGraph" class="card-body collapse show">
 						<div class="row justify-content-center mb-2" id="theGraph">
 							<!-- will be refreshed using MQTT (in livechart.js)-->
 							<div class="col-sm-12 text-center smallTextSize">

From f68927dd4c535f73ac5970283449f34ef7ed87e4 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 6 Jun 2025 14:37:32 +0200
Subject: [PATCH 27/33] Fix: ensure flow of Typescript data types parent to
 Child - remove type casting where possible

---
 .../koala/source/src/components/BaseTable.vue | 102 +++++------
 .../src/components/ChargePointInformation.vue | 165 ++++++++----------
 .../src/components/ChargePointPowerData.vue   |   2 +-
 .../src/components/VehicleInformation.vue     |  71 ++++----
 4 files changed, 153 insertions(+), 187 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index 15bb2ed66b..de95f94a06 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -39,16 +39,16 @@
       </template>
 
       <!-- header ----------------------------------------------------------->
-      <template v-if="props.rowExpandable" #header="hdr">
-        <q-tr :props="hdr">
+      <template v-if="props.rowExpandable" #header="header">
+        <q-tr :props="header">
           <!-- space for arrow column -->
-          <q-th auto-width :props="{ ...hdr, col: {} }" />
-
+          <!-- the abbreviation col has to remain as it comes from Quasar QTableSlots.header -->
+          <q-th auto-width :props="{ ...header, col: {} }" />
           <!-- the other columns -->
           <q-th
-            v-for="column in hdr.cols"
+            v-for="column in header.cols"
             :key="column.name"
-            :props="{ ...hdr, col: column }"
+            :props="{ ...header, col: column }"
           >
             {{ column.label }}
           </q-th>
@@ -56,7 +56,8 @@
       </template>
 
       <!-- body ------------------------------------------------------------->
-      <template v-if="props.rowExpandable" #body="rowProps: BodySlotProps">
+      <!-- "cols" and "col" must match Quasar QTable slot prop names and can't be renamed to "columns"/"column" -->
+      <template v-if="props.rowExpandable" #body="rowProps: BodySlotProps<T>">
         <q-tr
           :key="`main-${rowProps.key}`"
           :props="rowProps"
@@ -84,9 +85,9 @@
                 v-bind="{
                   ...rowProps,
                   col,
-                  value: getCellValue(rowProps.row, col),
                 }"
-              />
+              >
+              </slot>
             </template>
 
             <!-- all other column data -->
@@ -95,10 +96,12 @@
               :props="{
                 ...rowProps,
                 col,
-                value: getCellValue(rowProps.row, col),
+                // cast necessary as field comes from q-table and is defined: field: string | ((row: any) => any);
+                value: rowProps.row[col.field as string],
               }"
             >
-              {{ getCellValue(rowProps.row, col) }}
+              <!-- cast necessary as field comes from q-table and is defined: field: string | ((row: any) => any); -->
+              {{ rowProps.row[col.field as string] }}
             </q-td>
           </template>
         </q-tr>
@@ -122,28 +125,23 @@
         :key="slotName"
         v-slot:[slotName]="slotProps"
       >
-        <slot :name="slotName" v-bind="slotProps" />
+        <slot :name="slotName" v-bind="slotProps"></slot>
       </template>
     </q-table>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends Record<string, unknown>">
 import { computed, ComputedRef, ref, useSlots } from 'vue';
 import type { QTableColumn, QTableProps } from 'quasar';
-import { BodySlotProps } from 'src/components/Models/base-table-model';
+import { BodySlotProps } from 'src/components/models/table-model';
+import { columnConfiguration } from 'src/components/models/table-model';
 
 /* ------------------------------------------------------------------ props */
 const props = defineProps<{
   items: number[];
-  rowData:
-    | ((item: number) => Record<string, unknown>)
-    | ComputedRef<(item: number) => Record<string, unknown>>;
-  columnConfig: {
-    fields: string[];
-    labels?: Record<string, string>;
-    align?: Record<string, 'left' | 'right' | 'center'>;
-  };
+  rowData: ((item: number) => T) | ComputedRef<(item: number) => T>;
+  columnConfig: columnConfiguration[];
   rowKey?: string;
   searchInputVisible?: boolean;
   tableHeight?: string;
@@ -152,71 +150,67 @@ const props = defineProps<{
   rowExpandable?: boolean;
 }>();
 
-/* ------------------------------------------------------------------ utils */
-function getCellValue(row: Record<string, unknown>, col: QTableColumn) {
-  return typeof col.field === 'function'
-    ? col.field(row)
-    : row[col.field as string];
-}
-
 /* ------------------------------------------------------------------ state */
 const expanded = ref<(string | number)[]>([]);
 const slots = useSlots();
 
 const forwardedSlotNames = computed(() => {
   if (props.rowExpandable)
-    return Object.keys(slots).filter((n) => !n.startsWith('body'));
+    return Object.keys(slots).filter((name) => !name.startsWith('body'));
   return Object.keys(slots);
 });
 
 const emit = defineEmits<{
-  (e: 'row-click', row: Record<string, unknown>): void;
-  (e: 'update:filter', value: string): void;
+  (event: 'row-click', row: T): void;
+  (event: 'update:filter', value: string): void;
 }>();
 
 /* ---------------------------------------------------------------- helpers */
 const filterModel = computed({
   get: () => props.filter || '',
-  set: (v) => emit('update:filter', v),
+  set: (value) => emit('update:filter', value),
 });
 
-const rowMapperFn = computed(() =>
-  typeof props.rowData === 'function' ? props.rowData : props.rowData.value,
+const mappedRows = computed(() =>
+  props.items.map(
+    typeof props.rowData === 'function' ? props.rowData : props.rowData.value,
+  ),
 );
 
-const mappedRows = computed(() => props.items.map(rowMapperFn.value));
-
 const mappedColumns = computed<QTableColumn[]>(() =>
-  props.columnConfig.fields.map((field) => ({
-    name: field,
-    label: props.columnConfig.labels?.[field] || field,
-    align: props.columnConfig.align?.[field] || 'left',
-    field,
-    sortable: true,
-    headerStyle: 'font-weight: bold',
-  })),
+  props.columnConfig
+    .filter((column) => !column.expandField) // main table columns only
+    .map((column) => ({
+      name: column.field,
+      field: column.field,
+      label: column.label,
+      align: column.align ?? 'left',
+      sortable: true,
+      headerStyle: 'font-weight: bold',
+    })),
 );
 
 const customFilterMethod: NonNullable<QTableProps['filterMethod']> = (
   rows,
-  terms,
-  cols,
+  searchTerms,
+  columns,
 ) => {
-  if (!terms || terms.trim() === '') return rows;
-  const lowerTerms = terms.toLowerCase();
+  if (!searchTerms || searchTerms.trim() === '') return rows;
+  const lowerTerms = searchTerms.toLowerCase();
   const fields =
     props.columnsToSearch ||
-    cols.map((col) => (typeof col.field === 'string' ? col.field : ''));
+    columns.map((column) =>
+      typeof column.field === 'string' ? column.field : '',
+    );
   return rows.filter((row) =>
     fields.some((field) => {
-      const val = row[field];
-      return val && String(val).toLowerCase().includes(lowerTerms);
+      const value = row[field];
+      return value && String(value).toLowerCase().includes(lowerTerms);
     }),
   );
 };
 
-const onRowClick = (evt: Event, row: Record<string, unknown>) =>
-  emit('row-click', row);
+const onRowClick = (evt: Event, row: T) => emit('row-click', row);
 </script>
 
 <style scoped>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index c67748f289..3c403a70b3 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -12,24 +12,25 @@
     v-else
     :items="chargePointIds"
     :row-data="tableRowData"
-    :column-config="mobile ? columnConfigMobile : columnConfigDesktop"
+    :column-config="isMobile ? tableColumnsMobile : columnConfigDesktop"
     :search-input-visible="searchInputVisible"
-    :table-height="mobile ? '35vh' : '40vh'"
+    :table-height="isMobile ? '35vh' : '40vh'"
     v-model:filter="filter"
     :columns-to-search="['vehicle', 'name']"
-    :row-expandable="mobile"
+    :row-expandable="isMobile"
     @row-click="onRowClick"
   >
-    <template #body-cell-plugged="{ row, col }">
-      <q-td :class="`text-${col.align}`">
-        <ChargePointStateIcon :charge-point-id="(row.id as number)" />
+    <!-- "col" = column must match Quasar naming convention -->
+    <template #body-cell-plugged="slotProps">
+      <q-td :class="`text-${slotProps.col.align}`">
+        <ChargePointStateIcon :charge-point-id="slotProps.row.id" />
       </q-td>
     </template>
 
-    <template #body-cell-timeCharging="{ row, col }">
-      <q-td :class="`text-${col.align}`">
+    <template #body-cell-timeCharging="slotProps">
+      <q-td :class="`text-${slotProps.col.align}`">
         <ChargePointTimeCharging
-          :charge-point-id="(row.id as number)"
+          :charge-point-id="slotProps.row.id"
           :readonly="true"
           :toolTip="true"
           :icon-size="'xs'"
@@ -37,44 +38,42 @@
       </q-td>
     </template>
 
-    <template #body-cell-powerColumn="{ row, col }">
-      <q-td :class="`text-${col.align}`">
+    <template #body-cell-powerColumn="slotProps">
+      <q-td :class="`text-${slotProps.col.align}`">
         <ChargePointPowerData
-          :power="(row.power as string)"
-          :phase-number="(row.phaseNumber as number)"
-          :current="(row.current as string)"
+          :power="slotProps.row.power"
+          :phase-number="slotProps.row.phaseNumber"
+          :current="slotProps.row.current"
         />
       </q-td>
     </template>
 
     <!-- Pass expansion row data to BaseTable.vue --------------------------------------------------------->
-    <template #row-expand="{ row }">
-      <div v-if="mobile" class="q-pa-xs column q-gutter-y-xs">
+    <template #row-expand="slotProps">
+      <div class="q-pa-xs column q-gutter-y-xs">
         <div
-          v-for="field in columnConfigMobile?.fieldsExpansionRow"
-          :key="field"
+          v-for="column in expansionColumnsMobile"
+          :key="column.field"
           class="row items-start"
         >
           <!-- label ------------------------------------------------>
-          <div class="col-5 text-caption text-bold">
-            {{ columnConfigMobile?.labels?.[field] }}:
-          </div>
+          <div class="col-5 text-caption text-bold">{{ column.label }}:</div>
 
           <!-- value --------------------------------------------------------->
           <div class="col-7 text-right">
             <ChargePointPowerData
-              v-if="field === 'powerColumn'"
-              :power="(row.power as string)"
-              :phase-number="(row.phaseNumber as number)"
-              :current="(row.current as string)"
+              v-if="column.field === 'powerColumn'"
+              :power="slotProps.row.power"
+              :phase-number="slotProps.row.phaseNumber"
+              :current="slotProps.row.current"
             />
             <ChargePointTimeCharging
-              v-if="field === 'timeCharging'"
-              :charge-point-id="(row.id as number)"
+              v-if="column.field === 'timeCharging'"
+              :charge-point-id="slotProps.row.id"
               readonly
               icon-size="xs"
             />
-            <span v-else>{{ row[field] }}</span>
+            <span v-else>{{ slotProps.row[column.field] }}</span>
           </div>
         </div>
       </div>
@@ -122,7 +121,8 @@ import ChargePointCard from 'src/components/ChargePointCard.vue';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import ChargePointPowerData from './ChargePointPowerData.vue';
-import { columnConfig } from 'src/components/Models/base-table-model';
+import { columnConfiguration } from 'src/components/models/table-model';
+import { ChargePointRow } from 'src/components/models/table-model';
 
 const mqttStore = useMqttStore();
 const { chargeModes } = useChargeModes();
@@ -133,18 +133,18 @@ const cardViewBreakpoint = computed(
 const searchInputVisible = computed(
   () => mqttStore.themeConfiguration?.chargePoint_table_search_input_field,
 );
-const mobile = computed(() => Platform.is.mobile);
+const isMobile = computed(() => Platform.is.mobile);
 const selectedChargePointId = ref<number | null>(null);
 const modalChargePointCardVisible = ref(false);
 const filter = ref('');
 
-const tableRowData = computed(() => {
+const tableRowData = computed<(id: number) => ChargePointRow>(() => {
   return (id: number) => {
     const name = mqttStore.chargePointName(id);
     const vehicle =
       mqttStore.chargePointConnectedVehicleInfo(id).value?.name ||
       'Kein Fahrzeug';
-    const plugged = mqttStore.chargePointPlugState(id) ? 'Ja' : 'Nein';
+    const plugged = mqttStore.chargePointPlugState(id);
     const chargeModeValue =
       mqttStore.chargePointConnectedVehicleChargeMode(id).value;
     const chargeModeObj = chargeModes.find(
@@ -155,12 +155,14 @@ const tableRowData = computed(() => {
       mqttStore.chargePointConnectedVehicleSoc(id).value?.soc;
     const soc =
       chargePointSoc !== undefined ? `${Math.round(chargePointSoc)}%` : '0%';
-    const power = mqttStore.chargePointPower(id, 'textValue');
-    const charged = mqttStore.chargePointEnergyChargedPlugged(id, 'textValue');
+    // typecasting necessary as chargePointPower has a union type in store and needs to be narrowed to string
+    const power = mqttStore.chargePointPower(id) as string;
+    const charged = mqttStore.chargePointEnergyChargedPlugged(id) as string;
     const timeCharging =
       mqttStore.chargePointConnectedVehicleTimeCharging(id).value;
     const phaseNumber = mqttStore.chargePointPhaseNumber(id);
-    const current = mqttStore.chargePointChargingCurrent(id, 'textValue');
+    // typecasting necessary as chargePointChargingCurrent has a union type in store and needs to be narrowed to string
+    const current = mqttStore.chargePointChargingCurrent(id) as string;
     const powerColumn = '';
     return {
       id,
@@ -179,66 +181,47 @@ const tableRowData = computed(() => {
   };
 });
 
-const columnConfigDesktop: columnConfig = {
-  fields: [
-    'name',
-    'vehicle',
-    'plugged',
-    'chargeMode',
-    'timeCharging',
-    'powerColumn',
-    'charged',
-    'soc',
-  ],
-  labels: {
-    name: 'Ladepunkt',
-    vehicle: 'Fahrzeug',
-    plugged: 'Status',
-    chargeMode: 'Lademodus',
-    timeCharging: 'Zeitladen',
-    powerColumn: 'Leistung',
-    charged: 'Geladen',
-    soc: 'Ladestand',
-  },
-  align: {
-    plugged: 'center',
-    timeCharging: 'center',
-    soc: 'right',
-    charged: 'right',
-    powerColumn: 'right',
-  },
-};
+const columnConfigDesktop: columnConfiguration[] = [
+  { field: 'name', label: 'Ladepunkt' },
+  { field: 'vehicle', label: 'Fahrzeug' },
+  { field: 'plugged', label: 'Status', align: 'center' },
+  { field: 'chargeMode', label: 'Lademodus' },
+  { field: 'timeCharging', label: 'Zeitladen', align: 'center' },
+  { field: 'powerColumn', label: 'Leistung', align: 'right' },
+  { field: 'charged', label: 'Geladen', align: 'right' },
+  { field: 'soc', label: 'Ladestand', align: 'right' },
+];
 
-const columnConfigMobile: columnConfig = {
-  fields: ['name', 'vehicle', 'plugged'],
-  fieldsExpansionRow: [
-    'powerColumn',
-    'chargeMode',
-    'charged',
-    'soc',
-    'timeCharging',
-  ],
-  labels: {
-    name: 'Ladepunkt',
-    vehicle: 'Fahrzeug',
-    plugged: 'Status',
-    chargeMode: 'Lademodus',
-    timeCharging: 'Zeitladen',
-    powerColumn: 'Leistung',
-    charged: 'Geladen',
-    soc: 'Ladestand',
+const columnConfigMobile: columnConfiguration[] = [
+  { field: 'name', label: 'Ladepunkt' },
+  { field: 'vehicle', label: 'Fahrzeug' },
+  { field: 'plugged', label: 'Status', align: 'center' },
+  {
+    field: 'powerColumn',
+    label: 'Leistung',
+    align: 'right',
+    expandField: true,
   },
-  align: {
-    plugged: 'center',
-    timeCharging: 'center',
-    soc: 'right',
-    charged: 'right',
-    powerColumn: 'right',
+  { field: 'chargeMode', label: 'Lademodus', expandField: true },
+  { field: 'charged', label: 'Geladen', align: 'right', expandField: true },
+  { field: 'soc', label: 'Ladestand', align: 'right', expandField: true },
+  {
+    field: 'timeCharging',
+    label: 'Zeitladen',
+    align: 'center',
+    expandField: true,
   },
-};
+];
+
+const tableColumnsMobile = columnConfigMobile.filter(
+  (column) => !column.expandField,
+);
+const expansionColumnsMobile = columnConfigMobile.filter(
+  (column) => column.expandField,
+);
 
-const onRowClick = (row: Record<string, unknown>) => {
-  selectedChargePointId.value = row.id as number;
+const onRowClick = (row: ChargePointRow) => {
+  selectedChargePointId.value = row.id;
   modalChargePointCardVisible.value = true;
 };
 </script>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
index 2e652e73ea..d90f68cf19 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="cp-power no-wrap row inline items-center q-gutter-xs">
     <span>{{ power }}</span>
-    <q-badge rounded color="primary" :label="(phaseNumber as number)">
+    <q-badge rounded color="primary" :label="phaseNumber">
       <q-tooltip>Phasenanzahl</q-tooltip>
     </q-badge>
     <span>{{ current }}</span>
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index 5446ebc83b..217084707a 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -12,21 +12,22 @@
     v-else
     :items="vehicleIds"
     :row-data="tableRowData"
-    :column-config="mobile ? columnConfigMobile : columnConfigDesktop"
+    :column-config="isMobile ? columnConfigMobile : columnConfigDesktop"
     :search-input-visible="searchInputVisible"
-    :table-height="mobile ? '35vh' : '40vh'"
+    :table-height="isMobile ? '35vh' : '40vh'"
     v-model:filter="filter"
     :columns-to-search="['name', 'manufacturer', 'model']"
     :row-expandable="true"
     @row-click="onRowClick"
   >
-    <template #body-cell-plugged="{ row, col }">
-      <q-td :class="`text-${col.align}`">
-        <ChargePointStateIcon :vehicle-id="(row.id as number)" />
+    <!-- "col" = column must match Quasar naming convention -->
+    <template #body-cell-plugged="slotProps">
+      <q-td :class="`text-${slotProps.col.align}`">
+        <ChargePointStateIcon :vehicle-id="slotProps.row.id" />
       </q-td>
     </template>
-    <template #row-expand="{ row }">
-      <VehicleConnectionStateIcon :vehicle-id="(row.id as number)" />
+    <template #row-expand="slotProps">
+      <VehicleConnectionStateIcon :vehicle-id="slotProps.row.id" />
     </template>
   </BaseTable>
 
@@ -66,13 +67,14 @@ import { useMqttStore } from 'src/stores/mqtt-store';
 import { Platform } from 'quasar';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
 import BaseTable from 'src/components/BaseTable.vue';
+import { VehicleRow } from 'src/components/models/table-model';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
 import VehicleCard from 'src/components/VehicleCard.vue';
-import { columnConfig } from 'src/components/Models/base-table-model';
+import { columnConfiguration } from 'src/components/models/table-model';
 
 const mqttStore = useMqttStore();
-const mobile = computed(() => Platform.is.mobile);
+const isMobile = computed(() => Platform.is.mobile);
 const modalChargeVehicleCardVisible = ref(false);
 const selectedVehicleId = ref<number | null>(null);
 const filter = ref('');
@@ -84,13 +86,14 @@ const cardViewBreakpoint = computed(
 );
 const vehicles = computed(() => mqttStore.vehicleList);
 const vehicleIds = computed(() => vehicles.value.map((vehicle) => vehicle.id));
-const tableRowData = computed(() => {
+
+const tableRowData = computed<(id: number) => VehicleRow>(() => {
   return (id: number) => {
-    const vehicle = mqttStore.vehicleList.find((v) => v.id === id);
+    const vehicle = mqttStore.vehicleList.find((vehicle) => vehicle.id === id);
     const name = vehicle?.name || 'keine Angabe';
     const vehicleState = mqttStore.vehicleConnectionState(id);
-    const plugState = vehicleState.some((v) => v.plugged);
-    const chargeState = vehicleState.some((v) => v.charging);
+    const plugState = vehicleState.some((vehicle) => vehicle.plugged);
+    const chargeState = vehicleState.some((vehicle) => vehicle.charging);
     const info = mqttStore.vehicleInfo(id);
     const manufacturer = info?.manufacturer || 'keine Angabe';
     const model = info?.model || 'keine Angabe';
@@ -108,36 +111,22 @@ const tableRowData = computed(() => {
   };
 });
 
-const columnConfigDesktop: columnConfig = {
-  fields: ['name', 'manufacturer', 'model', 'plugged', 'vehicleSocValue'],
-  labels: {
-    name: 'Fahrzeug',
-    manufacturer: 'Hersteller',
-    model: 'Modell',
-    plugged: 'Status',
-    vehicleSocValue: 'Ladestand',
-  },
-  align: {
-    plugged: 'center',
-    vehicleSocValue: 'right',
-  },
-};
+const columnConfigDesktop: columnConfiguration[] = [
+  { field: 'name', label: 'Fahrzeug' },
+  { field: 'manufacturer', label: 'Hersteller' },
+  { field: 'model', label: 'Modell' },
+  { field: 'plugged', label: 'Status', align: 'center' },
+  { field: 'vehicleSocValue', label: 'Ladestand', align: 'right' },
+];
 
-const columnConfigMobile: columnConfig = {
-  fields: ['name', 'plugged', 'vehicleSocValue'],
-  labels: {
-    name: 'Fahrzeug',
-    plugged: 'Status',
-    vehicleSocValue: 'Ladestand',
-  },
-  align: {
-    plugged: 'center',
-    vehicleSocValue: 'right',
-  },
-};
+const columnConfigMobile: columnConfiguration[] = [
+  { field: 'name', label: 'Fahrzeug' },
+  { field: 'plugged', label: 'Status', align: 'center' },
+  { field: 'vehicleSocValue', label: 'Ladestand', align: 'right' },
+];
 
-const onRowClick = (row: Record<string, unknown>) => {
-  selectedVehicleId.value = row.id as number;
+const onRowClick = (row: VehicleRow) => {
+  selectedVehicleId.value = row.id;
   modalChargeVehicleCardVisible.value = true;
 };
 </script>

From c77ab7450c53a855896579d04643e1846f352c41 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 10 Jun 2025 16:51:38 +0200
Subject: [PATCH 28/33] Update Chargepoint table format (mobile view) - Add
 chargePointMode chip

---
 .../src/components/ChargePointInformation.vue | 63 +++++++++++--------
 .../source/src/components/ChargePointMode.vue | 31 +++++++++
 .../src/components/ChargePointPowerData.vue   |  8 ++-
 .../source/src/composables/useChargeModes.ts  |  2 +-
 4 files changed, 76 insertions(+), 28 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/ChargePointMode.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 3c403a70b3..2784050c5c 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -20,6 +20,7 @@
     :row-expandable="isMobile"
     @row-click="onRowClick"
   >
+    <!----------------------------------------------------------- desktop view table body slots -->
     <!-- "col" = column must match Quasar naming convention -->
     <template #body-cell-plugged="slotProps">
       <q-td :class="`text-${slotProps.col.align}`">
@@ -27,6 +28,12 @@
       </q-td>
     </template>
 
+    <template #body-cell-chargeMode="slotProps">
+      <q-td :class="`text-${slotProps.col.align}`">
+        <ChargePointMode :charge-point-id="slotProps.row.id" />
+      </q-td>
+    </template>
+
     <template #body-cell-timeCharging="slotProps">
       <q-td :class="`text-${slotProps.col.align}`">
         <ChargePointTimeCharging
@@ -44,9 +51,34 @@
           :power="slotProps.row.power"
           :phase-number="slotProps.row.phaseNumber"
           :current="slotProps.row.current"
+          :column-display-format="isMobile"
         />
       </q-td>
     </template>
+    <!----------------------------------------------------------- mobile view table body slots -->
+    <!-- mobile view chargepoint name and vehicle name displayed in one field -->
+    <template #body-cell-nameAndVehicle="slotProps">
+      <q-td :class="`text-${slotProps.col.align}`">
+        {{ slotProps.row.name }}<br />
+        <span class="text-caption">{{ slotProps.row.vehicle }}</span>
+      </q-td>
+    </template>
+
+    <!-- mobile view chargepoint chargemode, plug status and time charging displayed in one field -->
+    <template #body-cell-modePluggedTimeCharging="slotProps">
+      <q-td :class="`text-${slotProps.col.align}`">
+        <div class="items-center">
+          <ChargePointMode :charge-point-id="slotProps.row.id" />
+          <ChargePointStateIcon :charge-point-id="slotProps.row.id" />
+          <ChargePointTimeCharging
+            :charge-point-id="slotProps.row.id"
+            :readonly="true"
+            :toolTip="true"
+            :icon-size="'xs'"
+          />
+        </div>
+      </q-td>
+    </template>
 
     <!-- Pass expansion row data to BaseTable.vue --------------------------------------------------------->
     <template #row-expand="slotProps">
@@ -58,22 +90,9 @@
         >
           <!-- label ------------------------------------------------>
           <div class="col-5 text-caption text-bold">{{ column.label }}:</div>
-
           <!-- value --------------------------------------------------------->
           <div class="col-7 text-right">
-            <ChargePointPowerData
-              v-if="column.field === 'powerColumn'"
-              :power="slotProps.row.power"
-              :phase-number="slotProps.row.phaseNumber"
-              :current="slotProps.row.current"
-            />
-            <ChargePointTimeCharging
-              v-if="column.field === 'timeCharging'"
-              :charge-point-id="slotProps.row.id"
-              readonly
-              icon-size="xs"
-            />
-            <span v-else>{{ slotProps.row[column.field] }}</span>
+            {{ slotProps.row[column.field] }}
           </div>
         </div>
       </div>
@@ -119,6 +138,7 @@ import BaseCarousel from 'src/components/BaseCarousel.vue';
 import BaseTable from 'src/components/BaseTable.vue';
 import ChargePointCard from 'src/components/ChargePointCard.vue';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
+import ChargePointMode from './ChargePointMode.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import ChargePointPowerData from './ChargePointPowerData.vue';
 import { columnConfiguration } from 'src/components/models/table-model';
@@ -193,24 +213,15 @@ const columnConfigDesktop: columnConfiguration[] = [
 ];
 
 const columnConfigMobile: columnConfiguration[] = [
-  { field: 'name', label: 'Ladepunkt' },
-  { field: 'vehicle', label: 'Fahrzeug' },
-  { field: 'plugged', label: 'Status', align: 'center' },
+  { field: 'nameAndVehicle', label: 'Ladepunkt' },
+  { field: 'modePluggedTimeCharging', label: 'Lademodus', align: 'center' },
   {
     field: 'powerColumn',
     label: 'Leistung',
-    align: 'right',
-    expandField: true,
+    align: 'center',
   },
-  { field: 'chargeMode', label: 'Lademodus', expandField: true },
   { field: 'charged', label: 'Geladen', align: 'right', expandField: true },
   { field: 'soc', label: 'Ladestand', align: 'right', expandField: true },
-  {
-    field: 'timeCharging',
-    label: 'Zeitladen',
-    align: 'center',
-    expandField: true,
-  },
 ];
 
 const tableColumnsMobile = columnConfigMobile.filter(
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointMode.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointMode.vue
new file mode 100644
index 0000000000..742bbbf844
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointMode.vue
@@ -0,0 +1,31 @@
+<template>
+  <q-chip outline size="sm" :color="currentModeColor">{{
+    currentModeLabel
+  }}</q-chip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useMqttStore } from 'src/stores/mqtt-store';
+import { useChargeModes } from 'src/composables/useChargeModes';
+
+const props = defineProps<{
+  chargePointId: number;
+}>();
+
+const mqttStore = useMqttStore();
+const { chargeModes } = useChargeModes();
+
+const chargeMode = computed(() =>
+  mqttStore.chargePointConnectedVehicleChargeMode(props.chargePointId),
+);
+
+const currentModeLabel = computed(
+  () =>
+    chargeModes.find((mode) => mode.value === chargeMode.value.value)?.label,
+);
+const currentModeColor = computed(
+  () =>
+    chargeModes.find((mode) => mode.value === chargeMode.value.value)?.color,
+);
+</script>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
index d90f68cf19..51d2014227 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointPowerData.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="cp-power no-wrap row inline items-center q-gutter-xs">
+  <div
+    :class="[
+      'cp-power items-center q-gutter-xs',
+      columnDisplayFormat ? 'column' : 'row inline',
+    ]"
+  >
     <span>{{ power }}</span>
     <q-badge rounded color="primary" :label="phaseNumber">
       <q-tooltip>Phasenanzahl</q-tooltip>
@@ -13,6 +18,7 @@ defineProps<{
   power: string;
   phaseNumber: number;
   current: string;
+  columnDisplayFormat?: boolean;
 }>();
 </script>
 
diff --git a/packages/modules/web_themes/koala/source/src/composables/useChargeModes.ts b/packages/modules/web_themes/koala/source/src/composables/useChargeModes.ts
index 340cd59a79..60e9238e0f 100644
--- a/packages/modules/web_themes/koala/source/src/composables/useChargeModes.ts
+++ b/packages/modules/web_themes/koala/source/src/composables/useChargeModes.ts
@@ -3,7 +3,7 @@ export const useChargeModes = () => {
     { value: 'instant_charging', label: 'Sofort', color: 'negative' },
     { value: 'pv_charging', label: 'PV', color: 'positive' },
     { value: 'scheduled_charging', label: 'Ziel', color: 'primary' },
-    { value: 'eco_charging', label: 'Eco', color: 'secondary' },
+    { value: 'eco_charging', label: 'Eco', color: 'accent' },
     { value: 'stop', label: 'Stop', color: 'light' },
   ];
   return {

From 4b779c6684435c76ba58d2d7f17d8c6278922125 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 11 Jun 2025 14:47:51 +0200
Subject: [PATCH 29/33] Improved naming conventions - update getValueObject
 (decimal place parameter)

---
 .../koala/source/src/components/BaseTable.vue | 22 ++++++-------
 .../src/components/ChargePointEcoSettings.vue |  2 +-
 .../src/components/ChargePointInformation.vue |  6 ++--
 .../components/ChargePointInstantSettings.vue |  4 +--
 .../src/components/ChargePointPvSettings.vue  |  2 +-
 .../src/components/VehicleInformation.vue     |  6 ++--
 .../src/components/models/table-model.ts      |  2 +-
 .../source/src/stores/mqtt-store-model.ts     |  2 +-
 .../koala/source/src/stores/mqtt-store.ts     | 33 +++++++++----------
 9 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index de95f94a06..38e1dabc7f 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -42,7 +42,6 @@
       <template v-if="props.rowExpandable" #header="header">
         <q-tr :props="header">
           <!-- space for arrow column -->
-          <!-- the abbreviation col has to remain as it comes from Quasar QTableSlots.header -->
           <q-th auto-width :props="{ ...header, col: {} }" />
           <!-- the other columns -->
           <q-th
@@ -56,7 +55,6 @@
       </template>
 
       <!-- body ------------------------------------------------------------->
-      <!-- "cols" and "col" must match Quasar QTable slot prop names and can't be renamed to "columns"/"column" -->
       <template v-if="props.rowExpandable" #body="rowProps: BodySlotProps<T>">
         <q-tr
           :key="`main-${rowProps.key}`"
@@ -77,14 +75,14 @@
             />
           </q-td>
 
-          <template v-for="col in rowProps.cols" :key="col.name">
+          <template v-for="column in rowProps.cols" :key="column.name">
             <!-- custom body-cell slot -->
-            <template v-if="$slots[`body-cell-${col.name}`]">
+            <template v-if="$slots[`body-cell-${column.name}`]">
               <slot
-                :name="`body-cell-${col.name}`"
+                :name="`body-cell-${column.name}`"
                 v-bind="{
                   ...rowProps,
-                  col,
+                  col: column,
                 }"
               >
               </slot>
@@ -95,13 +93,13 @@
               v-else
               :props="{
                 ...rowProps,
-                col,
+                col: column,
                 // cast necessary as field comes from q-table and is defined: field: string | ((row: any) => any);
-                value: rowProps.row[col.field as string],
+                value: rowProps.row[column.field as string],
               }"
             >
               <!-- cast necessary as field comes from q-table and is defined: field: string | ((row: any) => any); -->
-              {{ rowProps.row[col.field as string] }}
+              {{ rowProps.row[column.field as string] }}
             </q-td>
           </template>
         </q-tr>
@@ -113,7 +111,7 @@
           :props="rowProps"
           class="q-virtual-scroll--with-prev"
         >
-          <q-td colspan="100%">
+          <q-td :colspan="rowProps.cols.length + 1">
             <slot name="row-expand" v-bind="rowProps"> </slot>
           </q-td>
         </q-tr>
@@ -135,13 +133,13 @@
 import { computed, ComputedRef, ref, useSlots } from 'vue';
 import type { QTableColumn, QTableProps } from 'quasar';
 import { BodySlotProps } from 'src/components/models/table-model';
-import { columnConfiguration } from 'src/components/models/table-model';
+import { ColumnConfiguration } from 'src/components/models/table-model';
 
 /* ------------------------------------------------------------------ props */
 const props = defineProps<{
   items: number[];
   rowData: ((item: number) => T) | ComputedRef<(item: number) => T>;
-  columnConfig: columnConfiguration[];
+  columnConfig: ColumnConfiguration[];
   rowKey?: string;
   searchInputVisible?: boolean;
   tableHeight?: string;
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 c793af619b..633f965e73 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
@@ -147,7 +147,7 @@ const current = computed(() =>
   mqttStore.chargePointConnectedVehicleEcoChargeCurrent(props.chargePointId),
 );
 
-const dcCharging = computed(() => mqttStore.DCChargingEnabled);
+const dcCharging = computed(() => mqttStore.DcChargingEnabled);
 
 const dcPower = computed(() =>
   mqttStore.chargePointConnectedVehicleEcoChargeDCPower(props.chargePointId),
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 2784050c5c..9b17b0a6ac 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -141,7 +141,7 @@ import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import ChargePointMode from './ChargePointMode.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import ChargePointPowerData from './ChargePointPowerData.vue';
-import { columnConfiguration } from 'src/components/models/table-model';
+import { ColumnConfiguration } from 'src/components/models/table-model';
 import { ChargePointRow } from 'src/components/models/table-model';
 
 const mqttStore = useMqttStore();
@@ -201,7 +201,7 @@ const tableRowData = computed<(id: number) => ChargePointRow>(() => {
   };
 });
 
-const columnConfigDesktop: columnConfiguration[] = [
+const columnConfigDesktop: ColumnConfiguration[] = [
   { field: 'name', label: 'Ladepunkt' },
   { field: 'vehicle', label: 'Fahrzeug' },
   { field: 'plugged', label: 'Status', align: 'center' },
@@ -212,7 +212,7 @@ const columnConfigDesktop: columnConfiguration[] = [
   { field: 'soc', label: 'Ladestand', align: 'right' },
 ];
 
-const columnConfigMobile: columnConfiguration[] = [
+const columnConfigMobile: ColumnConfiguration[] = [
   { field: 'nameAndVehicle', label: 'Ladepunkt' },
   { field: 'modePluggedTimeCharging', label: 'Lademodus', align: 'center' },
   {
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
index e0279c30e0..489f24e77f 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
@@ -104,10 +104,10 @@ const instantChargeCurrent = computed(() =>
   ),
 );
 
-const dcCharging = computed(() => mqttStore.DCChargingEnabled);
+const dcCharging = computed(() => mqttStore.DcChargingEnabled);
 
 const instantChargeCurrentDC = computed(() => {
-  return mqttStore.chargePointConnectedVehicleInstantDCChargePower(
+  return mqttStore.chargePointConnectedVehicleInstantDcChargePower(
     props.chargePointId,
   );
 });
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
index bb7bb4ced2..ac939c9f86 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
@@ -156,7 +156,7 @@ const pvMinCurrent = computed(() =>
   mqttStore.chargePointConnectedVehiclePVChargeMinCurrent(props.chargePointId),
 );
 
-const dcCharging = computed(() => mqttStore.DCChargingEnabled);
+const dcCharging = computed(() => mqttStore.DcChargingEnabled);
 
 const pvMinDCCurrent = computed(() =>
   mqttStore.chargePointConnectedVehiclePV_DC_ChargePower(props.chargePointId),
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index 217084707a..6a2b43dcd5 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -71,7 +71,7 @@ import { VehicleRow } from 'src/components/models/table-model';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
 import VehicleCard from 'src/components/VehicleCard.vue';
-import { columnConfiguration } from 'src/components/models/table-model';
+import { ColumnConfiguration } from 'src/components/models/table-model';
 
 const mqttStore = useMqttStore();
 const isMobile = computed(() => Platform.is.mobile);
@@ -111,7 +111,7 @@ const tableRowData = computed<(id: number) => VehicleRow>(() => {
   };
 });
 
-const columnConfigDesktop: columnConfiguration[] = [
+const columnConfigDesktop: ColumnConfiguration[] = [
   { field: 'name', label: 'Fahrzeug' },
   { field: 'manufacturer', label: 'Hersteller' },
   { field: 'model', label: 'Modell' },
@@ -119,7 +119,7 @@ const columnConfigDesktop: columnConfiguration[] = [
   { field: 'vehicleSocValue', label: 'Ladestand', align: 'right' },
 ];
 
-const columnConfigMobile: columnConfiguration[] = [
+const columnConfigMobile: ColumnConfiguration[] = [
   { field: 'name', label: 'Fahrzeug' },
   { field: 'plugged', label: 'Status', align: 'center' },
   { field: 'vehicleSocValue', label: 'Ladestand', align: 'right' },
diff --git a/packages/modules/web_themes/koala/source/src/components/models/table-model.ts b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
index 38e898916c..6e4a125a5a 100644
--- a/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
@@ -7,7 +7,7 @@ import { QTableColumn } from 'quasar';
 //   align?: Align;
 // };
 
-export type columnConfiguration = {
+export type ColumnConfiguration = {
   field: string;
   label: string;
   align?: 'left' | 'right' | 'center';
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 906c80e817..0f92dd5521 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
@@ -127,7 +127,7 @@ export interface vehicleInfo {
   model: string;
 }
 
-export interface vehicleSocModule {
+export interface vehicleSocModuleConfig {
   name?: string;
   type: string | null;
   official?: boolean;
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 ff57212d8d..1874b2da81 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
@@ -16,7 +16,7 @@ import type {
   ChargePointConnectedVehicleInfo,
   Vehicle,
   vehicleInfo,
-  vehicleSocModule,
+  vehicleSocModuleConfig,
   ScheduledChargingPlan,
   ChargePointConnectedVehicleSoc,
   GraphDataPoint,
@@ -491,7 +491,7 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @param scale flag to scale the value, default is true
    * @param inverted flag to invert the value, default is false
    * @param defaultString default string to use, default is '---'
-   * @param showDecimalPlaces flag to show decimal places, default is false
+   * @param decimalPlaces number of decimal places to use, default is 0
    * @returns object
    */
   const getValueObject = computed(() => {
@@ -502,9 +502,8 @@ export const useMqttStore = defineStore('mqtt', () => {
       scale: boolean = true,
       inverted: boolean = false,
       defaultString: string = '---',
-      showDecimalPlaces: boolean = false,
+      decimalPlaces: number = 0,
     ) => {
-      let scaled = false;
       let scaledValue = value;
       let textValue = defaultString;
       if (value === undefined) {
@@ -523,7 +522,6 @@ export const useMqttStore = defineStore('mqtt', () => {
         });
         while (scale && (scaledValue > 999 || scaledValue < -999)) {
           scaledValue = scaledValue / 1000;
-          scaled = true;
           switch (unitPrefix) {
             case '':
               unitPrefix = 'k';
@@ -537,10 +535,9 @@ export const useMqttStore = defineStore('mqtt', () => {
           }
         }
         const hasDecimalPlaces = scaledValue !== Math.floor(scaledValue);
-        const decimalPlaces = scaled || (showDecimalPlaces && hasDecimalPlaces);
         textValue = scaledValue.toLocaleString(undefined, {
-          minimumFractionDigits: decimalPlaces ? 2 : 0,
-          maximumFractionDigits: decimalPlaces ? 2 : 0,
+          minimumFractionDigits: hasDecimalPlaces ? decimalPlaces : 0,
+          maximumFractionDigits: hasDecimalPlaces ? decimalPlaces : 0,
         });
       }
       return {
@@ -823,7 +820,7 @@ export const useMqttStore = defineStore('mqtt', () => {
         true,
         false,
         '---',
-        true,
+        2,
       );
       if (Object.hasOwn(valueObject, returnType)) {
         return valueObject[returnType as keyof ValueObject];
@@ -958,7 +955,7 @@ export const useMqttStore = defineStore('mqtt', () => {
    * Get boolean value for DC charging enabled / disabled
    * @returns boolean
    */
-  const DCChargingEnabled = computed(() => {
+  const DcChargingEnabled = computed(() => {
     return (getValue.value('openWB/optional/dc_charging') as boolean) || 0;
   });
 
@@ -967,16 +964,16 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @param chargePointId charge point id
    * @returns number
    */
-  const chargePointConnectedVehicleInstantDCChargePower = (
+  const chargePointConnectedVehicleInstantDcChargePower = (
     chargePointId: number,
   ) => {
     return computed({
       get() {
-        const DCCurrent =
+        const DcCurrent =
           chargePointConnectedVehicleChargeTemplate(chargePointId).value
             ?.chargemode?.instant_charging?.dc_current;
-        if (DCCurrent !== undefined) {
-          return (DCCurrent * 3 * 230) / 1000;
+        if (DcCurrent !== undefined) {
+          return (DcCurrent * 3 * 230) / 1000;
         } else {
           return 0;
         }
@@ -1977,7 +1974,7 @@ export const useMqttStore = defineStore('mqtt', () => {
   });
 
   /**
-   * Get vehicle SoC module type identified by the vehicle id
+   * Get vehicle SoC module configuration identified by the vehicle id
    * @param vehicleId vehicle id
    * @returns vehicleSocModule
    */
@@ -1985,7 +1982,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     return (vehicleId: number) => {
       const socModule = getValue.value(
         `openWB/vehicle/${vehicleId}/soc_module/config`,
-      ) as vehicleSocModule;
+      ) as vehicleSocModuleConfig;
       return socModule;
     };
   });
@@ -2739,12 +2736,12 @@ export const useMqttStore = defineStore('mqtt', () => {
     chargePointStateMessage,
     chargePointFaultState,
     chargePointFaultMessage,
-    DCChargingEnabled,
+    DcChargingEnabled,
     chargePointConnectedVehicleInfo,
     chargePointConnectedVehicleForceSocUpdate,
     chargePointConnectedVehicleChargeMode,
     chargePointConnectedVehicleInstantChargeCurrent,
-    chargePointConnectedVehicleInstantDCChargePower,
+    chargePointConnectedVehicleInstantDcChargePower,
     chargePointConnectedVehicleInstantChargePhases,
     chargePointConnectedVehicleInstantChargeLimit,
     chargePointConnectedVehicleInstantChargeLimitSoC,

From 88f5933c6a2630574d66462a92edcb4e12e7bd19 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 12 Jun 2025 15:53:21 +0200
Subject: [PATCH 30/33] Naming convention fixes - getValueObject Method updated

---
 .../src/components/ChargePointEcoSettings.vue |   4 +-
 .../src/components/ChargePointInformation.vue |   9 +-
 .../components/ChargePointInstantSettings.vue |   6 +-
 .../src/components/ChargePointPvSettings.vue  |  16 +-
 .../src/components/models/table-model.ts      |   7 -
 .../source/src/stores/mqtt-store-model.ts     |   4 +-
 .../koala/source/src/stores/mqtt-store.ts     | 166 +++++++++---------
 7 files changed, 106 insertions(+), 106 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 633f965e73..9266169480 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
@@ -147,10 +147,10 @@ const current = computed(() =>
   mqttStore.chargePointConnectedVehicleEcoChargeCurrent(props.chargePointId),
 );
 
-const dcCharging = computed(() => mqttStore.DcChargingEnabled);
+const dcCharging = computed(() => mqttStore.dcChargingEnabled);
 
 const dcPower = computed(() =>
-  mqttStore.chargePointConnectedVehicleEcoChargeDCPower(props.chargePointId),
+  mqttStore.chargePointConnectedVehicleEcoChargeDcPower(props.chargePointId),
 );
 
 const numPhases = computed(() =>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 9b17b0a6ac..1b62d98b89 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -20,7 +20,7 @@
     :row-expandable="isMobile"
     @row-click="onRowClick"
   >
-    <!----------------------------------------------------------- desktop view table body slots -->
+    <!-- desktop view table body slots -->
     <!-- "col" = column must match Quasar naming convention -->
     <template #body-cell-plugged="slotProps">
       <q-td :class="`text-${slotProps.col.align}`">
@@ -55,7 +55,7 @@
         />
       </q-td>
     </template>
-    <!----------------------------------------------------------- mobile view table body slots -->
+    <!-- mobile view table body slots -->
     <!-- mobile view chargepoint name and vehicle name displayed in one field -->
     <template #body-cell-nameAndVehicle="slotProps">
       <q-td :class="`text-${slotProps.col.align}`">
@@ -80,7 +80,7 @@
       </q-td>
     </template>
 
-    <!-- Pass expansion row data to BaseTable.vue --------------------------------------------------------->
+    <!-- Pass expansion row data to BaseTable.vue ------------------------------------------------------ -->
     <template #row-expand="slotProps">
       <div class="q-pa-xs column q-gutter-y-xs">
         <div
@@ -141,8 +141,7 @@ import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import ChargePointMode from './ChargePointMode.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import ChargePointPowerData from './ChargePointPowerData.vue';
-import { ColumnConfiguration } from 'src/components/models/table-model';
-import { ChargePointRow } from 'src/components/models/table-model';
+import { ColumnConfiguration, ChargePointRow } from 'src/components/models/table-model';
 
 const mqttStore = useMqttStore();
 const { chargeModes } = useChargeModes();
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
index 489f24e77f..1ad91b72b0 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
@@ -13,7 +13,7 @@
     :min="4"
     :max="300"
     unit="kW"
-    v-model="instantChargeCurrentDC.value"
+    v-model="instantChargeCurrentDc.value"
     class="q-mt-sm"
   />
 
@@ -104,9 +104,9 @@ const instantChargeCurrent = computed(() =>
   ),
 );
 
-const dcCharging = computed(() => mqttStore.DcChargingEnabled);
+const dcCharging = computed(() => mqttStore.dcChargingEnabled);
 
-const instantChargeCurrentDC = computed(() => {
+const instantChargeCurrentDc = computed(() => {
   return mqttStore.chargePointConnectedVehicleInstantDcChargePower(
     props.chargePointId,
   );
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
index ac939c9f86..68103c089d 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
@@ -18,7 +18,7 @@
     :max="300"
     :step="1"
     unit="kW"
-    v-model="pvMinDCCurrent.value"
+    v-model="pvMinDcCurrent.value"
     class="q-mt-md"
   />
 
@@ -153,13 +153,13 @@ const phaseOptionsMinSoc = [
 ];
 
 const pvMinCurrent = computed(() =>
-  mqttStore.chargePointConnectedVehiclePVChargeMinCurrent(props.chargePointId),
+  mqttStore.chargePointConnectedVehiclePvChargeMinCurrent(props.chargePointId),
 );
 
-const dcCharging = computed(() => mqttStore.DcChargingEnabled);
+const dcCharging = computed(() => mqttStore.dcChargingEnabled);
 
-const pvMinDCCurrent = computed(() =>
-  mqttStore.chargePointConnectedVehiclePV_DC_ChargePower(props.chargePointId),
+const pvMinDcCurrent = computed(() =>
+  mqttStore.chargePointConnectedVehiclePvDcChargePower(props.chargePointId),
 );
 
 const numPhases = computed(() =>
@@ -173,11 +173,11 @@ const numPhasesMinSoc = computed(() =>
 );
 
 const pvMinSoc = computed(() =>
-  mqttStore.chargePointConnectedVehiclePVChargeMinSoc(props.chargePointId),
+  mqttStore.chargePointConnectedVehiclePvChargeMinSoc(props.chargePointId),
 );
 
 const pvMinSocCurrent = computed(() =>
-  mqttStore.chargePointConnectedVehiclePVChargeMinSocCurrent(
+  mqttStore.chargePointConnectedVehiclePvChargeMinSocCurrent(
     props.chargePointId,
   ),
 );
@@ -195,6 +195,6 @@ const limitEnergy = computed(() =>
 );
 
 const feedInLimit = computed(() =>
-  mqttStore.chargePointConnectedVehiclePVChargeFeedInLimit(props.chargePointId),
+  mqttStore.chargePointConnectedVehiclePvChargeFeedInLimit(props.chargePointId),
 );
 </script>
diff --git a/packages/modules/web_themes/koala/source/src/components/models/table-model.ts b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
index 6e4a125a5a..411594f309 100644
--- a/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
@@ -1,12 +1,5 @@
 import { QTableColumn } from 'quasar';
 
-// export type columnConfig = {
-//   fields: string[];
-//   fieldsExpansionRow?: string[];
-//   labels?: Record<string, string>;
-//   align?: Align;
-// };
-
 export type ColumnConfiguration = {
   field: string;
   label: string;
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 0f92dd5521..42552ae729 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
@@ -122,12 +122,12 @@ export interface Vehicle {
   id: number;
   name: string;
 }
-export interface vehicleInfo {
+export interface VehicleInfo {
   manufacturer: string;
   model: string;
 }
 
-export interface vehicleSocModuleConfig {
+export interface VehicleSocModuleConfig {
   name?: string;
   type: string | null;
   official?: boolean;
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 1874b2da81..57ff214938 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
@@ -15,8 +15,8 @@ import type {
   ValueObject,
   ChargePointConnectedVehicleInfo,
   Vehicle,
-  vehicleInfo,
-  vehicleSocModuleConfig,
+  VehicleInfo,
+  VehicleSocModuleConfig,
   ScheduledChargingPlan,
   ChargePointConnectedVehicleSoc,
   GraphDataPoint,
@@ -483,7 +483,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
-  /**
+  /**More actions
    * Get a formatted string for a value
    * @param value value to format
    * @param unit unit to use, default is 'W'
@@ -495,60 +495,68 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @returns object
    */
   const getValueObject = computed(() => {
-    return (
-      value: number,
-      unit: string = 'W',
-      unitPrefix: string = '',
-      scale: boolean = true,
-      inverted: boolean = false,
-      defaultString: string = '---',
-      decimalPlaces: number = 0,
-    ) => {
-      let scaledValue = value;
-      let textValue = defaultString;
-      if (value === undefined) {
-        console.debug(
-          'value is undefined! using default',
-          value,
-          defaultString,
-        );
-      } else {
-        if (inverted) {
-          scaledValue = value *= -1;
-        }
-        textValue = value.toLocaleString(undefined, {
-          minimumFractionDigits: 0,
-          maximumFractionDigits: 0,
-        });
-        while (scale && (scaledValue > 999 || scaledValue < -999)) {
-          scaledValue = scaledValue / 1000;
-          switch (unitPrefix) {
-            case '':
-              unitPrefix = 'k';
-              break;
-            case 'k':
-              unitPrefix = 'M';
-              break;
-            case 'M':
-              unitPrefix = 'G';
-              break;
-          }
+  return (
+    value: number,
+    unit: string = 'W',
+    unitPrefix: string = '',
+    scale: boolean = true,
+    inverted: boolean = false,
+    defaultString: string = '---',
+    decimalPlaces: number = 0,
+  ) => {
+    let scaled = false;
+    let scaledValue = value;
+    let textValue = defaultString;
+    if (value === undefined) {
+      console.debug(
+        'value is undefined! using default',
+        value,
+        defaultString,
+      );
+    } else {
+      if (inverted) {
+        scaledValue = value *= -1;
+      }
+      textValue = value.toLocaleString(undefined, {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+      });
+      while (scale && (scaledValue > 999 || scaledValue < -999)) {
+        scaledValue = scaledValue / 1000;
+        scaled = true;
+        switch (unitPrefix) {
+          case '':
+            unitPrefix = 'k';
+            break;
+          case 'k':
+            unitPrefix = 'M';
+            break;
+          case 'M':
+            unitPrefix = 'G';
+            break;
         }
+      }
+      let outputDecimalPlaces = 0;
+      if (scaled) {
+        outputDecimalPlaces = decimalPlaces > 0 ? decimalPlaces : 2;
+      } else {
         const hasDecimalPlaces = scaledValue !== Math.floor(scaledValue);
-        textValue = scaledValue.toLocaleString(undefined, {
-          minimumFractionDigits: hasDecimalPlaces ? decimalPlaces : 0,
-          maximumFractionDigits: hasDecimalPlaces ? decimalPlaces : 0,
-        });
+        outputDecimalPlaces =  hasDecimalPlaces ? decimalPlaces : 0;
       }
-      return {
-        textValue: `${textValue} ${unitPrefix}${unit}`,
-        value: value,
-        unit: unit,
-        scaledValue: scaledValue,
-        scaledUnit: `${unitPrefix}${unit}`,
-      } as ValueObject;
-    };
-  });
+      textValue = scaledValue.toLocaleString(undefined, {
+        minimumFractionDigits: outputDecimalPlaces,
+        maximumFractionDigits: outputDecimalPlaces,
+      });
+    }
+    return {
+      textValue: `${textValue} ${unitPrefix}${unit}`,
+      value: value,
+      unit: unit,
+      scaledValue: scaledValue,
+      scaledUnit: `${unitPrefix}${unit}`,
+    } as ValueObject;
+  };
+});
 
   /**
    * Get the theme configuration
@@ -955,7 +963,7 @@ export const useMqttStore = defineStore('mqtt', () => {
    * Get boolean value for DC charging enabled / disabled
    * @returns boolean
    */
-  const DcChargingEnabled = computed(() => {
+  const dcChargingEnabled = computed(() => {
     return (getValue.value('openWB/optional/dc_charging') as boolean) || 0;
   });
 
@@ -969,11 +977,11 @@ export const useMqttStore = defineStore('mqtt', () => {
   ) => {
     return computed({
       get() {
-        const DcCurrent =
+        const dcCurrent =
           chargePointConnectedVehicleChargeTemplate(chargePointId).value
             ?.chargemode?.instant_charging?.dc_current;
-        if (DcCurrent !== undefined) {
-          return (DcCurrent * 3 * 230) / 1000;
+        if (dcCurrent !== undefined) {
+          return (dcCurrent * 3 * 230) / 1000;
         } else {
           return 0;
         }
@@ -1102,7 +1110,7 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @param chargePointId charge point id
    * @returns object | undefined
    */
-  const chargePointConnectedVehiclePVChargeMinCurrent = (
+  const chargePointConnectedVehiclePvChargeMinCurrent = (
     chargePointId: number,
   ) => {
     return computed({
@@ -1127,16 +1135,16 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @param chargePointId charge point id
    * @returns number
    */
-  const chargePointConnectedVehiclePV_DC_ChargePower = (
+  const chargePointConnectedVehiclePvDcChargePower = (
     chargePointId: number,
   ) => {
     return computed({
       get() {
-        const DCMinCurrent =
+        const dcMinCurrent =
           chargePointConnectedVehicleChargeTemplate(chargePointId).value
             ?.chargemode?.pv_charging?.dc_min_current;
-        if (DCMinCurrent !== undefined) {
-          return (DCMinCurrent * 3 * 230) / 1000;
+        if (dcMinCurrent !== undefined) {
+          return (dcMinCurrent * 3 * 230) / 1000;
         } else {
           return 0;
         }
@@ -1159,7 +1167,7 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @param chargePointId charge point id
    * @returns object | undefined
    */
-  const chargePointConnectedVehiclePVChargeMinSoc = (chargePointId: number) => {
+  const chargePointConnectedVehiclePvChargeMinSoc = (chargePointId: number) => {
     return computed({
       get() {
         return chargePointConnectedVehicleChargeTemplate(chargePointId).value
@@ -1182,7 +1190,7 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @param chargePointId charge point id
    * @returns object | undefined
    */
-  const chargePointConnectedVehiclePVChargeMinSocCurrent = (
+  const chargePointConnectedVehiclePvChargeMinSocCurrent = (
     chargePointId: number,
   ) => {
     return computed({
@@ -1338,7 +1346,7 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @param chargePointId charge point id
    * @returns object | undefined
    */
-  const chargePointConnectedVehiclePVChargeFeedInLimit = (
+  const chargePointConnectedVehiclePvChargeFeedInLimit = (
     chargePointId: number,
   ) => {
     return computed({
@@ -1388,16 +1396,16 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @param chargePointId charge point id
    * @returns number
    */
-  const chargePointConnectedVehicleEcoChargeDCPower = (
+  const chargePointConnectedVehicleEcoChargeDcPower = (
     chargePointId: number,
   ) => {
     return computed({
       get() {
-        const DCCurrent =
+        const dcCurrent =
           chargePointConnectedVehicleChargeTemplate(chargePointId).value
             ?.chargemode?.eco_charging?.dc_current;
-        if (DCCurrent !== undefined) {
-          return (DCCurrent * 3 * 230) / 1000;
+        if (dcCurrent !== undefined) {
+          return (dcCurrent * 3 * 230) / 1000;
         } else {
           return 0;
         }
@@ -1969,7 +1977,7 @@ export const useMqttStore = defineStore('mqtt', () => {
    */
   const vehicleInfo = computed(() => {
     return (vehicleId: number) => {
-      return getValue.value(`openWB/vehicle/${vehicleId}/info`) as vehicleInfo;
+      return getValue.value(`openWB/vehicle/${vehicleId}/info`) as VehicleInfo;
     };
   });
 
@@ -1982,7 +1990,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     return (vehicleId: number) => {
       const socModule = getValue.value(
         `openWB/vehicle/${vehicleId}/soc_module/config`,
-      ) as vehicleSocModuleConfig;
+      ) as VehicleSocModuleConfig;
       return socModule;
     };
   });
@@ -2736,7 +2744,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     chargePointStateMessage,
     chargePointFaultState,
     chargePointFaultMessage,
-    DcChargingEnabled,
+    dcChargingEnabled,
     chargePointConnectedVehicleInfo,
     chargePointConnectedVehicleForceSocUpdate,
     chargePointConnectedVehicleChargeMode,
@@ -2746,18 +2754,18 @@ export const useMqttStore = defineStore('mqtt', () => {
     chargePointConnectedVehicleInstantChargeLimit,
     chargePointConnectedVehicleInstantChargeLimitSoC,
     chargePointConnectedVehicleInstantChargeLimitEnergy,
-    chargePointConnectedVehiclePVChargeMinCurrent,
+    chargePointConnectedVehiclePvChargeMinCurrent,
     chargePointConnectedVehiclePvChargePhases,
     chargePointConnectedVehiclePvChargeLimit,
     chargePointConnectedVehiclePvChargeLimitSoC,
     chargePointConnectedVehiclePvChargeLimitEnergy,
-    chargePointConnectedVehiclePVChargeMinSoc,
-    chargePointConnectedVehiclePVChargeMinSocCurrent,
-    chargePointConnectedVehiclePV_DC_ChargePower,
+    chargePointConnectedVehiclePvChargeMinSoc,
+    chargePointConnectedVehiclePvChargeMinSocCurrent,
+    chargePointConnectedVehiclePvDcChargePower,
     chargePointConnectedVehiclePvChargePhasesMinSoc,
-    chargePointConnectedVehiclePVChargeFeedInLimit,
+    chargePointConnectedVehiclePvChargeFeedInLimit,
     chargePointConnectedVehicleEcoChargeCurrent,
-    chargePointConnectedVehicleEcoChargeDCPower,
+    chargePointConnectedVehicleEcoChargeDcPower,
     chargePointConnectedVehicleEcoChargePhases,
     chargePointConnectedVehicleEcoChargeLimit,
     chargePointConnectedVehicleEcoChargeLimitSoC,

From 54f130c58a5b7124334a31424358f0dfb135bada Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 13 Jun 2025 11:07:41 +0200
Subject: [PATCH 31/33] remove comment

---
 .../modules/web_themes/koala/source/src/stores/mqtt-store.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 57ff214938..987728afcb 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
@@ -483,7 +483,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
-  /**More actions
+  /**
    * Get a formatted string for a value
    * @param value value to format
    * @param unit unit to use, default is 'W'

From 1f3e93a768d26677e6160026a6b7ac7ff523ed56 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 16 Jun 2025 10:32:14 +0200
Subject: [PATCH 32/33] formatting

---
 .../koala/source/src/stores/mqtt-store.ts     | 120 +++++++++---------
 1 file changed, 60 insertions(+), 60 deletions(-)

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 987728afcb..ec027b8379 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
@@ -495,68 +495,68 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @returns object
    */
   const getValueObject = computed(() => {
-  return (
-    value: number,
-    unit: string = 'W',
-    unitPrefix: string = '',
-    scale: boolean = true,
-    inverted: boolean = false,
-    defaultString: string = '---',
-    decimalPlaces: number = 0,
-  ) => {
-    let scaled = false;
-    let scaledValue = value;
-    let textValue = defaultString;
-    if (value === undefined) {
-      console.debug(
-        'value is undefined! using default',
-        value,
-        defaultString,
-      );
-    } else {
-      if (inverted) {
-        scaledValue = value *= -1;
-      }
-      textValue = value.toLocaleString(undefined, {
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0,
-      });
-      while (scale && (scaledValue > 999 || scaledValue < -999)) {
-        scaledValue = scaledValue / 1000;
-        scaled = true;
-        switch (unitPrefix) {
-          case '':
-            unitPrefix = 'k';
-            break;
-          case 'k':
-            unitPrefix = 'M';
-            break;
-          case 'M':
-            unitPrefix = 'G';
-            break;
-        }
-      }
-      let outputDecimalPlaces = 0;
-      if (scaled) {
-        outputDecimalPlaces = decimalPlaces > 0 ? decimalPlaces : 2;
+    return (
+      value: number,
+      unit: string = 'W',
+      unitPrefix: string = '',
+      scale: boolean = true,
+      inverted: boolean = false,
+      defaultString: string = '---',
+      decimalPlaces: number = 0,
+    ) => {
+      let scaled = false;
+      let scaledValue = value;
+      let textValue = defaultString;
+      if (value === undefined) {
+        console.debug(
+          'value is undefined! using default',
+          value,
+          defaultString,
+        );
       } else {
-        const hasDecimalPlaces = scaledValue !== Math.floor(scaledValue);
-        outputDecimalPlaces =  hasDecimalPlaces ? decimalPlaces : 0;
+        if (inverted) {
+          scaledValue = value *= -1;
+        }
+        textValue = value.toLocaleString(undefined, {
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 0,
+        });
+        while (scale && (scaledValue > 999 || scaledValue < -999)) {
+          scaledValue = scaledValue / 1000;
+          scaled = true;
+          switch (unitPrefix) {
+            case '':
+              unitPrefix = 'k';
+              break;
+            case 'k':
+              unitPrefix = 'M';
+              break;
+            case 'M':
+              unitPrefix = 'G';
+              break;
+          }
+        }
+        let outputDecimalPlaces = 0;
+        if (scaled) {
+          outputDecimalPlaces = decimalPlaces > 0 ? decimalPlaces : 2;
+        } else {
+          const hasDecimalPlaces = scaledValue !== Math.floor(scaledValue);
+          outputDecimalPlaces = hasDecimalPlaces ? decimalPlaces : 0;
+        }
+        textValue = scaledValue.toLocaleString(undefined, {
+          minimumFractionDigits: outputDecimalPlaces,
+          maximumFractionDigits: outputDecimalPlaces,
+        });
       }
-      textValue = scaledValue.toLocaleString(undefined, {
-        minimumFractionDigits: outputDecimalPlaces,
-        maximumFractionDigits: outputDecimalPlaces,
-      });
-    }
-    return {
-      textValue: `${textValue} ${unitPrefix}${unit}`,
-      value: value,
-      unit: unit,
-      scaledValue: scaledValue,
-      scaledUnit: `${unitPrefix}${unit}`,
-    } as ValueObject;
-  };
-});
+      return {
+        textValue: `${textValue} ${unitPrefix}${unit}`,
+        value: value,
+        unit: unit,
+        scaledValue: scaledValue,
+        scaledUnit: `${unitPrefix}${unit}`,
+      } as ValueObject;
+    };
+  });
 
   /**
    * Get the theme configuration

From cd9142ad257b80bbbc7713c349c838ed7f835a0e Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 16 Jun 2025 16:37:38 +0200
Subject: [PATCH 33/33] Comment and formatting fixes

---
 .../web_themes/koala/source/src/components/BaseTable.vue    | 6 ++++--
 .../koala/source/src/components/ChargePointInformation.vue  | 6 ++++--
 .../web_themes/koala/source/src/stores/mqtt-store.ts        | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
index 38e1dabc7f..902af8e808 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -132,8 +132,10 @@
 <script setup lang="ts" generic="T extends Record<string, unknown>">
 import { computed, ComputedRef, ref, useSlots } from 'vue';
 import type { QTableColumn, QTableProps } from 'quasar';
-import { BodySlotProps } from 'src/components/models/table-model';
-import { ColumnConfiguration } from 'src/components/models/table-model';
+import {
+  ColumnConfiguration,
+  BodySlotProps,
+} from 'src/components/models/table-model';
 
 /* ------------------------------------------------------------------ props */
 const props = defineProps<{
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 1b62d98b89..07c272d32c 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -21,7 +21,6 @@
     @row-click="onRowClick"
   >
     <!-- desktop view table body slots -->
-    <!-- "col" = column must match Quasar naming convention -->
     <template #body-cell-plugged="slotProps">
       <q-td :class="`text-${slotProps.col.align}`">
         <ChargePointStateIcon :charge-point-id="slotProps.row.id" />
@@ -141,7 +140,10 @@ import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import ChargePointMode from './ChargePointMode.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import ChargePointPowerData from './ChargePointPowerData.vue';
-import { ColumnConfiguration, ChargePointRow } from 'src/components/models/table-model';
+import {
+  ColumnConfiguration,
+  ChargePointRow,
+} from 'src/components/models/table-model';
 
 const mqttStore = useMqttStore();
 const { chargeModes } = useChargeModes();
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 ec027b8379..a3b55345cc 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
@@ -491,7 +491,7 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @param scale flag to scale the value, default is true
    * @param inverted flag to invert the value, default is false
    * @param defaultString default string to use, default is '---'
-   * @param decimalPlaces number of decimal places to use, default is 0
+   * @param decimalPlaces number of decimal places to use, default is 0 or 2 for scaled values
    * @returns object
    */
   const getValueObject = computed(() => {