Koala Charge point inputs displayed according to charge type AC/DC

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),

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(

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),

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(