Update slider values / update target readouts in charge point card

packages/modules/web_themes/standard/source/src/components/ChargePoint.vue

@@ -115,16 +115,23 @@ const targetSoc = computed<number | undefined>(() => {
     return mqttStore.chargePointConnectedVehicleInstantChargeLimitSoC(
       props.chargePointId,
     )?.value;
+  } else if (chargeMode === 'pv_charging') {
+    return mqttStore.chargePointConnectedVehiclePVChargeMaxSoc(
+      props.chargePointId,
+    ).value;
   } else {
     return undefined;
   }
 });
 
 const targetTime = computed(() => {
+  const chargeMode = mqttStore.chargePointConnectedVehicleChargeMode(
+    props.chargePointId,
+  ).value;
   const target = mqttStore.vehicleScheduledChargingTarget(
     props.chargePointId,
   ).value;
-  if (!target || !target.time) {
+  if (!target || !target.time || chargeMode !== 'scheduled_charging') {
     return 'keine';
   }
   return target.time;

packages/modules/web_themes/standard/source/src/components/ChargePointPVSettings.vue

@@ -1,21 +1,25 @@
 <template>
   <SliderStandard
     title="Minimaler Dauerstrom"
-    :min="0"
+    :min="-1"
     :max="16"
+    :step="1"
     unit="A"
+    :off-value-left="-1"
+    :discrete-values="[-1, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]"
     v-model="pvMinCurrent.value"
-    class="q-mt-md"
+    class="q-mt-md q-ml-sm"
   />
 
   <SliderStandard
     title="Mindest-SoC für das Fahrzeug"
     :min="0"
-    :max="95"
+    :max="100"
     :step="5"
     unit="%"
+    :off-value-left="0"
     v-model="pvMinSoc.value"
-    class="q-mt-md"
+    class="q-mt-md q-ml-sm"
   />
 
   <SliderStandard
@@ -24,17 +28,22 @@
     :max="32"
     unit="A"
     v-model="pvMinSocCurrent.value"
-    class="q-mt-md"
+    class="q-mt-md q-ml-sm"
   />
 
   <SliderStandard
     title="SoC-Limit für das Fahrzeug"
     :min="0"
-    :max="100"
-    :step="5"
+    :max="101"
+    :step="1"
     unit="%"
+    :discrete-values="[
+      0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90,
+      95, 100, 101,
+    ]"
+    :off-value-right="101"
     v-model="pvMaxSocLimit.value"
-    class="q-mt-md"
+    class="q-mt-md q-ml-sm"
   />
 
   <div class="row items-center q-ma-none q-pa-none no-wrap">

packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue

@@ -41,7 +41,7 @@
       <div v-if="planLimitSelected.value === 'soc'" class="q-mt-md">
         <SliderStandard
           title="Fahrzeug-SoC zum Zielzeitpunkt"
-          :min="0"
+          :min="5"
           :max="100"
           :step="5"
           unit="%"
@@ -50,7 +50,7 @@
         />
         <SliderStandard
           title="Fahrzeug-SoC mit Überschuss"
-          :min="0"
+          :min="5"
           :max="100"
           :step="5"
           unit="%"

packages/modules/web_themes/standard/source/src/components/SliderStandard.vue

@@ -6,8 +6,10 @@
     <div class="row">
       <q-slider
         v-model="value"
-        :min="props.min"
-        :max="props.max"
+        :min="props.discreteValues ? 0 : props.min"
+        :max="
+          props.discreteValues ? props.discreteValues.length - 1 : props.max
+        "
         :step="props.step"
         color="primary"
         style="width: 75%"
@@ -19,7 +21,7 @@
         @change="updateValue"
       />
       <div class="q-ml-md q-mt-xs items-center no-wrap" :class="myClass">
-        {{ value }} {{ props.unit }}
+        {{ displayValue }} {{ displayUnit }}
       </div>
     </div>
   </div>
@@ -56,6 +58,18 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  offValueRight: {
+    type: Number,
+    default: 105,
+  },
+  offValueLeft: {
+    type: Number,
+    default: -1,
+  },
+  discreteValues: {
+    type: Array as () => number[],
+    default: undefined,
+  },
 });
 
 const emit = defineEmits<{
@@ -68,25 +82,72 @@ const updateTimeout = ref<NodeJS.Timeout | null>(null);
 const updatePending = computed(() => {
   return tempValue.value !== props.modelValue;
 });
-
 const value = computed({
-  get: () => tempValue.value,
+  get: () => {
+    if (props.discreteValues) {
+      const index = props.discreteValues.indexOf(
+        tempValue.value ?? props.discreteValues[0],
+      );
+      return index >= 0 ? index : 0;
+    }
+    return tempValue.value;
+  },
   set: (newValue: number) => {
     if (updateTimeout.value) {
       clearTimeout(updateTimeout.value);
     }
-    tempValue.value = newValue;
+    if (props.discreteValues) {
+      tempValue.value = props.discreteValues[newValue];
+    } else {
+      tempValue.value = newValue;
+    }
   },
 });
 
 const updateValue = (newValue: number) => {
   if (updatePending.value) {
+    if (updateTimeout.value) {
+      clearTimeout(updateTimeout.value);
+    }
     updateTimeout.value = setTimeout(() => {
-      emit('update:model-value', newValue);
+      emit(
+        'update:model-value',
+        props.discreteValues ? props.discreteValues[newValue] : newValue,
+      );
     }, 2000);
   }
 };
 
+const displayValue = computed(() => {
+  const currentValue =
+    props.discreteValues && value.value !== undefined
+      ? props.discreteValues[value.value]
+      : value.value;
+
+  if (
+    currentValue === props.offValueLeft ||
+    currentValue === props.offValueRight
+  ) {
+    return 'Aus';
+  }
+  return currentValue;
+});
+
+const displayUnit = computed(() => {
+  const currentValue =
+    props.discreteValues && value.value !== undefined
+      ? props.discreteValues[value.value]
+      : value.value;
+
+  if (
+    currentValue === props.offValueLeft ||
+    currentValue === props.offValueRight
+  ) {
+    return '';
+  }
+  return props.unit;
+});
+
 watch(
   () => props.modelValue,
   (newValue) => {