From 601249ddefbcc598d804fb28db34d365ef93a37a Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Wed, 24 May 2023 10:59:30 +0200
Subject: [PATCH 1/2] add web theme selection

---
 src/components/OpenwbBaseHeading.vue          |   3 +-
 .../web_themes/OpenwbWebThemeFallback.vue     |  39 +++++++
 .../web_themes/OpenwbWebThemeProxy.vue        |  37 +++++++
 src/views/GeneralConfig.vue                   | 102 +++++++++++++++++-
 4 files changed, 179 insertions(+), 2 deletions(-)
 create mode 100644 src/components/web_themes/OpenwbWebThemeFallback.vue
 create mode 100644 src/components/web_themes/OpenwbWebThemeProxy.vue

diff --git a/src/components/OpenwbBaseHeading.vue b/src/components/OpenwbBaseHeading.vue
index b259289c..aee732b2 100644
--- a/src/components/OpenwbBaseHeading.vue
+++ b/src/components/OpenwbBaseHeading.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="card-text card-text-heading">
+	<div class="card-text card-text-heading" v-bind="$attrs">
 		<div class="heading-text" v-on:click="toggleHelp">
 			<slot />
 			<font-awesome-icon
@@ -36,6 +36,7 @@ library.add(fasQuestionCircle, farQuestionCircle, fasCheck);
 
 export default {
 	name: "OpenwbHeading",
+	inheritAttrs: false,
 	components: {
 		FontAwesomeIcon,
 	},
diff --git a/src/components/web_themes/OpenwbWebThemeFallback.vue b/src/components/web_themes/OpenwbWebThemeFallback.vue
new file mode 100644
index 00000000..5d66a208
--- /dev/null
+++ b/src/components/web_themes/OpenwbWebThemeFallback.vue
@@ -0,0 +1,39 @@
+<template>
+	<div class="web-theme-fallback">
+		<openwb-base-alert subtype="warning">
+			Es wurde keine Konfigurationsseite für das Web Theme "{{
+				webThemeType
+			}}" gefunden. Die Einstellungen können als JSON direkt bearbeitet
+			werden.
+		</openwb-base-alert>
+		<openwb-base-textarea
+			title="Theme Konfiguration"
+			subtype="json"
+			:model-value="configuration"
+			@update:model-value="updateConfiguration($event, 'configuration')"
+		>
+			<template #help>
+				Bitte prüfen Sie, ob die Eingaben richtig interpretiert werden.
+			</template>
+		</openwb-base-textarea>
+		<openwb-base-alert subtype="info">
+			<pre>{{ JSON.stringify(configuration, undefined, 2) }}</pre>
+		</openwb-base-alert>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "WebThemeFallback",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		webThemeType: { type: String },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>
diff --git a/src/components/web_themes/OpenwbWebThemeProxy.vue b/src/components/web_themes/OpenwbWebThemeProxy.vue
new file mode 100644
index 00000000..418c3b9f
--- /dev/null
+++ b/src/components/web_themes/OpenwbWebThemeProxy.vue
@@ -0,0 +1,37 @@
+<template>
+	<component
+		:is="myComponent"
+		:configuration="configuration"
+		:webThemeType="webThemeType"
+		@update:configuration="updateConfiguration($event)"
+	/>
+</template>
+
+<script>
+import { defineAsyncComponent } from "vue";
+import OpenwbWebThemeFallback from "./OpenwbWebThemeFallback.vue";
+
+export default {
+	name: "OpenwbWebThemeProxy",
+	emits: ["update:configuration"],
+	props: {
+		webThemeType: { type: String, required: true },
+		configuration: { type: Object, required: true },
+	},
+	computed: {
+		myComponent() {
+			console.debug(`loading web theme: ${this.webThemeType}`);
+			return defineAsyncComponent({
+				loader: () =>
+					import(`./${this.webThemeType}/webTheme.vue`),
+				errorComponent: OpenwbWebThemeFallback,
+			});
+		},
+	},
+	methods: {
+		updateConfiguration(event) {
+			this.$emit("update:configuration", event);
+		},
+	},
+};
+</script>
diff --git a/src/views/GeneralConfig.vue b/src/views/GeneralConfig.vue
index 25185157..a21034a3 100644
--- a/src/views/GeneralConfig.vue
+++ b/src/views/GeneralConfig.vue
@@ -411,7 +411,7 @@
 					</div>
 				</div>
 			</openwb-base-card> -->
-			<openwb-base-card title="Lade-Log">
+			<openwb-base-card title="Darstellung">
 				<div v-if="$store.state.mqtt['openWB/general/extern'] === true">
 					<openwb-base-alert subtype="info">
 						Diese Einstellungen sind nicht verfügbar, solange sich
