Merge branch 'master' into chore/go-122

assets/css/app.css

@@ -26,8 +26,11 @@
 	--evcc-dark-green: #0fde41;
 	--evcc-darker-green: #0ba631;
 	--evcc-darkest-green: #076f20;
+	--evcc-darkest-green-rgb: 11, 166, 49;
 	--evcc-yellow: #faf000;
 	--evcc-dark-yellow: #bbb400;
+	--evcc-orange: #ff9000;
+	--evcc-orange-rgb: 255, 144, 0;
 	--bs-gray-deep: #010322;
 	--bs-gray-dark: #28293e;
 	--bs-gray-medium: #93949e;
@@ -52,7 +55,10 @@
 	--evcc-transition-very-fast: 100ms;
 
 	--bs-primary: var(--evcc-darker-green);
-	--bs-primary-rgb: 11, 166, 49;
+	--bs-primary-rgb: var(--evcc-darker-green-rgb);
+
+	--bs-warning: var(--evcc-orange);
+	--bs-warning-rgb: var(--evcc-orange-rgb);
 
 	--bs-body-font-size: 14px;
 	--bs-font-sans-serif: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
@@ -428,3 +434,10 @@ input[type="time"]::-webkit-calendar-picker-indicator {
 .table {
 	--bs-table-bg: transparent;
 }
+
+/* larger check switch */
+.form-switch .form-check-input {
+	height: 1.1rem;
+	width: calc(1.2rem + 0.75rem);
+	border-radius: 3rem;
+}

assets/js/app.js

@@ -1,7 +1,7 @@
 import "bootstrap/dist/css/bootstrap.min.css";
 import "../css/app.css";
 import { createApp, h } from "vue";
-import { createMetaManager, plugin as metaPlugin } from "vue-meta";
+import { VueHeadMixin, createHead } from "@unhead/vue"; // not deprecated. see https://github.com/unjs/unhead/issues/291
 import App from "./views/App.vue";
 import setupRouter from "./router";
 import setupI18n from "./i18n";
@@ -60,11 +60,13 @@ const app = createApp({
 });
 
 const i18n = setupI18n();
+const head = createHead();
+
 app.use(i18n);
 app.use(setupRouter(i18n));
-app.use(createMetaManager());
-app.use(metaPlugin);
 app.use(featureflags);
+app.use(head);
+app.mixin(VueHeadMixin); // not deprecated. see https://github.com/unjs/unhead/issues/291
 window.app = app.mount("#app");
 
 watchThemeChanges();

assets/js/components/ChargingPlan.vue

@@ -128,6 +128,7 @@ export default {
 		smartCostLimit: Number,
 		smartCostType: String,
 		socBasedPlanning: Boolean,
+		socBasedCharging: Boolean,
 		socPerKwh: Number,
 		vehicle: Object,
 		vehicleCapacity: Number,

assets/js/components/ChargingPlanArrival.vue

@@ -1,4 +1,7 @@
 <template>
+	<div v-if="!socBasedCharging" class="alert alert-secondary my-4" role="alert">
+		{{ $t("main.loadpointSettings.onlyForSocBasedCharging") }}
+	</div>
 	<div class="mt-4 container">
 		<div class="row">
 			<div class="col-6 col-lg-3 col-form-label">
@@ -11,7 +14,7 @@
 					:id="formId('minsoc')"
 					v-model.number="selectedMinSoc"
 					class="form-select mb-2"
-					:disabled="!socBasedPlanning"
+					:disabled="!socBasedCharging"
 					@change="changeMinSoc"
 				>
 					<option v-for="soc in minSocOptions" :key="soc.value" :value="soc.value">
@@ -34,7 +37,7 @@
 					:id="formId('limitsoc')"
 					v-model.number="selectedLimitSoc"
 					class="form-select mb-2"
-					:disabled="!socBasedPlanning"
+					:disabled="!socBasedCharging"
 					@change="changeLimitSoc"
 				>
 					<option v-for="soc in limitSocOptions" :key="soc.value" :value="soc.value">
@@ -61,7 +64,7 @@ export default {
 		minSoc: { type: Number, default: 0 },
 		limitSoc: { type: Number, default: 0 },
 		vehicleName: String,
-		socBasedPlanning: Boolean,
+		socBasedCharging: Boolean,
 		rangePerSoc: Number,
 	},
 	emits: ["minsoc-updated", "limitsoc-updated"],

assets/js/components/ChargingPlanPreview.vue

@@ -3,7 +3,11 @@
 		<div class="justify-content-between mb-2 d-flex justify-content-between">
 			<div class="text-start">
 				<div class="label">{{ $t("main.targetChargePlan.chargeDuration") }}</div>
-				<div class="value text-primary d-sm-flex align-items-baseline">
+				<div
+					:class="`value  d-sm-flex align-items-baseline ${
+						timeWarning ? 'text-warning' : 'text-primary'
+					}`"
+				>
 					<div>{{ planDuration }}</div>
 					<div v-if="fmtPower" class="extraValue text-nowrap ms-sm-1">
 						{{ fmtPower }}
@@ -47,6 +51,19 @@ export default {
 		return { activeIndex: null, startTime: new Date() };
 	},
 	computed: {
+		endTime() {
+			if (!this.plan?.length) {
+				return null;
+			}
+			const end = this.plan[this.plan.length - 1].end;
+			return end ? new Date(end) : null;
+		},
+		timeWarning() {
+			if (this.targetTime && this.endTime) {
+				return this.targetTime < this.endTime;
+			}
+			return false;
+		},
 		planDuration() {
 			return this.fmtDuration(this.duration);
 		},
@@ -75,6 +92,9 @@ export default {
 			return hourSum ? priceSum / hourSum : undefined;
 		},
 		fmtAvgPrice() {
+			if (!this.targetTime) {
+				return "—";
+			}
 			let price = this.activeSlot ? this.activeSlot.price : this.avgPrice;
 			if (price === undefined) {
 				return this.$t("main.targetChargePlan.unknownPrice");
@@ -109,11 +129,16 @@ export default {
 				end.setHours(startHour + 1);
 				const endHour = end.getHours();
 				const day = this.weekdayShort(start);
-				const toLate = this.targetTime.getTime() <= start.getTime();
+				const toLate = this.targetTime && this.targetTime <= start;
 				// TODO: handle multiple matching time slots
 				const price = this.findSlotInRange(start, end, rates)?.price;
 				const charging = this.findSlotInRange(start, end, plan) != null;
-				result.push({ day, price, startHour, endHour, charging, toLate });
+				const warning =
+					charging &&
+					this.targetTime &&
+					end > this.targetTime &&
+					this.targetTime < this.endTime;
+				result.push({ day, price, startHour, endHour, charging, toLate, warning });
 			}
 			return result;
 		},

assets/js/components/ChargingPlanSettings.vue

@@ -1,41 +1,29 @@
 <template>
 	<div class="mt-4">
 		<div class="form-group d-lg-flex align-items-baseline justify-content-between">
-			<div v-if="plans.length > 0" class="container px-0 mb-3">
+			<div class="container px-0 mb-3">
 				<ChargingPlanSettingsEntry
-					v-for="(p, index) in plans"
-					:id="`${id}_${index}`"
-					:key="index"
+					:id="`${id}_0`"
 					class="mb-2"
-					v-bind="p"
+					v-bind="plans[0] || {}"
 					:vehicle-capacity="vehicleCapacity"
 					:range-per-soc="rangePerSoc"
 					:soc-per-kwh="socPerKwh"
 					:soc-based-planning="socBasedPlanning"
-					@plan-updated="(data) => updatePlan({ index, ...data })"
-					@plan-removed="() => removePlan(index)"
+					@plan-updated="(data) => updatePlan({ index: 0, ...data })"
+					@plan-removed="() => removePlan(0)"
+					@plan-preview="previewPlan"
 				/>
 			</div>
-			<div v-else>
-				<p>
-					{{ $t("main.targetCharge.planDescription") }}
-				</p>
-				<button class="btn btn-outline-primary" type="button" @click="addPlan">
-					{{ $t("main.targetCharge.setPlan") }}
-				</button>
-			</div>
-		</div>
-		<div v-if="plans.length > 0">
-			<ChargingPlanWarnings v-bind="chargingPlanWarningsProps" class="mb-4" />
-			<hr />
-			<h5>
-				<div class="inner">{{ $t("main.targetCharge.preview") }}</div>
-			</h5>
-			<ChargingPlanPreview
-				v-if="chargingPlanPreviewProps"
-				v-bind="chargingPlanPreviewProps"
-			/>
 		</div>
+		<ChargingPlanWarnings v-bind="chargingPlanWarningsProps" class="mb-4" />
+		<hr />
+		<h5>
+			<div class="inner" data-testid="plan-preview-title">
+				{{ $t(`main.targetCharge.${isPreview ? "preview" : "currentPlan"}`) }}
+			</div>
+		</h5>
+		<ChargingPlanPreview v-if="chargingPlanPreviewProps" v-bind="chargingPlanPreviewProps" />
 	</div>
 </template>
 
@@ -46,6 +34,7 @@ import ChargingPlanWarnings from "./ChargingPlanWarnings.vue";
 import formatter from "../mixins/formatter";
 import collector from "../mixins/collector";
 import api from "../api";
+import deepEqual from "../utils/deepEqual";
 
 const DEFAULT_TARGET_TIME = "7:00";
 const LAST_TARGET_TIME_KEY = "last_target_time";
@@ -80,42 +69,64 @@ export default {
 			plan: {},
 			activeTab: "time",
 			loading: false,
+			isPreview: false,
 		};
 	},
 	computed: {
 		chargingPlanWarningsProps: function () {
 			return this.collectProps(ChargingPlanWarnings);
 		},
-		selectedTargetTime: function () {
-			return new Date(this.effectivePlanTime);
-		},
 		chargingPlanPreviewProps: function () {
-			const targetTime = this.selectedTargetTime;
 			const { rates } = this.tariff;
-			const { duration, plan, power } = this.plan;
+			const { duration, plan, power, planTime } = this.plan;
+			const targetTime = planTime ? new Date(planTime) : null;
 			const { currency, smartCostType } = this;
 			return rates
 				? { duration, plan, power, rates, targetTime, currency, smartCostType }
 				: null;
 		},
 	},
 	watch: {
-		plans: {
-			handler() {
+		plans(newPlans, oldPlans) {
+			if (!deepEqual(newPlans, oldPlans) && newPlans.length > 0) {
 				this.fetchPlan();
-			},
-			deep: true,
+			}
 		},
 	},
 	mounted() {
-		this.fetchPlan();
+		if (this.plans.length > 0) {
+			this.fetchPlan();
+		}
 	},
 	methods: {
-		fetchPlan: async function () {
-			if (this.plans.length > 0 && !this.loading) {
+		fetchActivePlan: async function () {
+			return await api.get(`loadpoints/${this.id}/plan`);
+		},
+		fetchPlanPreviewSoc: async function (soc, time) {
+			const timeISO = time.toISOString();
+			return await api.get(`loadpoints/${this.id}/plan/preview/soc/${soc}/${timeISO}`);
+		},
+		fetchPlanPreviewEnergy: async function (energy, time) {
+			const timeISO = time.toISOString();
+			return await api.get(`loadpoints/${this.id}/plan/preview/energy/${energy}/${timeISO}`);
+		},
+		fetchPlan: async function (preview) {
+			if (!this.loading) {
 				try {
 					this.loading = true;
-					this.plan = (await api.get(`loadpoints/${this.id}/plan`)).data.result;
+
+					let planRes = null;
+					if (preview && this.socBasedPlanning) {
+						planRes = await this.fetchPlanPreviewSoc(preview.soc, preview.time);
+						this.isPreview = true;
+					} else if (preview && !this.socBasedPlanning) {
+						planRes = await this.fetchPlanPreviewEnergy(preview.energy, preview.time);
+						this.isPreview = true;
+					} else {
+						planRes = await this.fetchActivePlan();
+						this.isPreview = false;
+					}
+					this.plan = planRes.data.result;
 
 					const tariffRes = await api.get(`tariff/planner`, {
 						validateStatus: function (status) {
@@ -159,6 +170,9 @@ export default {
 		updatePlan: function (data) {
 			this.$emit("plan-updated", data);
 		},
+		previewPlan: function (data) {
+			this.fetchPlan(data);
+		},
 	},
 };
 </script>
@@ -168,6 +182,7 @@ h5 {
 	position: relative;
 	display: flex;
 	top: -25px;
+	margin-bottom: -0.5rem;
 	padding: 0 0.5rem;
 	justify-content: center;
 }