added charger modal

assets/js/components/Config/ChargerModal.vue

@@ -0,0 +1,362 @@
+<template>
+	<GenericModal
+		id="chargerModal"
+		:title="modalTitle"
+		data-testid="charger-modal"
+		@open="open"
+		@closed="closed"
+	>
+		<form ref="form" class="container mx-0 px-0">
+			<FormRow id="chargerTemplate" :label="$t('config.charger.template')">
+				<select
+					id="chargerTemplate"
+					v-model="templateName"
+					@change="templateChanged"
+					:disabled="!isNew"
+					class="form-select w-100"
+				>
+					<option
+						v-for="option in genericOptions"
+						:key="option.name"
+						:value="option.template"
+					>
+						{{ option.name }}
+					</option>
+					<option v-if="genericOptions.length" disabled>──────────</option>
+					<option
+						v-for="option in templateOptions"
+						:key="option.name"
+						:value="option.template"
+					>
+						{{ option.name }}
+					</option>
+				</select>
+			</FormRow>
+			<p v-if="loadingTemplate">Loading ...</p>
+			<Modbus
+				v-if="modbus"
+				v-model:modbus="values.modbus"
+				v-model:id="values.id"
+				v-model:host="values.host"
+				v-model:port="values.port"
+				v-model:device="values.device"
+				v-model:baudrate="values.baudrate"
+				v-model:comset="values.comset"
+				:defaultId="modbus.ID"
+				:defaultComset="modbus.Comset"
+				:defaultBaudrate="modbus.Baudrate"
+				:defaultPort="modbus.Port"
+				:capabilities="modbusCapabilities"
+			/>
+			<FormRow
+				v-for="param in templateParams"
+				:id="`chargerParam${param.Name}`"
+				:key="param.Name"
+				:optional="!param.Required"
+				:label="param.Description || `[${param.Name}]`"
+				:help="param.Description === param.Help ? undefined : param.Help"
+				:example="param.Example"
+			>
+				<PropertyField
+					:id="`chargerParam${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>
+
+			<TestResult
+				v-if="templateName"
+				:success="testSuccess"
+				:failed="testFailed"
+				:unknown="testUnknown"
+				:running="testRunning"
+				:result="testResult"
+				:error="testError"
+				@test="testManually"
+			/>
+
+			<div v-if="templateName" class="my-4 d-flex justify-content-between">
+				<button
+					v-if="isDeletable"
+					type="button"
+					class="btn btn-link text-danger"
+					@click.prevent="remove"
+				>
+					{{ $t("config.general.delete") }}
+				</button>
+				<button
+					v-else
+					type="button"
+					class="btn btn-link text-muted"
+					data-bs-dismiss="modal"
+				>
+					{{ $t("config.general.cancel") }}
+				</button>
+				<button
+					type="submit"
+					class="btn btn-primary"
+					:disabled="testRunning || saving"
+					@click.prevent="isNew ? create() : update()"
+				>
+					<span
+						v-if="saving"
+						class="spinner-border spinner-border-sm"
+						role="status"
+						aria-hidden="true"
+					></span>
+					{{
+						testUnknown ? $t("config.general.validateSave") : $t("config.general.save")
+					}}
+				</button>
+			</div>
+		</form>
+	</GenericModal>
+</template>
+
+<script>
+import FormRow from "./FormRow.vue";
+import PropertyField from "./PropertyField.vue";
+import TestResult from "./TestResult.vue";
+import api from "../../api";
+import test from "./mixins/test";
+import Modbus from "./Modbus.vue";
+import GenericModal from "../GenericModal.vue";
+
+const initialValues = { type: "template" };
+
+function sleep(ms) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export default {
+	name: "ChargerModal",
+	components: { FormRow, PropertyField, Modbus, TestResult, GenericModal },
+	mixins: [test],
+	props: {
+		id: Number,
+		name: String,
+	},
+	emits: ["added", "updated", "removed", "closed"],
+	data() {
+		return {
+			isModalVisible: false,
+			templates: [],
+			products: [],
+			templateName: null,
+			template: null,
+			saving: false,
+			selectedType: null,
+			loadingTemplate: false,
+			values: { ...initialValues },
+		};
+	},
+	computed: {
+		modalTitle() {
+			if (this.isNew) {
+				return this.$t(`config.charger.titleAdd`);
+			}
+			return this.$t(`config.charger.titleEdit`);
+		},
+		templateOptions() {
+			return this.products.filter((p) => p.group !== "generic");
+		},
+		genericOptions() {
+			return this.products.filter((p) => p.group === "generic");
+		},
+		templateParams() {
+			const params = this.template?.Params || [];
+			return (
+				params
+					// deprecated fields
+					.filter((p) => !p.Deprecated)
+					// remove modbus, handles separately
+					.filter((p) => p.Name !== "modbus")
+			);
+		},
+		modbus() {
+			const params = this.template?.Params || [];
+			return params.find((p) => p.Name === "modbus");
+		},
+		modbusCapabilities() {
+			return this.modbus?.Choice || [];
+		},
+		modbusDefaults() {
+			const { ID, Comset, Baudrate, Port } = this.modbus || {};
+			return {
+				id: ID,
+				comset: Comset,
+				baudrate: Baudrate,
+				port: Port,
+			};
+		},
+		apiData() {
+			return {
+				template: this.templateName,
+				...this.modbusDefaults,
+				...this.values,
+			};
+		},
+		isNew() {
+			return this.id === undefined;
+		},
+		isDeletable() {
+			return !this.isNew;
+		},
+	},
+	watch: {
+		isModalVisible(visible) {
+			if (visible) {
+				this.templateName = null;
+				this.reset();
+				this.loadProducts();
+				if (this.id !== undefined) {
+					this.loadConfiguration();
+				}
+			}
+		},
+		templateName() {
+			this.loadTemplate();
+		},
+		values: {
+			handler() {
+				this.resetTest();
+			},
+			deep: true,
+		},
+	},
+	methods: {
+		reset() {
+			this.values = { ...initialValues };
+			this.resetTest();
+		},
+		async loadConfiguration() {
+			try {
+				const charger = (await api.get(`config/devices/charger/${this.id}`)).data.result;
+				this.values = charger.config;
+				this.applyDefaultsFromTemplate();
+				this.templateName = this.values.template;
+			} catch (e) {
+				console.error(e);
+			}
+		},
+		async loadProducts() {
+			if (!this.isModalVisible) {
+				return;
+			}
+			try {
+				this.products = (await api.get("config/products/charger")).data.result;
+			} catch (e) {
+				console.error(e);
+			}
+		},
+		async loadTemplate() {
+			this.template = null;
+			this.loadingTemplate = true;
+			try {
+				const opts = {
+					params: {
+						lang: this.$i18n?.locale,
+						name: this.templateName,
+					},
+				};
+				const result = await api.get("config/templates/charger", opts);
+				this.template = result.data.result;
+				this.applyDefaultsFromTemplate();
+			} catch (e) {
+				console.error(e);
+			}
+			this.loadingTemplate = false;
+		},
+		applyDefaultsFromTemplate() {
+			const params = this.template?.Params || [];
+			params
+				.filter((p) => p.Default && !this.values[p.Name])
+				.forEach((p) => {
+					this.values[p.Name] = p.Default;
+				});
+		},
+		async create() {
+			if (this.testUnknown) {
+				const success = await this.test(this.testCharger);
+				if (!success) return;
+				await sleep(100);
+			}
+			this.saving = true;
+			try {
+				const response = await api.post("config/devices/charger", this.apiData);
+				const { name } = response.data.result;
+				this.$emit("added", name);
+				this.$emit("updated");
+				this.closed();
+			} catch (e) {
+				console.error(e);
+				alert("create failed");
+			}
+			this.saving = false;
+		},
+		async testManually() {
+			await this.test(this.testCharger);
+		},
+		async testCharger() {
+			let url = "config/test/charger";
+			if (!this.isNew) {
+				url += `/merge/${this.id}`;
+			}
+			return await api.post(url, this.apiData);
+		},
+		async update() {
+			if (this.testUnknown) {
+				const success = await this.test(this.testCharger);
+				if (!success) return;
+				await sleep(250);
+			}
+			this.saving = true;
+			try {
+				await api.put(`config/devices/charger/${this.id}`, this.apiData);
+				this.$emit("updated");
+				this.closed();
+			} catch (e) {
+				console.error(e);
+				alert("update failed");
+			}
+			this.saving = false;
+		},
+		async remove() {
+			try {
+				await api.delete(`config/devices/charger/${this.id}`);
+				this.$emit("removed", this.name);
+				this.$emit("updated");
+				this.closed();
+			} catch (e) {
+				console.error(e);
+				alert("delete failed");
+			}
+		},
+		open() {
+			this.isModalVisible = true;
+		},
+		closed() {
+			this.$emit("closed");
+			this.isModalVisible = false;
+		},
+		templateChanged() {
+			this.reset();
+		},
+	},
+};
+</script>
+<style scoped>
+.container {
+	margin-left: calc(var(--bs-gutter-x) * -0.5);
+	margin-right: calc(var(--bs-gutter-x) * -0.5);
+	padding-right: 0;
+}
+.addButton {
+	min-height: auto;
+}
+</style>