Config UI: General layout (#13166)

assets/js/components/Config/GeneralConfig.vue

@@ -0,0 +1,151 @@
+<template>
+	<div class="group pt-4 px-4 pb-1">
+		<dl class="row" data-testid="generalconfig-title">
+			<dt class="col-sm-4">Title</dt>
+			<dd class="col-sm-8">
+				{{ title || "---" }}
+				<a
+					href="#"
+					class="ms-2 d-inline-block text-muted"
+					@click.prevent="openModal('titleModal')"
+				>
+					edit
+				</a>
+				<TitleModal ref="titleModal" @changed="load" />
+			</dd>
+		</dl>
+		<dl class="row">
+			<dt class="col-sm-4">Telemetry</dt>
+			<dd class="col-sm-8">
+				{{ telemetryEnabled ? "on" : "off" }}
+				<a
+					href="#"
+					class="ms-2 d-inline-block text-muted"
+					@click.prevent="openModal('globalSettingsModal')"
+				>
+					change
+				</a>
+			</dd>
+		</dl>
+		<dl class="row wip">
+			<dt class="col-sm-4">Password</dt>
+			<dd class="col-sm-8">
+				*******
+				<a href="#" class="ms-2 d-inline-block text-muted" @click.prevent="todo">edit</a>
+			</dd>
+		</dl>
+		<dl class="row wip">
+			<dt class="col-sm-4">API-Key</dt>
+			<dd class="col-sm-8">
+				*******
+				<a href="#" class="ms-2 d-inline-block text-muted" @click.prevent="todo">show</a>
+			</dd>
+		</dl>
+		<dl class="row wip">
+			<dt class="col-sm-4">Sponsoring</dt>
+			<dd class="col-sm-8">
+				<span class="text-primary"> valid </span>
+				<a href="#" class="ms-2 d-inline-block text-muted" @click.prevent="todo">change</a>
+			</dd>
+		</dl>
+		<dl class="row wip">
+			<dt class="col-sm-4">Server</dt>
+			<dd class="col-sm-8">
+				http://evcc.local:7070
+				<a href="#" class="ms-2 d-inline-block text-muted" @click.prevent="todo">edit</a>
+			</dd>
+		</dl>
+		<dl class="row wip">
+			<dt class="col-sm-4">Update Interval</dt>
+			<dd class="col-sm-8">
+				30s
+				<a href="#" class="ms-2 d-inline-block text-muted" @click.prevent="todo">edit</a>
+			</dd>
+		</dl>
+	</div>
+</template>
+
+<script>
+import Modal from "bootstrap/js/dist/modal";
+import TitleModal from "./TitleModal.vue";
+import api from "../../api";
+import settings from "../../settings";
+
+export default {
+	name: "GeneralConfig",
+	data() {
+		return {
+			title: "",
+		};
+	},
+	components: { TitleModal },
+	emits: ["site-changed"],
+	async mounted() {
+		await this.load();
+	},
+	computed: {
+		telemetryEnabled() {
+			return settings.telemetry === true;
+		},
+	},
+	methods: {
+		async changed() {
+			this.$emit("site-changed");
+			this.load();
+		},
+		async load() {
+			try {
+				let res = await api.get("/config/site");
+				this.title = res.data.result.title;
+			} catch (e) {
+				console.error(e);
+			}
+		},
+		todo() {
+			alert("not implemented");
+		},
+		openModal(id) {
+			const $el = document.getElementById(id);
+			if ($el) {
+				Modal.getOrCreateInstance($el).show();
+			} else {
+				console.error(`modal ${id} not found`);
+			}
+		},
+	},
+};
+</script>
+
+<style scoped>
+.group {
+	border-radius: 1rem;
+	box-shadow: 0 0 0 0 var(--evcc-gray-50);
+	color: var(--evcc-default-text);
+	background: var(--evcc-box);
+	padding: 1rem;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+	min-height: 10rem;
+	margin-bottom: 5rem;
+	border: 1px solid var(--evcc-gray-50);
+	transition: box-shadow var(--evcc-transition-fast) linear;
+}
+
+.group:hover {
+	border-color: var(--evcc-gray);
+}
+
+.group:focus-within {
+	box-shadow: 0 0 1rem 0 var(--evcc-gray-50);
+}
+
+.wip {
+	opacity: 0.2;
+}
+dt {
+	margin-bottom: 0.5rem;
+}
+dd {
+	margin-bottom: 1rem;
+}
+</style>

assets/js/components/Config/TitleModal.vue

@@ -0,0 +1,90 @@
+<template>
+	<GenericModal
+		id="titleModal"
+		ref="modal"
+		:title="$t('config.title.title')"
+		data-testid="title-modal"
+	>
+		<p class="text-danger" v-if="error">{{ error }}</p>
+		<form ref="form" class="container mx-0 px-0">
+			<FormRow
+				id="siteTitle"
+				:label="$t('config.title.label')"
+				:help="$t('config.title.description')"
+			>
+				<input id="siteTitle" v-model="title" class="form-control" />
+			</FormRow>
+			<div class="my-4 d-flex justify-content-between">
+				<button 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="saving"
+					@click.prevent="save"
+				>
+					<span
+						v-if="saving"
+						class="spinner-border spinner-border-sm"
+						role="status"
+						aria-hidden="true"
+					></span>
+					{{ $t("config.general.save") }}
+				</button>
+			</div>
+		</form>
+	</GenericModal>
+</template>
+
+<script>
+import GenericModal from "../GenericModal.vue";
+import FormRow from "./FormRow.vue";
+import api from "../../api";
+
+export default {
+	name: "TitleModal",
+	components: { FormRow, GenericModal },
+	emits: ["changed"],
+	data() {
+		return {
+			saving: false,
+			error: "",
+			title: "",
+		};
+	},
+	async mounted() {
+		await this.load();
+	},
+	methods: {
+		async load() {
+			try {
+				const { data } = await api.get("/config/site");
+				this.title = data.result.title;
+			} catch (e) {
+				console.error(e);
+			}
+		},
+		async save() {
+			this.saving = true;
+			this.error = "";
+			try {
+				await api.put("/config/site", { title: this.title });
+				this.$emit("changed");
+				this.$refs.modal.close();
+			} catch (e) {
+				console.error(e);
+				this.error = e.response.data.error;
+			}
+			this.saving = false;
+		},
+	},
+};
+</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;
+}
+</style>