Merge branch 'master' into feat/loadpoint-config

api/api.go

@@ -222,6 +222,7 @@ type Circuit interface {
 	SetTitle(string)
 	GetParent() Circuit
 	RegisterChild(child Circuit)
+	Wrap(parent Circuit) error
 	HasMeter() bool
 	GetMaxPower() float64
 	GetMaxCurrent() float64

assets/css/app.css

@@ -250,6 +250,10 @@ a:hover {
 	--bs-btn-hover-border-color: var(--bs-gray-medium);
 }
 
+.btn-link:hover {
+	color: var(--bs-primary);
+}
+
 .dark .btn-outline-secondary {
 	--bs-btn-color: var(--bs-gray-bright);
 	--bs-btn-border-color: var(--bs-gray-bright);

assets/js/components/ChargingPlan.vue

@@ -9,7 +9,7 @@
 			<div class="value m-0 d-block align-items-baseline justify-content-center">
 				<button class="value-button p-0" :class="buttonColor" @click="openModal">
 					<strong v-if="enabled">
-						<span class="targetTimeLabel"> {{ targetTimeLabel() }}</span>
+						<span class="targetTimeLabel"> {{ targetTimeLabel }}</span>
 						<div
 							class="extraValue text-nowrap"
 							:class="{ 'text-warning': planTimeUnreachable }"
@@ -106,6 +106,8 @@ import collector from "../mixins/collector";
 import api from "../api";
 import { optionStep, fmtEnergy } from "../utils/energyOptions";
 
+const ONE_MINUTE = 60 * 1000;
+
 export default {
 	name: "ChargingPlan",
 	components: { LabelAndValue, ChargingPlanSettings, ChargingPlanArrival },
@@ -140,6 +142,8 @@ export default {
 			modal: null,
 			isModalVisible: false,
 			activeTab: "departure",
+			targetTimeLabel: "",
+			interval: null,
 		};
 	},
 	computed: {
@@ -203,16 +207,24 @@ export default {
 			return `loadpoints/${this.id}/`;
 		},
 	},
+	watch: {
+		effectivePlanTime() {
+			this.updateTargetTimeLabel();
+		},
+	},
 	mounted() {
 		this.modal = Modal.getOrCreateInstance(this.$refs.modal);
 		this.$refs.modal.addEventListener("show.bs.modal", this.modalVisible);
 		this.$refs.modal.addEventListener("hidden.bs.modal", this.modalInvisible);
 		this.$refs.modal.addEventListener("hide.bs.modal", this.checkUnsavedOnClose);
+		this.interval = setInterval(this.updateTargetTimeLabel, ONE_MINUTE);
+		this.updateTargetTimeLabel();
 	},
 	unmounted() {
 		this.$refs.modal?.removeEventListener("show.bs.modal", this.modalVisible);
 		this.$refs.modal?.removeEventListener("hidden.bs.modal", this.modalInvisible);
 		this.$refs.modal?.removeEventListener("hide.bs.modal", this.checkUnsavedOnClose);
+		clearInterval(this.interval);
 	},
 	methods: {
 		checkUnsavedOnClose: function () {
@@ -241,10 +253,9 @@ export default {
 			}
 			this.modal.show();
 		},
-		// not computed because it needs to update over time
-		targetTimeLabel: function () {
+		updateTargetTimeLabel: function () {
 			const targetDate = new Date(this.effectivePlanTime);
-			return this.fmtAbsoluteDate(targetDate);
+			this.targetTimeLabel = this.fmtAbsoluteDate(targetDate);
 		},
 		showDeatureTab: function () {
 			this.activeTab = "departure";

assets/js/components/Config/CircuitsModal.vue

@@ -6,7 +6,6 @@
 		docs="/docs/features/loadmanagement"
 		:defaultYaml="defaultYaml"
 		endpoint="/config/circuits"
-		size="md"
 		@changed="$emit('changed')"
 	/>
 </template>

assets/js/components/Config/MeterModal.vue

@@ -61,26 +61,25 @@
 				:defaultPort="modbus.Port"
 				:capabilities="modbusCapabilities"
 			/>
-			<FormRow
-				v-for="param in templateParams"
-				:id="`meterParam${param.Name}`"
+			<PropertyEntry
+				v-for="param in normalParams"
 				:key="param.Name"
-				:optional="!param.Required"
-				:label="param.Description || `[${param.Name}]`"
-				:help="param.Description === param.Help ? undefined : param.Help"
-				:example="param.Example"
-			>
-				<PropertyField
-					:id="`meterParam${param.Name}`"
-					v-model="values[param.Name]"
-					:masked="param.Mask"
-					:property="param.Name"
-					:type="param.Type"
-					class="me-2"
-					:required="param.Required"
-					:validValues="param.ValidValues"
-				/>
-			</FormRow>
+				:id="`meterParam${param.Name}`"
+				v-bind="param"
+				v-model="values[param.Name]"
+			/>
+
+			<PropertyCollapsible>
+				<template v-if="advancedParams.length" #advanced>
+					<PropertyEntry
+						v-for="param in advancedParams"
+						:key="param.Name"
+						:id="`meterParam${param.Name}`"
+						v-bind="param"
+						v-model="values[param.Name]"
+					/>
+				</template>
+			</PropertyCollapsible>
 
 			<TestResult
 				v-if="templateName"
@@ -133,7 +132,8 @@
 
 <script>
 import FormRow from "./FormRow.vue";
-import PropertyField from "./PropertyField.vue";
+import PropertyEntry from "./PropertyEntry.vue";
+import PropertyCollapsible from "./PropertyCollapsible.vue";
 import TestResult from "./TestResult.vue";
 import api from "../../api";
 import test from "./mixins/test";
@@ -147,9 +147,19 @@ function sleep(ms) {
 	return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+const CUSTOM_FIELDS = ["usage", "modbus"];
+
 export default {
 	name: "MeterModal",
-	components: { FormRow, PropertyField, Modbus, TestResult, NewDeviceButton, GenericModal },
+	components: {
+		FormRow,
+		PropertyEntry,
+		GenericModal,
+		Modbus,
+		TestResult,
+		NewDeviceButton,
+		PropertyCollapsible,
+	},
 	mixins: [test],
 	props: {
 		id: Number,
@@ -192,18 +202,20 @@ export default {
 			return this.products.filter((p) => p.group === "generic");
 		},
 		templateParams() {
-			const params = this.template?.Params || [];
-			return (
-				params
-					// deprecated fields
-					.filter((p) => !p.Deprecated)
-					// remove usage option
-					.filter((p) => p.Name !== "usage")
-					// remove modbus, handles separately
-					.filter((p) => p.Name !== "modbus")
-					// capacity only for battery meters
-					.filter((p) => this.meterType === "battery" || p.Name !== "capacity")
-			);
+			return (this.template?.Params || [])
+				.filter((p) => !CUSTOM_FIELDS.includes(p.Name))
+				.map((p) => {
+					if (this.meterType === "battery" && p.Name === "capacity") {
+						p.Advanced = false;
+					}
+					return p;
+				});
+		},
+		normalParams() {
+			return this.templateParams.filter((p) => !p.Advanced);
+		},
+		advancedParams() {
+			return this.templateParams.filter((p) => p.Advanced);
 		},
 		modbus() {
 			const params = this.template?.Params || [];

assets/js/components/Config/PropertyCollapsible.vue

@@ -0,0 +1,62 @@
+<template>
+	<div v-if="$slots.advanced || $slots.more">
+		<button
+			class="btn btn-link btn-sm text-gray px-0 border-0 d-flex align-items-center mb-2"
+			:class="open ? 'text-primary' : ''"
+			type="button"
+			@click="toggle"
+		>
+			<span v-if="open">Hide advanced settings</span>
+			<span v-else>Show advanced settings</span>
+			<DropdownIcon class="icon" :class="{ iconUp: open }" />
+		</button>
+
+		<Transition>
+			<div v-if="open" class="pt-2">
+				<slot name="advanced"></slot>
+				<hr v-if="$slots.advanced && $slots.more" class="my-5" />
+				<slot name="more"></slot>
+			</div>
+		</Transition>
+	</div>
+</template>
+
+<script>
+import DropdownIcon from "../MaterialIcon/Dropdown.vue";
+
+export default {
+	name: "PropertyCollapsible",
+	components: { DropdownIcon },
+	data() {
+		return { open: false };
+	},
+
+	methods: {
+		toggle() {
+			this.open = !this.open;
+		},
+	},
+};
+</script>
+<style scoped>
+.icon {
+	transform: rotate(0deg);
+	transition: transform var(--evcc-transition-medium) ease;
+}
+.iconUp {
+	transform: rotate(-180deg);
+}
+.v-enter-active,
+.v-leave-active {
+	transition:
+		transform var(--evcc-transition-medium) ease,
+		opacity var(--evcc-transition-medium) ease;
+	transform: translateY(0);
+}
+
+.v-enter-from,
+.v-leave-to {
+	opacity: 0;
+	transform: translateY(-0.5rem);
+}
+</style>

assets/js/components/Config/PropertyEntry.vue

@@ -0,0 +1,53 @@
+<template>
+	<FormRow
+		:id="id"
+		:optional="!Required"
+		:label="Description || `[${Name}]`"
+		:help="Description === Help ? undefined : Help"
+		:example="Example"
+	>
+		<PropertyField
+			:id="id"
+			v-model="value"
+			:masked="Mask"
+			:property="Name"
+			:type="Type"
+			class="me-2"
+			:required="Required"
+			:validValues="ValidValues"
+		/>
+	</FormRow>
+</template>
+
+<script>
+import FormRow from "./FormRow.vue";
+import PropertyField from "./PropertyField.vue";
+
+export default {
+	name: "PropertyEntry",
+	components: { FormRow, PropertyField },
+	props: {
+		id: String,
+		Name: String,
+		Required: Boolean,
+		Description: String,
+		Help: String,
+		Example: String,
+		Type: String,
+		Mask: Boolean,
+		ValidValues: Array,
+		modelValue: [String, Number, Boolean, Object],
+	},
+	emits: ["update:modelValue"],
+	computed: {
+		value: {
+			get() {
+				return this.modelValue;
+			},
+			set(value) {
+				this.$emit("update:modelValue", value);
+			},
+		},
+	},
+};
+</script>

assets/js/components/Config/PropertyField.vue

@@ -83,6 +83,7 @@
 		:step="step"
 		:placeholder="placeholder"
 		:required="required"
+		:autocomplete="masked ? 'off' : null"
 	/>
 </template>
 
@@ -152,11 +153,14 @@ export default {
 			return this.property === "icon";
 		},
 		textarea() {
-			return ["accessToken", "refreshToken"].includes(this.property);
+			return ["accessToken", "refreshToken", "identifiers"].includes(this.property);
 		},
 		boolean() {
 			return this.type === "Bool";
 		},
+		array() {
+			return this.type === "StringList";
+		},
 		select() {
 			return this.validValues.length > 0;
 		},
@@ -182,7 +186,7 @@ export default {
 			get() {
 				// use first option if no value is set
 				if (this.selectOptions.length > 0 && !this.modelValue) {
-					return this.selectOptions[0].key;
+					return this.required ? this.selectOptions[0].key : "";
 				}
 
 				if (this.scale) {
@@ -193,6 +197,10 @@ export default {
 					return this.modelValue === true;
 				}
 
+				if (this.array) {
+					return Array.isArray(this.modelValue) ? this.modelValue.join("\n") : "";
+				}
+
 				return this.modelValue;
 			},
 			set(value) {
@@ -202,6 +210,10 @@ export default {
 					newValue = value / this.scale;
 				}
 
+				if (this.array) {
+					newValue = value ? value.split("\n") : [];
+				}
+
 				this.$emit("update:modelValue", newValue);
 			},
 		},