Colors theme: move theme configs to openwb settings, add max price calculator, show price in daily graph

packages/modules/web_themes/colors/source/src/assets/css/style.css

@@ -125,9 +125,7 @@ html {
 .largeTextSize {
 	font-size: var(--font-large);
 }
-.buttonTextSize {
-	font-size: var(--font-large);
-}
+
 h3 {
 	font-size: var(--font-large);
 	color: var(--color-title);
@@ -193,7 +191,7 @@ body>.container-fluid {
 	/* --color-counters: #cab2d6; */
 	/* --color-counters: #a00dd8; */
 	--color-counters: chocolate;
-
+	--color-eco: #f16913;
 	--color-ctr1: chocolate;
 	--color-ctr2: peru;
 	--color-ctr3: sienna;

packages/modules/web_themes/colors/source/src/assets/js/helpers.ts

@@ -4,6 +4,8 @@
  * Copyright (c) 2022 Claus Hagen
  */
 
+import { etData } from '@/components/priceChart/model'
+
 export function formatWatt(watt: number, decimalPlaces = 1) {
 	let wattResult: number
 	if (watt >= 1000 && decimalPlaces < 4) {
@@ -80,10 +82,20 @@ export function formatTime(seconds: number) {
 		return minutes + ' min'
 	}
 }
-export function formatCurrentTime(d: Date) {
-	return d.toLocaleTimeString(['de-DE'], { hour: '2-digit', minute: '2-digit' })
+export function formatCurrentTime(d: Date, includeDay = false) {
+	if (includeDay) {
+		return d.toLocaleTimeString(['de-DE'], {
+			weekday: 'short',
+			hour: '2-digit',
+			minute: '2-digit',
+		})
+	} else {
+		return d.toLocaleTimeString(['de-DE'], {
+			hour: '2-digit',
+			minute: '2-digit',
+		})
+	}
 }
-
 export function formatDate(d: Date, mode: string = 'day') {
 	switch (mode) {
 		case 'day':
@@ -95,7 +107,6 @@ export function formatDate(d: Date, mode: string = 'day') {
 			return `${d.getFullYear()}`
 	}
 }
-
 export function formatMonth(month: number, year: number) {
 	const months = [
 		'Jan',
@@ -122,6 +133,10 @@ export function formatTemp(t: number) {
 		: '-'
 }
 
+export function formatPrice(price: number) {
+	return `${price.toFixed(2)} ${etData.unit}`
+}
+
 export function fgColor(colorname: string) {
 	const root = document.documentElement
 	const style = getComputedStyle(root)

packages/modules/web_themes/colors/source/src/assets/js/model.ts

@@ -32,6 +32,7 @@ export const masterData: { [key: string]: ItemProps } = reactive({
 	counters: { name: 'Zähler', color: 'var(--color-counters)', icon: '\uf0eb' },
 	batIn: { name: '> Bat', color: 'var(--color-battery)', icon: '\uf061\uf5df' },
 	house: { name: 'Haus', color: 'var(--color-house)', icon: '\uf015' },
+	price: { name: 'Strompreis', color: 'crimson', icon: '\uf0d6' },
 })
 export const colormap: Map<string, string[]> = new Map([
 	[

packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts

@@ -39,6 +39,7 @@ const topicsToSubscribe = [
 	'openWB/chargepoint/#',
 	'openWB/vehicle/#',
 	'openWB/general/chargemode_config/pv_charging/#',
+	'openWB/general/web_theme',
 	'openWB/optional/ep/#',
 	'openWB/system/#',
 	'openWB/LegacySmartHome/#',
@@ -77,6 +78,8 @@ function processMqttMessage(topic: string, payload: Buffer) {
 		topic.match(/^openwb\/general\/chargemode_config\/pv_charging\//i)
 	) {
 		processPvConfigMessages(topic, message)
+	} else if (topic.match(/^openwb\/general\/web_theme/i)) {
+		processThemeConfigMessages(topic, message)
 	} else if (topic.match(/^openwb\/graph\//i)) {
 		processLiveGraphMessages(topic, message)
 	} else if (topic.match(/^openwb\/log\/daily\//i)) {
@@ -200,7 +203,21 @@ function processPvConfigMessages(topic: string, message: string) {
 		}
 	}
 }
-
+function processThemeConfigMessages(topic: string, message: string) {
+	const themeConfig = JSON.parse(message).configuration
+	globalConfig.setShowRelativeArcs(themeConfig.showRelativeArcs)
+	globalConfig.setDisplayMode(themeConfig.displayMode)
+	globalConfig.setLiveGraphDuration(themeConfig.liveGraphDuration)
+	globalConfig.setShowGrid(themeConfig.showGrid)
+	globalConfig.setSmartHomeColors(themeConfig.smartHomeColors)
+	globalConfig.setDecimalPlaces(themeConfig.decimalPlaces)
+	globalConfig.setShowCounters(themeConfig.showCounters)
+	globalConfig.setShowVehicles(themeConfig.showVehicles)
+	globalConfig.setShowStandardVehicle(themeConfig.showStandardVehicle)
+	globalConfig.setShowPrices(themeConfig.showPrices)
+	globalConfig.setShowInverters(themeConfig.showInverters)
+	globalConfig.setAlternativeEnergy(themeConfig.alternativeEnergy)
+}
 function processEvuMessages(topic: string, message: string) {
 	const elements = topic.split('/')
 	switch (elements[4]) {
@@ -249,23 +266,6 @@ function processSystemMessages(topic: string, message: string) {
 				}
 				batteries.value.get(config.id)!.name = config.name
 		}
-
-		/* 	if (
-			(config.type == 'counter' || config.type == 'consumption_counter') &&
-			counters[config.id]
-		) {
-			counters[config.id].name = config.name
-		} else if (config.type == 'inverter' ) {
-			if (!pvSystems.value.has(config.id)) {
-				pvSystems.value.set(config.id, new PvSystem(config.id))
-			}
-			pvSystems.value.get(config.id)!.name = config.name
-		} else if (config.type == 'bat') {
-			if (!batteries.value.has(config.id)) {
-				addBattery(config.id)
-			}
-			batteries.value.get(config.id)!.name = config.name
-		} */
 	}
 }