colors theme: update packages

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

@@ -1,46 +1,51 @@
 {
   "name": "wbcolortheme21",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "license": "MIT",
+  "type": "module",
   "scripts": {
     "dev": "vite --host",
-    "build": "vue-tsc --noEmit && vite build --base=/openWB/web/themes/colors --outDir=../web --emptyOutDir",
+    "build-old": "vue-tsc --noEmit && vite build --base=/openWB/web/themes/colors --outDir=../web --emptyOutDir",
+    "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview --port 5050 --host",
-    "typecheck": "vue-tsc --noEmit",
+    "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",
-    "prettier-format": "prettier 'src/' --write"
+    "format": "prettier 'src/' --write"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "^5.3.0",
-    "d3": "^7.8.5",
-    "mqtt": "^5.1.0",
+    "bootstrap": "^5.3.3",
+    "d3": "^7.9.0",
+    "mqtt": "^5.7.2",
     "process": "^0.11.10",
-    "swiper": "^10.1.0",
+    "swiper": "^11.1.4",
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@babel/types": "^7.22.5",
+    "@babel/types": "^7.24.7",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
-    "@rushstack/eslint-patch": "^1.3.2",
-    "@types/bootstrap": "^5.2.6",
-    "@types/d3": "^7.1.0",
-    "@types/node": "^20.3.1",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
-    "@vitejs/plugin-vue": "^4.4.0",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/tsconfig": "^0.4.0",
-    "esbuild": "^0.19.4",
-    "eslint": "^8.43.0",
-    "eslint-plugin-vue": "^9.14.1",
-    "prettier": "^3.0.1",
-    "rollup": "3.x",
-    "rollup-plugin-polyfill-node": "^0.12.0",
-    "typescript": "^5.1.3",
-    "vite": "^4.4.11",
-    "vue-tsc": "^1.8.0"
+    "@rushstack/eslint-patch": "^1.10.3",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/bootstrap": "^5.2.10",
+    "@types/d3": "^7.4.3",
+    "@types/node": "^20.14.7",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/tsconfig": "^0.5.1",
+    "esbuild": "^0.21.5",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.26.0",
+    "npm-run-all2": "^6.2.0",
+    "prettier": "^3.3.2",
+    "rollup": "^4.18.0",
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "typescript": "^5.5.2",
+    "vite": "^5.3.1",
+    "vue-tsc": "^2.0.21"
   }
 }

packages/modules/web_themes/colors/source/shims-mqtt.d.ts

@@ -0,0 +1,4 @@
+declare module 'mqtt/dist/mqtt.min' {
+  import MQTT from 'mqtt'
+  export = MQTT
+}

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

@@ -120,6 +120,6 @@ export function formatTemp(t: number) {
 	return t != 999
 		? (Math.round(t * 10) / 10).toLocaleString(undefined, {
 				minimumFractionDigits: 1,
-		  }) + '°'
+			}) + '°'
 		: '-'
 }

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

@@ -5,20 +5,16 @@
  */
 
 // functions to interact with MQTT
