From d92bfe3fd9a1319ebaeb5764c92420e75567fcce Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 14 Apr 2025 09:25:53 +0200
Subject: [PATCH 1/2] Fix reactivity for charge point vehicle selection +
 formatting

---
 .../components/ChargePointVehicleSelect.vue   |  3 ++-
 .../koala/source/src/stores/mqtt-store.ts     | 19 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue
index 82de43575a..a0715d3f73 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue
@@ -29,6 +29,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 
 const props = defineProps({
@@ -48,7 +49,7 @@ const connectedVehicle = mqttStore.chargePointConnectedVehicleInfo(
   props.chargePointId,
 );
 
-const vehicles = mqttStore.vehicleList();
+const vehicles = computed(() => mqttStore.vehicleList);
 </script>
 
 <style 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 384f0f2588..6b7c211726 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
@@ -1478,7 +1478,9 @@ export const useMqttStore = defineStore('mqtt', () => {
           chargePointConnectedVehicleInfo(chargePointId).value;
         const vehicleId = vehicleInfo?.id;
         const topic = `openWB/vehicle/${vehicleId}/soc_module/calculated_soc_state`;
-        const socState = getValue.value(topic) as CalculatedSocState | undefined;
+        const socState = getValue.value(topic) as
+          | CalculatedSocState
+          | undefined;
         return socState?.manual_soc ?? socState?.soc_start ?? 0;
       },
       set(newValue: number) {
@@ -1504,13 +1506,14 @@ export const useMqttStore = defineStore('mqtt', () => {
   };
 
   /**
-  * Get the charge point connected vehicle SoC type identified by the charge point id
-  * @param chargePointId charge point id
-  * @returns string | null | undefined
-  */
+   * Get the charge point connected vehicle SoC type identified by the charge point id
+   * @param chargePointId charge point id
+   * @returns string | null | undefined
+   */
   const chargePointConnectedVehicleSocType = (chargePointId: number) => {
     return computed(() => {
-      const vehicleId = chargePointConnectedVehicleInfo(chargePointId).value?.id;
+      const vehicleId =
+        chargePointConnectedVehicleInfo(chargePointId).value?.id;
       if (!vehicleId) return undefined;
       const socConfig = getValue.value(
         `openWB/vehicle/${vehicleId}/soc_module/config`,
@@ -1772,7 +1775,7 @@ export const useMqttStore = defineStore('mqtt', () => {
    * Get a list of all vehicles
    * @returns Vehicle[]
    */
-  const vehicleList = () => {
+  const vehicleList = computed(() => {
     const list = getWildcardValues.value('openWB/vehicle/+/name');
     // generate an array of objects, containing vehicle index and name
     return Object.keys(list).map((key) => {
@@ -1782,7 +1785,7 @@ export const useMqttStore = defineStore('mqtt', () => {
         name: list[key],
       } as Vehicle;
     });
-  };
+  });
 
   /**
    * Get scheduled charging plan/s data identified by the charge point id

From 762771497c68276c5eb31951e1a9a5fc6ac7fef9 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 14 Apr 2025 10:27:20 +0200
Subject: [PATCH 2/2] Update vehicle list call

---
 .../koala/source/src/components/SystemInformation.vue           | 2 +-
 .../web_themes/koala/source/src/components/VehicleCard.vue      | 2 +-
 .../koala/source/src/components/VehicleInformation.vue          | 2 +-
 .../source/src/components/charts/historyChart/HistoryChart.vue  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/SystemInformation.vue b/packages/modules/web_themes/koala/source/src/components/SystemInformation.vue
index f08d6d6b69..80116c131c 100644
--- a/packages/modules/web_themes/koala/source/src/components/SystemInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SystemInformation.vue
@@ -11,7 +11,7 @@
     </p>
     <p>
       Vehicle List:
-      {{ mqttStore.vehicleList() }}
+      {{ mqttStore.vehicleList }}
     </p>
   </div>
 </template>
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 a5d36fdddb..c7e8b50b65 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -21,7 +21,7 @@ const props = defineProps<{
 const mqttStore = useMqttStore();
 
 const vehicle = computed(() => {
-  return mqttStore.vehicleList().find((v) => v.id === props.vehicleId);
+  return mqttStore.vehicleList.find((v) => v.id === 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 8183b9d0ec..10ec40f6f7 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -15,7 +15,7 @@ import VehicleCard from 'src/components/VehicleCard.vue';
 
 const mqttStore = useMqttStore();
 
-const vehicles = computed(() => mqttStore.vehicleList());
+const vehicles = computed(() => mqttStore.vehicleList);
 
 const vehicleIds = computed(() => vehicles.value.map((vehicle) => vehicle.id));
 </script>
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 18aa3ce040..8fd9c6de5a 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
@@ -101,7 +101,7 @@ const gridMeterName = computed(() => {
   return 'Zähler';
 });
 
-const vehicles = computed(() => mqttStore.vehicleList());
+const vehicles = computed(() => mqttStore.vehicleList);
 const chartRange = computed(
   () => mqttStore.themeConfiguration?.history_chart_range || 3600,
 );