From 0bc04222ba91302efce90c62b849ed6c83729770 Mon Sep 17 00:00:00 2001 From: rusikv Date: Thu, 9 May 2024 16:44:38 +0300 Subject: [PATCH] UI: added mobile app qr code to sys admin home page --- ui-ngx/src/app/core/services/utils.service.ts | 2 +- .../mobile-app-qrcode-widget.component.scss | 6 + .../home-links/home-links-routing.module.ts | 40 ++- .../assets/dashboard/sys_admin_home_page.json | 229 +++++++++++++++--- .../dashboard/tenant_admin_home_page.json | 13 +- 5 files changed, 232 insertions(+), 58 deletions(-) diff --git a/ui-ngx/src/app/core/services/utils.service.ts b/ui-ngx/src/app/core/services/utils.service.ts index d7238c450d..097c3b8d49 100644 --- a/ui-ngx/src/app/core/services/utils.service.ts +++ b/ui-ngx/src/app/core/services/utils.service.ts @@ -30,7 +30,7 @@ import { guid, hashCode, isDefined, - isDefinedAndNotNull, isNotEmptyStr, + isDefinedAndNotNull, isString, isUndefined, objToBase64, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss index 6d229abb0a..d00baa119e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss @@ -33,6 +33,7 @@ color: rgba(0, 0, 0, 0.76); @media #{$mat-md-lg} { + padding-bottom: 0; font-weight: 500; font-size: 14px; line-height: 20px; @@ -43,6 +44,11 @@ .tb-qrcode-label { font-size: 14px; color: rgba(0, 0, 0, 0.54); + + @media #{$mat-md-lg} { + font-size: 11px; + line-height: 16px; + } } .tb-qrcode { diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts b/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts index 3b6b909225..9c6adf91ca 100644 --- a/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts +++ b/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts @@ -25,7 +25,11 @@ import { DashboardService } from '@core/http/dashboard.service'; import { select, Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { map } from 'rxjs/operators'; -import { getCurrentAuthUser, selectPersistDeviceStateToTelemetryAndMobileQrEnabled } from '@core/auth/auth.selectors'; +import { + getCurrentAuthUser, + selectMobileQrEnabled, + selectPersistDeviceStateToTelemetryAndMobileQrEnabled +} from '@core/auth/auth.selectors'; import { EntityKeyType } from '@shared/models/query/query.models'; import { ResourcesService } from '@core/services/resources.service'; @@ -45,20 +49,32 @@ const updateDeviceActivityKeyFilterIfNeeded = (store: Store, } } } - if (params.mobileQrEnabled) { - for (const widgetId of Object.keys(dashboard.configuration.widgets)) { - if (dashboard.configuration.widgets[widgetId].config.title === 'Select show mobile QR code') { - dashboard.configuration.widgets[widgetId].config.settings.markdownTextFunction = - (dashboard.configuration.widgets[widgetId].config.settings.markdownTextFunction as string) - .replace('\'${mobileQrEnabled}\'', String(params.mobileQrEnabled)); - } - } - } - return dashboard; + return params.mobileQrEnabled ? toggleMobileQRCodeDisplay(dashboard) : dashboard; }) )) ); +const toggleMobileQRCodeDisplayIfNeeded = (store: Store, + dashboard$: Observable): Observable => + store.pipe(select(selectMobileQrEnabled)).pipe( + mergeMap((mobileQrEnabled) => dashboard$.pipe( + map((dashboard) => { + return mobileQrEnabled ? toggleMobileQRCodeDisplay(dashboard) : dashboard; + }) + )) + ); + +const toggleMobileQRCodeDisplay = (dashboard: HomeDashboard) => { + for (const widgetId of Object.keys(dashboard.configuration.widgets)) { + if (dashboard.configuration.widgets[widgetId].config.title === 'Select show mobile QR code') { + dashboard.configuration.widgets[widgetId].config.settings.markdownTextFunction = + (dashboard.configuration.widgets[widgetId].config.settings.markdownTextFunction as string) + .replace('\'${mobileQrEnabled}\'', String(true)); + } + } + return dashboard; +} + export const homeDashboardResolver: ResolveFn = ( route: ActivatedRouteSnapshot, state: RouterStateSnapshot, @@ -73,7 +89,7 @@ export const homeDashboardResolver: ResolveFn = ( const authority = getCurrentAuthUser(store).authority; switch (authority) { case Authority.SYS_ADMIN: - dashboard$ = resourcesService.loadJsonResource(sysAdminHomePageJson); + dashboard$ = toggleMobileQRCodeDisplayIfNeeded(store, resourcesService.loadJsonResource(sysAdminHomePageJson)); break; case Authority.TENANT_ADMIN: dashboard$ = updateDeviceActivityKeyFilterIfNeeded(store, resourcesService.loadJsonResource(tenantAdminHomePageJson)); diff --git a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json index a47103059e..43998afbcb 100644 --- a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json +++ b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json @@ -377,38 +377,6 @@ "id": "867f82cf-ecf2-2d5c-35cb-08c6f2edc3a4", "typeFullFqn": "system.home_page_widgets.documentation_links" }, - "a23185ad-dc46-806c-0e50-5b21fb080ace": { - "type": "static", - "sizeX": 7.5, - "sizeY": 6.5, - "config": { - "datasources": [], - "timewindow": { - "realtime": { - "timewindowMs": 60000 - } - }, - "showTitle": false, - "backgroundColor": "rgb(255, 255, 255)", - "color": "rgba(0, 0, 0, 0.87)", - "padding": "16px", - "settings": { - "columns": 3 - }, - "title": "Getting started", - "dropShadow": false, - "enableFullscreen": false, - "widgetStyle": {}, - "widgetCss": "", - "pageSize": 1024, - "noDataDisplayMessage": "", - "showLegend": false - }, - "row": 0, - "col": 0, - "id": "a23185ad-dc46-806c-0e50-5b21fb080ace", - "typeFullFqn": "system.home_page_widgets.getting_started" - }, "b35fa1b0-7f95-0b23-fade-d066653a40e1": { "type": "latest", "sizeX": 5, @@ -2640,6 +2608,152 @@ "row": 0, "col": 0, "id": "b9174a99-2a00-3dbe-0eae-927fd8506345" + }, + "c02d59a0-c979-5ec6-7f58-a5d89ff66236": { + "type": "static", + "sizeX": 7.5, + "sizeY": 6.5, + "config": { + "datasources": [], + "timewindow": { + "realtime": { + "timewindowMs": 60000 + } + }, + "showTitle": false, + "backgroundColor": "rgb(255, 255, 255)", + "color": "rgba(0, 0, 0, 0.87)", + "padding": "16px", + "settings": { + "columns": 3 + }, + "title": "Getting started", + "dropShadow": false, + "enableFullscreen": false, + "widgetStyle": {}, + "widgetCss": "", + "pageSize": 1024, + "noDataDisplayMessage": "", + "showLegend": false + }, + "row": 0, + "col": 0, + "id": "c02d59a0-c979-5ec6-7f58-a5d89ff66236", + "typeFullFqn": "system.home_page_widgets.getting_started" + }, + "53d5f2dd-d432-5362-745f-63bf4487dc96": { + "typeFullFqn": "system.home_page_widgets.home_page_mobile_app_qr_code", + "type": "static", + "sizeX": 6, + "sizeY": 3, + "config": { + "datasources": [ + { + "type": "static", + "name": "function", + "dataKeys": [ + { + "name": "f(x)", + "type": "function", + "label": "Random", + "color": "#2196f3", + "settings": {}, + "_hash": 0.15479322438769105, + "funcBody": "var value = prevValue + Math.random() * 100 - 50;\nvar multiplier = Math.pow(10, 2 || 0);\nvar value = Math.round(value * multiplier) / multiplier;\nif (value < -1000) {\n\tvalue = -1000;\n} else if (value > 1000) {\n\tvalue = 1000;\n}\nreturn value;" + } + ] + } + ], + "timewindow": { + "realtime": { + "timewindowMs": 60000 + } + }, + "showTitle": false, + "backgroundColor": "rgb(255, 255, 255)", + "color": "rgba(0, 0, 0, 0.87)", + "padding": "8px", + "settings": {}, + "title": "Mobile app QR code", + "dropShadow": false, + "enableFullscreen": false, + "widgetStyle": {}, + "widgetCss": "", + "pageSize": 1024, + "noDataDisplayMessage": "" + }, + "row": 0, + "col": 0, + "id": "53d5f2dd-d432-5362-745f-63bf4487dc96" + }, + "0d34fa85-914f-30de-e3dd-7b7879f8d593": { + "typeFullFqn": "system.cards.markdown_card", + "type": "latest", + "sizeX": 5, + "sizeY": 3.5, + "config": { + "datasources": [], + "timewindow": { + "displayValue": "", + "selectedTab": 0, + "realtime": { + "realtimeType": 1, + "interval": 1000, + "timewindowMs": 60000, + "quickInterval": "CURRENT_DAY" + }, + "history": { + "historyType": 0, + "interval": 1000, + "timewindowMs": 60000, + "fixedTimewindow": { + "startTimeMs": 1715012840937, + "endTimeMs": 1715099240937 + }, + "quickInterval": "CURRENT_DAY" + }, + "aggregation": { + "type": "AVG", + "limit": 25000 + } + }, + "showTitle": false, + "backgroundColor": "#fff", + "color": "rgba(0, 0, 0, 0.87)", + "padding": "0px", + "settings": { + "useMarkdownTextFunction": true, + "markdownTextPattern": "### Markdown/HTML card\n - **Current entity**: ${entityName}.\n - **Current value**: ${Random}.", + "markdownTextFunction": "let html = '
';\nlet supportMobile = '${mobileQrEnabled}' || false;\nif (supportMobile && typeof supportMobile === 'boolean') {\n ctx.dashboardWidget.widgetLayout.mobileHide = false;\n html += '';\n} else {\n ctx.dashboardWidget.widgetLayout.mobileHide = true;\n html += '';\n}\nhtml += '
';\nreturn html;", + "applyDefaultMarkdownStyle": false, + "markdownCss": "" + }, + "title": "Select show mobile QR code", + "showTitleIcon": false, + "iconColor": "rgba(0, 0, 0, 0.87)", + "iconSize": "24px", + "titleTooltip": "", + "dropShadow": true, + "enableFullscreen": false, + "widgetStyle": { + "border": "none", + "boxShadow": "none", + "padding": 0 + }, + "titleStyle": { + "fontSize": "16px", + "fontWeight": 400 + }, + "showLegend": false, + "useDashboardTimewindow": true, + "displayTimewindow": true, + "widgetCss": "", + "pageSize": 1024, + "noDataDisplayMessage": "" + }, + "row": 0, + "col": 0, + "id": "0d34fa85-914f-30de-e3dd-7b7879f8d593" } }, "states": { @@ -2695,13 +2809,6 @@ "col": 0, "mobileHide": true }, - "a23185ad-dc46-806c-0e50-5b21fb080ace": { - "sizeX": 35, - "sizeY": 58, - "row": 0, - "col": 85, - "mobileHide": true - }, "163025d8-3ca4-dd1e-c17b-e40d8e03e8a8": { "sizeX": 44, "sizeY": 15, @@ -2709,6 +2816,14 @@ "mobileHeight": 7, "row": 0, "col": 0 + }, + "0d34fa85-914f-30de-e3dd-7b7879f8d593": { + "sizeX": 35, + "sizeY": 58, + "row": 0, + "col": 85, + "mobileHide": false, + "mobileHeight": 7 } }, "gridSettings": { @@ -2936,6 +3051,40 @@ } } } + }, + "mobile_app_qr_code": { + "name": "Mobile App QR code", + "root": false, + "layouts": { + "main": { + "widgets": { + "c02d59a0-c979-5ec6-7f58-a5d89ff66236": { + "sizeX": 120, + "sizeY": 45, + "row": 0, + "col": 0, + "mobileHide": true + }, + "53d5f2dd-d432-5362-745f-63bf4487dc96": { + "sizeX": 120, + "sizeY": 17, + "row": 45, + "col": 0 + } + }, + "gridSettings": { + "backgroundColor": "#eeeeee", + "columns": 120, + "margin": 12, + "outerMargin": false, + "backgroundSizeMode": "100%", + "autoFillHeight": true, + "backgroundImageUrl": null, + "mobileAutoFillHeight": false, + "mobileRowHeight": 20 + } + } + } } }, "entityAliases": { @@ -3051,4 +3200,4 @@ } }, "name": "System Administrator Home Page" -} \ No newline at end of file +} diff --git a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json index b9cba6eb08..cb42df7839 100644 --- a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json +++ b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json @@ -1150,7 +1150,7 @@ "settings": { "useMarkdownTextFunction": true, "markdownTextPattern": "### Markdown/HTML card\n - **Current entity**: ${entityName}.\n - **Current value**: ${Random}.", - "markdownTextFunction": "let html = '
';\nlet supportMobile = '${mobileQrEnabled}' || false;\nif (supportMobile && typeof supportMobile === 'boolean') {\n html += '';\n} else {\n html += '';\n}\nhtml += '
';\nreturn html;", + "markdownTextFunction": "let html = '
';\nlet supportMobile = '${mobileQrEnabled}' || false;\nif (supportMobile && typeof supportMobile === 'boolean') {\n ctx.dashboardWidget.widgetLayout.mobileHide = false;\n html += '';\n} else {\n ctx.dashboardWidget.widgetLayout.mobileHide = true;\n html += '';\n}\nhtml += '
';\nreturn html;", "applyDefaultMarkdownStyle": false, "markdownCss": "" }, @@ -1214,7 +1214,7 @@ "typeFullFqn": "system.home_page_widgets.getting_started" }, "8c5207d8-7103-4dc2-db48-d61c0c8c61fd": { - "typeFullFqn": "system.home_page_widgets.home_mobile_app_qr_code", + "typeFullFqn": "system.home_page_widgets.home_page_mobile_app_qr_code", "type": "static", "sizeX": 6, "sizeY": 3, @@ -1320,7 +1320,9 @@ "sizeX": 35, "sizeY": 58, "row": 0, - "col": 85 + "col": 85, + "mobileHide": false, + "mobileHeight": 10 } }, "gridSettings": { @@ -1401,7 +1403,8 @@ "sizeX": 120, "sizeY": 45, "row": 0, - "col": 0 + "col": 0, + "mobileHide": true }, "8c5207d8-7103-4dc2-db48-d61c0c8c61fd": { "sizeX": 120, @@ -1558,4 +1561,4 @@ } }, "name": "Tenant Administrator Home Page" -} \ No newline at end of file +}