From 5a60403fd1fb2d6074b4d28b5713c650822e02eb Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 6 Jan 2026 11:43:47 +0100
Subject: [PATCH] Charge point inputs displayed according to charge type AC/DC

---
 .../src/components/ChargePointEcoSettings.vue | 41 ++++++----
 .../components/ChargePointInstantSettings.vue | 39 +++++----
 .../src/components/ChargePointPvSettings.vue  | 72 ++++++++++-------
 .../ChargePointScheduledPlanDetails.vue       | 79 +++++++++++--------
 .../ChargePointTimeChargingPlanDetails.vue    | 45 +++++++----
 .../koala/source/src/stores/mqtt-store.ts     | 19 +++++
 6 files changed, 187 insertions(+), 108 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
index 24e026095c..e1423af0f2 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
@@ -1,5 +1,6 @@
 <template>
   <SliderStandard
+    v-if="acChargingEnabled"
     title="Minimaler Dauerstrom unter der Preisgrenze"
     :min="6"
     :max="16"
@@ -10,7 +11,7 @@
   />
 
   <SliderStandard
-    v-if="dcCharging"
+    v-if="dcChargingEnabled"
     title="Minimaler Dauerleistung unter der Preisgrenze"
     :min="4"
     :max="300"
@@ -20,19 +21,23 @@
     class="q-mt-md"
   />
 
-  <div class="text-subtitle2 q-mt-sm q-mr-sm">Anzahl Phasen bei Überschuss</div>
-  <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-    <q-btn-group class="col">
-      <q-btn
-        v-for="option in phaseOptions"
-        :key="option.value"
-        :color="numPhases.value === option.value ? 'primary' : 'grey'"
-        :label="option.label"
-        size="sm"
-        class="col"
-        @click="numPhases.value = option.value"
-      />
-    </q-btn-group>
+  <div v-if="acChargingEnabled">
+    <div class="text-subtitle2 q-mt-sm q-mr-sm">
+      Anzahl Phasen bei Überschuss
+    </div>
+    <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
+      <q-btn-group class="col">
+        <q-btn
+          v-for="option in phaseOptions"
+          :key="option.value"
+          :color="numPhases.value === option.value ? 'primary' : 'grey'"
+          :label="option.label"
+          size="sm"
+          class="col"
+          @click="numPhases.value = option.value"
+        />
+      </q-btn-group>
+    </div>
   </div>
 
   <div class="text-subtitle2 q-mt-sm q-mr-sm">Begrenzung</div>
@@ -187,7 +192,13 @@ const current = computed(() =>
   mqttStore.chargePointConnectedVehicleEcoChargeCurrent(props.chargePointId),
 );
 
-const dcCharging = computed(() => mqttStore.dcChargingEnabled);
+const dcChargingEnabled = computed(
+  () => mqttStore.chargePointChargeType(props.chargePointId).value === 'DC',
+);
+
+const acChargingEnabled = computed(
+  () => mqttStore.chargePointChargeType(props.chargePointId).value === 'AC',
+);
 
 const dcPower = computed(() =>
   mqttStore.chargePointConnectedVehicleEcoChargeDcPower(props.chargePointId),
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
index 04d1feed04..be28e25c9c 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInstantSettings.vue
@@ -1,5 +1,6 @@
 <template>
   <SliderStandard
+    v-if="acChargingEnabled"
     title="Stromstärke"
     :min="6"
     :max="32"
@@ -8,7 +9,7 @@
     class="q-mt-sm"
   />
   <SliderStandard
-    v-if="dcCharging"
+    v-if="dcChargingEnabled"
     title="DC-Sollleistung"
     :min="4"
     :max="300"
@@ -17,19 +18,21 @@
     class="q-mt-sm"
   />
 
-  <div class="text-subtitle2 q-mt-sm q-mr-sm">Anzahl Phasen</div>
-  <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-    <q-btn-group class="col">
-      <q-btn
-        v-for="option in phaseOptions"
-        :key="option.value"
-        :color="numPhases.value === option.value ? 'primary' : 'grey'"
-        :label="option.label"
-        size="sm"
-        class="col"
-        @click="numPhases.value = option.value"
-      />
-    </q-btn-group>
+  <div v-if="acChargingEnabled">
+    <div class="text-subtitle2 q-mt-sm q-mr-sm">Anzahl Phasen</div>
+    <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
+      <q-btn-group class="col">
+        <q-btn
+          v-for="option in phaseOptions"
+          :key="option.value"
+          :color="numPhases.value === option.value ? 'primary' : 'grey'"
+          :label="option.label"
+          size="sm"
+          class="col"
+          @click="numPhases.value = option.value"
+        />
+      </q-btn-group>
+    </div>
   </div>
   <div class="text-subtitle2 q-mt-sm q-mr-sm">Begrenzung</div>
   <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
@@ -104,7 +107,13 @@ const instantChargeCurrent = computed(() =>
   ),
 );
 
