Merge pull request #2204 from cshagen/display-250208

Colors theme (display): Fixes, dependency updates, max price keyboard
openWB · Feb 10, 2025 · 94a44ac · 94a44ac
2 parents c5c0315 + 703ba7c
commit 94a44ac
Show file tree

Hide file tree

Showing 11 changed files with 1,149 additions and 399 deletions.
diff --git a/packages/modules/display_themes/colors/source/package-lock.json b/packages/modules/display_themes/colors/source/package-lock.json
diff --git a/packages/modules/display_themes/colors/source/package.json b/packages/modules/display_themes/colors/source/package.json
@@ -1,6 +1,6 @@
 {
   "name": "colordisplaytheme2",
-  "version": "0.9.0",
+  "version": "2.1.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -20,29 +20,29 @@
     "vue": "^3.5.10"
   },
   "devDependencies": {
-    "@babel/types": "^7.26.5",
+    "@babel/types": "^7.26.8",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
-    "@eslint/compat": "^1.2.5",
+    "@eslint/compat": "^1.2.6",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.18.0",
     "@rushstack/eslint-patch": "^1.10.5",
-    "@tsconfig/node20": "^20.1.4",
+    "@tsconfig/node22": "^22.0.0",
     "@types/bootstrap": "^5.2.10",
     "@types/d3": "^7.4.3",
-    "@types/node": "^20.17.14",
+    "@types/node": "^22.13.1",
     "@vitejs/plugin-vue": "^5.2.1",
     "@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": "^9.20.0",
     "eslint-plugin-vue": "^9.32.0",
     "npm-run-all2": "^7.0.2",
     "prettier": "^3.4.2",
-    "rollup": "^4.31.0",
+    "rollup": "^4.34.6",
     "typescript": "^5.7.3",
-    "vite": "^6.0.7",
+    "vite": "^6.1.0",
     "vue-tsc": "^2.2.0"
   }
 }
