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

thingsboard · ikulikov · May 17, 2024 · Apr 18, 2024 · Apr 24, 2024 · Apr 24, 2024
commit 0bc04222ba91302efce90c62b849ed6c83729770
diff --git 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
@@ -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
@@ -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));

diff --git 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 = '<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,20 +2809,21 @@
                 "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,
                 "mobileOrder": 0,
                 "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"
-}
+}