Add schedule for planner

assets/js/components/ChargingPlan.vue

@@ -77,8 +77,8 @@
 								<ChargingPlanSettings
 									v-if="departureTabActive"
 									v-bind="chargingPlanSettingsProps"
-									@plan-updated="updatePlan"
-									@plan-removed="removePlan"
+									@static-plan-updated="updatePlan"
+									@static-plan-removed="removePlan"
 								/>
 								<ChargingPlanArrival
 									v-if="arrivalTabActive"

assets/js/components/ChargingPlanRepetitiveSettingsEntries.vue

@@ -0,0 +1,98 @@
+<template>
+	<div v-for="(plan, index) in plans" :key="index">
+		<ChargingPlanRepetitiveSettingsEntry
+			class="mb-4"
+			:id="index"
+			v-bind="plan"
+			:socBasedPlanning="socBasedPlanning"
+			:rangePerSoc="rangePerSoc"
+			@repetitive-plan-updated="updateRepetitivePlan"
+			@repetitive-plan-removed="removeRepetitivePlan"
+		/>
+	</div>
+	<div class="d-flex align-items-baseline">
+		<button
+			type="button"
+			class="d-flex btn btn-sm btn-outline-primary border-0 ps-0 align-items-baseline"
+			data-testid="repetitive-plan-add"
+			@click="addRepetitivePlan"
+		>
+			<shopicon-regular-plus size="s" class="flex-shrink-0 me-2"></shopicon-regular-plus>
+			<p class="mb-0">{{ $t("main.chargingPlan.addRepetitivePlan") }}</p>
+		</button>
+		<button
+			v-if="hasDataChanged"
+			type="button"
+			class="btn btn-sm btn-outline-primary ms-3 border-0 text-decoration-underline"
+			data-testid="plan-apply"
+			@click="update"
+		>
+			{{ $t("main.chargingPlan.update") }}
+		</button>
+	</div>
+</template>
+
+<script>
+import api from "../api";
+import ChargingPlanRepetitiveSettingsEntry from "./ChargingPlanRepetitiveSettingsEntry.vue";
+
+const DEFAULT_WEEKDAYS = [0];
+const DEFAULT_TARGET_TIME = "12:00";
+const DEFAULT_TARGET_SOC = 80;
+
+export default {
+	name: "ChargingPlanRepetitiveSettingsEntries",
+	components: {
+		ChargingPlanRepetitiveSettingsEntry,
+	},
+	props: {
+		id: Number,
+		socBasedPlanning: Boolean,
+		rangePerSoc: Number,
+	},
+	data: function () {
+		return {
+			plans: [],
+			initialPlans: [],
+		};
+	},
+	mounted() {
+		this.fetchRepetitivePlans();
+	},
+	computed: {
+		hasDataChanged: function () {
+			return JSON.stringify(this.initialPlans) !== JSON.stringify(this.plans);
+		},
+	},
+	methods: {
+		fetchRepetitivePlans: async function () {
+			let response = await api.get(`/loadpoints/${this.id}/plan/repetitive`);
+			this.plans = response.data.result;
+			this.initialPlans = [...response.data.result]; // clone array
+		},
+		addRepetitivePlan: function () {
+			this.plans.push({
+				weekdays: DEFAULT_WEEKDAYS,
+				time: DEFAULT_TARGET_TIME,
+				soc: DEFAULT_TARGET_SOC,
+				active: false,
+			});
+		},
+		update: async function () {
+			// TODO: update data
+			this.initialPlans = [...this.plans];
+		},
+		updateRepetitivePlan: function (newData) {
+			this.plans[newData.id] = {
+				weekdays: newData.weekdays,
+				time: newData.time,
+				soc: newData.soc,
+				active: newData.active,
+			};
+		},
+		removeRepetitivePlan: function (index) {
+			this.plans.splice(index, 1);
+		},
+	},
+};
+</script>

assets/js/components/ChargingPlanRepetitiveSettingsEntry.vue

