colors theme: updated functions and error fixes

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

@@ -192,7 +192,7 @@ body>.container-fluid {
 	--color-subframe: lightgrey;
 	--color-fg: black;
 	--color-scale: lightgrey;
-	--color-title: black;
+	--color-title: rgba(0, 0, 0, 0.644);
 	--padding-widget: 5px;
 	--fontCol: rgba(255, 255, 255, 0.82);
 	--gridCol: rgba(255, 255, 255, 0.82);

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

@@ -24,6 +24,8 @@ import {
 	processVehicleTemplateMessages,
 } from '@/components/chargePointList/processMessages'
 import { processSmarthomeMessages } from '@/components/smartHome/processMessages'
+import { addCounter, counters } from '@/components/counterList/model'
+import { mqttClientId } from './mqttClient'
 
 const topicsToSubscribe = [
 	'openWB/counter/#',
@@ -35,6 +37,7 @@ const topicsToSubscribe = [
 	'openWB/optional/et/#',
 	'openWB/system/#',
 	'openWB/LegacySmartHome/#',
+	'openWB/command/#',
 ]
 export function msgInit() {
 	mqttRegister(processMqttMessage)
@@ -74,34 +77,51 @@ function processMqttMessage(topic: string, payload: Buffer) {
 	} else if (topic.match(/^openwb\/optional\/et\//i)) {
 		processEtProviderMessages(topic, message)
 	} // else if ( mqttTopic.match( /^openwb\/global\//i) ) { processGlobalMessages(mqttTopic, message); }
-	//else if (topic.match(/^openwb\/system\//i)) {
-	//	processSystemMessages(topic, message)
-	//}  else if ( mqttTopic.match( /^openwb\/verbraucher\//i) ) { processVerbraucherMessages(mqttTopic, message); }
+	else if (topic.match(/^openwb\/system\//i)) {
+		processSystemMessages(topic, message)
+	} // else if ( mqttTopic.match( /^openwb\/verbraucher\//i) ) { processVerbraucherMessages(mqttTopic, message); }
 	// else if ( mqttTopic.match( /^openwb\/hook\//i) ) { processHookMessages(mqttTopic, message); }
 	// else if ( mqttTopic.match( /^openwb\/SmartHome\/Devices\//i) ) { processSmartHomeDevicesMessages(mqttTopic, message); }
 	else if (topic.match(/^openwb\/LegacySmartHome\//i)) {
 		processSmarthomeMessages(topic, message)
+	} else if (topic.match(/^openwb\/command\//i)) {
+		processCommandMessages(topic, message)
 	}
+
 	// else if ( mqttTopic.match( /^openwb\/config\/get\/sofort\/lp\//i) ) { processSofortConfigMessages(mqttTopic, message); }
 }
 function processCounterMessages(topic: string, message: string) {
 	const elements = topic.split('/')
-	if (+elements[2] == globalData.evuId) {
+	const id = +elements[2]
+	if (id == globalData.evuId) {
 		processEvuMessages(topic, message)
 	} else if (elements[3] == 'config') {
 		// console.warn('Ignored counter config message')
-	} else {
+	}
+	if (elements[3] == 'get') {
 		switch (elements[4]) {
 			case 'power':
+				counters[id].power = +message
+				break
 			case 'config':
+				break
 			case 'fault_str':
+				break
 			case 'fault_state':
+				break
 			case 'power_factors':
+				break
 			case 'imported':
+				break
 			case 'exported':
+				break
 			case 'frequency':
-			case 'daily_yield_import':
-			case 'daily_yield_export':
+				break
+			case 'daily_imported':
+				counters[id].energy_imported = +message
+				break
+			case 'daily_exported':
+				counters[id].energy_exported = +message
 				break
 			default:
 			// console.warn('Ignored COUNTER message: ' + topic)
@@ -138,6 +158,7 @@ function processHierarchy(hierarchy: Hierarchy) {
 	switch (hierarchy.type) {
 		case 'counter':
 			// console.info('counter in hierachy: ' + hierarchy.id)
+			addCounter(hierarchy.id, hierarchy.type)
 			break
 		case 'cp':
 			addChargePoint(hierarchy.id)
@@ -152,6 +173,7 @@ function processHierarchy(hierarchy: Hierarchy) {
 		default:
 		// console.warn('Ignored Hierarchy type: ' + hierarchy.type)
 	}
+
 	// recursively process the hierarchy
 	hierarchy.children.forEach((element) => processHierarchy(element))
 }
@@ -203,3 +225,26 @@ function processEvuMessages(topic: string, message: string) {
 		default:
 	}
 }
+
+function processSystemMessages(topic: string, message: string) {
+	if (
+		topic.match(/^openWB\/system\/device\/[0-9]+\/component\/[0-9]+\/config$/i)
+	) {
+		const config = JSON.parse(message)
+		if (config.type == 'counter') {
+			counters[config.id].name = config.name
+		}
+	}
+}
+
+function processCommandMessages(topic: string, message: string) {
+	const tokens = topic.split('/')
+	if (topic.match(/^openWB\/command\/[a-z]+\/error$/i)) {
+		if (tokens[2] == mqttClientId()) {
+			const err = JSON.parse(message)
+			console.error(
+				`Error message from openWB: \nCommand: ${err.command}\nData: JSON.stringify(err.data)\nError:\n ${err.error}`,
+			)
+		}
+	}
+}

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

@@ -21,12 +21,16 @@ export class Config {
 	private _decimalPlaces = 1
 	private _showQuickAccess = true
 	private _simpleCpList = false
+	private _shortCpList = 'no'
 	private _showAnimations = true
 	private _preferWideBoxes = false
 	private _maxPower = 4000
 	private _fluidDisplay = false
 	private _showClock = 'no'
 	private _showButtonBar = true
+	private _showCounters = false
+	private _showVehicles = false
+	private _showPrices = false
 	private _debug: boolean = false
 	isEtEnabled: boolean = false
 	etPrice: number = 20.5
@@ -129,6 +133,16 @@ export class Config {
 	setSimpleCpList(show: boolean) {
 		this._simpleCpList = show
 	}
+	get shortCpList() {
+		return this._shortCpList
+	}
+	set shortCpList(show: string) {
+		this._shortCpList = show
+		savePrefs()
+	}
+	setShortCpList(show: string) {
+		this._shortCpList = show
+	}
 	get showAnimations() {
 		return this._showAnimations
 	}
@@ -184,6 +198,7 @@ export class Config {
 	}
 	set debug(on: boolean) {
 		this._debug = on
+		savePrefs()
 	}
 	setDebug(on: boolean) {
 		this._debug = on
@@ -198,6 +213,36 @@ export class Config {
 	setShowButtonBar(show: boolean) {
 		this._showButtonBar = show
 	}
+	get showCounters() {
+		return this._showCounters
+	}
+	set showCounters(show: boolean) {
+		this._showCounters = show
+		savePrefs()
+	}
+	setShowCounters(show: boolean) {
+		this._showCounters = show
+	}
+	get showVehicles() {
+		return this._showVehicles
+	}
+	set showVehicles(show: boolean) {
+		this._showVehicles = show
+		savePrefs()
+	}
+	setShowVehicles(show: boolean) {
+		this._showVehicles = show
+	}
+	get showPrices() {
+		return this._showPrices
+	}
+	set showPrices(show: boolean) {
+		this._showPrices = show
+		savePrefs()
+	}
+	setShowPrices(show: boolean) {
+		this._showPrices = show
+	}
 }
 export const globalConfig = reactive(new Config())
 export function initConfig() {
@@ -329,11 +374,16 @@ interface Preferences {
 	maxPow?: number
 	showQA?: boolean
 	simpleCP?: boolean
+	shortCP?: string
 	animation?: boolean
 	wideB?: boolean
 	fluidD?: boolean
 	clock?: string
 	showButtonBar?: boolean
+	showCounters?: boolean
+	showVehicles?: boolean
+	showPrices?: boolean
+	debug?: boolean
 }
 
 function writeCookie() {
@@ -351,11 +401,17 @@ function writeCookie() {
 	prefs.maxPow = globalConfig.maxPower
 	prefs.showQA = globalConfig.showQuickAccess
 	prefs.simpleCP = globalConfig.simpleCpList
+	prefs.shortCP = globalConfig.shortCpList
 	prefs.animation = globalConfig.showAnimations
 	prefs.wideB = globalConfig.preferWideBoxes
 	prefs.fluidD = globalConfig.fluidDisplay
 	prefs.clock = globalConfig.showClock
 	prefs.showButtonBar = globalConfig.showButtonBar
+	prefs.showCounters = globalConfig.showCounters
+	prefs.showVehicles = globalConfig.showVehicles
+	prefs.showPrices = globalConfig.showPrices
+	prefs.debug = globalConfig.debug
+
 	document.cookie =
 		'openWBColorTheme=' + JSON.stringify(prefs) + '; max-age=16000000'
 }
@@ -405,6 +461,9 @@ function readCookie() {
 		if (prefs.simpleCP !== undefined) {
 			globalConfig.setSimpleCpList(prefs.simpleCP)
 		}
+		if (prefs.shortCP !== undefined) {
+			globalConfig.setShortCpList(prefs.shortCP)
+		}
 		if (prefs.animation != undefined) {
 			globalConfig.setShowAnimations(prefs.animation)
 		}
@@ -420,5 +479,17 @@ function readCookie() {
 		if (prefs.showButtonBar !== undefined) {
 			globalConfig.setShowButtonBar(prefs.showButtonBar)
 		}
+		if (prefs.showCounters !== undefined) {
+			globalConfig.setShowCounters(prefs.showCounters)
+		}
+		if (prefs.showVehicles !== undefined) {
+			globalConfig.setShowVehicles(prefs.showVehicles)
+		}
+		if (prefs.showPrices !== undefined) {
+			globalConfig.setShowPrices(prefs.showPrices)
+		}
+		if (prefs.debug !== undefined) {
+			globalConfig.setDebug(prefs.debug)
+		}
 	}
 }

packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue

@@ -2,46 +2,54 @@
 Hagen */
 
 <template>
-	<WbWidget v-if="globalData.isBatteryConfigured" :variable-width="true">
+	<WbWidget
+		v-if="globalData.isBatteryConfigured"
+		:variable-width="true"
+		:full-width="false"
+	>
 		<template #title>
 			<span class="fas fa-car-battery me-2" style="color: var(--color-battery)"
 				>&nbsp;</span
 			>
 			<span class="sh-title py-4">Speicher</span>
 		</template>
-		<div class="col m-0 mb-1 p-0 d-flex justify-content-between">
-			<!-- Soc information -->
-			<InfoItem heading="Ladestand:">
-				<BatterySymbol :soc="globalData.batterySoc" class="me-2" />
-			</InfoItem>
-			<!-- Status information -->
-			<InfoItem heading="Status:">
-				<span>
-					{{ batteryState }}
-				</span>
-			</InfoItem>
+		<div class="row m-1 mt-0 p-0">
+			<div class="col m-0 mb-1 p-0 d-flex justify-content-between">
+				<!-- Soc information -->
+				<InfoItem heading="Ladestand:">
+					<BatterySymbol :soc="globalData.batterySoc" class="me-2" />
+				</InfoItem>
+				<!-- Status information -->
+				<InfoItem heading="Status:">
+					<span>
+						{{ batteryState }}
+					</span>
+				</InfoItem>
 
-			<!-- Status information -->
-			<InfoItem heading="Leistung:">
-				<span>
-					{{ powerstring }}
-				</span>
-			</InfoItem>
+				<!-- Status information -->
+				<InfoItem heading="Leistung:">
+					<span>
+						{{ powerstring }}
+					</span>
+				</InfoItem>
+			</div>
 		</div>
-		<div class="col m-0 mt-3 mb-1 p-0 d-flex justify-content-between">
-			<InfoItem heading="">
-				<span class="todaystring mt-4 float-right"> Heute:</span>
-			</InfoItem>
-			<InfoItem heading="Geladen:">
-				<span>
-					{{ formatWattH(usageSummary.batIn.energy) }}
-				</span>
-			</InfoItem>
-			<InfoItem heading="Geliefert">
-				<span>
-					{{ formatWattH(sourceSummary.batOut.energy) }}
-				</span>
-			</InfoItem>
+		<div class="row m-1 mt-0 p-0">
+			<div class="col m-0 mt-0 mb-1 p-0 d-flex justify-content-between">
+				<InfoItem heading="">
+					<span class="todaystring mt-4 float-right"> Heute:</span>
+				</InfoItem>
+				<InfoItem heading="Geladen:">
+					<span>
+						{{ formatWattH(usageSummary.batIn.energy) }}
+					</span>
+				</InfoItem>
+				<InfoItem heading="Geliefert">
+					<span>
+						{{ formatWattH(sourceSummary.batOut.energy) }}
+					</span>
+				</InfoItem>
+			</div>
 		</div>
 	</WbWidget>
 </template>
@@ -72,12 +80,15 @@ const powerstring = computed(() => {
 .battery-color {
 	color: var(--color-battery);
 }
+
 .fg-color {
 	color: var(--color-fg);
 }
+
 .menu-color {
 	color: var(--color-menu);
 }
+
 .todaystring {
 	color: var(--color-menu);
 }

packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue

@@ -176,7 +176,10 @@
 						/>
 					</div>
 					<!-- ET Information -->
-					<div v-if="props.chargepoint.etActive" class="row m-1 p-0">
+					<div
+						v-if="etData.active && props.chargepoint.etActive"
+						class="row m-1 p-0"
+					>
 						<div class="col m-0 mb-1 p-0 d-flex justify-content-between">
 							<InfoItem heading="max. Preis:">
 								{{