UI: battery boost (experimental)

assets/js/components/Loadpoint.vue

@@ -28,6 +28,7 @@
 			@maxcurrent-updated="setMaxCurrent"
 			@mincurrent-updated="setMinCurrent"
 			@phasesconfigured-updated="setPhasesConfigured"
+			@batteryboost-updated="setBatteryBoost"
 		/>
 
 		<div
@@ -132,6 +133,8 @@ export default {
 		remoteDisabledSource: String,
 		chargeDuration: Number,
 		charging: Boolean,
+		batteryBoost: Boolean,
+		batteryConfigured: Boolean,
 
 		// session
 		sessionEnergy: Number,
@@ -273,6 +276,12 @@ export default {
 		hasSmartCost: function () {
 			return smartCostAvailable(this.smartCostType);
 		},
+		batteryBoostAvailable: function () {
+			return this.batteryConfigured && this.$hiddenFeatures();
+		},
+		batteryBoostActive: function () {
+			return this.batteryBoost && this.charging && !["off", "now"].includes(this.mode);
+		},
 	},
 	watch: {
 		phaseRemaining() {
@@ -336,6 +345,9 @@ export default {
 		removeVehicle() {
 			api.delete(this.apiPath("vehicle"));
 		},
+		setBatteryBoost: function (batteryBoost) {
+			api.post(this.apiPath("batteryboost") + `/${batteryBoost ? "1" : "0"}`);
+		},
 		fmtPower(value) {
 			return this.fmtW(value, POWER_UNIT.AUTO);
 		},

assets/js/components/LoadpointSettingsBatteryBoost.vue

@@ -0,0 +1,72 @@
+<template>
+	<div>
+		<h6>
+			{{ $t("main.loadpointSettings.batteryUsage") }}
+		</h6>
+
+		<div class="mb-3 row" data-testid="battery-boost">
+			<label :for="formId('batteryBoost')" class="col-sm-4 col-form-label pt-0 pt-sm-2">
+				{{ $t("main.loadpointSettings.batteryBoost.label") }}&nbsp;🧪
+			</label>
+			<div class="col-sm-8 pe-0">
+				<div class="form-check form-switch my-1">
+					<input
+						:id="formId('batteryBoost')"
+						v-model="selectedEnabled"
+						class="form-check-input"
+						type="checkbox"
+						role="switch"
+						:disabled="disabled"
+						data-testid="battery-boost-checkbox"
+						@change="handleEnabledChange"
+					/>
+					<label :for="formId('batteryBoost')" class="form-check-label">
+						<div>
+							{{ $t("main.loadpointSettings.batteryBoost.description") }}
+						</div>
+						<span v-if="selectedEnabled && !disabled" class="d-block text-primary">
+							{{ $t("main.loadpointSettings.batteryBoost.once") }}
+						</span>
+						<small v-if="disabled" class="d-block">
+							{{ $t("main.loadpointSettings.batteryBoost.mode") }}
+						</small>
+					</label>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import formatter from "../mixins/formatter";
+
+export default {
+	mixins: [formatter],
+	props: {
+		formId: Function,
+		mode: String,
+		batteryBoost: Boolean,
+	},
+	data() {
+		return {
+			selectedEnabled: this.batteryBoost,
+		};
+	},
+	watch: {
+		batteryBoost(newVal) {
+			this.selectedEnabled = newVal;
+		},
+	},
+	computed: {
+		disabled() {
+			return ["off", "now"].includes(this.mode);
+		},
+	},
+	methods: {
+		handleEnabledChange() {
+			this.$emit("batteryboost-updated", this.selectedEnabled);
+		},
+	},
+	emits: ["batteryboost-updated"],
+};
+</script>

assets/js/components/LoadpointSettingsModal.vue

@@ -30,6 +30,12 @@
 								v-bind="smartCostLimitProps"
 								class="mt-2"
 							/>
+							<LoadpointSettingsBatteryBoost
+								v-if="batteryBoostAvailable"
+								v-bind="batteryBoostProps"
+								class="mt-2"
+								@batteryboost-updated="changeBatteryBoost"
+							/>
 							<h6>
 								{{ $t("main.loadpointSettings.currents") }}
 							</h6>
@@ -153,6 +159,7 @@ import collector from "../mixins/collector";
 import formatter from "../mixins/formatter";
 import SmartCostLimit from "./SmartCostLimit.vue";
 import smartCostAvailable from "../utils/smartCostAvailable";
+import LoadpointSettingsBatteryBoost from "./LoadpointSettingsBatteryBoost.vue";
 
 const V = 230;
 
@@ -172,13 +179,16 @@ const insertSorted = (arr, num) => {
 export default {
 	name: "LoadpointSettingsModal",
 	mixins: [formatter, collector],
-	components: { SmartCostLimit },
+	components: { SmartCostLimit, LoadpointSettingsBatteryBoost },
 	props: {
 		id: [String, Number],
 		phasesConfigured: Number,
 		phasesActive: Number,
 		chargerPhases1p3p: Boolean,
 		chargerPhysicalPhases: Number,
+		batteryBoost: Boolean,
+		batteryBoostAvailable: Boolean,
+		mode: String,
 		minSoc: Number,
 		maxCurrent: Number,
 		minCurrent: Number,
@@ -189,8 +199,13 @@ export default {
 		currency: String,
 		multipleLoadpoints: Boolean,
 	},
-	emits: ["phasesconfigured-updated", "maxcurrent-updated", "mincurrent-updated"],
-	data: function () {
+	emits: [
+		"phasesconfigured-updated",
+		"maxcurrent-updated",
+		"mincurrent-updated",
+		"batteryboost-updated",
+	],
+	data() {
 		return {
 			selectedMaxCurrent: this.maxCurrent,
 			selectedMinCurrent: this.minCurrent,
@@ -199,7 +214,7 @@ export default {
 		};
 	},
 	computed: {
-		phasesOptions: function () {
+		phasesOptions() {
 			if (this.chargerPhysicalPhases == 1) {
 				// known fixed phase configuration, no settings required
 				return [];
@@ -211,7 +226,10 @@ export default {
 			// 1p or 3p possible
 			return [PHASES_3, PHASES_1];
 		},
-		maxPower: function () {
+		batteryBoostProps() {
+			return this.collectProps(LoadpointSettingsBatteryBoost);
+		},
+		maxPower() {
 			if (this.chargerPhases1p3p) {
 				if (this.phasesConfigured === PHASES_AUTO) {
 					return this.maxPowerPhases(3);
@@ -222,7 +240,7 @@ export default {
 			}
 			return this.fmtW(this.maxCurrent * V * this.phasesActive);
 		},
-		minPower: function () {
+		minPower() {
 			if (this.chargerPhases1p3p) {
 				if (this.phasesConfigured === PHASES_AUTO) {
 					return this.minPowerPhases(1);
@@ -233,39 +251,39 @@ export default {
 			}
 			return this.fmtW(this.minCurrent * V * this.phasesActive);
 		},
-		minCurrentOptions: function () {
+		minCurrentOptions() {
 			const opt1 = [...range(Math.floor(this.maxCurrent), 1), 0.5, 0.25, 0.125];
 			// ensure that current value is always included
 			const opt2 = insertSorted(opt1, this.minCurrent);
 			return opt2.map((value) => this.currentOption(value, value === 6));
 		},
-		maxCurrentOptions: function () {
+		maxCurrentOptions() {
 			const opt1 = range(32, Math.ceil(this.minCurrent));
 			// ensure that current value is always included
 			const opt2 = insertSorted(opt1, this.maxCurrent);
 			return opt2.map((value) => this.currentOption(value, value === 16));
 		},
-		smartCostLimitProps: function () {
+		smartCostLimitProps() {
 			return this.collectProps(SmartCostLimit);
 		},
-		loadpointId: function () {
+		loadpointId() {
 			return this.id;
 		},
 		smartCostAvailable() {
 			return smartCostAvailable(this.smartCostType);
 		},
 	},
 	watch: {
-		maxCurrent: function (value) {
+		maxCurrent(value) {
 			this.selectedMaxCurrent = value;
 		},
-		minCurrent: function (value) {
+		minCurrent(value) {
 			this.selectedMinCurrent = value;
 		},
-		phasesConfigured: function (value) {
+		phasesConfigured(value) {
 			this.selectedPhases = value;
 		},
-		minSoc: function (value) {
+		minSoc(value) {
 			this.selectedMinSoc = value;
 		},
 	},
@@ -278,37 +296,40 @@ export default {
 		this.$refs.modal?.removeEventListener("hidden.bs.modal", this.modalInvisible);
 	},
 	methods: {
-		maxPowerPhases: function (phases) {
+		maxPowerPhases(phases) {
 			return this.fmtW(this.maxCurrent * V * phases);
 		},
-		minPowerPhases: function (phases) {
+		minPowerPhases(phases) {
 			return this.fmtW(this.minCurrent * V * phases);
 		},
-		formId: function (name) {
+		formId(name) {
 			return `loadpoint_${this.id}_${name}`;
 		},
-		changeMaxCurrent: function () {
+		changeMaxCurrent() {
 			this.$emit("maxcurrent-updated", this.selectedMaxCurrent);
 		},
-		changeMinCurrent: function () {
+		changeMinCurrent() {
 			this.$emit("mincurrent-updated", this.selectedMinCurrent);
 		},
-		changePhasesConfigured: function () {
+		changePhasesConfigured() {
 			this.$emit("phasesconfigured-updated", this.selectedPhases);
 		},
-		currentOption: function (value, isDefault) {
+		currentOption(value, isDefault) {
 			let name = `${this.fmtNumber(value)} A`;
 			if (isDefault) {
 				name += ` (${this.$t("main.loadpointSettings.default")})`;
 			}
 			return { value, name };
 		},
-		modalVisible: function () {
+		modalVisible() {
 			this.isModalVisible = true;
 		},
-		modalInvisible: function () {
+		modalInvisible() {
 			this.isModalVisible = false;
 		},
+		changeBatteryBoost(boost) {
+			this.$emit("batteryboost-updated", boost);
+		},
 	},
 };
 </script>
@@ -321,4 +342,8 @@ export default {
 .container h4:first-child {
 	margin-top: 0 !important;
 }
+
+.custom-select-inline {
+	display: inline-block !important;
+}
 </style>

assets/js/components/Loadpoints.vue

@@ -24,6 +24,7 @@
 					:multipleLoadpoints="loadpoints.length > 1"
 					:gridConfigured="gridConfigured"
 					:pvConfigured="pvConfigured"
+					:batteryConfigured="batteryConfigured"
 					class="h-100"
 					:class="{ 'loadpoint-unselected': !selected(index) }"
 					@click="scrollTo(index)"
@@ -60,7 +61,7 @@ import "@h2d2/shopicons/es/filled/lightning";
 import Loadpoint from "./Loadpoint.vue";
 
 export default {
-	name: "Site",
+	name: "Loadpoints",
 	components: { Loadpoint },
 	props: {
 		loadpoints: Array,
@@ -71,6 +72,7 @@ export default {
 		currency: String,
 		gridConfigured: Boolean,
 		pvConfigured: Boolean,
+		batteryConfigured: Boolean,
 	},
 	data() {
 		return { selectedIndex: 0, snapTimeout: null };

assets/js/components/MaterialIcon/BatteryBoost.vue

@@ -0,0 +1,23 @@
+<template>
+	<svg :style="svgStyle" viewBox="0 0 48 48">
+		<g id="Your_Icons">
+			<path
+				fill="currentColor"
+				d="M35,9.996l-3,0l0,-4c0,-1.097 -0.903,-2 -2,-2l-12,0c-1.097,0 -2,0.903 -2,2l0,4l-3,0c-1.097,0 -2,0.903 -2,2l0,30c0,1.097 0.903,2 2,2l22,0c1.097,0 2,-0.903 2,-2l0,-30c0,-1.097 -0.903,-2 -2,-2Zm-15,-2l8,-0l0,2l-8,-0l0,-2Zm13,32l-18,0l0,-26l18,0l0,26Z"
+			/>
+			<path
+				fill="currentColor"
+				d="M24.741,18.029c-0.395,-0.103 -0.812,0.073 -1.012,0.43l-5.077,9.05c-0.157,0.278 -0.154,0.619 0.008,0.895c0.162,0.275 0.458,0.445 0.777,0.445l3.727,-0l-0,6.251c-0,0.425 0.297,0.792 0.712,0.88c0.063,0.014 0.126,0.02 0.188,0.02c0.349,-0 0.675,-0.204 0.822,-0.534c0.966,-2.174 1.917,-4.395 2.823,-6.603c0.571,-1.394 1.142,-2.82 1.693,-4.237c0.108,-0.277 0.072,-0.589 -0.096,-0.834c-0.167,-0.245 -0.445,-0.392 -0.742,-0.392l-3.15,-0l-0,-4.5c-0,-0.41 -0.277,-0.767 -0.673,-0.871Z"
+			/>
+		</g>
+	</svg>
+</template>
+
+<script>
+import icon from "../../mixins/icon";
+
+export default {
+	name: "BatteryBoost",
+	mixins: [icon],
+};
+</script>

assets/js/components/Site.vue

@@ -31,6 +31,8 @@
 				:currency="currency"
 				:gridConfigured="gridConfigured"
 				:pvConfigured="pvConfigured"
+				:batteryConfigured="batteryConfigured"
+				:batterySoc="batterySoc"
 			/>
 			<Footer v-bind="footer"></Footer>
 		</div>

assets/js/components/Vehicle.vue

@@ -101,6 +101,7 @@ export default {
 		effectiveLimitSoc: Number,
 		effectivePlanSoc: Number,
 		effectivePlanTime: String,
+		batteryBoostActive: Boolean,
 		enabled: Boolean,
 		heating: Boolean,
 		id: [String, Number],