@@ -0,0 +1,182 @@
+<template>
+	<div>
+		<div class="row d-none d-lg-flex mb-2">
+			<div class="col-6 col-lg-4">
+				<label :for="formId('day')">
+					{{ $t("main.chargingPlan.weekdays") }}
+				</label>
+			</div>
+			<div class="col-6 col-lg-2">
+				<label :for="formId('time')">
+					{{ $t("main.chargingPlan.time") }}
+				</label>
+			</div>
+			<div class="col-6 col-lg-3">
+				<label :for="formId('goal')">
+					{{ $t("main.chargingPlan.goal") }}
+				</label>
+			</div>
+			<div class="col-6 col-lg-1">
+				<label :for="formId('active')"> {{ $t("main.chargingPlan.active") }} </label>
+			</div>
+			<div class="col-6 col-lg-1" />
+		</div>
+		<div class="row">
+			<div class="col-5 d-lg-none col-form-label">
+				<label :for="formId('day')">
+					{{ $t("main.chargingPlan.weekdays") }}
+				</label>
+			</div>
+			<div class="col-7 col-lg-4 mb-2 mb-lg-0">
+				<MultiSelect
+					id="chargingPlanWeekdaySelect"
+					:value="selectedWeekdays"
+					:options="dayOptions()"
+					:selectAllLabel="$t('main.chargingPlan.selectAll')"
+					@update:modelValue="changeSelectedWeekdays"
+				>
+					{{ weekdaysLabel }}
+				</MultiSelect>
+			</div>
+			<div class="col-5 d-lg-none col-form-label">
+				<label :for="formId('day')">
+					{{ $t("main.chargingPlan.time") }}
+				</label>
+			</div>
+			<div class="col-7 col-lg-2 mb-2 mb-lg-0">
+				<input
+					:id="formId('time')"
+					v-model="selectedTime"
+					type="time"
+					class="form-control mx-0"
+					:step="60 * 5"
+					data-testid="plan-time"
+					required
+					@change="update"
+				/>
+			</div>
+			<div class="col-5 d-lg-none col-form-label">
+				<label :for="formId('goal')">
+					{{ $t("main.chargingPlan.goal") }}
+				</label>
+			</div>
+			<div class="col-7 col-lg-3 mb-2 mb-lg-0">
+				<select
+					:id="formId('goal')"
+					v-model="selectedSoc"
+					class="form-select mx-0"
+					data-testid="plan-soc"
+					@change="update"
+				>
+					<option v-for="opt in socOptions" :key="opt.value" :value="opt.value">
+						{{ opt.name }}
+					</option>
+				</select>
+			</div>
+			<div class="col-5 d-lg-none col-form-label">
+				<label :for="formId('active')">
+					{{ $t("main.chargingPlan.active") }}
+				</label>
+			</div>
+			<div class="col-1 d-flex align-items-center justify-content-start">
+				<div class="form-check form-switch">
+					<input
+						:id="formId('active')"
+						class="form-check-input"
+						v-model="selectedActive"
+						type="checkbox"
+						role="switch"
+						data-testid="plan-active"
+						:checked="selectedActive"
+						@change="update"
+					/>
+				</div>
+			</div>
+			<div class="col-1 mx-auto d-flex align-items-center justify-content-start">
+				<button
+					type="button"
+					class="btn btn-sm btn-outline-secondary border-0"
+					data-testid="plan-delete"
+					@click="$emit('repetitive-plan-removed', id)"
+				>
+					<shopicon-regular-trash size="s" class="flex-shrink-0"></shopicon-regular-trash>
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import "@h2d2/shopicons/es/regular/trash";
+import { distanceUnit } from "../units";
+import MultiSelect from "./MultiSelect.vue";
+
+import formatter from "../mixins/formatter";
+
+export default {
+	name: "ChargingPlanRepetitiveSettingsEntry",
+	components: {
+		MultiSelect,
+	},
+	mixins: [formatter],
+	props: {
+		id: Number,
+		weekdays: { type: Array, default: () => [] },
+		time: String,
+		soc: Number,
+		active: Boolean,
+		socBasedPlanning: Boolean,
+		rangePerSoc: Number,
+	},
+	emits: ["repetitive-plan-updated", "repetitive-plan-removed"],
+	data: function () {
+		return {
+			selectedWeekdays: this.weekdays,
+			selectedTime: this.time,
+			selectedSoc: this.soc,
+			selectedActive: this.active,
+		};
+	},
+	computed: {
+		weekdaysLabel: function () {
+			return this.getShortenedWeekdaysLabel(this.selectedWeekdays);
+		},
+		socOptions: function () {
+			// a list of entries from 5 to 100 with a step of 5
+			return Array.from(Array(20).keys())
+				.map((i) => 5 + i * 5)
+				.map(this.socOption);
+		},
+	},
+	methods: {
+		changeSelectedWeekdays: function (weekdays) {
+			this.selectedWeekdays = weekdays;
+			this.update();
+		},
+		formId: function (name) {
+			return `chargingplan-${this.id}-${name}`;
+		},
+		socOption: function (value) {
+			const name = this.fmtSocOption(value, this.rangePerSoc, distanceUnit());
+			return { value, name };
+		},
+		dayOptions: function () {
+			return this.WEEKDAYS.map((weekday, index) => {
+				return {
+					name: this.$t(`main.chargingPlan.${weekday}`),
+					value: index,
+				};
+			});
+		},
+		update: function () {
+			this.$emit("repetitive-plan-updated", {
+				id: this.id,
+				weekdays: this.selectedWeekdays,
+				time: this.selectedTime,
+				soc: this.selectedSoc,
+				active: this.selectedActive,
+			});
+		},
+	},
+};
+</script>