-import {
-	MqttClient,
-	connect,
-	type OnMessageCallback,
-	type MqttProtocol,
-} from 'mqtt'
+
+import mqtt from 'mqtt'
 import { type QoS } from 'mqtt-packet'
 
 const defaultQoS: QoS = 0
 const mqttConnection = {
 	host: location.hostname,
 	port: location.protocol == 'https:' ? 443 : 80,
 	endpoint: '/ws',
-	protocol: (location.protocol == 'https:' ? 'wss' : 'ws') as MqttProtocol,
+	protocol: (location.protocol == 'https:' ? 'wss' : 'ws') as mqtt.MqttProtocol,
 	connectTimeout: 4000,
 	reconnectPeriod: 4000,
 	clean: false,
@@ -31,16 +27,15 @@ const subscription = {
 	topic: '',
 	qos: defaultQoS,
 }
-let client: MqttClient
+let client: mqtt.MqttClient
 
-// export function MqttConnect(callback: (t: string, m: string) => void, topiclist: string[]) {
 const { host, port, endpoint, ...options } = mqttConnection
 const connectUrl = `${options.protocol}://${host}:${port}${endpoint}`
 try {
-	client = connect(connectUrl, options)
+	console.debug('connectURL', connectUrl)
+	client = mqtt.connect(connectUrl, options)
 	client.on('connect', () => {
 		console.info('MQTT connection successful')
-		//console.info (`mqtt client: ${mqttConnection.clientId}`)
 	})
 	client.on('disconnect', () => {
 		console.info('MQTT disconnected')
@@ -53,7 +48,7 @@ try {
 }
 
 //}
-export function mqttRegister(callback: OnMessageCallback) {
+export function mqttRegister(callback: mqtt.OnMessageCallback) {
 	if (client) {
 		client.on('message', callback)
 	} else {
@@ -68,7 +63,6 @@ export function mqttSubscribe(toTopic: string) {
 			console.error('MQTT Subscription error: ' + error)
 			return
 		}
-		//console.info("MQTT Subscription successful: " + toTopic);
 	})
 }
 export function mqttUnsubscribe(fromTopic: string) {
@@ -79,7 +73,6 @@ export function mqttUnsubscribe(fromTopic: string) {
 			console.error('MQTT Unsubscribe from ' + fromTopic + ' failed: ' + error)
 			return
 		}
-		//console.info ('MQTT unsubscribe successful: ' + topic)
 	})
 }
 export async function mqttPublish(topic: string, message: string) {
@@ -92,7 +85,6 @@ export async function mqttPublish(topic: string, message: string) {
 		connected = client.connected
 		retries += 1
 	}
-	// console.warn ('MQTT publish: Now connected')
 	if (retries < 20) {
 		try {
 			client.publish(topic, message, { qos }, (error) => {

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

@@ -55,8 +55,8 @@ const statusstyle = computed(() => {
 		props.bat.power < 0
 			? 'var(--color-pv)'
 			: props.bat.power > 0
-			? 'var(--color-battery)'
-			: 'var(--color-menu)'
+				? 'var(--color-battery)'
+				: 'var(--color-menu)'
 	return { 'background-color': bgcolor }
 })
 </script>

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

@@ -68,8 +68,8 @@ const statusstyle = computed(() => {
 		sourceSummary.batOut.power > 0
 			? 'var(--color-pv)'
 			: usageSummary.batIn.power > 0
-			? 'var(--color-battery)'
-			: 'var(--color-menu)'
+				? 'var(--color-battery)'
+				: 'var(--color-menu)'
 	return { 'background-color': bgcolor }
 })
 </script>

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

@@ -212,7 +212,7 @@
 								props.chargepoint.etActive
 									? (
 											Math.round(props.chargepoint.etMaxPrice * 10) / 10
-									  ).toFixed(1) + ' ct'
+										).toFixed(1) + ' ct'
 									: '-'
 							}}
 

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

@@ -180,7 +180,7 @@ const usageDetails = computed(
 					shcount > 1
 						? [...shDevices.values()].filter(
 								(row) => row.configured && row.showInGraph,
-						  )
+							)
 						: [],
 				)
 				.concat([usageSummary.batIn, usageSummary.house]),

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

@@ -99,7 +99,11 @@ const yScale = computed(() => {
 		)
 })
 const keysToUse = computed(() => {
-	if (graphData.graphMode != 'today' && graphData.graphMode != 'day') {
+	if (
+		graphData.graphMode != 'today' &&
+		graphData.graphMode != 'day' &&
+		graphData.graphMode != 'live'
+	) {
 		return ['evuIn', 'batOut', 'selfUsage', 'evuOut']
 	} else if (globalConfig.showInverters) {
 		const k = ['batOut', 'evuIn']

packages/modules/web_themes/colors/source/src/components/powerGraph/processLiveGraphData.ts

@@ -125,7 +125,7 @@ function extractValues(data: RawGraphDataItem): GraphDataItem {
 	// charge points - we only show a maximum of 10 chargepoints in the graph
 	for (let i = 0; i < 10; i++) {
 		const idx = 'cp' + i
-		values[idx] = +data[idx + '-power'] ?? 0
+		values[idx] = +(data[idx + '-power'] ?? 0)
 	}
 	values.selfUsage = values.pv - values.evuOut
 	if (values.selfUsage < 0) {

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

@@ -41,17 +41,17 @@ const text = computed(() => {
 	return props.labeltext
 		? props.labeltext
 		: props.props
-		? props.props.icon + ' '
-		: props.labelicon
-		? props.labelicon + ' '
-		: ''
+			? props.props.icon + ' '
+			: props.labelicon
+				? props.labelicon + ' '
+				: ''
 })
 const color = computed(() => {
 	return props.labelcolor
 		? props.labelcolor
 		: props.props
-		? props.props.color
-		: ''
+			? props.props.color
+			: ''
 })
 const showMe = computed(() => {
 	return !props.data || props.data.power > 0

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

@@ -48,8 +48,8 @@ const widgetWidth = computed(() => {
 	return props.fullWidth
 		? 'col-12'
 		: props.variableWidth && globalConfig.preferWideBoxes
-		? 'col-lg-6'
-		: 'col-lg-4'
+			? 'col-lg-6'
+			: 'col-lg-4'
 })
 </script>
 

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

@@ -30,8 +30,8 @@ const widgetWidth = computed(() => {
 	return props.fullWidth
 		? 'col-12'
 		: props.variableWidth && globalConfig.preferWideBoxes
-		? 'col-lg-6'
-		: 'col-lg-4'
+			? 'col-lg-6'
+			: 'col-lg-4'
 })
 </script>
 

packages/modules/web_themes/colors/source/src/components/smartHome/SHListItem.vue

@@ -60,8 +60,8 @@ const switchIcon = computed(() => {
 	return props.device.status == 'on'
 		? 'fa-toggle-on'
 		: props.device.status == 'waiting'
-		? 'fa-spinner fa-spin'
-		: 'fa-toggle-off'
+			? 'fa-spinner fa-spin'
+			: 'fa-toggle-off'
 })
 const switchStyle = computed(() => {
 	let swColor = 'var(--color-switchRed)'

packages/modules/web_themes/colors/source/src/components/smartHome/SmartHomeList.vue

@@ -20,7 +20,7 @@
 		<SHListItem
 			v-for="device in group"
 			:key="device.id"
-			:device="device"
+			:device="<ShDevice>device"
 			class="subgrid pb-2"
 		/>
 	</WbWidgetFlex>
@@ -63,7 +63,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, type ComputedRef } from 'vue'
 import WbWidgetFlex from '../shared/WbWidgetFlex.vue'
 import SHListItem from './SHListItem.vue'
 import { ShDevice, shDevices } from './model'
@@ -74,8 +74,8 @@ const devicesPerWidget = 3 // max number of devices to be displayed in one box
 
 const devices = computed(() =>
 	widescreen.value
-		? activeDevices.value.reduce(
-				(grouping: [[ShDevice]], device: ShDevice) => {
+		? (<ComputedRef<ShDevice[]>>activeDevices).value.reduce<ShDevice[][]>(
+				(grouping: ShDevice[][], device: ShDevice) => {
 					const result = grouping
 					let lastGroup = grouping[grouping.length - 1]
 					if (lastGroup.length >= devicesPerWidget) {
@@ -85,8 +85,8 @@ const devices = computed(() =>
 					}
 					return result
 				},
-				[[]] as unknown as [[ShDevice]],
-		  )
+				[] as ShDevice[][],
+			)
 		: [activeDevices.value],
 )
 const activeDevices = computed(() => {

packages/modules/web_themes/colors/source/src/main.ts

@@ -9,5 +9,4 @@ import { register } from 'swiper/element/bundle'
 const app = createApp(App)
 // register Swiper custom elements
 register()
-// app.use(router)
 app.mount('#app')

packages/modules/web_themes/colors/source/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}