Colors theme display: Fixes, Reload/Shutdown-Buttons

packages/modules/display_themes/colors/source/package.json

@@ -30,17 +30,17 @@
     "@tsconfig/node20": "^20.1.4",
     "@types/bootstrap": "^5.2.10",
     "@types/d3": "^7.4.3",
-    "@types/node": "^20.17.12",
+    "@types/node": "^20.17.14",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/eslint-config-prettier": "^10.1.0",
-    "@vue/eslint-config-typescript": "^14.2.0",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.3.0",
     "@vue/tsconfig": "^0.7.0",
     "esbuild": "^0.24.2",
     "eslint": "^9.18.0",
     "eslint-plugin-vue": "^9.32.0",
     "npm-run-all2": "^7.0.2",
     "prettier": "^3.4.2",
-    "rollup": "^4.30.1",
+    "rollup": "^4.31.0",
     "typescript": "^5.7.3",
     "vite": "^6.0.7",
     "vue-tsc": "^2.2.0"

packages/modules/display_themes/colors/source/src/App.vue

@@ -6,8 +6,30 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
 import NavigationBar from './views/NavigationBar.vue'
 import DisplayTheme from './views/DisplayTheme.vue'
+import { wbSettings } from './assets/js/themeConfig'
+
+onMounted(() => {
+	console.log('on mounted')
+	let uri = window.location.search
+	if (uri != '') {
+		console.debug('search', uri)
+		let params = new URLSearchParams(uri)
+		if (params.has('data')) {
+			let data = JSON.parse(params.get('data')!)
+			Object.entries(data).forEach(([key, value]) => {
+				console.log('updateSetting', key, value)
+				if (key.startsWith('parentChargePoint')) {
+					wbSettings[key] = parseInt(value as string)
+				} else {
+					wbSettings[key] = value as string
+				}
+			})
+		}
+	}
+})
 </script>
 
 <style>

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

@@ -162,9 +162,4 @@ export function checkCode(code: string) {
 	return code == displayConfig.code
 }
 
-export function correctHouseConsumption() {
-	usageSummary.house.power =
-		usageSummary.house.power - usageSummary.devices.power
-}
-
 export const currentTime = ref(new Date())

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

@@ -1,11 +1,6 @@
 import { mqttRegister, mqttSubscribe, mqttUnsubscribe } from './mqttClient'
 import type { Hierarchy } from './types'
-import {
-	correctHouseConsumption,
-	globalData,
-	sourceSummary,
-	usageSummary,
-} from './model'
+import { globalData, sourceSummary, usageSummary } from './model'
 import { processLiveGraphMessages } from '../../components/powerGraph/processLiveGraphData'
 import { processDayGraphMessages } from '../../components/powerGraph/processDayGraphData'
 import { processMonthGraphMessages } from '../../components/powerGraph/processMonthYearGraphData'
@@ -152,7 +147,6 @@ function processGlobalCounterMessages(topic: string, message: string) {
 		}
 	} else if (topic.match(/^openwb\/counter\/set\/home_consumption$/i)) {
 		usageSummary.house.power = +message
-		correctHouseConsumption()
 	} else if (
 		topic.match(/^openwb\/counter\/set\/daily_yield_home_consumption$/i)
 	) {

packages/modules/display_themes/colors/source/src/assets/js/sendMessages.ts

@@ -97,10 +97,11 @@ export function updateServer(
 	}
 }
 
