Colors theme (web): Fixes and version upgrades

packages/modules/web_themes/colors/source/eslint.config.js

@@ -0,0 +1,50 @@
+import typescriptEslint from '@typescript-eslint/eslint-plugin'
+import parser from 'vue-eslint-parser'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+import { includeIgnoreFile } from "@eslint/compat";
+
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const gitignorePath = path.resolve(__dirname, ".gitignore");
+const compat = new FlatCompat({
+	baseDirectory: __dirname,
+	recommendedConfig: js.configs.recommended,
+	allConfig: js.configs.all,
+})
+
+export default [
+	...compat.extends(
+		'eslint:recommended',
+		'plugin:@typescript-eslint/eslint-recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:vue/vue3-recommended',
+		'prettier',
+	),
+	{
+		plugins: {
+			'@typescript-eslint': typescriptEslint,
+		},
+
+		languageOptions: {
+			parser: parser,
+			ecmaVersion: 5,
+			sourceType: 'module',
+
+			parserOptions: {
+				parser: '@typescript-eslint/parser',
+			},
+		},
+
+		rules: {
+			'no-unused-vars': 'off',
+			'@typescript-eslint/no-unused-vars': 'error',
+		},
+		files: ['**/*.vue', '**/*.js', '**/*.ts'],
+	},
+	includeIgnoreFile(gitignorePath),
+	{},
+]

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

@@ -10,42 +10,45 @@
     "preview": "vite preview --port 5050 --host",
     "build-only": "vite build --base=/openWB/web/themes/colors --outDir=../web --emptyOutDir",
     "type-check": "vue-tsc --build --force",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "lint": "eslint . --fix",
     "format": "prettier 'src/' --write"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
     "d3": "^7.9.0",
-    "mqtt": "^5.10.2",
+    "mqtt": "^5.10.3",
     "process": "^0.11.10",
     "swiper": "^11.1.15",
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@babel/types": "^7.26.0",
+    "@babel/types": "^7.26.3",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+    "@eslint/compat": "^1.2.4",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.17.0",
     "@rushstack/eslint-patch": "^1.10.4",
     "@tsconfig/node20": "^20.1.4",
     "@types/bootstrap": "^5.2.10",
     "@types/d3": "^7.4.3",
-    "@types/node": "^20.17.7",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-vue": "^5.2.0",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^13.0.0",
-    "@vue/tsconfig": "^0.6.0",
-    "esbuild": "^0.21.5",
-    "eslint": "^8.57.1",
-    "eslint-plugin-vue": "^9.31.0",
-    "npm-run-all2": "^7.0.1",
-    "prettier": "^3.3.3",
-    "rollup": "^4.27.4",
+    "@types/node": "^20.17.11",
+    "@typescript-eslint/eslint-plugin": "^8.19.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.2.0",
+    "@vue/tsconfig": "^0.7.0",
+    "esbuild": "^0.24.2",
+    "eslint": "^9.17.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "npm-run-all2": "^7.0.2",
+    "prettier": "^3.4.2",
+    "rollup": "^4.29.1",
     "rollup-plugin-polyfill-node": "^0.13.0",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.11",
-    "vue-tsc": "^2.1.10"
+    "typescript": "^5.7.2",
+    "vite": "^6.0.6",
+    "vue-tsc": "^2.2.0"
   }
 }

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

@@ -313,6 +313,6 @@ function getIndex(topic: string): number | undefined {
 			return undefined
 		}
 	} catch (e) {
-		console.warn('Parser error in getIndex for topic ' + topic)
+		console.warn('Parser error in getIndex for topic ' + topic + ': ' + e)
 	}
 }

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

