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/mqttClient.ts

@@ -21,6 +21,7 @@ const mqttConnection = {
 	protocol: (location.protocol == 'https:' ? 'wss' : 'ws') as MqttProtocol,
 	connectTimeout: 4000,
 	reconnectPeriod: 4000,
+	clean: false,
 	clientId: Math.random()
 		.toString(36)
 		.replace(/[^a-z]+/g, '')
@@ -43,6 +44,12 @@ try {
 		//  subscribe(topic);
 		// });
 	})
+	client.on('disconnect', () => {
+		console.info('MQTT disconnected')
+		// topiclist.forEach((topic) => {
+		//  subscribe(topic);
+		// });
+	})
 	client.on('error', (error) => {
 		console.error('MQTT connection failed: ', error)
 	})

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

@@ -1,4 +1,4 @@
-import { mqttRegister, mqttSubscribe } from './mqttClient'
+import { mqttRegister, mqttSubscribe, mqttUnsubscribe } from './mqttClient'
 import type { Hierarchy } from './types'
 import {
 	correctHouseConsumption,
@@ -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/' + mqttClientId() + '/#',
 ]
 export function msgInit() {
 	mqttRegister(processMqttMessage)
@@ -43,6 +46,11 @@ export function msgInit() {
 	})
 	initGraph()
 }
+export function msgStop() {
+	topicsToSubscribe.forEach((topic) => {
+		mqttUnsubscribe(topic)
+	})
+}
 function processMqttMessage(topic: string, payload: Buffer) {
 	const message = payload.toString()
 	if (topic.match(/^openwb\/counter\/[0-9]+\//i)) {
@@ -74,34 +82,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 +163,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 +178,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 +230,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)
+		}
 	}
 }