Add support for loading and storing device configuration from/to data…

…base (evcc-io#6199)

assets/css/app.css

@@ -408,6 +408,19 @@ input::-webkit-datetime-edit {
 	--bs-tooltip-color: var(--bs-gray-deep);
 }
 
+.card {
+	--bs-card-bg: var(--evcc-background);
+}
+
+.form-control {
+	background-color: var(--evcc-box);
+	color: var(--evcc-default-text);
+}
+
+input[type="time"]::-webkit-calendar-picker-indicator {
+	display: none;
+}
+
 .table {
 	--bs-table-bg: transparent;
 }

assets/js/app.js

@@ -3,6 +3,7 @@ import smoothscroll from "smoothscroll-polyfill";
 import "../css/app.css";
 import { createApp, h } from "vue";
 import { createMetaManager, plugin as metaPlugin } from "vue-meta";
+import Vue3linkify from "vue-3-linkify";
 import App from "./views/App.vue";
 import setupRouter from "./router";
 import setupI18n from "./i18n";
@@ -68,6 +69,7 @@ app.use(setupRouter(i18n));
 app.use(createMetaManager());
 app.use(metaPlugin);
 app.use(featureflags);
+app.use(Vue3linkify);
 window.app = app.mount("#app");
 
 watchThemeChanges();

assets/js/components/Config/FormRow.vue

@@ -0,0 +1,31 @@
+<template>
+	<div class="mb-3">
+		<label :for="id">
+			<div class="form-label">
+				{{ label }}
+				<small v-if="optional">{{ $t("config.form.optional") }}</small>
+			</div>
+		</label>
+		<div :class="smallValue ? 'w-50' : 'w-100'">
+			<slot />
+		</div>
+		<div class="form-text">
+			<div v-if="example">{{ $t("config.form.example") }}: {{ example }}</div>
+			<div v-if="help" v-linkify:options="{ target: '_blank' }">{{ help }}</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "FormRow",
+	props: {
+		id: String,
+		label: String,
+		help: String,
+		optional: Boolean,
+		smallValue: Boolean,
+		example: String,
+	},
+};
+</script>

assets/js/components/Config/PropertyField.vue

@@ -0,0 +1,126 @@
+<template>
+	<div v-if="unit" class="input-group w-100">
+		<input
+			:id="id"
+			v-model="value"
+			:type="type"
+			:placeholder="placeholder"
+			:required="required"
+			aria-label="unit"
+			:aria-describedby="id + '_unit'"
+			class="form-control"
+		/>
+		<span :id="id + '_unit'" class="input-group-text">{{ unit }}</span>
+	</div>
+	<div v-else-if="icons" :id="id" class="d-flex flex-wrap">
+		<div
+			v-for="{ key } in selectOptions"
+			v-show="key === value || selectMode"
+			:key="key"
+			class="me-2 mb-2"
+		>
+			<input
+				:id="`icon_${key}`"
+				v-model="value"
+				type="radio"
+				class="btn-check"
+				:name="property"
+				autocomplete="off"
+				:required="required"
+				:value="key"
+				@click="toggleSelectMode"
+			/>
+			<label class="btn btn-outline-secondary" :for="`icon_${key}`" :aria-label="key">
+				<VehicleIcon :name="key" />
+			</label>
+		</div>
+	</div>
+	<select v-else-if="select" :id="id" v-model="value" class="form-select">
+		<option v-if="!required" value="">---</option>
+		<option v-for="{ key, name } in selectOptions" :key="key" :value="key">
+			{{ name }}
+		</option>
+	</select>
+	<textarea
+		v-else-if="textarea"
+		:id="id"
+		v-model="value"
+		class="form-control"
+		:type="type"
+		:placeholder="placeholder"
+		:required="required"
+		rows="4"
+	/>
+	<input
+		v-else
+		:id="id"
+		v-model="value"
+		class="form-control"
+		:type="type"
+		:placeholder="placeholder"
+		:required="required"
+	/>
+</template>
+
+<script>
+import VehicleIcon from "../VehicleIcon";
+
+export default {
+	name: "PropertyField",
+	components: { VehicleIcon },
+	props: {
+		id: String,
+		property: String,
+		masked: Boolean,
+		placeholder: String,
+		required: Boolean,
+		validValues: { type: Array, default: () => [] },
+		modelValue: [String, Number, Boolean, Object],
+	},
+	emits: ["update:modelValue"],
+	data: () => {
+		return { selectMode: false };
+	},
+	computed: {
+		type() {
+			return this.masked ? "password" : "text";
+		},
+		unit() {
+			if (this.property === "capacity") {
+				return "kWh";
+			}
+			return null;
+		},
+		icons() {
+			return this.property === "icon";
+		},
+		textarea() {
+			return ["accessToken", "refreshToken"].includes(this.property);
+		},
+		select() {
+			return this.validValues.length > 0;
+		},
+		selectOptions() {
+			return this.validValues.map((value) => ({
+				key: value,
+				name: this.$t(`config.options.${this.property}.${value}`),
+			}));
+		},
+		value: {
+			get() {
+				return this.modelValue;
+			},
+			set(value) {
+				this.$emit("update:modelValue", value);
+			},
+		},
+	},
+	methods: {
+		toggleSelectMode() {
+			this.$nextTick(() => {
+				this.selectMode = !this.selectMode;
+			});
+		},
+	},
+};
+</script>