Fix reactivity for charge point vehicle selection + formatting

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>

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>

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>
 

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>

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,
 );

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