From 198e94e69537ca76b1a289daae459c8fedc8f8e4 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Thu, 28 Mar 2024 10:27:31 +0100
Subject: [PATCH] Config UI: General layout (#13166)

---
 assets/js/components/Config/GeneralConfig.vue | 151 ++++++++++++++++++
 assets/js/components/Config/SiteSettings.vue  | 124 --------------
 assets/js/components/Config/TitleModal.vue    |  90 +++++++++++
 assets/js/components/GenericModal.vue         |  74 +++++++++
 assets/js/components/TelemetrySettings.vue    |   3 +-
 assets/js/views/Config.vue                    |  10 +-
 i18n/de.toml                                  |  11 +-
 i18n/en.toml                                  |  11 +-
 tests/config.spec.js                          |  22 ++-
 9 files changed, 351 insertions(+), 145 deletions(-)
 create mode 100644 assets/js/components/Config/GeneralConfig.vue
 delete mode 100644 assets/js/components/Config/SiteSettings.vue
 create mode 100644 assets/js/components/Config/TitleModal.vue
 create mode 100644 assets/js/components/GenericModal.vue

diff --git a/assets/js/components/Config/GeneralConfig.vue b/assets/js/components/Config/GeneralConfig.vue
new file mode 100644
index 000000000..cf9ef3bb6
--- /dev/null
+++ b/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>
diff --git a/assets/js/components/Config/SiteSettings.vue b/assets/js/components/Config/SiteSettings.vue
deleted file mode 100644
index c5fa21d29..000000000
--- a/assets/js/components/Config/SiteSettings.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-	<div class="group p-4 pb-2">
-		<form class="container mx-0 px-0">
-			<FormRow id="siteTitle" label="Site title">
-				<input
-					id="siteTitle"
-					v-model="modifiedFormData.title"
-					class="form-control"
-					placeholder="Home"
-				/>
-			</FormRow>
-			<FormRow id="adminPassword" label="Admin password" class="wip">
-				<input
-					id="adminPassword"
-					type="password"
-					value="- not set -"
-					class="form-control"
-					disabled
-				/>
-			</FormRow>
-			<FormRow id="sponsorToken" label="Sponsor token" class="wip">
-				<textarea id="sponsorToken" class="form-control" rows="3" disabled value="tba" />
-			</FormRow>
-			<div class="my-4 d-flex justify-content-end">
-				<button type="reset" class="btn btn-link text-muted" @click.prevent="reset">
-					{{ $t("config.site.cancel") }}
-				</button>
-				<button
-					type="submit"
-					class="btn btn-primary"
-					:disabled="!saveNeeded || saving"
-					@click.prevent="save"
-				>
-					<span
-						v-if="saving"
-						class="spinner-border spinner-border-sm"
-						role="status"
-						aria-hidden="true"
-					></span>
-					{{ $t("config.site.save") }}
-				</button>
-			</div>
-		</form>
-	</div>
-</template>
-
-<script>
-import api from "../../api";
-import FormRow from "../FormRow.vue";
-
-export default {
-	name: "SiteSettings",
-	components: { FormRow },
-	data() {
-		return {
-			originalFormData: { title: "" },
-			modifiedFormData: { title: "" },
-			saving: false,
-		};
-	},
-	emits: ["site-changed"],
-	async mounted() {
-		await this.load();
-	},
-	computed: {
-		saveNeeded() {
-			return JSON.stringify(this.modifiedFormData) !== JSON.stringify(this.originalFormData);
-		},
-	},
-	methods: {
-		async load() {
-			try {
-				const { data } = await api.get("/config/site");
-				this.originalFormData.title = data.result.title;
-			} catch (e) {
-				console.error(e);
-			}
-			this.modifiedFormData = { ...this.originalFormData };
-		},
-		async save() {
-			this.saving = true;
-			try {
-				await api.put("/config/site", this.modifiedFormData);
-				this.$emit("site-changed");
-			} catch (e) {
-				console.error(e);
-			}
-			this.saving = false;
-			await this.load();
-		},
-		reset() {
-			this.modifiedFormData = { ...this.originalFormData };
-		},
-	},
-};
-</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 1rem 0.5rem;
-	display: block;
-	list-style-type: none;
-	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;
-}
-</style>
diff --git a/assets/js/components/Config/TitleModal.vue b/assets/js/components/Config/TitleModal.vue
new file mode 100644
index 000000000..057167ea5
--- /dev/null
+++ b/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>
diff --git a/assets/js/components/GenericModal.vue b/assets/js/components/GenericModal.vue
new file mode 100644
index 000000000..fbd3a0d5c
--- /dev/null
+++ b/assets/js/components/GenericModal.vue
@@ -0,0 +1,74 @@
+<template>
+	<Teleport to="body">
+		<div
+			:id="id"
+			ref="modal"
+			class="modal fade text-dark"
+			data-bs-backdrop="true"
+			tabindex="-1"
+			role="dialog"
+			aria-hidden="true"
+			:data-testid="dataTestid"
+		>
+			<div class="modal-dialog modal-dialog-centered" role="document">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title">
+							{{ title }}
+						</h5>
+						<button
+							type="button"
+							class="btn-close"
+							data-bs-dismiss="modal"
+							aria-label="Close"
+						></button>
+					</div>
+					<div class="modal-body">
+						<slot />
+					</div>
+				</div>
+			</div>
+		</div>
+	</Teleport>
+</template>
+
+<script>
+import Modal from "bootstrap/js/dist/modal";
+
+export default {
+	name: "GenericModal",
+	props: {
+		id: String,
+		title: String,
+		dataTestid: String,
+	},
+	emits: ["visibilityChanged"],
+	watch: {
+		isModalVisible(visible) {
+			this.$emit("changed", visible);
+		},
+	},
+	mounted() {
+		this.$refs.modal.addEventListener("show.bs.modal", this.modalVisible);
+		this.$refs.modal.addEventListener("hide.bs.modal", this.modalInvisible);
+	},
+	unmounted() {
+		this.$refs.modal?.removeEventListener("show.bs.modal", this.modalVisible);
+		this.$refs.modal?.removeEventListener("hide.bs.modal", this.modalInvisible);
+	},
+	methods: {
+		modalVisible() {
+			this.isModalVisible = true;
+		},
+		modalInvisible() {
+			this.isModalVisible = false;
+		},
+		open() {
+			Modal.getOrCreateInstance(this.$refs.modal).show();
+		},
+		close() {
+			Modal.getOrCreateInstance(this.$refs.modal).hide();
+		},
+	},
+};
+</script>
diff --git a/assets/js/components/TelemetrySettings.vue b/assets/js/components/TelemetrySettings.vue
index 434c042ca..e8dc7c1e7 100644
--- a/assets/js/components/TelemetrySettings.vue
+++ b/assets/js/components/TelemetrySettings.vue
@@ -3,7 +3,7 @@
 	<div class="form-check form-switch my-3">
 		<input
 			id="telemetryEnabled"