@@ -419,6 +419,57 @@
 					</openwb-base-alert>
 				</div>
 				<div v-else>
+					<openwb-base-heading class="mt-0">
+						Hauptseite
+					</openwb-base-heading>
+					<div
+						v-if="
+							$store.state.mqtt[
+								'openWB/general/web_theme'
+							] !== undefined
+						"
+					>
+						<openwb-base-select-input
+							class="mb-2"
+							title="Theme"
+							:options="webThemeList"
+							:model-value="
+								$store.state.mqtt[
+									'openWB/general/web_theme'
+								].type
+							"
+							@update:model-value="
+								updateSelectedWebTheme($event)
+							"
+						/>
+						<openwb-web-theme-proxy
+							v-if="
+								$store.state.mqtt[
+									'openWB/general/web_theme'
+								].type
+							"
+							:webThemeType="
+								$store.state.mqtt[
+									'openWB/general/web_theme'
+								].type
+							"
+							:configuration="
+								$store.state.mqtt[
+									'openWB/general/web_theme'
+								].configuration
+							"
+							@update:configuration="
+								updateConfiguration(
+									'openWB/general/web_theme',
+									$event
+								)
+							"
+						/>
+					</div>
+					<hr />
+					<openwb-base-heading>
+						Lade-Log
+					</openwb-base-heading>
 					<openwb-base-number-input
 						title="Preis je kWh"
 						:min="0"
@@ -463,10 +514,12 @@
 
 <script>
 import ComponentState from "../components/mixins/ComponentState.vue";