-const dcCharging = computed(() => mqttStore.dcChargingEnabled);
+const dcChargingEnabled = computed(
+  () => mqttStore.chargePointChargeType(props.chargePointId).value === 'DC',
+);
+
+const acChargingEnabled = computed(
+  () => mqttStore.chargePointChargeType(props.chargePointId).value === 'AC',
+);
 
 const instantChargeCurrentDc = computed(() => {
   return mqttStore.chargePointConnectedVehicleInstantDcChargePower(
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
index db8851b10a..0de56f1b32 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointPvSettings.vue
@@ -1,5 +1,6 @@
 <template>
   <SliderStandard
+    v-if="acChargingEnabled"
     title="Minimaler Dauerstrom"
     :min="0"
     :max="16"
@@ -12,7 +13,7 @@
   />
 
   <SliderStandard
-    v-if="dcCharging"
+    v-if="dcChargingEnabled"
     title="Minimaler DC-Dauerleistung"
     :min="0"
     :max="300"
@@ -22,19 +23,21 @@
     class="q-mt-md"
   />
 
-  <div class="text-subtitle2 q-mt-sm q-mr-sm">Anzahl Phasen</div>
-  <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-    <q-btn-group class="col">
-      <q-btn
-        v-for="option in phaseOptions"
-        :key="option.value"
-        :color="numPhases.value === option.value ? 'primary' : 'grey'"
-        :label="option.label"
-        size="sm"
-        class="col"
-        @click="numPhases.value = option.value"
-      />
-    </q-btn-group>
+  <div v-if="acChargingEnabled">
+    <div class="text-subtitle2 q-mt-sm q-mr-sm">Anzahl Phasen</div>
+    <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
+      <q-btn-group class="col">
+        <q-btn
+          v-for="option in phaseOptions"
+          :key="option.value"
+          :color="numPhases.value === option.value ? 'primary' : 'grey'"
+          :label="option.label"
+          size="sm"
+          class="col"
+          @click="numPhases.value = option.value"
+        />
+      </q-btn-group>
+    </div>
   </div>
 
   <div class="text-subtitle2 q-mt-sm q-mr-sm">Begrenzung</div>
@@ -82,6 +85,7 @@
       class="q-mt-md"
     />
     <SliderStandard
+      v-if="acChargingEnabled"
       title="Mindest-SoC-Strom"
       :min="6"
       :max="32"
@@ -91,7 +95,7 @@
     />
 
     <SliderStandard
-      v-if="dcCharging"
+      v-if="dcChargingEnabled"
       title="DC Mindest-SoC-Leistung"
       :min="0"
       :max="300"
@@ -100,19 +104,23 @@
       v-model="pvMinDcMinSocPower.value"
       class="q-mt-md"
     />
-    <div class="text-subtitle2 q-mt-sm q-mr-sm">Anzahl Phasen Mindest-SoC</div>
-    <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-      <q-btn-group class="col">
-        <q-btn
-          v-for="option in phaseOptionsMinSoc"
-          :key="option.value"
-          :color="numPhasesMinSoc.value === option.value ? 'primary' : 'grey'"
-          :label="option.label"
-          size="sm"
-          class="col"
-          @click="numPhasesMinSoc.value = option.value"
-        />
-      </q-btn-group>
+    <div v-if="acChargingEnabled">
+      <div class="text-subtitle2 q-mt-sm q-mr-sm">
+        Anzahl Phasen Mindest-SoC
+      </div>
+      <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
+        <q-btn-group class="col">
+          <q-btn
+            v-for="option in phaseOptionsMinSoc"
+            :key="option.value"
+            :color="numPhasesMinSoc.value === option.value ? 'primary' : 'grey'"
+            :label="option.label"
+            size="sm"
+            class="col"
+            @click="numPhasesMinSoc.value = option.value"
+          />
+        </q-btn-group>
+      </div>
     </div>
   </div>
 
@@ -169,7 +177,13 @@ const pvMinCurrent = computed(() =>
   mqttStore.chargePointConnectedVehiclePvChargeMinCurrent(props.chargePointId),
 );
 
-const dcCharging = computed(() => mqttStore.dcChargingEnabled);
+const dcChargingEnabled = computed(
+  () => mqttStore.chargePointChargeType(props.chargePointId).value === 'DC',
+);
+
+const acChargingEnabled = computed(
+  () => mqttStore.chargePointChargeType(props.chargePointId).value === 'AC',
+);
 
 const pvMinDcPower = computed(() =>
   mqttStore.chargePointConnectedVehiclePvDcChargePower(props.chargePointId),
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanDetails.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanDetails.vue
index 36c6671c0d..289533c5e5 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanDetails.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanDetails.vue
@@ -103,15 +103,16 @@
       </div>
       <q-separator />
       <SliderStandard
+        v-if="acChargingEnabled"
         class="q-my-sm"
-        :title="planDcChargingEnabled ? 'Ladestrom (AC)' : 'Ladestrom'"
+        title="Ladestrom"
         :min="6"
         :max="32"
         unit="A"
         v-model="planCurrent.value"
       />
       <q-input
-        v-if="planDcChargingEnabled"
+        v-if="dcChargingEnabled"
         v-model="planDcPower.value"
         label="Ladeleistung (DC)"
         class="col q-mb-md"
@@ -120,35 +121,43 @@
           <div class="text-body2">kW</div>
         </template>
       </q-input>
-      <div class="text-subtitle2 q-mr-sm">Anzahl Phasen Zielladen</div>
-      <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-        <q-btn-group class="col">
-          <q-btn
-            v-for="option in phaseOptions"
-            :key="option.value"
-            :color="planNumPhases.value === option.value ? 'primary' : 'grey'"
-            :label="option.label"
-            size="sm"
-            class="col"
-            @click="planNumPhases.value = option.value"
-          />
-        </q-btn-group>
-      </div>
-      <div class="text-subtitle2 q-mt-md q-mr-sm">
-        Anzahl Phasen bei PV-Überschuss
-      </div>
-      <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-        <q-btn-group class="col">
-          <q-btn
-            v-for="option in phaseOptions"
-            :key="option.value"
-            :color="planNumPhasesPv.value === option.value ? 'primary' : 'grey'"
-            :label="option.label"
-            size="sm"
-            class="col"
-            @click="planNumPhasesPv.value = option.value"
-          />
-        </q-btn-group>
+      <div v-if="acChargingEnabled">
+        <div class="text-subtitle2 q-mr-sm">Anzahl Phasen Zielladen</div>
+        <div
+          class="row items-center justify-center q-ma-none q-pa-none no-wrap"
+        >
+          <q-btn-group class="col">
+            <q-btn
+              v-for="option in phaseOptions"
+              :key="option.value"
+              :color="planNumPhases.value === option.value ? 'primary' : 'grey'"
+              :label="option.label"
+              size="sm"
+              class="col"
+              @click="planNumPhases.value = option.value"
+            />
+          </q-btn-group>
+        </div>
+        <div class="text-subtitle2 q-mt-md q-mr-sm">
+          Anzahl Phasen bei PV-Überschuss
+        </div>
+        <div
+          class="row items-center justify-center q-ma-none q-pa-none no-wrap"
+        >
+          <q-btn-group class="col">
+            <q-btn
+              v-for="option in phaseOptions"
+              :key="option.value"
+              :color="
+                planNumPhasesPv.value === option.value ? 'primary' : 'grey'
+              "
+              :label="option.label"
+              size="sm"
+              class="col"
+              @click="planNumPhasesPv.value = option.value"
+            />
+          </q-btn-group>
+        </div>
       </div>
       <div class="text-subtitle2 q-mt-sm q-mr-sm">Ziel</div>
       <q-btn-group class="full-width">
@@ -402,7 +411,13 @@ const chargePointConnectedVehicleBidiEnabled = computed(
     mqttStore.chargePointConnectedVehicleBidiEnabled(props.chargePointId).value,
 );
 
-const planDcChargingEnabled = computed(() => mqttStore.dcChargingEnabled);
+const dcChargingEnabled = computed(
+  () => mqttStore.chargePointChargeType(props.chargePointId).value === 'DC',
+);
+
+const acChargingEnabled = computed(
+  () => mqttStore.chargePointChargeType(props.chargePointId).value === 'AC',
+);
 
 const planDcPower = computed(() =>
   mqttStore.vehicleScheduledChargingPlanDcPower(
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlanDetails.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlanDetails.vue
index a71e3f4aae..1f0e314063 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlanDetails.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlanDetails.vue
@@ -91,15 +91,16 @@
         </div>
       </div>
       <SliderStandard
+        v-if="acChargingEnabled"
         class="q-mb-sm"
-        :title="planDcChargingEnabled ? 'Ladestrom (AC)' : 'Ladestrom'"
+        title="Ladestrom"
         :min="6"
         :max="32"
         unit="A"
         v-model="planCurrent.value"
       />
       <q-input
-        v-if="planDcChargingEnabled"
+        v-if="dcChargingEnabled"
         v-model="planDcPower.value"
         label="Ladeleistung (DC)"
         class="col q-mb-sm"
@@ -108,19 +109,23 @@
           <div class="text-body2">kW</div>
         </template>
       </q-input>
-      <div class="text-subtitle2 q-mr-sm">Anzahl Phasen</div>
-      <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-        <q-btn-group class="col">
-          <q-btn
-            v-for="option in phaseOptions"
-            :key="option.value"
-            :color="planNumPhases.value === option.value ? 'primary' : 'grey'"
-            :label="option.label"
-            size="sm"
-            class="col"
-            @click="planNumPhases.value = option.value"
-          />
-        </q-btn-group>
+      <div v-if="acChargingEnabled">
+        <div class="text-subtitle2 q-mr-sm">Anzahl Phasen</div>
+        <div
+          class="row items-center justify-center q-ma-none q-pa-none no-wrap"
+        >
+          <q-btn-group class="col">
+            <q-btn
+              v-for="option in phaseOptions"
+              :key="option.value"
+              :color="planNumPhases.value === option.value ? 'primary' : 'grey'"
+              :label="option.label"
+              size="sm"
+              class="col"
+              @click="planNumPhases.value = option.value"
+            />
+          </q-btn-group>
+        </div>
       </div>
       <div class="text-subtitle2 q-mt-sm">Begrenzung</div>
       <q-btn-group class="full-width">
@@ -281,12 +286,18 @@ const planNumPhases = computed(() =>
   mqttStore.vehicleTimeChargingPlanPhases(props.chargePointId, props.plan.id),
 );
 
-const planDcChargingEnabled = computed(() => mqttStore.dcChargingEnabled);
-
 const planDcPower = computed(() =>
   mqttStore.vehicleTimeChargingPlanDcPower(props.chargePointId, props.plan.id),
 );
 
+const dcChargingEnabled = computed(
+  () => mqttStore.chargePointChargeType(props.chargePointId).value === 'DC',
+);
+
+const acChargingEnabled = computed(
+  () => mqttStore.chargePointChargeType(props.chargePointId).value === 'AC',
+);
+
 const removeTimeChargingPlan = (planId: number) => {
   mqttStore.removeTimeChargingPlanForChargePoint(props.chargePointId, planId);
   emit('close');
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 42aec16c82..76456186b5 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
@@ -1006,6 +1006,24 @@ export const useMqttStore = defineStore('mqtt', () => {
     });
   };
 
+  /**
+   * Get charge point charge type (AC/DC) identified by the charge point id
+   * @param chargePointId charge point id
+   * @returns string | undefined
+   */
+  const chargePointChargeType = (chargePointId: number) =>
+    computed(() => {
+      const templateId = getValue.value(
+        `openWB/chargepoint/${chargePointId}/config`,
+        'template',
+      ) as number | undefined;
+      if (templateId === undefined) return undefined;
+      return getValue.value(
+        `openWB/chargepoint/template/${templateId}`,
+        'charging_type',
+      ) as string | undefined;
+    });
+
   /**
    * Get boolean value for DC charging enabled / disabled
    * @returns boolean
@@ -3606,6 +3624,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     chargePointStateMessage,
     chargePointFaultState,
     chargePointFaultMessage,
+    chargePointChargeType,
     dcChargingEnabled,
     chargePointConnectedVehicleInfo,
     chargePointConnectedVehicleForceSocUpdate,