Colors theme (web): Fixes, Price chart updates

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

@@ -17,35 +17,35 @@
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
     "d3": "^7.9.0",
-    "mqtt": "^5.10.1",
+    "mqtt": "^5.10.2",
     "process": "^0.11.10",
-    "swiper": "^11.1.14",
+    "swiper": "^11.1.15",
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@babel/types": "^7.25.8",
+    "@babel/types": "^7.26.0",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@rushstack/eslint-patch": "^1.10.4",
     "@tsconfig/node20": "^20.1.4",
     "@types/bootstrap": "^5.2.10",
     "@types/d3": "^7.4.3",
-    "@types/node": "^20.16.13",
+    "@types/node": "^20.17.7",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue": "^5.2.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
-    "@vue/tsconfig": "^0.5.1",
+    "@vue/tsconfig": "^0.6.0",
     "esbuild": "^0.21.5",
     "eslint": "^8.57.1",
-    "eslint-plugin-vue": "^9.29.1",
-    "npm-run-all2": "^6.2.4",
+    "eslint-plugin-vue": "^9.31.0",
+    "npm-run-all2": "^7.0.1",
     "prettier": "^3.3.3",
-    "rollup": "^4.24.0",
+    "rollup": "^4.27.4",
     "rollup-plugin-polyfill-node": "^0.13.0",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.9",
-    "vue-tsc": "^2.1.6"
+    "typescript": "^5.6.2",
+    "vite": "^5.4.11",
+    "vue-tsc": "^2.1.10"
   }
 }

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

