dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: added mobile app qr code to sys admin home page

Browse Source
This commit is contained in:
rusikv 2024-05-09 16:44:38 +03:00
parent 2bbeb6ab34
commit 0bc04222ba
5 changed files with 232 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/core/services/utils.service.ts
View File

@ -30,7 +30,7 @@ import {
guid,
hashCode,
isDefined,
isDefinedAndNotNull, isNotEmptyStr,
isDefinedAndNotNull,
isString,
isUndefined,
objToBase64,

6
ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss
View File

@ -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 {

40
ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts
View File

@ -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<AppState>,
}
}
}
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<AppState>,
dashboard$: Observable<HomeDashboard>): Observable<HomeDashboard> =>
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<HomeDashboard> = (
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot,
@ -73,7 +89,7 @@ export const homeDashboardResolver: ResolveFn<HomeDashboard> = (
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));

227
ui-ngx/src/assets/dashboard/sys_admin_home_page.json
View File

@ -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 = '<div style=\"width: 100%; height: 100%;\">';\nlet supportMobile = '${mobileQrEnabled}' || false;\nif (supportMobile && typeof supportMobile === 'boolean') {\n ctx.dashboardWidget.widgetLayout.mobileHide = false;\n html += '<tb-dashboard-state stateId=\"mobile_app_qr_code\" [ctx]=\"ctx\"></tb-dashboard-state>';\n} else {\n ctx.dashboardWidget.widgetLayout.mobileHide = true;\n html += '<tb-getting-started-widget style=\"padding: 16px;\"></tb-getting-started-widget>';\n}\nhtml += '</div>';\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": {

11
ui-ngx/src/assets/dashboard/tenant_admin_home_page.json
View File

@ -1150,7 +1150,7 @@
"settings": {
"useMarkdownTextFunction": true,
"markdownTextPattern": "### Markdown/HTML card\n - **Current entity**: ${entityName}.\n - **Current value**: ${Random}.",
"markdownTextFunction": "let html = '<div style=\"width: 100%; height: 100%;\">';\nlet supportMobile = '${mobileQrEnabled}' || false;\nif (supportMobile && typeof supportMobile === 'boolean') {\n html += '<tb-dashboard-state stateId=\"mobile_app_qr_code\" [ctx]=\"ctx\"></tb-dashboard-state>';\n} else {\n html += '<tb-getting-started-widget style=\"padding: 16px;\"></tb-getting-started-widget>';\n}\nhtml += '</div>';\nreturn html;",
"markdownTextFunction": "let html = '<div style=\"width: 100%; height: 100%;\">';\nlet supportMobile = '${mobileQrEnabled}' || false;\nif (supportMobile && typeof supportMobile === 'boolean') {\n ctx.dashboardWidget.widgetLayout.mobileHide = false;\n html += '<tb-dashboard-state stateId=\"mobile_app_qr_code\" [ctx]=\"ctx\"></tb-dashboard-state>';\n} else {\n ctx.dashboardWidget.widgetLayout.mobileHide = true;\n html += '<tb-getting-started-widget style=\"padding: 16px;\"></tb-getting-started-widget>';\n}\nhtml += '</div>';\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,