tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

pull/10591/head
rusikv 2 years ago
parent
2bbeb6ab34
commit
0bc04222ba
5 changed files with 232 additions and 58 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      ui-ngx/src/app/core/services/utils.service.ts
  2. 6
      ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss
  3. 40
      ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts
  4. 229
      ui-ngx/src/assets/dashboard/sys_admin_home_page.json
  5. 13
      ui-ngx/src/assets/dashboard/tenant_admin_home_page.json

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));

229
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": {
@ -3051,4 +3200,4 @@
}
},
"name": "System Administrator Home Page"
}
}

13
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,
@ -1558,4 +1561,4 @@
}
},
"name": "Tenant Administrator Home Page"
}
}

Write Preview
Loading…
Cancel
Save