From 2cee3ad468558854fab88f03f24b1e79f33cfa00 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 27 Oct 2026 13:51:37 +0100
Subject: [PATCH 1/2] fix manual soc input dialog

---
 .../components/ChargePointManualSocDialog.vue | 128 ------------------
 .../source/src/components/ManualSocDialog.vue |   8 +-
 .../source/src/stores/mqtt-store-model.ts     |   5 +-
 .../koala/source/src/stores/mqtt-store.ts     |  44 +-----
 4 files changed, 13 insertions(+), 172 deletions(-)
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/ChargePointManualSocDialog.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointManualSocDialog.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointManualSocDialog.vue
deleted file mode 100644
index 12973e9291..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointManualSocDialog.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <q-dialog v-model="visible">
-    <q-card>
-      <q-card-section>
-        <div class="row">
-          <div class="text-h6 q-mr-md">SoC-Eingabe {{ vehicleName }}</div>
-          <q-space />
-          <q-btn icon="close" flat round dense v-close-popup />
-        </div>
-      </q-card-section>
-      <q-card-section class="q-py-none">
-        <div class="row justify-center items-center">
-          <div class="col-6 col-sm-8 col-md-6">
-            <q-input
-              v-model.number="socInputValue"
-              type="text"
-              inputmode="numeric"
-              suffix="%"
-              hide-spinner
-              input-class="text-right"
-            >
-              <template v-slot:prepend>
-                <q-btn
-                  round
-                  flat
-                  dense
-                  icon="remove"
-                  @click="socInputValue--"
-                />
-              </template>
-              <template v-slot:append>
-                <q-btn round flat dense icon="add" @click="socInputValue++" />
-              </template>
-            </q-input>
-          </div>
-        </div>
-        <div class="row justify-center items-center q-mt-md">
-          <div class="col q-px-md">
-            <q-slider
-              v-model.number="socInputValue"
-              :min="0"
-              :max="100"
-              :step="1"
-              :markers="10"
-              :marker-labels="socSliderMarker"
-              color="primary"
-            />
-          </div>
-        </div>
-      </q-card-section>
-      <q-card-actions align="center" class="q-mt-md">
-        <q-btn
-          label="Abbrechen"
-          color="negative"
-          v-close-popup
-          @click="cancelChanges"
-        />
-        <q-btn
-          label="Bestätigen"
-          color="primary"
-          v-close-popup
-          @click="confirmChanges"
-        />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script setup lang="ts">
-import { useMqttStore } from 'src/stores/mqtt-store';
-import { computed, ref } from 'vue';
-
-const mqttStore = useMqttStore();
-
-const props = defineProps<{
-  chargePointId: number;
-  socDialogVisible: boolean;
-}>();
-
-const emit = defineEmits<{
-  'update:socDialogVisible': [value: boolean];
-}>();
-
-const visible = computed({
-  get: () => props.socDialogVisible,
-  set: (value) => {
-    emit('update:socDialogVisible', value);
-  },
-});
-
-const vehicleName = computed(() => {
-  return mqttStore.chargePointConnectedVehicleInfo(props.chargePointId).value
-    ?.name;
-});
-
-const socValue = ref<number | undefined>(undefined);
-
-const socInputValue = computed({
-  get: () => {
-    return (
-      socValue.value ??
-      mqttStore.chargePointConnectedVehicleSocManual(props.chargePointId)
-        .value ??
-      0
-    );
-  },
-  set: (newValue: number) => {
-    // limit new value to 0-100
-    socValue.value = Math.min(Math.max(0, newValue), 100);
-  },
-});
-
-const socSliderMarker = {
-  0: '0%',
-  50: '50%',
-  100: '100%',
-};
-
-const confirmChanges = () => {
-  mqttStore.chargePointConnectedVehicleSocManual(props.chargePointId).value =
-    socInputValue.value;
-};
-
-const cancelChanges = () => {
-  // Reset temporary soc value
-  socValue.value = undefined;
-};
-</script>
diff --git a/packages/modules/web_themes/koala/source/src/components/ManualSocDialog.vue b/packages/modules/web_themes/koala/source/src/components/ManualSocDialog.vue
index dc91a4fa23..4374c5e414 100644
--- a/packages/modules/web_themes/koala/source/src/components/ManualSocDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ManualSocDialog.vue
@@ -68,7 +68,7 @@
 
 <script setup lang="ts">
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 const mqttStore = useMqttStore();
 
