Add Target Energy API & UI for Vehicles Without SoC

api/api.go

@@ -221,3 +221,9 @@ type AuthProvider interface {
 	LoginHandler() http.HandlerFunc
 	LogoutHandler() http.HandlerFunc
 }
+
+// FeatureDescriber optionally provides a list of supported non-api features
+type FeatureDescriber interface {
+	Features() []Feature
+	Has(Feature) bool
+}

api/feature.go

@@ -0,0 +1,17 @@
+package api
+
+type Feature int
+
+func (f *Feature) UnmarshalText(text []byte) error {
+	feat, err := FeatureString(string(text))
+	if err == nil {
+		*f = feat
+	}
+	return err
+}
+
+//go:generate enumer -type Feature
+const (
+	_ Feature = iota
+	Offline
+)

assets/js/components/AnimatedNumber.vue

@@ -1,5 +1,5 @@
 <template>
-	<number :to="to" :format="format" :duration="duration" />
+	<number :to="to" :format="format" :duration="animationDuration" />
 </template>
 
 <script>
@@ -10,10 +10,16 @@ export default {
 	props: {
 		to: { type: Number },
 		format: { type: Function },
+		noAnimation: { type: Boolean },
 	},
 	data() {
 		return { duration: 0 };
 	},
+	computed: {
+		animationDuration() {
+			return this.noAnimation ? 0 : this.duration;
+		},
+	},
 	watch: {
 		to: function () {
 			this.duration = DURATION;

assets/js/components/Loadpoint.stories.js

@@ -39,6 +39,26 @@ Base.args = {
   activePhases: 2,
 };
 
+export const WithoutSoc = Template.bind({});
+WithoutSoc.args = {
+  id: 0,
+  pvConfigured: true,
+  chargePower: 2800,
+  chargedEnergy: 7123,
+  chargeDuration: 95 * 60,
+  vehiclePresent: false,
+  enabled: true,
+  connected: true,
+  mode: "pv",
+  charging: true,
+  vehicleSoC: 66,
+  targetSoC: 90,
+  chargeCurrent: 7,
+  minCurrent: 6,
+  maxCurrent: 16,
+  activePhases: 2,
+};
+
 export const Idle = Template.bind({});
 Idle.args = {
   id: 0,

assets/js/components/Loadpoint.vue

@@ -67,6 +67,7 @@
 				/>
 			</div>
 			<LabelAndValue
+				v-show="socBasedCharging"
 				:label="$t('main.loadpoint.charged')"
 				:value="fmtKWh(chargedEnergy)"
 				align="center"
@@ -92,6 +93,7 @@
 		<Vehicle
 			v-bind="vehicle"
 			@target-soc-updated="setTargetSoC"
+			@target-energy-updated="setTargetEnergy"
 			@target-time-updated="setTargetTime"
 			@target-time-removed="removeTargetTime"
 			@change-vehicle="changeVehicle"
@@ -132,6 +134,7 @@ export default {
 		title: String,
 		mode: String,
 		targetSoC: Number,
+		targetEnergy: Number,
 		remoteDisabled: Boolean,
 		remoteDisabledSource: String,
 		chargeDuration: Number,
@@ -147,6 +150,8 @@ export default {
 		vehicleSoC: Number,
 		vehicleTitle: String,
 		vehicleTargetSoC: Number,
+		vehicleCapacity: Number,
+		vehicleFeatureOffline: Boolean,
 		vehicles: Array,
 		minSoC: Number,
 		targetTime: String,
@@ -170,7 +175,6 @@ export default {
 		maxCurrent: Number,
 		phasesActive: Number,
 		chargeCurrent: Number,
-		vehicleCapacity: Number,
 		connectedDuration: Number,
 		chargeCurrents: Array,
 		chargeConfigured: Boolean,
@@ -205,6 +209,9 @@ export default {
 		showChargingIndicator: function () {
 			return this.charging && this.chargePower > 0;
 		},
+		socBasedCharging: function () {
+			return !this.vehicleFeatureOffline && this.vehiclePresent;
+		},
 	},
 	watch: {
 		phaseRemaining() {
@@ -250,6 +257,9 @@ export default {
 		setTargetSoC: function (soc) {
 			api.post(this.apiPath("targetsoc") + "/" + soc);
 		},
+		setTargetEnergy: function (kWh) {
+			api.post(this.apiPath("targetenergy") + "/" + kWh);
+		},
 		setMaxCurrent: function (maxCurrent) {
 			api.post(this.apiPath("maxcurrent") + "/" + maxCurrent);
 		},

assets/js/components/TargetEnergySelect.vue

@@ -0,0 +1,119 @@
+<template>
+	<LabelAndValue class="flex-grow-1" :label="$t('main.targetEnergy.label')" align="end">
+		<h3 class="value m-0 d-block d-sm-flex align-items-baseline justify-content-end">
+			<label class="position-relative">
+				<select :value="targetEnergy" class="custom-select" @change="change">
+					<option
+						v-for="{ energy, text, disabled } in options"
+						:key="energy"
+						:value="energy"
+						:disabled="disabled"
+					>
+						{{ text }}
+					</option>
+				</select>
+				<span
+					class="text-decoration-underline"
+					:class="{ 'text-gray fw-normal': !targetEnergy }"
+				>
+					<AnimatedNumber
+						:to="targetEnergy"
+						:format="formatKWh"
+						:no-animation="!targetEnergy"
+					/>
+				</span>
+			</label>
+
+			<div v-if="estimatedTargetSoC" class="extraValue ms-0 ms-sm-1 text-nowrap">
+				<AnimatedNumber :to="estimatedTargetSoC" :format="formatSoC" />
+			</div>
+		</h3>
+	</LabelAndValue>
+</template>
+
+<script>
+import LabelAndValue from "./LabelAndValue.vue";
+import AnimatedNumber from "./AnimatedNumber.vue";
+import formatter from "../mixins/formatter";
+
+export default {
+	name: "TargetEnergySelect",
+	components: { LabelAndValue, AnimatedNumber },
+	mixins: [formatter],
+	props: {
+		targetEnergy: Number,
+		socPerKwh: Number,
+		chargedEnergy: Number,
+		vehicleCapacity: Number,
+	},
+	emits: ["target-energy-updated"],
+	computed: {
+		maxEnergy: function () {
+			return this.vehicleCapacity || 100;
+		},
+		steps: function () {
+			if (this.maxEnergy < 25) {
+				return 1;
+			}
+			if (this.maxEnergy < 50) {
+				return 2;
+			}
+			return 5;
+		},
+		options: function () {
+			const result = [];
+			for (let energy = 0; energy <= this.maxEnergy; energy += this.steps) {
+				let text = this.formatKWh(energy);
+				const disabled = energy < this.chargedEnergy / 1e3 && energy !== 0;
+				const soc = this.estimatedSoC(energy);
+				if (soc) {
+					text += ` (${this.formatSoC(soc)})`;
+				}
+				result.push({ energy, text, disabled });
+			}
+			return result;
+		},
+		estimatedTargetSoC: function () {
+			return this.estimatedSoC(this.targetEnergy);
+		},
+	},
+	methods: {
+		change: function (e) {
+			return this.$emit("target-energy-updated", parseInt(e.target.value, 10));
+		},
+		estimatedSoC: function (kWh) {
+			if (this.socPerKwh) {
+				return Math.round(kWh * this.socPerKwh);
+			}
+			return null;
+		},
+		formatKWh: function (value) {
+			if (value === 0) {
+				return this.$t("main.targetEnergy.noLimit");
+			}
+			return `${Math.round(value)} kWh`;
+		},
+		formatSoC: function (value) {
+			return `+${Math.round(value)}%`;
+		},
+	},
+};
+</script>
+
+<style scoped>
+.value {
+	font-size: 18px;
+}
+.extraValue {
+	color: var(--evcc-gray);
+	font-size: 14px;
+}
+.custom-select {
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	position: absolute;
+	opacity: 0;
+}
+</style>