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 @@ @@ -63,7 +63,7 @@ - - + + +
-