-export function sendCommand(event: object) {
-	// console.log ("SENDCOMMAND " + JSON.stringify(event))
+export function sendCommand(command: string, data: object = {}) {
+	console.log('send command ' + command + ' ' + JSON.stringify(data))
+
 	mqttPublish(
-		'openWB/set/command/' + mqttClientId() + '/todo',
-		JSON.stringify(event),
+		`openWB/set/command/${mqttClientId()}/todo`,
+		JSON.stringify({ command: command, data: data }),
 	)
 }

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

@@ -43,6 +43,8 @@ export class Config {
 	animationDuration = 300
 	animationDelay = 100
 	zoomGraph = false
+	parentChargePoint1: undefined
+	parentChargePoint2: undefined
 
 	constructor() {}
 	get showRelativeArcs() {
@@ -249,6 +251,16 @@ export class Config {
 	}
 }
 export const globalConfig = reactive(new Config())
+export const wbSettings: { [key: string]: string | number | undefined } =
+	reactive({
+		localIp: undefined,
+		localBranch: undefined,
+		localCommit: undefined,
+		localVersion: undefined,
+		parentChargePoint1: undefined,
+		parentChargePoint2: undefined,
+	})
+
 export function initConfig() {
 	// readCookie()
 	// set the background
@@ -396,7 +408,7 @@ interface Preferences {
 
 function writeCookie() {
 	const prefs: Preferences = {}
-	prefs.hideSH = Object.values(shDevices)
+	prefs.hideSH = [...shDevices.values()]
 		.filter((device) => !device.showInGraph)
 		.map((device) => device.id)
 	prefs.showLG = globalConfig.graphPreference == 'live'

packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="vehicleinfo justify-content-left">
-		<div class="titleline  mb-3">
+		<div class="titleline mb-3">
 			<DisplayButton @click="openSettings('#chSettings')">
 				<div
 					class="carname d-flex justify-content-left align-items-center px-2"
@@ -42,74 +42,77 @@
 			/>
 		</div>
 		<!-- Car info -->
-		 <div class="infoline">
-		<InfoItem
-			v-if="chargepoint.isSocConfigured"
-			heading="Ladestand:"
-			class="grid-col-4 grid-left"
-		>
-			<BatterySymbol :soc="soc" class="me-2" />
-			<DisplayButton v-if="chargepoint.isSocManual" @click="editSoc = !editSoc">
-				<i
-					class="fa-solid fa-sm fas fa-edit py-0 px-3 mt-3"
-					:style="{ color: 'var(--color-fg)' }"
+		<div class="infoline">
+			<InfoItem
+				v-if="chargepoint.isSocConfigured"
+				heading="Ladestand:"
+				class="grid-col-4 grid-left"
+			>
+				<BatterySymbol :soc="soc" class="me-2" />
+				<DisplayButton
+					v-if="chargepoint.isSocManual"
+					@click="editSoc = !editSoc"
+				>
+					<i
+						class="fa-solid fa-sm fas fa-edit py-0 px-3 mt-3"
+						:style="{ color: 'var(--color-fg)' }"
+					/>
+				</DisplayButton>
+			</InfoItem>
+			<InfoItem
+				v-if="chargepoint.isSocConfigured"
+				heading="Reichweite:"
+				class="grid-col-4"
+			>
+				{{
+					vehicles[props.chargepoint.connectedVehicle]
+						? Math.round(vehicles[props.chargepoint.connectedVehicle].range)
+						: 0
+				}}
+				km
+			</InfoItem>
+			<InfoItem heading="Zeitplan:" class="grid-col-4 grid-right">
+				<span
+					v-if="chargepoint.timedCharging"
+					class="me-1 fa-solid fa-xs fa-clock ps-1"
 				/>
-			</DisplayButton>
-		</InfoItem>
-		<InfoItem
-			v-if="chargepoint.isSocConfigured"
-			heading="Reichweite:"
-			class="grid-col-4"
-		>
-			{{
-				vehicles[props.chargepoint.connectedVehicle]
-					? Math.round(vehicles[props.chargepoint.connectedVehicle].range)
-					: 0
-			}}
-			km
-		</InfoItem>
-		<InfoItem heading="Zeitplan:" class="grid-col-4 grid-right">
-			<span
-				v-if="chargepoint.timedCharging"
-				class="me-1 fa-solid fa-xs fa-clock ps-1"
-			/>
-			{{ props.chargepoint.timedCharging ? 'Ja' : 'Nein' }}
-		</InfoItem>
-</div>
-<div class="infoline">
-		<!-- ET Information -->
-		<InfoItem
-			v-if="etData.active"
-			heading="Preisladen:"
-			class="grid-col-4 grid-left"
-		>
-			<SwitchInput v-model="cp.etActive" />
-			<!--{{ cp.etActive ? 'Ja' : 'Nein' }}-->
-		</InfoItem>
+				{{ props.chargepoint.timedCharging ? 'Ja' : 'Nein' }}
+			</InfoItem>
+		</div>
+		<div class="infoline">
+			<!-- ET Information -->
+			<InfoItem
+				v-if="etData.active"
+				heading="Preisladen:"
+				class="grid-col-4 grid-left"
+			>
+				<SwitchInput v-model="cp.etActive" />
+				<!--{{ cp.etActive ? 'Ja' : 'Nein' }}-->
+			</InfoItem>
 
-		<InfoItem v-if="etData.active" heading="max. Preis:" class="grid-col-4">
-			<DisplayButton v-if="cp.etActive" @click="openSettings('#prSettings')">
-				<span class="maxprice"
-					>{{
-						props.chargepoint.etActive
-							? (Math.round(props.chargepoint.etMaxPrice * 10) / 10).toFixed(
-									1,
-								) + ' ct'
-							: '-'
-					}}
-				</span>
-			</DisplayButton>
-			<span v-else>-</span>
-		</InfoItem>
+			<InfoItem v-if="etData.active" heading="max. Preis:" class="grid-col-4">
+				<DisplayButton v-if="cp.etActive" @click="openSettings('#prSettings')">
+					<span class="maxprice"
+						>{{
+							props.chargepoint.etActive
+								? (Math.round(props.chargepoint.etMaxPrice * 10) / 10).toFixed(
+										1,
+									) + ' ct'
+								: '-'
+						}}
+					</span>
+				</DisplayButton>
+				<span v-else>-</span>
+			</InfoItem>
 
-		<InfoItem
-			v-if="etData.active"
-			heading="akt. Preis:"
-			class="grid-col-4 grid-right"
-		>
-			<span :style="currentPriceStyle">{{ currentPrice }} ct </span>
-		</InfoItem>
-</div>
+			<InfoItem
+				v-if="etData.active"
+				heading="akt. Preis:"
+				class="grid-col-4 grid-right"
+			>
+				<span :style="currentPriceStyle">{{ currentPrice }} ct </span>
+			</InfoItem>
+		</div>
 		<!-- Chargemode buttons -->
 		<RadioBarInput
 			:id="'chargemode-' + chargepoint.name"
@@ -225,11 +228,11 @@ const currentPriceStyle = computed(() => {
 </script>
 <style scoped>
 .titleline {
-	display:flex;
+	display: flex;
 	justify-content: left;
 }
 .infoline {
-	display:flex;
+	display: flex;
 	justify-content: space-between;
 	flex-direction: row;
 }
@@ -262,7 +265,7 @@ const currentPriceStyle = computed(() => {
 	justify-self: stretch;
 }
 .vehicleinfo {
-	display:flex;
+	display: flex;
 	flex-direction: column;
 }
 </style>

packages/modules/display_themes/colors/source/src/components/energyMeter/EnergyMeter.vue

@@ -146,9 +146,7 @@ const heading = 'Energie'
 
 const usageDetails = computed(() => {
 	const cpcount = Object.values(chargePoints).length
-	const shcount = Object.values(shDevices).filter(
-		(dev) => dev.configured,
-	).length
+	const shcount = [...shDevices.values()].filter((dev) => dev.configured).length
 	return [usageSummary.evuOut, usageSummary.devices, usageSummary.charging]
 		.concat(
 			cpcount > 1
@@ -157,7 +155,7 @@ const usageDetails = computed(() => {
 		)
 		.concat(
 			shcount > 1
-				? Object.values(shDevices).filter(
+				? [...shDevices.values()].filter(
 						(row) => row.configured && row.showInGraph,
 					)
 				: [],

packages/modules/display_themes/colors/source/src/components/powerGraph/model.ts

@@ -146,10 +146,8 @@ export const dayGraph = reactive({
 				(this.date.getMonth() + 1).toString().padStart(2, '0') +
 				this.date.getDate().toString().padStart(2, '0')
 			mqttSubscribe(this.topic)
-			sendCommand({
-				command: 'getDailyLog',
-				data: { day: dateString },
-			})
+			sendCommand('getDailyLog',{ day: dateString })
+
 			// graphData.data = []
 		}
 	},
@@ -178,10 +176,7 @@ export const monthGraph = reactive({
 			this.year.toString() + this.month.toString().padStart(2, '0')
 		graphData.data = []
 		mqttSubscribe(this.topic)
-		sendCommand({
-			command: 'getMonthlyLog',
-			data: { month: dateString },
-		})
+		sendCommand('getMonthlyLog',{ month: dateString })
 	},
 	deactivate() {
 		mqttUnsubscribe(this.topic)
@@ -221,10 +216,7 @@ export const yearGraph = reactive({
 		const dateString = this.year.toString()
 		graphData.data = []
 		mqttSubscribe(this.topic)
-		sendCommand({
-			command: 'getYearlyLog',
-			data: { year: dateString },
-		})
+		sendCommand('getYearlyLog', { year: dateString })
 	},
 	deactivate() {
 		mqttUnsubscribe(this.topic)
@@ -342,7 +334,7 @@ export function updateEnergyValues(
 		Object.entries(totals.sh).forEach(([id, values]) => {
 			historicSummary.setEnergy(id, values.energy_imported)
 			const idNumber = id.substring(2)
-			if (!shDevices[+idNumber].countAsHouse) {
+			if (!shDevices.get(+idNumber)!.countAsHouse) {
 				historicSummary.items.devices.energy += values.energy_imported
 			}
 		})
@@ -380,7 +372,7 @@ export function updateEnergyValues(
 					cp.pvPercentage = hcp.pvPercentage
 				}
 			})
-			Object.values(shDevices).map((device) => {
+			shDevices.forEach((device) => {
 				const hDevice = historicSummary.items['sh' + device.id]
 				if (hDevice) {
 					device.energy = hDevice.energy
@@ -409,7 +401,7 @@ function resetPvValues() {
 		cp.energyBat = 0
 		cp.pvPercentage = 0
 	})
-	Object.values(shDevices).map((device) => {
+	shDevices.forEach((device) => {
 		device.energyPv = 0
 		device.energyBat = 0
 		device.pvPercentage = 0