@@ -39,6 +39,8 @@ export class Config {
 	private _showInverters = false
 	private _alternativeEnergy = false
 	private _debug: boolean = false
+	private _lowerPriceBound = 0
+	private _upperPriceBound = 0
 	isEtEnabled: boolean = false
 	etPrice: number = 20.5
 	showRightButton = true
@@ -47,6 +49,7 @@ export class Config {
 	animationDuration = 300
 	animationDelay = 100
 	zoomGraph = false
+	zoomedWidget = 1
 	constructor() {}
 	get showRelativeArcs() {
 		return this._showRelativeArcs
@@ -284,6 +287,26 @@ export class Config {
 	setAlternativeEnergy(show: boolean) {
 		this._alternativeEnergy = show
 	}
+	get lowerPriceBound() {
+		return this._lowerPriceBound
+	}
+	set lowerPriceBound(val: number) {
+		this._lowerPriceBound = val
+		savePrefs()
+	}
+	setLowerPriceBound(val: number) {
+		this._lowerPriceBound = val
+	}
+	get upperPriceBound() {
+		return this._upperPriceBound
+	}
+	set upperPriceBound(val: number) {
+		this._upperPriceBound = val
+		savePrefs()
+	}
+	setUpperPriceBound(val: number) {
+		this._upperPriceBound = val
+	}
 }
 
 export const globalConfig = reactive(new Config())
@@ -457,6 +480,8 @@ interface Preferences {
 	showPrices?: boolean
 	showInv?: boolean
 	altEngy?: boolean
+	lowerP?: number
+	upperP?: number
 	debug?: boolean
 }
 
@@ -487,6 +512,8 @@ function writeCookie() {
 	prefs.showPrices = globalConfig.showPrices
 	prefs.showInv = globalConfig.showInverters
 	prefs.altEngy = globalConfig.alternativeEnergy
+	prefs.lowerP = globalConfig.lowerPriceBound
+	prefs.upperP = globalConfig.upperPriceBound
 	prefs.debug = globalConfig.debug
 
 	document.cookie =
@@ -576,6 +603,12 @@ function readCookie() {
 		if (prefs.altEngy !== undefined) {
 			globalConfig.setAlternativeEnergy(prefs.altEngy)
 		}
+		if (prefs.lowerP !== undefined) {
+			globalConfig.setLowerPriceBound(prefs.lowerP)
+		}
+		if (prefs.upperP !== undefined) {
+			globalConfig.setUpperPriceBound(prefs.upperP)
+		}
 		if (prefs.debug !== undefined) {
 			globalConfig.setDebug(prefs.debug)
 		}

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

@@ -27,7 +27,7 @@ Hagen */
 			</InfoItem>
 			<InfoItem heading="Geladen:" class="grid-col-4">
 				<span>
-					{{ formatWattH(usageSummary.batIn.energy) }}
+					{{ formatWattH(importedSum) }}
 				</span>
 			</InfoItem>
 			<InfoItem heading="Geliefert" class="grid-right grid-col-4">
@@ -68,6 +68,13 @@ const statusbg = computed(() => {
 			? 'var(--color-battery)'
 			: 'var(--color-menu)'
 })
+const importedSum = computed(() => {
+	let sum = 0
+	batteries.value.forEach((bat) => {
+		sum += bat.dailyYieldImport
+	})
+	return sum
+})
 </script>
 
 <style scoped>

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

@@ -56,12 +56,12 @@
 		<!-- Car information-->
 		<template #footer>
 			<div v-if="!configmode">
-				<div class="row" @click="configmode = !configmode">
+				<div class="row">
 					<div class="col">
 						<div
 							class="carTitleLine d-flex justify-content-between align-items-center"
 						>
-							<h3>
+							<h3 @click="configmode = !configmode">
 								<i class="fa-solid fa-sm fa-car me-2" />
 								{{ chargepoint.vehicleName }}
 								<span
@@ -77,21 +77,21 @@
 									class="me-0 fa-solid fa-xs fa-clock ps-1"
 								/>
 							</h3>
-							<WbBadge v-if="soc != null" :bgcolor="batcolor">
+							<WbBadge v-if="chargepoint.isSocConfigured" :bgcolor="batcolor">
 								<BatterySymbol
-									:soc="soc"
+									:soc="soc ?? 0"
 									color="var(--color-bg)"
 									class="me-2"
 								/>
 								<i
-									v-if="chargepoint.isSocConfigured && chargepoint.isSocManual"
+									v-if="chargepoint.isSocManual"
 									class="fa-solid fa-sm fas fa-edit"
-									:style="{ color: 'var(--color-menu)' }"
+									:style="{ color: 'var(--color-bg)' }"
 									@click="editSoc = !editSoc"
 								/>
 
 								<i
-									v-if="chargepoint.isSocConfigured && !chargepoint.isSocManual"
+									v-if="!chargepoint.isSocManual"
 									type="button"
 									class="fa-solid fa-sm"
 									:class="
@@ -476,10 +476,6 @@ const editPrice = ref(false)
 	color: var(--color-battery);
 }
 
-.fa-edit {
-	color: var(--color-menu);
-}
-
 .socEditor {
 	border: 1px solid var(--color-menu);
 	justify-self: stretch;

packages/modules/web_themes/colors/source/src/components/chargePointList/model.ts

@@ -1,4 +1,4 @@
-import { reactive } from 'vue'
+import { computed, reactive } from 'vue'
 import { updateServer } from '@/assets/js/sendMessages'
 import { ChargeMode, type PowerItem } from '@/assets/js/types'
 import { globalConfig } from '@/assets/js/themeConfig'
@@ -451,3 +451,39 @@ export function resetChargePoints() {
 		delete chargePoints[parseInt(key)]
 	})
 }
+
+export const topVehicles = computed(() => {
+	const result: number[] = []
+	const cps = Object.values(chargePoints)
+	const vhcls = Object.values(vehicles).filter((v) => v.visible)
+	// vehicle 1
+	let v1 = -1
+	switch (cps.length) {
+		case 0:
+			v1 = vhcls[0] ? vhcls[0].id : -1
+			break
+		default:
+			v1 = cps[0].connectedVehicle //?? vhcls[0] ? vhcls[0].id : -1
+	}
+	// vehicle 2
+	let v2 = -1
+	switch (cps.length) {
+		case 0:
+		case 1:
+			v2 = vhcls[0] ? vhcls[0].id : -1
+			break
+		default:
+			v2 = cps[1].connectedVehicle //?? vhcls[1] ? vhcls[1].id : -1
+	}
+	// change v2 if the same as v1
+	if (v1 == v2) {
+		v2 = vhcls[1] ? vhcls[1].id : -1
+	}
+	if (v1 != -1) {
+		result.push(v1)
+	}
+	if (v2 != -1) {
+		result.push(v2)
+	}
+	return result
+})

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

@@ -4,16 +4,26 @@
 			{{ heading }}
 		</template>
 		<template #buttons>
-			<PgSelector
-				widgetid="graphsettings"
-				:show-left-button="true"
-				:show-right-button="true"
-				:ignore-live="true"
-				@shift-left="shiftLeft"
-				@shift-right="shiftRight"
-				@shift-up="shiftUp"
-				@shift-down="shiftDown"
-			/>
+			<div class="d-flex justify-content-end">
+				<PgSelector
+					widgetid="graphsettings"
+					:show-left-button="true"
+					:show-right-button="true"
+					:ignore-live="true"
+					@shift-left="shiftLeft"
+					@shift-right="shiftRight"
+					@shift-up="shiftUp"
+					@shift-down="shiftDown"
+				/>
+				<span
+					v-if="widescreen"
+					type="button"
+					class="ms-1 p-0 pt-1"
+					@click="zoomGraph"
+				>
+					<span class="fa-solid fa-lg ps-1 fa-magnifying-glass" />
+				</span>
+			</div>
 		</template>
 		<figure id="energymeter" class="p-0 m-0">
 			<svg viewBox="0 0 500 500">
@@ -70,7 +80,7 @@ import EMYAxis from './EMYAxis.vue'
 import EMLabels from './EMLabels.vue'
 import WBWidget from '../shared/WBWidget.vue'
 import PgSelector from '../powerGraph/PgSelector.vue'
-import { globalConfig } from '@/assets/js/themeConfig'
+import { globalConfig, widescreen } from '@/assets/js/themeConfig'
 import {
 	shiftLeft,
 	shiftRight,
@@ -187,6 +197,14 @@ function printDebugOutput() {
 	console.debug(['usage details:', usageDetails.value])
 	console.debug(['historic summary:', historicSummary])
 }
+function zoomGraph() {
+	globalConfig.zoomedWidget = 2
+	globalConfig.zoomGraph = !globalConfig.zoomGraph
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+.fa-magnifying-glass {
+	color: var(--color-menu);
+}
+</style>