From 1244c0bd83cdc02df33d239b21c5f6ab26200ca5 Mon Sep 17 00:00:00 2001 From: BrettS Date: Fri, 18 Jul 2025 16:37:17 +0200 Subject: [PATCH 1/4] Move SoC buttons to component SliderDouble (prevent repeated code) --- .../source/src/components/ChargePointCard.vue | 33 +++++---------- .../source/src/components/SliderDouble.vue | 32 ++++++++++++++- .../source/src/components/VehicleCard.vue | 40 +++++-------------- .../source/src/stores/mqtt-store-model.ts | 8 ---- .../koala/source/src/stores/mqtt-store.ts | 32 +++++++-------- 5 files changed, 66 insertions(+), 79 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 3d7a1b1ae0..8164386008 100644 --- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue +++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue @@ -47,6 +47,7 @@ {{ energyChargedPlugged }} + {{ vehicleSocType }} - - + :vehicle-soc-type="vehicleSocType" + :on-edit-soc="openSocDialog" + :on-refresh-soc="refreshSoc" + /> @@ -146,6 +129,10 @@ const limitMode = computed(() => { const settingsVisible = ref(false); const socInputVisible = ref(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 @@ -256,7 +243,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; } diff --git a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue index 881a0065c9..83a0d7ec0a 100644 --- a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue +++ b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue @@ -41,7 +41,24 @@ ? formatEnergy(currentValue) : currentValue + '%' }} - + + SoC eingeben + + + SoC aktualisieren +
@@ -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({ 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 95119faecf..dad8766ad0 100644 --- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue +++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue @@ -17,35 +17,16 @@
-
- - -
+ :vehicle-soc-type="vehicleSocType" + :on-edit-soc="openSocDialog" + :on-refresh-soc="refreshSoc" + /> @@ -73,6 +54,9 @@ const props = defineProps<{ const mqttStore = useMqttStore(); const $q = useQuasar(); const socInputVisible = ref(false); +const openSocDialog = () => { + socInputVisible.value = true; +}; const vehicle = computed(() => { return mqttStore.vehicleList.find((v) => v.id === props.vehicleId); @@ -82,12 +66,8 @@ const vehicleInfo = computed(() => { return mqttStore.vehicleInfo(props.vehicleId); }); -const isVehicleSocModule = computed(() => { - return mqttStore.vehicleSocModule(props.vehicleId)?.name; -}); - -const vehicleSocModuleType = computed(() => { - return mqttStore.vehicleSocModule(props.vehicleId)?.type; +const vehicleSocType = computed(() => { + return mqttStore.vehicleSocType(props.vehicleId); }); const vehicleSocValue = computed(() => { 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 6ba34d471b..24b1471f8f 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 @@ -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; 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 9b5a356c34..38d27df5c0 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,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); } }; @@ -1738,10 +1737,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); }); }; @@ -2022,16 +2018,17 @@ 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; + console.log(socConfig); + return socConfig?.type; }; }); @@ -2085,11 +2082,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); } }; @@ -2867,7 +2865,7 @@ export const useMqttStore = defineStore('mqtt', () => { chargePointConnectedVehicleConfig, vehicleInfo, vehicleConnectionState, - vehicleSocModule, + vehicleSocType, vehicleSocValue, vehicleSocManualValue, vehicleForceSocUpdate, From 7a54f27b5f78a3c03a57be548f301cccc713f0a9 Mon Sep 17 00:00:00 2001 From: BrettS Date: Fri, 18 Jul 2025 16:54:25 +0200 Subject: [PATCH 2/4] Formatting & cleanup --- .../source/src/components/ChargePointCard.vue | 1 - .../source/src/components/VehicleCard.vue | 20 +++++++++---------- .../koala/source/src/stores/mqtt-store.ts | 1 - 3 files changed, 10 insertions(+), 12 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 8164386008..e71d5f5755 100644 --- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue +++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue @@ -47,7 +47,6 @@ {{ energyChargedPlugged }} - {{ vehicleSocType }} - + 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 38d27df5c0..16a6deb6b1 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 @@ -2027,7 +2027,6 @@ export const useMqttStore = defineStore('mqtt', () => { const socConfig = getValue.value( `openWB/vehicle/${vehicleId}/soc_module/config`, ) as { type: string } | null; - console.log(socConfig); return socConfig?.type; }; }); From 725d31e2afbc0e8ad3f84f6ed94a5e8ebbcfae5e Mon Sep 17 00:00:00 2001 From: BrettS Date: Mon, 21 Jul 2025 09:25:42 +0200 Subject: [PATCH 3/4] Fix conflict with master --- .../web_themes/koala/source/src/components/VehicleCard.vue | 5 ----- 1 file changed, 5 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 46feaa9dc2..26f2909da8 100644 --- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue +++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue @@ -71,13 +71,8 @@ const vehicleInfo = computed(() => { return mqttStore.vehicleInfo(props.vehicleId); }); -<<<<<<< HEAD const vehicleSocType = computed(() => { return mqttStore.vehicleSocType(props.vehicleId); -======= -const vehicleSocModuleType = computed(() => { - return mqttStore.vehicleSocModule(props.vehicleId)?.type; ->>>>>>> upstream/master }); const vehicleSocValue = computed(() => { From cf0e3393a884e8ffdff525796f83929718dbb326 Mon Sep 17 00:00:00 2001 From: BrettS Date: Tue, 22 Jul 2025 15:14:06 +0200 Subject: [PATCH 4/4] Change slider target color for better contrast --- .../web_themes/koala/source/src/components/SliderDouble.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue index 83a0d7ec0a..6b79d14251 100644 --- a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue +++ b/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"