Refactor target charging apis

api/rates.go

@@ -15,20 +15,3 @@ func (r Rates) Current(now time.Time) (Rate, error) {
 
 	return Rate{}, errors.New("no matching rate")
 }
-
-// implement sort.Interface
-func (r Rates) Len() int {
-	return len(r)
-}
-
-func (r Rates) Less(i, j int) bool {
-	if r[i].Price == r[j].Price {
-		return r[i].Start.After(r[j].Start)
-	}
-
-	return r[i].Price < r[j].Price
-}
-
-func (r Rates) Swap(i, j int) {
-	r[i], r[j] = r[j], r[i]
-}

assets/css/app.css

@@ -160,6 +160,7 @@ a:hover {
 	color: inherit !important;
 	background-color: inherit !important;
 	border-color: inherit !important;
+	opacity: 0.2;
 }
 
 .btn-outline-primary,

assets/js/components/Loadpoint.vue

@@ -155,9 +155,9 @@ export default {
 		vehicleFeatureOffline: Boolean,
 		vehicles: Array,
 		minSoc: Number,
+		planActive: Boolean,
+		planProjectedStart: String,
 		targetTime: String,
-		targetTimeActive: Boolean,
-		targetTimeProjectedStart: String,
 		vehicleProviderLoggedIn: Boolean,
 		vehicleProviderLoginPath: String,
 		vehicleProviderLogoutPath: String,
@@ -256,10 +256,10 @@ export default {
 			api.post(this.apiPath("mode") + "/" + mode);
 		},
 		setTargetSoc: function (soc) {
-			api.post(this.apiPath("targetsoc") + "/" + soc);
+			api.post(this.apiPath("target/soc") + "/" + soc);
 		},
 		setTargetEnergy: function (kWh) {
-			api.post(this.apiPath("targetenergy") + "/" + kWh);
+			api.post(this.apiPath("target/energy") + "/" + kWh);
 		},
 		setMaxCurrent: function (maxCurrent) {
 			api.post(this.apiPath("maxcurrent") + "/" + maxCurrent);
@@ -274,10 +274,10 @@ export default {
 			api.post(this.apiPath("minsoc") + "/" + soc);
 		},
 		setTargetTime: function (date) {
-			api.post(`${this.apiPath("targetcharge")}/${this.targetSoc}/${date.toISOString()}`);
+			api.post(`${this.apiPath("target/time")}/${date.toISOString()}`);
 		},
 		removeTargetTime: function () {
-			api.delete(this.apiPath("targetcharge"));
+			api.delete(this.apiPath("target/time"));
 		},
 		changeVehicle(index) {
 			api.post(this.apiPath("vehicle") + `/${index}`);

assets/js/components/TargetCharge.vue

@@ -43,10 +43,23 @@
 						</div>
 						<form @submit.prevent="setTargetTime">
 							<div class="modal-body">
-								<div class="form-group">
+								<div class="form-group mb-2">
 									<!-- eslint-disable vue/no-v-html -->
 									<label for="targetTimeLabel" class="mb-3">
-										{{ $t("main.targetCharge.description", { targetSoc }) }}
+										<span v-if="socBasedCharging">
+											{{
+												$t("main.targetCharge.descriptionSoc", {
+													targetSoc,
+												})
+											}}
+										</span>
+										<span v-else>
+											{{
+												$t("main.targetCharge.descriptionEnergy", {
+													targetEnergy: targetEnergyFormatted,
+												})
+											}}
+										</span>
 									</label>
 									<!-- eslint-enable vue/no-v-html -->
 									<div
@@ -79,23 +92,14 @@
 								<p v-if="!selectedTargetTimeValid" class="text-danger mb-0">
 									{{ $t("main.targetCharge.targetIsInThePast") }}
 								</p>
-								<p class="small mt-3 text-muted mb-0">
-									<strong class="text-evcc">
-										{{ $t("main.targetCharge.experimentalLabel") }}:
-									</strong>
-									{{ $t("main.targetCharge.experimentalText") }}
-									<a
-										href="https://github.com/evcc-io/evcc/discussions/1433"
-										target="_blank"
-										>GitHub Discussions</a
-									>.
-								</p>
+								<TargetChargePlanMinimal v-else-if="plan.duration" v-bind="plan" />
 							</div>
 							<div class="modal-footer d-flex justify-content-between">
 								<button
 									type="button"
 									class="btn btn-outline-secondary"
 									data-bs-dismiss="modal"
+									:disabled="!targetTime"
 									@click="removeTargetTime"
 								>
 									{{ $t("main.targetCharge.remove") }}
@@ -122,6 +126,8 @@ import Modal from "bootstrap/js/dist/modal";
 import "@h2d2/shopicons/es/filled/plus";
 import "@h2d2/shopicons/es/filled/edit";
 import LabelAndValue from "./LabelAndValue.vue";
+import TargetChargePlanMinimal from "./TargetChargePlanMinimal.vue";
+import api from "../api";
 
 import formatter from "../mixins/formatter";
 
@@ -130,18 +136,20 @@ const LAST_TARGET_TIME_KEY = "last_target_time";
 
 export default {
 	name: "TargetCharge",
-	components: { LabelAndValue },
+	components: { LabelAndValue, TargetChargePlanMinimal },
 	mixins: [formatter],
 	props: {
 		id: [String, Number],
+		planActive: Boolean,
 		targetTime: String,
-		targetTimeActive: Boolean,
 		targetSoc: Number,
+		targetEnergy: Number,
+		socBasedCharging: Boolean,
 		disabled: Boolean,
 	},
 	emits: ["target-time-updated", "target-time-removed"],
 	data: function () {
-		return { selectedDay: null, selectedTime: null };
+		return { selectedDay: null, selectedTime: null, plan: {} };
 	},
 	computed: {
 		targetChargeEnabled: function () {
@@ -157,6 +165,9 @@ export default {
 		modalId: function () {
 			return `targetChargeModal_${this.id}`;
 		},
+		targetEnergyFormatted: function () {
+			return this.fmtKWh(this.targetEnergy * 1e3, true, true, 1);
+		},
 	},
 	watch: {
 		targetTimeLabel: function () {
@@ -167,12 +178,32 @@ export default {
 		},
 		targetTime() {
 			this.initInputFields();
+			this.updatePlan();
+		},
+		selectedTargetTime() {
+			this.updatePlan();
+		},
+		targetSoc() {
+			this.updatePlan();
+		},
+		targetEnergy() {
+			this.updatePlan();
 		},
-	},
-	mounted: function () {
-		this.initInputFields();
 	},
 	methods: {
+		updatePlan: async function () {
+			if (this.selectedTargetTimeValid && (this.targetEnergy || this.targetSoc)) {
+				try {
+					const response = await api.get(`/loadpoints/${this.id}/target/plan`, {
+						params: { targetTime: this.selectedTargetTime },
+					});
+					this.plan = response.data.result;
+				} catch (e) {
+					console.error(e);
+				}
+			}
+		},
+
 		// not computed because it needs to update over time
 		targetTimeLabel: function () {
 			if (this.targetChargeEnabled) {
@@ -245,6 +276,7 @@ export default {
 		},
 		openModal() {
 			const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
+			this.initInputFields();
 			modal.show();
 		},
 	},

assets/js/components/TargetChargePlanMinimal.vue

@@ -0,0 +1,63 @@
+<template>
+	<div if="plan" class="small text-muted">
+		<div>{{ $t("main.targetCharge.planDuration") }}: {{ planDuration }}</div>
+		<div>
+			{{ $t("main.targetCharge.planPeriodLabel") }}:
+			<span v-if="planStart && planEnd">
+				{{
+					$t("main.targetCharge.planPeriodValue", { start: planStart, end: planEnd })
+				}}</span
+			>
+			<span v-else>{{ $t("main.targetCharge.planUnknown") }}:</span>
+		</div>
+	</div>
+</template>
+
+<script>
+import formatter from "../mixins/formatter";
+
+export default {
+	name: "TargetChargePlanMinimal",
+	mixins: [formatter],
+	props: {
+		duration: Number,
+		plan: Array,
+		unit: String,
+		power: Number,
+	},
+	computed: {
+		planDuration() {
+			return this.fmtShortDuration(this.duration, true);
+		},
+		lastSlot() {
+			if (this.plan?.length) {
+				return this.plan[this.plan?.length - 1];
+			}
+			return null;
+		},
+		firstSlot() {
+			if (this.plan?.length) {
+				return this.plan[0];
+			}
+			return null;
+		},
+		planStart() {
+			if (this.firstSlot) {
+				return this.weekdayTime(new Date(this.firstSlot.start));
+			}
+			return null;
+		},
+		planEnd() {
+			if (this.lastSlot) {
+				return this.weekdayTime(new Date(this.lastSlot.end));
+			}
+			return null;
+		},
+		durationHours() {
+			return this.duration / 3.6e12;
+		},
+	},
+};
+</script>
+
+<style scoped></style>

assets/js/components/Vehicle.vue

@@ -31,7 +31,6 @@
 				align="start"
 			/>
 			<TargetCharge
-				v-if="socBasedCharging"
 				class="flex-grow-1 text-center target-charge"
 				v-bind="targetCharge"
 				:disabled="targetChargeDisabled"
@@ -100,9 +99,9 @@ export default {
 		vehicleIcon: String,
 		vehicleCapacity: Number,
 		socBasedCharging: Boolean,
-		targetTimeActive: Boolean,
+		planActive: Boolean,
+		planProjectedStart: String,
 		targetTime: String,
-		targetTimeProjectedStart: String,
 		targetSoc: Number,
 		targetEnergy: Number,
 		chargedEnergy: Number,
@@ -163,7 +162,22 @@ export default {
 			return value > 1 ? `+${Math.round(value)}%` : null;
 		},
 		targetChargeDisabled: function () {
-			return !this.connected || !["pv", "minpv"].includes(this.mode);
+			if (!this.connected) {
+				return true;
+			}
+			if (["off", "now"].includes(this.mode)) {
+				return true;
+			}
+			// enabled for vehicles with Soc
+			if (this.socBasedCharging) {
+				return false;
+			}
+			// disabled of no energy target is set (offline or guest vehicles)
+			if (!this.targetEnergy) {
+				return true;
+			}
+
+			return false;
 		},
 	},
 	watch: {

assets/js/components/VehicleStatus.vue

@@ -16,11 +16,12 @@ export default {
 		connected: Boolean,
 		charging: Boolean,
 		targetTime: String,
-		targetTimeProjectedStart: String,
+		planProjectedStart: String,
 		phaseAction: String,
 		phaseRemainingInterpolated: Number,
 		pvAction: String,
 		pvRemainingInterpolated: Number,
+		targetChargeDisabled: Boolean,
 	},
 	computed: {
 		phaseTimerActive() {
@@ -50,16 +51,16 @@ export default {
 			}
 
 			// target charge
-			if (this.targetTime) {
+			if (this.targetTime && !this.targetChargeDisabled) {
 				if (this.charging) {
 					return t("targetChargeActive");
 				}
 				if (this.enabled) {
 					return t("targetChargeWaitForVehicle");
 				}
-				if (this.targetTimeProjectedStart) {
+				if (this.planProjectedStart) {
 					return t("targetChargePlanned", {
-						time: this.fmtAbsoluteDate(new Date(this.targetTimeProjectedStart)),
+						time: this.fmtAbsoluteDate(new Date(this.planProjectedStart)),
 					});
 				}
 			}

assets/js/mixins/formatter.js

@@ -61,6 +61,7 @@ export default {
       if (duration <= 0) {
         return "—";
       }
+      duration = Math.round(duration);
       var seconds = duration % 60;
       var minutes = Math.floor(duration / 60) % 60;
       var hours = Math.floor(duration / 3600);
@@ -124,6 +125,13 @@ export default {
         weekday: "short",
       }).format(date);
     },
+    weekdayTime: function (date) {
+      return new Intl.DateTimeFormat(this.$i18n.locale, {
+        weekday: "short",
+        hour: "numeric",
+        minute: "numeric",
+      }).format(date);
+    },
     fmtAbsoluteDate: function (date) {
       const weekday = this.weekdayPrefix(date);
       const hour = new Intl.DateTimeFormat(this.$i18n.locale, {