@@ -96,6 +96,12 @@ const visible = computed({
 
 const socValue = ref<number | undefined>(undefined);
 
+watch(visible, (isVisible) => {
+  if (isVisible) {
+    socValue.value = undefined;
+  }
+});
+
 const socInputValue = computed({
   get: () => {
     return (
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 70e061ce02..86db928291 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
@@ -208,9 +208,8 @@ export interface VehicleChargeTarget {
 }
 
 export interface CalculatedSocState {
-  imported_start: number;
-  manual_soc?: number;
-  soc_start: number;
+  last_imported?: number;
+  manual_soc?: number | null;
 }
 
 export interface GraphDataPoint {
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 69dcb0dcee..a3f40bc5a5 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
@@ -2564,44 +2564,6 @@ export const useMqttStore = defineStore('mqtt', () => {
     });
   };
 
-  /**
-   * Get or set the manual SoC for a vehicle connected to a charge point
-   * @param chargePointId charge point id
-   * @returns number | undefined
-   */
-  const chargePointConnectedVehicleSocManual = (chargePointId: number) => {
-    return computed({
-      get() {
-        const vehicleInfo =
-          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;
-        return socState?.manual_soc ?? socState?.soc_start ?? 0;
-      },
-      set(newValue: number) {
-        const vehicleInfo =
-          chargePointConnectedVehicleInfo(chargePointId).value;
-        if (!vehicleInfo) {
-          console.warn('No vehicle connected to charge point', chargePointId);
-          return;
-        }
-        const vehicleId = vehicleInfo.id;
-        doPublish(
-          `openWB/set/vehicle/${vehicleId}/soc_module/calculated_soc_state/manual_soc`,
-          newValue,
-        );
-        // Also update the charge point connected vehicle soc
-        const cpTopic = `openWB/chargepoint/${chargePointId}/get/connected_vehicle/soc`;
-        const cpSoc = getValue.value(cpTopic) as { soc?: number };
-        if (cpSoc && cpSoc.soc !== undefined) {
-          updateTopic(cpTopic, newValue, 'soc', true);
-        }
-      },
-    });
-  };
-
   /**
    * Get the charge point connected vehicle SoC type identified by the charge point id
    * @param chargePointId charge point id
@@ -3014,7 +2976,10 @@ export const useMqttStore = defineStore('mqtt', () => {
         const topic = `openWB/vehicle/${vehicleId}/soc_module/calculated_soc_state`;
         const socState = getValue.value(topic) as
           CalculatedSocState | undefined;
-        return socState?.manual_soc ?? socState?.soc_start ?? 0;
+        const currentSoc = getValue.value(
+          `openWB/vehicle/${vehicleId}/get/soc`,
+        ) as number | undefined;
+        return socState?.manual_soc ?? currentSoc ?? 0;
       },
       set(newValue: number) {
         doPublish(
@@ -4927,7 +4892,6 @@ export const useMqttStore = defineStore('mqtt', () => {
     vehicleTimeChargingPlanWeeklyDays,
     vehicleTimeChargingPlanDcPower,
     chargePointConnectedVehicleSocType,
-    chargePointConnectedVehicleSocManual,
     // Battery data
     batteryConfigured,
     batteryIds,

From 53a0ecb0a390fd382bb1121c4f2815de5ce907ee Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Wed, 28 Oct 2026 07:37:51 +0100
Subject: [PATCH 2/2] remove watcher

---
 .../source/src/components/ManualSocDialog.vue   | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ManualSocDialog.vue b/packages/modules/web_themes/koala/source/src/components/ManualSocDialog.vue
index 4374c5e414..5659baf1b7 100644
--- a/packages/modules/web_themes/koala/source/src/components/ManualSocDialog.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ManualSocDialog.vue
@@ -68,7 +68,7 @@
 
 <script setup lang="ts">
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { computed, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 
 const mqttStore = useMqttStore();
 
@@ -96,12 +96,6 @@ const visible = computed({
 
 const socValue = ref<number | undefined>(undefined);
 
-watch(visible, (isVisible) => {
-  if (isVisible) {
-    socValue.value = undefined;
-  }
-});
-
 const socInputValue = computed({
   get: () => {
     return (
@@ -122,13 +116,18 @@ const socSliderMarker = {
   100: '100%',
 };
 
+const reset = () => {
+  // Reset temporary soc value
+  socValue.value = undefined;
+};
+
 const confirmChanges = () => {
   mqttStore.vehicleSocManualValue(props.vehicleId, props.chargePointId).value =
     socInputValue.value;
+  reset();
 };
 
 const cancelChanges = () => {
-  // Reset temporary soc value
-  socValue.value = undefined;
+  reset();
 };
 </script>