Add scheduled charging settings to settings dialog

packages/modules/web_themes/standard/source/src/components/ChargePointLimitSettings.vue → packages/modules/web_themes/standard/source/src/components/ChargePointInstantSettings.vue

@@ -1,4 +1,14 @@
 <template>
+  <SliderStandard
+    title="Stromstärke"
+    :min="6"
+    :max="32"
+    unit="A"
+    v-model="instantChargeCurrent.value"
+    class="q-mt-sm"
+  />
+  <!-- <SliderQuasar class="q-mt-sm" :readonly="false" /> -->
+  <div class="text-subtitle2 q-mr-sm">Begrenzung</div>
   <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
     <q-btn-group push rounded class="q-mt-md col">
       <q-btn
@@ -53,6 +63,12 @@ const limitModes = [
   { value: 'amount', label: 'Energiemenge', color: 'secondary' },
 ];
 
+const instantChargeCurrent = computed(() =>
+  mqttStore.chargePointConnectedVehicleInstantChargeCurrent(
+    props.chargePointId,
+  ),
+);
+
 const limitMode = computed(() =>
   mqttStore.chargePointConnectedVehicleInstantChargeLimit(props.chargePointId),
 );

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

@@ -0,0 +1,81 @@
+<template>
+  <SliderStandard
+    title="Minimaler Dauerstrom"
+    :min="0"
+    :max="16"
+    unit="A"
+    v-model="pvMinCurrent.value"
+    class="q-mt-md"
+  />
+
+  <SliderStandard
+    title="Mindest-SoC für das Fahrzeug"
+    :min="0"
+    :max="95"
+    :step="5"
+    unit="%"
+    v-model="pvMinSoc.value"
+    class="q-mt-md"
+  />
+
+  <SliderStandard
+    title="Mindest-SoC-Strom"
+    :min="6"
+    :max="32"
+    unit="A"
+    v-model="pvMinSocCurrent.value"
+    class="q-mt-md"
+  />
+
+  <SliderStandard
+    title="SoC-Limit für das Fahrzeug"
+    :min="0"
+    :max="100"
+    :step="5"
+    unit="%"
+    v-model="pvMaxSocLimit.value"
+    class="q-mt-md"
+  />
+
+  <div class="row items-center q-ma-none q-pa-none no-wrap">
+    <div class="text-subtitle2 q-mr-sm">Einspeisegrenze beachten</div>
+    <div>
+      <ToggleStandard v-model="feedInLimit.value" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMqttStore } from 'src/stores/mqtt-store';
+import SliderStandard from './SliderStandard.vue';
+import ToggleStandard from './ToggleStandard.vue';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  chargePointId: number;
+}>();
+
+const mqttStore = useMqttStore();
+
+const pvMinCurrent = computed(() =>
+  mqttStore.chargePointConnectedVehiclePVChargeMinCurrent(props.chargePointId),
+);
+
+const pvMinSoc = computed(() =>
+  mqttStore.chargePointConnectedVehiclePVChargeMinSoc(props.chargePointId),
+);
+
+const pvMinSocCurrent = computed(() =>
+  mqttStore.chargePointConnectedVehiclePVChargeMinSocCurrent(
+    props.chargePointId,
+  ),
+);
+
+const pvMaxSocLimit = computed(() =>
+  mqttStore.chargePointConnectedVehiclePVChargeMaxSoc(props.chargePointId),
+);
+
+const feedInLimit = computed(() =>
+  mqttStore.chargePointConnectedVehiclePVChargeFeedInLimit(props.chargePointId),
+);
+</script>

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

@@ -0,0 +1,75 @@
+<template>
+  <div
+    class="row items-center justify-between text-subtitle2 full-width no-wrap"
+    @click.stop
+  >
+    <div class="row" @click="togglePlanActive(plan.id)">
+      <q-icon
+        :name="
+          plan.frequency.selected === 'daily'
+            ? 'calendar_today'
+            : plan.frequency.selected === 'weekly'
+              ? 'calendar_month'
+              : 'event'
+        "
+        size="sm"
+        class="q-mr-xs"
+      />
+      <div class="q-mr-xs">
+        {{
+          plan.frequency.selected === 'daily'
+            ? 'täglich'
+            : plan.frequency.selected === 'weekly'
+              ? plan.frequency.selected_days
+                ? plan.frequency.selected_days.join(', ')
+                : ''
+              : 'einmalig'
+        }}
+      </div>
+      <q-icon name="schedule" size="sm" class="q-mr-xs" />
+      <div class="q-mr-xs">{{ plan.time }}</div>
+      <q-icon
+        :name="plan.limit.selected === 'soc' ? 'battery_full' : 'bolt'"
+        size="sm"
+        class="q-mr-xs"
+      />
+      <div v-if="plan.limit.selected === 'soc'" class="q-mr-xs">
+        {{ plan.limit.soc_scheduled }}%
+      </div>
+      <div v-if="plan.limit.selected === 'amount'" class="q-mr-xs">
+        {{ plan.limit.amount ? plan.limit.amount / 1000 : '' }}kWh
+      </div>
+    </div>
+    <q-btn
+      icon="delete"
+      flat
+      round
+      size="md"
+      color="white"
+      @click="
+        mqttStore.vehicleDeleteScheduledChargingPlan(
+          props.chargePointId,
+          plan.id,
+        )
+      "
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMqttStore } from 'src/stores/mqtt-store';
+import { type ScheduledChargingPlan } from '../stores/mqtt-store-model';
+
+const props = defineProps<{
+  chargePointId: number;
+  plan: ScheduledChargingPlan;
+}>();
+
+const mqttStore = useMqttStore();
+
+const togglePlanActive = (planId: string) =>
+  mqttStore.vehicleToggleScheduledChargingPlanActive(
+    props.chargePointId,
+    planId,
+  );
+</script>