@@ -38,6 +38,7 @@ export class Config {
 	private _showPrices = false
 	private _showInverters = false
 	private _alternativeEnergy = false
+	private _sslPrefs: boolean = false
 	private _debug: boolean = false
 	private _lowerPriceBound = 0
 	private _upperPriceBound = 0
@@ -203,6 +204,16 @@ export class Config {
 	setShowClock(mode: string) {
 		this._showClock = mode
 	}
+	get sslPrefs() {
+		return this._sslPrefs
+	}
+	set sslPrefs(on: boolean) {
+		this._sslPrefs = on
+		savePrefs()
+	}
+	setSslPrefs(on: boolean) {
+		this.sslPrefs = on
+	}
 	get debug() {
 		return this._debug
 	}
@@ -482,6 +493,7 @@ interface Preferences {
 	altEngy?: boolean
 	lowerP?: number
 	upperP?: number
+	sslPrefs?: boolean
 	debug?: boolean
 }
 
@@ -514,12 +526,14 @@ function writeCookie() {
 	prefs.altEngy = globalConfig.alternativeEnergy
 	prefs.lowerP = globalConfig.lowerPriceBound
 	prefs.upperP = globalConfig.upperPriceBound
+	prefs.sslPrefs = globalConfig.sslPrefs
 	prefs.debug = globalConfig.debug
 
 	document.cookie =
 		'openWBColorTheme=' +
 		JSON.stringify(prefs) +
-		';max-age=16000000;samesite=strict'
+		';max-age=16000000;' +
+		(globalConfig.sslPrefs ? 'SameSite=None;Secure' : 'SameSite=Strict')
 }
 
 function readCookie() {
@@ -609,6 +623,9 @@ function readCookie() {
 		if (prefs.upperP !== undefined) {
 			globalConfig.setUpperPriceBound(prefs.upperP)
 		}
+		if (prefs.sslPrefs !== undefined) {
+			globalConfig.setSslPrefs(prefs.sslPrefs)
+		}
 		if (prefs.debug !== undefined) {
 			globalConfig.setDebug(prefs.debug)
 		}

packages/modules/web_themes/colors/source/src/components/batteryList/processMessages.ts

@@ -65,6 +65,6 @@ function getIndex(topic: string): number | undefined {
 			return undefined
 		}
 	} catch (e) {
-		console.warn('Parser error in getIndex for topic ' + topic)
+		console.warn('Parser error in getIndex for topic ' + topic + ': ' + e)
 	}
 }

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

@@ -266,6 +266,6 @@ function getIndex(topic: string): number | undefined {
 			return undefined
 		}
 	} catch (e) {
-		console.warn('Parser error in getIndex for topic ' + topic)
+		console.warn('Parser error in getIndex for topic ' + topic + ': ' + e)
 	}
 }

packages/modules/web_themes/colors/source/src/components/energyMeter2/EnergyLabel.vue

@@ -9,7 +9,7 @@
 			:fill="item.color"
 			:class="item.icon.length <= 2 ? 'fas' : ''"
 		>
-			{{ props.item.icon }}
+			{{ trimName(props.item.icon) }}
 		</text>
 		<!-- Energy -->
 		<text
@@ -74,6 +74,11 @@ function autString(): string {
 		return ''
 	}
 }
+
+function trimName(name: string) {
+	const maxlen = 14
+	return name.length > maxlen ? name.slice(0, maxlen - 1) + '...' : name
+}
 </script>
 
 <style scoped></style>

packages/modules/web_themes/colors/source/src/components/powerGraph/PgSoc.vue

