Koala Theme - Move SoC buttons to component SliderDouble (prevent repeated code)

packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue

@@ -56,28 +56,10 @@
         :limit-mode="limitMode"
         :current-value="currentValue"
         :target-time="vehicleTarget.time"
-      >
-        <template #update-soc-icon>
-          <q-icon
-            v-if="vehicleSocType === 'manual' && limitMode !== 'amount'"
-            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="vehicleSocType !== undefined && limitMode !== 'amount'"
-            name="refresh"
-            size="xs"
-            class="q-ml-xs cursor-pointer"
-            @click="refreshSoc"
-          >
-            <q-tooltip>SoC aktualisieren</q-tooltip>
-          </q-icon>
-        </template>
-      </SliderDouble>
+        :vehicle-soc-type="vehicleSocType"
+        :on-edit-soc="openSocDialog"
+        :on-refresh-soc="refreshSoc"
+      />
       <slot name="card-footer"></slot>
     </q-card-section>
   </q-card>
@@ -151,6 +133,10 @@ const limitMode = computed(() => {
 const settingsVisible = ref<boolean>(false);
 
 const socInputVisible = ref<boolean>(false);
+const openSocDialog = () => {
+  socInputVisible.value = true;
+};
+
 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
@@ -261,7 +247,7 @@ const showSocTargetSlider = computed(() => {
     // we have a energy based target
     return true;
   }
-  if (vehicleSocType.value !== undefined) {
+  if (vehicleSocType.value) {
     // we have a soc module defined
     return true;
   }

packages/modules/web_themes/koala/source/src/components/SliderDouble.vue

@@ -21,7 +21,7 @@
         v-model="target"
         :min="0"
         :max="100"
-        color="light-green-5"
+        color="light-green-13"
         inner-track-color="blue-grey-2"
         class="target-slider"
         track-size="1.5em"
@@ -41,7 +41,24 @@
               ? formatEnergy(currentValue)
               : currentValue + '%'
           }}
-          <slot name="update-soc-icon"></slot>
+          <q-icon
+            v-if="vehicleSocType === 'manual' && limitMode !== 'amount'"
+            name="edit"
+            size="xs"
+            class="q-ml-xs cursor-pointer"
+            @click="onEditSoc"
+          >
+            <q-tooltip>SoC eingeben</q-tooltip>
+          </q-icon>
+          <q-icon
+            v-else-if="vehicleSocType !== undefined && limitMode !== 'amount'"
+            name="refresh"
+            size="xs"
+            class="q-ml-xs cursor-pointer"
+            @click="onRefreshSoc"
+          >
+            <q-tooltip>SoC aktualisieren</q-tooltip>
+          </q-icon>
         </div>
       </div>
       <div v-if="props.targetTime" class="col text-center">
@@ -96,6 +113,19 @@ const props = defineProps({
     required: false,
     default: undefined,
   },
+  vehicleSocType: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  onEditSoc: {
+    type: Function,
+    required: false,
+  },
+  onRefreshSoc: {
+    type: Function,
+    required: false,
+  },
 });
 
 const target = computed({

packages/modules/web_themes/koala/source/src/components/VehicleCard.vue

@@ -17,35 +17,16 @@
         </div>
       </div>
       <VehicleConnectionStateIcon :vehicle-id="vehicleId" class="q-mt-sm" />
-      <div v-if="vehicleSocModuleType !== null">
-        <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>
+      <SliderDouble
+        v-if="vehicleSocType"
+        class="q-mt-sm"
+        :current-value="vehicleSocValue"
+        :readonly="true"
+        :limit-mode="'none'"
+        :vehicle-soc-type="vehicleSocType"
+        :on-edit-soc="openSocDialog"
+        :on-refresh-soc="refreshSoc"
+      />
       <slot name="card-footer"></slot>
     </q-card-section>
   </q-card>
@@ -78,6 +59,9 @@ const props = defineProps<{
 const mqttStore = useMqttStore();
 const $q = useQuasar();
 const socInputVisible = ref<boolean>(false);
+const openSocDialog = () => {
+  socInputVisible.value = true;
+};
 
 const vehicle = computed(() => {
   return mqttStore.vehicleList.find((v) => v.id === props.vehicleId);
@@ -87,8 +71,8 @@ const vehicleInfo = computed(() => {
   return mqttStore.vehicleInfo(props.vehicleId);
 });
 
-const vehicleSocModuleType = computed(() => {
-  return mqttStore.vehicleSocModule(props.vehicleId)?.type;
+const vehicleSocType = computed(() => {
+  return mqttStore.vehicleSocType(props.vehicleId);
 });
 
 const vehicleSocValue = computed(() => {

packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts

@@ -129,14 +129,6 @@ export interface VehicleInfo {
   manufacturer: string;
   model: string;
 }
-
-export interface VehicleSocModuleConfig {
-  name?: string;
-  type: string | null;
-  official?: boolean;
-  configuration: object;
-}
-
 export interface ScheduledChargingPlan {
   id: number;
   name: string;

packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts

@@ -16,7 +16,6 @@ import type {
   ChargePointConnectedVehicleInfo,
   Vehicle,
   VehicleInfo,
-  VehicleSocModuleConfig,
   ScheduledChargingPlan,
   ChargePointConnectedVehicleSoc,
   GraphDataPoint,
@@ -874,13 +873,13 @@ export const useMqttStore = defineStore('mqtt', () => {
 
   /**
    * trigger a force SOC update for the connected vehicle
+   * @param chargePointId charge point id
+   * @returns void
    */
   const chargePointConnectedVehicleForceSocUpdate = (chargePointId: number) => {
     const vehicleId = chargePointConnectedVehicleInfo(chargePointId).value?.id;
     if (vehicleId !== undefined) {
-      const topic = `openWB/vehicle/${vehicleId}/get/force_soc_update`;
-      console.log(topic);
-      sendTopicToBroker(topic, 1);
+      vehicleForceSocUpdate(vehicleId);
     }
   };
 
@@ -1766,10 +1765,7 @@ export const useMqttStore = defineStore('mqtt', () => {
       const vehicleId =
         chargePointConnectedVehicleInfo(chargePointId).value?.id;
       if (vehicleId === undefined) return undefined;
-      const socConfig = getValue.value(
-        `openWB/vehicle/${vehicleId}/soc_module/config`,
-      ) as { type: string } | null;
-      return socConfig?.type;
+      return vehicleSocType.value(vehicleId);
     });
   };
 
@@ -2050,16 +2046,16 @@ export const useMqttStore = defineStore('mqtt', () => {
   });
 
   /**
-   * Get vehicle SoC module configuration identified by the vehicle id
+   * Get vehicle SoC type identified by the vehicle id
    * @param vehicleId vehicle id
-   * @returns vehicleSocModule
+   * @returns string | null | undefined
    */
-  const vehicleSocModule = computed(() => {
+  const vehicleSocType = computed(() => {
     return (vehicleId: number) => {
-      const socModule = getValue.value(
+      const socConfig = getValue.value(
         `openWB/vehicle/${vehicleId}/soc_module/config`,
-      ) as VehicleSocModuleConfig;
-      return socModule;
+      ) as { type: string } | null;
+      return socConfig?.type;
     };
   });
 
@@ -2113,11 +2109,12 @@ export const useMqttStore = defineStore('mqtt', () => {
 
   /**
    * trigger a force SOC update for the vehicle by vehicle id
+   * @param vehicleId vehicle id
+   * @returns void
    */
   const vehicleForceSocUpdate = (vehicleId: number) => {
     if (vehicleId !== undefined) {
-      const topic = `openWB/set/vehicle/${vehicleId}/get/force_soc_update`;
-      console.log(topic);
+      const topic = `openWB/vehicle/${vehicleId}/get/force_soc_update`;
       sendTopicToBroker(topic, 1);
     }
   };
@@ -2895,7 +2892,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     chargePointConnectedVehicleConfig,
     vehicleInfo,
     vehicleConnectionState,
-    vehicleSocModule,
+    vehicleSocType,
     vehicleSocValue,
     vehicleSocManualValue,
     vehicleForceSocUpdate,