+import OpenwbWebThemeProxy from "../components/web_themes/OpenwbWebThemeProxy.vue";
 
 export default {
 	name: "OpenwbGeneralConfig",
 	mixins: [ComponentState],
+	components: { OpenwbWebThemeProxy },
 	data() {
 		return {
 			mqttTopicsToSubscribe: [
@@ -482,8 +535,55 @@ export default {
 				"openWB/general/notifications/smart_home",
 				"openWB/general/price_kwh",
 				"openWB/general/range_unit",
+				"openWB/general/web_theme",
+				"openWB/system/configurable/web_themes",
 			],
 		};
 	},
+	computed: {
+		webThemeList: {
+			get() {
+				return this.$store.state.mqtt[
+					"openWB/system/configurable/web_themes"
+				];
+			},
+		},
+	},
+	methods: {
+		getWebThemeDefaultConfiguration(webThemeType) {
+			const webThemeDefaults = this.webThemeList.find(
+				(element) => element.value == webThemeType
+			);
+			if (
+				Object.prototype.hasOwnProperty.call(
+					webThemeDefaults,
+					"defaults"
+				)
+			) {
+				return { ...webThemeDefaults.defaults.configuration };
+			}
+			console.warn(
+				"no default configuration found for web theme type!",
+				webThemeType
+			);
+			return {};
+		},
+		updateSelectedWebTheme($event) {
+			this.updateState(
+				"openWB/general/web_theme",
+				$event,
+				"type"
+			);
+			this.updateState(
+				"openWB/general/web_theme",
+				this.getWebThemeDefaultConfiguration($event),
+				"configuration"
+			);
+		},
+		updateConfiguration(key, event) {
+			console.debug("updateConfiguration", key, event);
+			this.updateState(key, event.value, event.object);
+		},
+	},
 };
 </script>

From 9269c9559119f8de356e6b1b695cb66282f8b788 Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Wed, 24 May 2023 11:08:00 +0200
Subject: [PATCH 2/2] linting

---
 .../OpenwbDisplayThemeFallback.vue            |  8 +++-
 .../web_themes/OpenwbWebThemeFallback.vue     |  8 +++-
 .../web_themes/OpenwbWebThemeProxy.vue        |  3 +-
 src/views/GeneralConfig.vue                   | 39 +++++++------------
 4 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/src/components/display_themes/OpenwbDisplayThemeFallback.vue b/src/components/display_themes/OpenwbDisplayThemeFallback.vue
index 9f7e296c..2e66e8f2 100644
--- a/src/components/display_themes/OpenwbDisplayThemeFallback.vue
+++ b/src/components/display_themes/OpenwbDisplayThemeFallback.vue
@@ -1,5 +1,8 @@
 <template>
-	<div class="display-theme-fallback">
+	<div
+		class="display-theme-fallback"
+		v-if="Object.keys(configuration).length > 0"
+	>
 		<openwb-base-alert subtype="warning">
 			Es wurde keine Konfigurationsseite für das Display Theme "{{
 				displayThemeType
@@ -20,6 +23,9 @@
 			<pre>{{ JSON.stringify(configuration, undefined, 2) }}</pre>
 		</openwb-base-alert>
 	</div>
+	<openwb-base-alert v-else subtype="info">
+		Das Display Theme "{{ displayThemeType }}" kann nicht angepasst werden.
+	</openwb-base-alert>
 </template>
 
 <script>
diff --git a/src/components/web_themes/OpenwbWebThemeFallback.vue b/src/components/web_themes/OpenwbWebThemeFallback.vue
index 5d66a208..2f2f0900 100644
--- a/src/components/web_themes/OpenwbWebThemeFallback.vue
+++ b/src/components/web_themes/OpenwbWebThemeFallback.vue
@@ -1,5 +1,8 @@
 <template>
-	<div class="web-theme-fallback">
+	<div
+		class="web-theme-fallback"
+		v-if="Object.keys(configuration).length > 0"
+	>
 		<openwb-base-alert subtype="warning">
 			Es wurde keine Konfigurationsseite für das Web Theme "{{
 				webThemeType
@@ -20,6 +23,9 @@
 			<pre>{{ JSON.stringify(configuration, undefined, 2) }}</pre>
 		</openwb-base-alert>
 	</div>
+	<openwb-base-alert v-else subtype="info">
+		Das Web Theme "{{ webThemeType }}" kann nicht angepasst werden.
+	</openwb-base-alert>
 </template>
 
 <script>
diff --git a/src/components/web_themes/OpenwbWebThemeProxy.vue b/src/components/web_themes/OpenwbWebThemeProxy.vue
index 418c3b9f..d479d08f 100644
--- a/src/components/web_themes/OpenwbWebThemeProxy.vue
+++ b/src/components/web_themes/OpenwbWebThemeProxy.vue
@@ -22,8 +22,7 @@ export default {
 		myComponent() {
 			console.debug(`loading web theme: ${this.webThemeType}`);
 			return defineAsyncComponent({
-				loader: () =>
-					import(`./${this.webThemeType}/webTheme.vue`),
+				loader: () => import(`./${this.webThemeType}/webTheme.vue`),
 				errorComponent: OpenwbWebThemeFallback,
 			});
 		},
diff --git a/src/views/GeneralConfig.vue b/src/views/GeneralConfig.vue
index a21034a3..6d2c0b37 100644
--- a/src/views/GeneralConfig.vue
+++ b/src/views/GeneralConfig.vue
@@ -424,9 +424,8 @@
 					</openwb-base-heading>
 					<div
 						v-if="
-							$store.state.mqtt[
-								'openWB/general/web_theme'
-							] !== undefined
+							$store.state.mqtt['openWB/general/web_theme'] !==
+							undefined
 						"
 					>
 						<openwb-base-select-input
@@ -434,29 +433,23 @@
 							title="Theme"
 							:options="webThemeList"
 							:model-value="
-								$store.state.mqtt[
-									'openWB/general/web_theme'
-								].type
-							"
-							@update:model-value="
-								updateSelectedWebTheme($event)
+								$store.state.mqtt['openWB/general/web_theme']
+									.type
 							"
+							@update:model-value="updateSelectedWebTheme($event)"
 						/>
 						<openwb-web-theme-proxy
 							v-if="
-								$store.state.mqtt[
-									'openWB/general/web_theme'
-								].type
+								$store.state.mqtt['openWB/general/web_theme']
+									.type
 							"
 							:webThemeType="
-								$store.state.mqtt[
-									'openWB/general/web_theme'
-								].type
+								$store.state.mqtt['openWB/general/web_theme']
+									.type
 							"
 							:configuration="
-								$store.state.mqtt[
-									'openWB/general/web_theme'
-								].configuration
+								$store.state.mqtt['openWB/general/web_theme']
+									.configuration
 							"
 							@update:configuration="
 								updateConfiguration(
@@ -467,9 +460,7 @@
 						/>
 					</div>
 					<hr />
-					<openwb-base-heading>
-						Lade-Log
-					</openwb-base-heading>
+					<openwb-base-heading> Lade-Log </openwb-base-heading>
 					<openwb-base-number-input
 						title="Preis je kWh"
 						:min="0"
@@ -569,11 +560,7 @@ export default {
 			return {};
 		},
 		updateSelectedWebTheme($event) {
-			this.updateState(
-				"openWB/general/web_theme",
-				$event,
-				"type"
-			);
+			this.updateState("openWB/general/web_theme", $event, "type");
 			this.updateState(
 				"openWB/general/web_theme",
 				this.getWebThemeDefaultConfiguration($event),