From 14929ad3ea52c83a6f68d6e93ead032b8968a3cd Mon Sep 17 00:00:00 2001 From: Brett-S-OWB Date: Tue, 21 Jan 2025 11:50:07 +0100 Subject: [PATCH 01/14] Install ChartJS node packages --- package-lock.json | 2 +- .../standard/source/package-lock.json | 117 ++++++++++++++---- .../web_themes/standard/source/package.json | 5 + 3 files changed, 100 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9e36453c2a..cc24400c06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "core", + "name": "openWB", "lockfileVersion": 3, "requires": true, "packages": {} diff --git a/packages/modules/web_themes/standard/source/package-lock.json b/packages/modules/web_themes/standard/source/package-lock.json index 22d9c80ae2..7cd2058f6c 100644 --- a/packages/modules/web_themes/standard/source/package-lock.json +++ b/packages/modules/web_themes/standard/source/package-lock.json @@ -9,11 +9,16 @@ "version": "0.0.1", "dependencies": { "@quasar/extras": "^1.16.12", + "chart.js": "^3.9.1", + "chartjs-adapter-luxon": "^1.3.1", + "chartjs-plugin-zoom": "^2.2.0", + "luxon": "^3.5.0", "mqtt": "^5.10.1", "pinia": "^2.2.4", "quasar": "^2.17.0", "register-service-worker": "^1.7.2", "vue": "^3.5.11", + "vue-chart-3": "^3.1.8", "vue-router": "^4.4.5" }, "devDependencies": { @@ -3328,6 +3333,11 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/hammerjs": { + "version": "2.0.46", + "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.46.tgz", + "integrity": "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==" + }, "node_modules/@types/har-format": { "version": "1.2.16", "resolved": "https://registry.npmjs.org/@types/har-format/-/har-format-1.2.16.tgz", @@ -4687,6 +4697,32 @@ "dev": true, "license": "MIT" }, + "node_modules/chart.js": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz", + "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==" + }, + "node_modules/chartjs-adapter-luxon": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/chartjs-adapter-luxon/-/chartjs-adapter-luxon-1.3.1.tgz", + "integrity": "sha512-yxHov3X8y+reIibl1o+j18xzrcdddCLqsXhriV2+aQ4hCR66IYFchlRXUvrJVoxglJ380pgytU7YWtoqdIgqhg==", + "peerDependencies": { + "chart.js": ">=3.0.0", + "luxon": ">=1.0.0" + } + }, + "node_modules/chartjs-plugin-zoom": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.2.0.tgz", + "integrity": "sha512-in6kcdiTlP6npIVLMd4zXZ08PDUXC52gZ4FAy5oyjk1zX3gKarXMAof7B9eFiisf9WOC3bh2saHg+J5WtLXZeA==", + "dependencies": { + "@types/hammerjs": "^2.0.45", + "hammerjs": "^2.0.8" + }, + "peerDependencies": { + "chart.js": ">=3.2.0" + } + }, "node_modules/check-error": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz", @@ -5059,11 +5095,10 @@ "license": "MIT" }, "node_modules/cookie": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", - "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz", + "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==", "dev": true, - "license": "MIT", "engines": { "node": ">= 0.6" } @@ -5124,11 +5159,10 @@ } }, "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, - "license": "MIT", "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -6008,18 +6042,17 @@ } }, "node_modules/express": { - "version": "4.21.0", - "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz", - "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==", + "version": "4.21.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz", + "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==", "dev": true, - "license": "MIT", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", "body-parser": "1.20.3", "content-disposition": "0.5.4", "content-type": "~1.0.4", - "cookie": "0.6.0", + "cookie": "0.7.1", "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", @@ -6033,7 +6066,7 @@ "methods": "~1.1.2", "on-finished": "2.4.1", "parseurl": "~1.3.3", - "path-to-regexp": "0.1.10", + "path-to-regexp": "0.1.12", "proxy-addr": "~2.0.7", "qs": "6.13.0", "range-parser": "~1.2.1", @@ -6048,6 +6081,10 @@ }, "engines": { "node": ">= 0.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/express/node_modules/debug": { @@ -6652,6 +6689,14 @@ "dev": true, "license": "MIT" }, + "node_modules/hammerjs": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", + "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==", + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/has-bigints": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", @@ -7693,6 +7738,11 @@ "dev": true, "license": "MIT" }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -7757,6 +7807,14 @@ "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", "license": "ISC" }, + "node_modules/luxon": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz", + "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==", + "engines": { + "node": ">=12" + } + }, "node_modules/magic-string": { "version": "0.30.11", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz", @@ -7977,16 +8035,15 @@ } }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", "funding": [ { "type": "github", "url": "https://github.com/sponsors/ai" } ], - "license": "MIT", "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -8455,11 +8512,10 @@ } }, "node_modules/path-to-regexp": { - "version": "0.1.10", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz", - "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==", - "dev": true, - "license": "MIT" + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz", + "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==", + "dev": true }, "node_modules/path-type": { "version": "4.0.0", @@ -11652,6 +11708,21 @@ } } }, + "node_modules/vue-chart-3": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/vue-chart-3/-/vue-chart-3-3.1.8.tgz", + "integrity": "sha512-zX5ajjQi/PocEqLETlej3vp92q/tnI/Fvu2RVb++Kap8qOrXu6PXCpodi73BFrWzEGZIAnqoUxC3OIkRWD657g==", + "dependencies": { + "@vue/runtime-core": "latest", + "@vue/runtime-dom": "latest", + "csstype": "latest", + "lodash-es": "latest" + }, + "peerDependencies": { + "chart.js": "=> ^3.1.0", + "vue": ">= 3" + } + }, "node_modules/vue-eslint-parser": { "version": "9.4.3", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz", diff --git a/packages/modules/web_themes/standard/source/package.json b/packages/modules/web_themes/standard/source/package.json index 322bc5e0e3..a6173cf709 100644 --- a/packages/modules/web_themes/standard/source/package.json +++ b/packages/modules/web_themes/standard/source/package.json @@ -15,11 +15,16 @@ }, "dependencies": { "@quasar/extras": "^1.16.12", + "chart.js": "^3.9.1", + "chartjs-adapter-luxon": "^1.3.1", + "chartjs-plugin-zoom": "^2.2.0", + "luxon": "^3.5.0", "mqtt": "^5.10.1", "pinia": "^2.2.4", "quasar": "^2.17.0", "register-service-worker": "^1.7.2", "vue": "^3.5.11", + "vue-chart-3": "^3.1.8", "vue-router": "^4.4.5" }, "devDependencies": { From cc0207b98e27c8b9dfb815c1b557cf872ac27929 Mon Sep 17 00:00:00 2001 From: Brett-S-OWB Date: Tue, 21 Jan 2025 11:58:39 +0100 Subject: [PATCH 02/14] Rename scheduled charging settings options --- .../source/src/components/ChargePointScheduledPlanDetails.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue index ac2b42f634..f67f219c87 100644 --- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue +++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue @@ -40,7 +40,7 @@
From e84a3c05770337f283b8acc3bd60fa2d9863b42c Mon Sep 17 00:00:00 2001 From: Brett-S-OWB Date: Tue, 21 Jan 2025 12:02:59 +0100 Subject: [PATCH 03/14] Root package-lock.json revert to correct name --- package-lock.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index cc24400c06..9e36453c2a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "openWB", + "name": "core", "lockfileVersion": 3, "requires": true, "packages": {} From 347585b2f8fba4b6909b19c31191f94f4ae758ec Mon Sep 17 00:00:00 2001 From: Brett-S-OWB Date: Wed, 22 Jan 2025 11:49:09 +0100 Subject: [PATCH 04/14] Add live chart data / fix chargepoint card display for all browsers --- .../source/src/components/BaseCarousel.vue | 9 + .../source/src/components/ChartCarousel.vue | 8 +- .../src/components/charts/HistoryChart.vue | 281 +++++++++++++++++- .../source/src/css/quasar.variables.scss | 52 ++-- .../standard/source/src/pages/IndexPage.vue | 8 +- .../source/src/stores/mqtt-store-model.ts | 13 + .../standard/source/src/stores/mqtt-store.ts | 23 ++ 7 files changed, 360 insertions(+), 34 deletions(-) diff --git a/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue b/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue index e0afe64d93..8c726606f6 100644 --- a/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue +++ b/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue @@ -5,6 +5,7 @@ :animated="animated" control-color="primary" infinite + @update:model-value="handleSlideChange" padding :navigation="groupedItems.length > 1" :arrows="groupedItems.length > 1 && $q.screen.gt.xs" @@ -78,6 +79,13 @@ watch( animated.value = true; }, ); + +const handleSlideChange = () => { + const currentScroll = window.scrollY; + nextTick(() => { + window.scrollTo(0, currentScroll); + }); +}; diff --git a/packages/modules/web_themes/standard/source/src/components/ChartCarousel.vue b/packages/modules/web_themes/standard/source/src/components/ChartCarousel.vue index f755b71059..0b0902963e 100644 --- a/packages/modules/web_themes/standard/source/src/components/ChartCarousel.vue +++ b/packages/modules/web_themes/standard/source/src/components/ChartCarousel.vue @@ -9,7 +9,7 @@ infinite :navigation="chartCarouselItems.length > 1" :arrows="chartCarouselItems.length > 1 && $q.screen.gt.xs" - class="full-width bg-transparent" + class="full-width full-height bg-transparent carousel-height" > (chartCarouselItems[0].name); + + diff --git a/packages/modules/web_themes/standard/source/src/components/charts/HistoryChart.vue b/packages/modules/web_themes/standard/source/src/components/charts/HistoryChart.vue index 3a7547c432..cd9075cb91 100644 --- a/packages/modules/web_themes/standard/source/src/components/charts/HistoryChart.vue +++ b/packages/modules/web_themes/standard/source/src/components/charts/HistoryChart.vue @@ -1,15 +1,280 @@ + + diff --git a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss index 7a6b44ff6f..e1919b418d 100644 --- a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss +++ b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss @@ -22,20 +22,20 @@ // $warning: #F2C037; ///////////////////////////////////////////////////////////////////// // Default Light Theme Base Colors -$primary: #5C93D1; -$secondary: #D2D2D7; -$accent: #546E7A; -$positive: #66BD7A; -$negative: #DB4F5F; -$info: #7DC5D4; -$warning: #D98E44; -$background-1: #E3E3EC; -$background-2: #EEEEF3; -$brown-text: #524F57; -$white: #FFFFFF; -$grey: #9E9E9E; // Quasar's default grey -$toggle-off: #E0E0E0; -$battery: #BA7128; +$primary: #5c93d1; +$secondary: #d2d2d7; +$accent: #546e7a; +$positive: #66bd7a; +$negative: #db4f5f; +$info: #7dc5d4; +$warning: #d98e44; +$background-1: #e3e3ec; +$background-2: #eeeef3; +$brown-text: #524f57; +$white: #ffffff; +$grey: #9e9e9e; // Quasar's default grey +$toggle-off: #e0e0e0; +$battery: #ba7128; // Light theme (default) :root { --q-primary: #{$primary}; @@ -53,6 +53,8 @@ $battery: #BA7128; --q-toggle-off: #{$toggle-off}; --q-flow-home-stroke: #{$grey}; --q-battery: #{$battery}; + --q-icon: #{$brown-text}; + --q-icon-background: #{$background-1}; // Main background background-color: var(--q-background-1); // Text color @@ -129,18 +131,18 @@ $battery: #BA7128; } // Dark Theme Base Colors $dark-page: #030627; // This overrides Quasar's default dark page color -$dark-primary: #3874DB; -$dark-secondary: #28293D; -$dark-accent: #546E7A; -$dark-positive: #3E8F5E; -$dark-negative: #C54D57; -$dark-info: #4B89AA; -$dark-warning: #D98E44; +$dark-primary: #3874db; +$dark-secondary: #28293d; +$dark-accent: #546e7a; +$dark-positive: #3e8f5e; +$dark-negative: #c54d57; +$dark-info: #4b89aa; +$dark-warning: #d98e44; $dark-background-1: #030627; $dark-background-2: #010322; -$dark-list: #3C3E5C; -$dark-carousel: #8B8F9F; -$dark-tab-icon: #D7D9E0; +$dark-list: #3c3e5c; +$dark-carousel: #8b8f9f; +$dark-tab-icon: #d7d9e0; // Dark theme .body--dark { --q-primary: #{$dark-primary}; @@ -160,6 +162,8 @@ $dark-tab-icon: #D7D9E0; --q-tab-icon: #{$dark-tab-icon}; --q-flow-home-stroke: #{$grey}; --q-battery: #{$dark-warning}; + --q-icon: #{$white}; + --q-icon-background: #{$dark-background-1}; // Main background background-color: var($dark-page); // Text color diff --git a/packages/modules/web_themes/standard/source/src/pages/IndexPage.vue b/packages/modules/web_themes/standard/source/src/pages/IndexPage.vue index eaba26b7c6..71eedbc0a7 100644 --- a/packages/modules/web_themes/standard/source/src/pages/IndexPage.vue +++ b/packages/modules/web_themes/standard/source/src/pages/IndexPage.vue @@ -1,7 +1,7 @@