Merge pull request #353 from openWB/feature-web-theme

Feature web theme
openWB · Oct 6, 2023 · 2102097 · 2102097
2 parents 7b2721b + 9269c95
commit 2102097
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 3 deletions.
diff --git 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/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
@@ -0,0 +1,45 @@
+<template>
+	<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
+			}}" 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>
+	<openwb-base-alert v-else subtype="info">
+		Das Web Theme "{{ webThemeType }}" kann nicht angepasst werden.
+	</openwb-base-alert>
+</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
@@ -0,0 +1,36 @@
+<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
@@ -411,14 +411,56 @@
 					</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
 						diese openWB im Steuerungsmodus "secondary" befindet.
 					</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 +505,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 +526,51 @@ 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>