Merge pull request #2324 from Brett-S-OWB/koala-new-chargemodes

Fix reactivity for charge point vehicle selection + formatting

Author: benderl

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

@@ -1775,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) => {
@@ -1785,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