assets/js/components/ChargingPlanSettings.vue

@@ -2,18 +2,27 @@
 	<div class="mt-4">
 		<div class="form-group d-lg-flex align-items-baseline justify-content-between">
 			<div class="container px-0 mb-3">
-				<ChargingPlanSettingsEntry
+				<ChargingPlanStaticSettingsEntry
 					:id="`${id}_0`"
 					class="mb-2"
 					v-bind="plans[0] || {}"
 					:capacity="capacity"
 					:range-per-soc="rangePerSoc"
 					:soc-per-kwh="socPerKwh"
 					:soc-based-planning="socBasedPlanning"
-					@plan-updated="(data) => updatePlan({ index: 0, ...data })"
-					@plan-removed="() => removePlan(0)"
+					@static-plan-updated="(data) => updateStaticPlan({ index: 0, ...data })"
+					@static-plan-removed="() => removeStaticPlan(0)"
 					@plan-preview="previewPlan"
 				/>
+				<div v-if="socBasedPlanning">
+					<hr class="w-75 mx-auto mt-5" />
+					<h5>
+						<div class="inner" data-testid="plan-preview-title">
+							{{ $t("main.chargingPlan.repetitivePlan") }}
+						</div>
+					</h5>
+					<ChargingPlanRepetitiveSettingsEntries :id="id" :rangePerSoc="rangePerSoc" />
+				</div>
 			</div>
 		</div>
 		<ChargingPlanWarnings v-bind="chargingPlanWarningsProps" class="mb-4" />
@@ -28,8 +37,10 @@
 </template>
 
 <script>
+import "@h2d2/shopicons/es/regular/plus";
 import ChargingPlanPreview from "./ChargingPlanPreview.vue";
-import ChargingPlanSettingsEntry from "./ChargingPlanSettingsEntry.vue";
+import ChargingPlanStaticSettingsEntry from "./ChargingPlanStaticSettingsEntry.vue";
+import ChargingPlanRepetitiveSettingsEntries from "./ChargingPlanRepetitiveSettingsEntries.vue";
 import ChargingPlanWarnings from "./ChargingPlanWarnings.vue";
 import formatter from "../mixins/formatter";
 import collector from "../mixins/collector";
@@ -41,7 +52,12 @@ const LAST_TARGET_TIME_KEY = "last_target_time";
 
 export default {
 	name: "ChargingPlanSettings",
-	components: { ChargingPlanPreview, ChargingPlanSettingsEntry, ChargingPlanWarnings },
+	components: {
+		ChargingPlanPreview,
+		ChargingPlanStaticSettingsEntry,
+		ChargingPlanRepetitiveSettingsEntries,
+		ChargingPlanWarnings,
+	},
 	mixins: [formatter, collector],
 	props: {
 		id: [String, Number],
@@ -63,7 +79,7 @@ export default {
 		vehicleLimitSoc: Number,
 		planOverrun: Number,
 	},
-	emits: ["plan-removed", "plan-updated"],
+	emits: ["static-plan-removed", "static-plan-updated"],
 	data: function () {
 		return {
 			tariff: {},
@@ -160,18 +176,18 @@ export default {
 			}
 			return target;
 		},
-		addPlan: function () {
-			this.$emit("plan-updated", {
+		addStaticPlan: function () {
+			this.$emit("static-plan-updated", {
 				time: this.defaultDate(),
 				soc: 100,
 				energy: this.capacity || 10,
 			});
 		},
-		removePlan: function (index) {
-			this.$emit("plan-removed", index);
+		removeStaticPlan: function (index) {
+			this.$emit("static-plan-removed", index);
 		},
-		updatePlan: function (data) {
-			this.$emit("plan-updated", data);
+		updateStaticPlan: function (data) {
+			this.$emit("static-plan-updated", data);
 		},
 		previewPlan: function (data) {
 			this.fetchPlanDebounced(data);