-			v-model="enabled"
+			:checked="enabled"
 			class="form-check-input"
 			type="checkbox"
 			role="switch"
@@ -75,6 +75,7 @@ export default {
 			}
 			try {
 				const response = await api.get("settings/telemetry");
+				console.log("update in settings", response.data.result);
 				settings.telemetry = response.data.result;
 			} catch (err) {
 				console.error(err);
diff --git a/assets/js/views/Config.vue b/assets/js/views/Config.vue
index 8ea6760f5..411a17d55 100644
--- a/assets/js/views/Config.vue
+++ b/assets/js/views/Config.vue
@@ -35,7 +35,7 @@
 				</div>
 
 				<h2 class="my-4 mt-5">General</h2>
-				<SiteSettings @site-changed="siteChanged" />
+				<GeneralConfig @site-changed="siteChanged" />
 
 				<h2 class="my-4 mt-5">Grid, PV & Battery Systems</h2>
 				<ul class="p-0 config-list">
@@ -236,14 +236,14 @@ import DeviceCard from "../components/Config/DeviceCard.vue";
 import DeviceTags from "../components/Config/DeviceTags.vue";
 import AddDeviceButton from "../components/Config/AddDeviceButton.vue";
 import MeterModal from "../components/Config/MeterModal.vue";
-import SiteSettings from "../components/Config/SiteSettings.vue";
+import GeneralConfig from "../components/Config/GeneralConfig.vue";
 import formatter from "../mixins/formatter";
 
 export default {
 	name: "Config",
 	components: {
 		TopHeader,
-		SiteSettings,
+		GeneralConfig,
 		VehicleIcon,
 		VehicleModal,
 		DeviceCard,
@@ -457,10 +457,6 @@ export default {
 	grid-gap: 1rem;
 	margin-bottom: 5rem;
 }
-.wrapper {
-	max-width: 900px;
-	margin: 0 auto;
-}
 .wip {
 	opacity: 0.2 !important;
 }
diff --git a/i18n/de.toml b/i18n/de.toml
index a06004b55..54a954b60 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -46,6 +46,10 @@ socLimit = "SoC Begrenzung"
 example = "Beispiel"
 optional = "optional"
 
+[config.general]
+cancel = "Abbrechen"
+save = "Speichern"
+
 [config.grid]
 titleAdd = "Stromzähler (Netz) hinzufügen"
 titleEdit = "Stromzähler (Netz) bearbeiten"
@@ -72,9 +76,10 @@ validateSave = "Überprüfen & speichern"
 titleAdd = "Zähler (PV) hinzufügen"
 titleEdit = "Zähler (PV) bearbeiten"
 
-[config.site]
-cancel = "Abbrechen"
-save = "Speichern"
+[config.title]
+description = "Wird in der Hauptansicht und im Browser-Tab angezeigt."
+label = "Titel"
+title = "Titel bearbeiten"
 
 [config.validation]
 failed = "fehlgeschlagen"
diff --git a/i18n/en.toml b/i18n/en.toml
index 7623f011e..02d732f20 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -46,6 +46,10 @@ socLimit = "Limit"
 example = "Example"
 optional = "optional"
 
+[config.general]
+cancel = "Cancel"
+save = "Save"
+
 [config.grid]
 titleAdd = "Add Grid Meter"
 titleEdit = "Edit Grid Meter"
@@ -72,9 +76,10 @@ validateSave = "Validate & save"
 titleAdd = "Add Solar Meter"
 titleEdit = "Edit Solar Meter"
 
-[config.site]
-cancel = "Cancel"
-save = "Save"
+[config.title]
+description = "Displayed on main screen and browser tab."
+label = "Title"
+title = "Edit Title"
 
 [config.validation]
 failed = "failed"
diff --git a/tests/config.spec.js b/tests/config.spec.js
index 88b6b7dc4..207eabc95 100644
--- a/tests/config.spec.js
+++ b/tests/config.spec.js
@@ -187,7 +187,7 @@ test.describe("meters", async () => {
   });
 });
 
-test.describe("site", async () => {
+test.describe("general", async () => {
   test("change site title", async ({ page }) => {
     // initial value on main ui
     await page.goto("/");
@@ -195,15 +195,23 @@ test.describe("site", async () => {
 
     // change value in config
     await page.goto("/#/config");
-    await page.getByLabel("Site title").fill("Whoops World");
+    await expect(page.getByTestId("generalconfig-title")).toContainText("Hello World");
+    await page.getByTestId("generalconfig-title").getByRole("link", { name: "edit" }).click();
+    const modal = page.getByTestId("title-modal");
+    await expect(modal).toBeVisible();
+    await modal.getByLabel("Title").fill("Whoops World");
 
-    // reset form to initial value
-    await page.getByRole("button", { name: "Cancel" }).click();
-    await expect(page.getByLabel("Site title")).toHaveValue("Hello World");
+    // close modal and ignore entry on cancel
+    await modal.getByRole("button", { name: "Cancel" }).click();
+    await expect(modal).not.toBeVisible();
+    await expect(page.getByTestId("generalconfig-title")).toContainText("Hello World");
 
     // change and save value
-    await page.getByLabel("Site title").fill("Ahoy World");
-    await page.getByRole("button", { name: "Save" }).click();
+    await page.getByTestId("generalconfig-title").getByRole("link", { name: "edit" }).click();
+    await modal.getByLabel("Title").fill("Ahoy World");
+    await modal.getByRole("button", { name: "Save" }).click();
+    await expect(modal).not.toBeVisible();
+    await expect(page.getByTestId("generalconfig-title")).toContainText("Ahoy World");
 
     // check changed value on main ui
     await page.getByTestId("home-link").click();