diff --git a/packages/modules/web_themes/colors/source/package.json b/packages/modules/web_themes/colors/source/package.json
index db98b8f675..84094ebbf3 100755
--- a/packages/modules/web_themes/colors/source/package.json
+++ b/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"
}
}
diff --git a/packages/modules/web_themes/colors/source/prettierrc.json b/packages/modules/web_themes/colors/source/prettierrc.json
deleted file mode 100755
index 0207fbec52..0000000000
--- a/packages/modules/web_themes/colors/source/prettierrc.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "trailingComma": "all",
- "tabWidth": 2,
- "semi": false,
- "singleQuote": true,
- "printWidth" : 80
-}
\ No newline at end of file
diff --git a/packages/modules/web_themes/colors/source/shims-mqtt.d.ts b/packages/modules/web_themes/colors/source/shims-mqtt.d.ts
new file mode 100644
index 0000000000..1ac180d4ec
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/packages/modules/web_themes/colors/source/src/assets/js/helpers.ts b/packages/modules/web_themes/colors/source/src/assets/js/helpers.ts
index 0e649411fd..d7b68c6142 100755
--- a/packages/modules/web_themes/colors/source/src/assets/js/helpers.ts
+++ b/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,
- }) + '°'
+ }) + '°'
: '-'
}
diff --git a/packages/modules/web_themes/colors/source/src/assets/js/mqttClient.ts b/packages/modules/web_themes/colors/source/src/assets/js/mqttClient.ts
index 699fd89eab..727d2a6603 100644
--- a/packages/modules/web_themes/colors/source/src/assets/js/mqttClient.ts
+++ b/packages/modules/web_themes/colors/source/src/assets/js/mqttClient.ts
@@ -5,12 +5,8 @@
*/
// 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
@@ -18,7 +14,7 @@ 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) => {
diff --git a/packages/modules/web_themes/colors/source/src/components/batteryList/BLBattery.vue b/packages/modules/web_themes/colors/source/src/components/batteryList/BLBattery.vue
index f48d51b5f6..e83f68786f 100755
--- a/packages/modules/web_themes/colors/source/src/components/batteryList/BLBattery.vue
+++ b/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 }
})
diff --git a/packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue b/packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue
index 277e1297d3..dc45b6578b 100755
--- a/packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue
+++ b/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 }
})
diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue
index 96093faeee..1fa933df82 100755
--- a/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue
+++ b/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'
: '-'
}}
diff --git a/packages/modules/web_themes/colors/source/src/components/energyMeter/EnergyMeter.vue b/packages/modules/web_themes/colors/source/src/components/energyMeter/EnergyMeter.vue
index c48f839a44..5186086f16 100755
--- a/packages/modules/web_themes/colors/source/src/components/energyMeter/EnergyMeter.vue
+++ b/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]),
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PGSourceGraph.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PGSourceGraph.vue
index a2b0c18a1c..4163cd0a8e 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PGSourceGraph.vue
+++ b/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']
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/processLiveGraphData.ts b/packages/modules/web_themes/colors/source/src/components/powerGraph/processLiveGraphData.ts
index e1dbaf5d60..fd35be9731 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/processLiveGraphData.ts
+++ b/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) {
diff --git a/packages/modules/web_themes/colors/source/src/components/powerMeter/PMLabel.vue b/packages/modules/web_themes/colors/source/src/components/powerMeter/PMLabel.vue
index 469f94bc55..646130850d 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerMeter/PMLabel.vue
+++ b/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
diff --git a/packages/modules/web_themes/colors/source/src/components/shared/WBWidget.vue b/packages/modules/web_themes/colors/source/src/components/shared/WBWidget.vue
index 54320dfcb1..1e9ac4d62f 100755
--- a/packages/modules/web_themes/colors/source/src/components/shared/WBWidget.vue
+++ b/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'
})
diff --git a/packages/modules/web_themes/colors/source/src/components/shared/WbWidgetFlex.vue b/packages/modules/web_themes/colors/source/src/components/shared/WbWidgetFlex.vue
index 274ff17401..cc48e04358 100755
--- a/packages/modules/web_themes/colors/source/src/components/shared/WbWidgetFlex.vue
+++ b/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'
})
diff --git a/packages/modules/web_themes/colors/source/src/components/smartHome/SHListItem.vue b/packages/modules/web_themes/colors/source/src/components/smartHome/SHListItem.vue
index 67f0107930..a6e925cc75 100755
--- a/packages/modules/web_themes/colors/source/src/components/smartHome/SHListItem.vue
+++ b/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)'
diff --git a/packages/modules/web_themes/colors/source/src/components/smartHome/SmartHomeList.vue b/packages/modules/web_themes/colors/source/src/components/smartHome/SmartHomeList.vue
index b6e3dde83a..97e236f218 100755
--- a/packages/modules/web_themes/colors/source/src/components/smartHome/SmartHomeList.vue
+++ b/packages/modules/web_themes/colors/source/src/components/smartHome/SmartHomeList.vue
@@ -20,7 +20,7 @@