@@ -85,16 +85,16 @@ const vName = computed(() => {
 		case 2:
 			return 'Speicher'
 		case 1:
-			if (vehicles[topVehicles.value[1]]) {
+			if (vehicles[topVehicles.value[1]] != undefined) {
 				return vehicles[topVehicles.value[1]].name
 			} else {
-				return 'oops'
+				return '???'
 			}
 		default:
-			if (vehicles[topVehicles.value[0]]) {
+			if (vehicles[topVehicles.value[0]] != undefined) {
 				return vehicles[topVehicles.value[0]].name
 			} else {
-				return 'hhhm'
+				return '???'
 			}
 	}
 })
@@ -113,10 +113,10 @@ const cpColor = computed(() => {
 })
 const nameX = computed(() => {
 	switch (props.order) {
-		case 1:
-			return props.width - 3
 		case 0:
 			return 3
+		case 1:
+			return props.width - 3
 		case 2:
 			return props.width / 2
 		default:
@@ -151,9 +151,9 @@ const nameY = computed(() => {
 const textPosition = computed(() => {
 	switch (props.order) {
 		case 0:
-			return 'end'
-		case 1:
 			return 'start'
+		case 1:
+			return 'end'
 		case 2:
 			return 'middle'
 		default:

packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue

@@ -69,7 +69,10 @@
 
 					<!-- Show the SoC for the first two cars -->
 					<PMLabel
-						v-if="topVehicles[0] && vehicles[topVehicles[0]]"
+						v-if="
+							topVehicles[0] != undefined &&
+							vehicles[topVehicles[0]] != undefined
+						"
 						:x="-width / 2 - margin / 4 + 10"
 						:y="-height / 2 + margin + 5"
 						:labeltext="
@@ -83,13 +86,16 @@
 						:config="globalConfig"
 					/>
 					<PMLabel
-						v-if="topVehicles[1] && vehicles[topVehicles[1]]"
+						v-if="
+							topVehicles[1] != undefined &&
+							vehicles[topVehicles[1]] != undefined
+						"
 						:x="width / 2 + margin / 4 - 10"
 						:y="-height / 2 + margin + 5"
 						:labeltext="
 							trimName(vehicles[topVehicles[1]].name) +
 							': ' +
-							Math.round(vehicles[topVehicles[0]].soc) +
+							Math.round(vehicles[topVehicles[1]].soc) +
 							'%'
 						"
 						:labelcolor="

packages/modules/web_themes/colors/source/src/components/priceChart/GlobalPriceChart.vue

@@ -83,9 +83,12 @@ const xScale = computed(() => {
 		.domain(xdomain)
 })
 const yDomain = computed(() => {
-	let yd = extent(plotdata.value, (d) => d[1]) as [number, number]
-	yd[0] = Math.floor(yd[0]) - 1
-	yd[1] = Math.floor(yd[1]) + 1
+	let yd = [0, 0]
+	if (plotdata.value.length > 0) {
+		yd = extent(plotdata.value, (d) => d[1]) as [number, number]
+		yd[0] = Math.floor(yd[0]) - 1
+		yd[1] = Math.floor(yd[1]) + 1
+	}
 	return yd
 })
 const yScale = computed(() => {
@@ -130,7 +133,7 @@ const yAxisGenerator = computed(() => {
 	return (
 		axisLeft<number>(yScale.value)
 			//.ticks(yDomain.value[1] - yDomain.value[0])
-			.ticks(15)
+			.ticks(yDomain.value[1] - yDomain.value[0])
 			.tickSize(0)
 			.tickSizeInner(-(width - margin.right - margin.left))
 			.tickFormat((d) => d.toString())

packages/modules/web_themes/colors/source/src/components/priceChart/PriceChart.vue

@@ -189,15 +189,14 @@ const xAxisGenerator = computed(() => {
 })
 const yAxisGenerator = computed(() => {
 	return axisLeft<number>(yScale.value)
-		.ticks(6)
+		.ticks(yDomain.value[1] - yDomain.value[0])
 		.tickSizeInner(-(width - margin.right - margin.left))
 		.tickFormat((d) => d.toString())
 })
 const draw = computed(() => {
 	if (needsUpdate.value == true) {
 		dummy = !dummy
 	}
-
 	const svg = select('g#' + chartId.value)
 	svg.selectAll('*').remove()
 	const bargroups = svg

packages/modules/web_themes/colors/source/src/components/shared/DateInput.vue

@@ -134,7 +134,7 @@ const days = computed(() => {
 			if (Math.trunc(year.value / 4) * 4 == year.value) {
 				maxDaysPerMonth = 29
 			} else {
-				maxDaysPerMonth == 28
+				maxDaysPerMonth = 28
 			}
 	}
 

packages/modules/web_themes/colors/source/src/components/shared/RangeInput.vue

@@ -107,14 +107,7 @@ function stepUp() {
 	}
 }
 const subrangeScale = computed(() => {
-	console.log(props.subrangeMin)
-	console.log(props.subrangeMax)
-
 	const sc = scaleLinear().domain([props.min, props.max]).range([0, 100])
-
-	console.log(sc(props.subrangeMin ?? 0))
-	console.log(sc(props.subrangeMax ?? 0))
-
 	return sc
 })
 const subrangeX = computed(() => {

packages/modules/web_themes/colors/source/src/components/smartHome/processMessages.ts

@@ -158,6 +158,6 @@ function getIndex(topic: string): number | undefined {
 			return undefined
 		}
 	} catch (e) {
-		console.warn('Parser error in getIndex for topic ' + topic)
+		console.warn('Parser error in getIndex for topic ' + topic + ': ' + e)
 	}
 }