diff --git a/packages/modules/display_themes/colors/source/src/assets/js/helpers.ts b/packages/modules/display_themes/colors/source/src/assets/js/helpers.ts
@@ -83,7 +83,7 @@ export function formatTime(seconds: number) {
 	}
 }
 export function formatCurrentTime(d: Date) {
-	return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
+	return d.toLocaleTimeString(['de-DE'], { hour: 'numeric', minute: '2-digit' })
 }
 
 export function formatDate(d: Date, mode: string = 'day') {

diff --git a/...ges/modules/display_themes/colors/source/src/components/chargePointList/CPChargePoint.vue b/...ges/modules/display_themes/colors/source/src/components/chargePointList/CPChargePoint.vue
@@ -160,31 +160,32 @@ const cpNameStyle = computed(() => {
 function openSettings() {
 	if (displayConfig.locked) {
 		unlockDisplay()
-	}
-	const settingspage = new Modal('#settingspage')
-	settingspage.toggle()
-	let chargePanelName = ''
-	switch (props.chargepoint.chargeMode) {
-		case 'instant_charging':
-			chargePanelName = '#inSettings'
-			break
-		case 'pv_charging':
-			chargePanelName = '#phvSettings'
-			break
-		case 'scheduled_charging':
-			chargePanelName = '#scSettings'
-			break
-		default:
-			chargePanelName = '#chSettings'
-	}
-	const tabToActivate = document.querySelector(
-		chargePanelName + props.chargepoint.id,
-	)
-	if (tabToActivate) {
-		var tab = new Tab(tabToActivate)
-		tab.show()
 	} else {
-		console.error('no element found')
+		const settingspage = new Modal('#settingspage')
+		settingspage.toggle()
+		let chargePanelName = ''
+		switch (props.chargepoint.chargeMode) {
+			case 'instant_charging':
+				chargePanelName = '#inSettings'
+				break
+			case 'pv_charging':
+				chargePanelName = '#phvSettings'
+				break
+			case 'scheduled_charging':
+				chargePanelName = '#scSettings'
+				break
+			default:
+				chargePanelName = '#chSettings'
+		}
+		const tabToActivate = document.querySelector(
+			chargePanelName + props.chargepoint.id,
+		)
+		if (tabToActivate) {
+			var tab = new Tab(tabToActivate)
+			tab.show()
+		} else {
+			console.error('no element found')
+		}
 	}
 }
 </script>

diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue b/packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue
@@ -49,10 +49,7 @@
 				class="grid-col-4 grid-left"
 			>
 				<BatterySymbol :soc="soc" class="me-2" />
-				<DisplayButton
-					v-if="chargepoint.isSocManual"
-					@click="editSoc = !editSoc"
-				>
+				<DisplayButton v-if="chargepoint.isSocManual" @click="startSocEditor">
 					<i
 						class="fa-solid fa-sm fas fa-edit py-0 px-3 mt-3"
 						:style="{ color: 'var(--color-fg)' }"
@@ -182,44 +179,51 @@ const chargeMode = computed({
 		}
 	},
 })
+
 const currentPrice = computed(() => {
 	const [p] = etData.etPriceList.values()
 	return (Math.round(p * 10) / 10).toFixed(1)
 })
 function openSettings(target: string = '') {
 	if (displayConfig.locked) {
 		unlockDisplay()
-	}
-	const settingspage = new Modal('#settingspage')
-	settingspage.toggle()
-	let chargePanelName = target
-	if (target == '') {
-		switch (props.chargepoint.chargeMode) {
-			case 'instant_charging':
-				chargePanelName = '#inSettings'
-				break
-			case 'pv_charging':
-				chargePanelName = '#phvSettings'
-				break
-			case 'scheduled_charging':
-				chargePanelName = '#scSettings'
-				break
-			default:
-				chargePanelName = '#chSettings'
+	} else {
+		const settingspage = new Modal('#settingspage')
+		settingspage.toggle()
+		let chargePanelName = target
+		if (target == '') {
+			switch (props.chargepoint.chargeMode) {
+				case 'instant_charging':
+					chargePanelName = '#inSettings'
+					break
+				case 'pv_charging':
+					chargePanelName = '#phvSettings'
+					break
+				case 'scheduled_charging':
+					chargePanelName = '#scSettings'
+					break
+				default:
+					chargePanelName = '#chSettings'
+			}
+		}
+		const tabToActivate = document.querySelector(
+			chargePanelName + props.chargepoint.id,
+		)
+		if (tabToActivate) {
+			var tab = new Tab(tabToActivate)
+			tab.show()
+		} else {
+			console.error('no element found')
 		}
 	}
-
-	const tabToActivate = document.querySelector(
-		chargePanelName + props.chargepoint.id,
-	)
-	if (tabToActivate) {
-		var tab = new Tab(tabToActivate)
-		tab.show()
+}
+function startSocEditor() {
+	if (displayConfig.locked) {
+		unlockDisplay()
 	} else {
-		console.error('no element found')
+		editSoc.value = !editSoc.value
 	}
 }
-
 const currentPriceStyle = computed(() => {
 	return props.chargepoint.etMaxPrice >= +currentPrice.value
 		? { color: 'var(--color-charging)' }

diff --git a/packages/modules/display_themes/colors/source/src/components/powerGraph/model.ts b/packages/modules/display_themes/colors/source/src/components/powerGraph/model.ts
@@ -146,8 +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('getDailyLog',{ day: dateString })
-			
+			sendCommand('getDailyLog', { day: dateString })
+
 			// graphData.data = []
 		}
 	},
@@ -176,7 +176,7 @@ export const monthGraph = reactive({
 			this.year.toString() + this.month.toString().padStart(2, '0')
 		graphData.data = []
 		mqttSubscribe(this.topic)
-		sendCommand('getMonthlyLog',{ month: dateString })
+		sendCommand('getMonthlyLog', { month: dateString })
 	},
 	deactivate() {
 		mqttUnsubscribe(this.topic)