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

Merge pull request #4966 from vvlladd28/improvement/qr-code/load

Browse Source 
UI: Add lazy load qrcode library; added validation qr code text
This commit is contained in:
Igor Kulikov 2021-07-23 16:30:23 +03:00 committed by GitHub
commit ae996e88d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html
View File

@ -16,6 +16,7 @@
-->
<div fxLayout="column" fxLayoutAlign="center center" style="width: 100%; height: 100%;">
<canvas fxFlex #canvas [ngStyle]="{display: qrCodeText ? 'block' : 'none'}"></canvas>
<div *ngIf="!qrCodeText" translate>entity.no-data</div>
<canvas fxFlex #canvas [ngStyle]="{display: qrCodeText && !invalidQrCodeText ? 'block' : 'none'}"></canvas>
<div *ngIf="!qrCodeText && !invalidQrCodeText" translate>entity.no-data</div>
<div *ngIf="invalidQrCodeText" translate>widgets.invalid-qr-code-text</div>
</div>

20
ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.ts
View File

@ -19,7 +19,6 @@ import { PageComponent } from '@shared/components/page.component';
import { WidgetContext } from '@home/models/widget-component.models';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import QRCode from 'qrcode';
import {
fillPattern,
parseData,
@ -30,6 +29,7 @@ import {
import { FormattedData } from '@home/components/widget/lib/maps/map-models';
import { DatasourceData } from '@shared/models/widget.models';
import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
import { isNumber, isObject } from '@core/utils';
interface QrCodeWidgetSettings {
qrCodeTextPattern: string;
@ -53,6 +53,7 @@ export class QrCodeWidgetComponent extends PageComponent implements OnInit, Afte
ctx: WidgetContext;
qrCodeText: string;
invalidQrCodeText = false;
private viewInited: boolean;
private scheduleUpdateCanvas: boolean;
@ -109,8 +110,13 @@ export class QrCodeWidgetComponent extends PageComponent implements OnInit, Afte
private updateQrCodeText(newQrCodeText: string): void {
if (this.qrCodeText !== newQrCodeText) {
this.qrCodeText = newQrCodeText;
if (this.qrCodeText) {
this.updateCanvas();
if (!(isObject(newQrCodeText) || isNumber(newQrCodeText))) {
this.invalidQrCodeText = false;
if (this.qrCodeText) {
this.updateCanvas();
}
} else {
this.invalidQrCodeText = true;
}
this.cd.detectChanges();
}
@ -118,9 +124,11 @@ export class QrCodeWidgetComponent extends PageComponent implements OnInit, Afte
private updateCanvas() {
if (this.viewInited) {
QRCode.toCanvas(this.canvasRef.nativeElement, this.qrCodeText);
this.canvasRef.nativeElement.style.width = 'auto';
this.canvasRef.nativeElement.style.height = 'auto';
import('qrcode').then((QRCode) => {
QRCode.toCanvas(this.canvasRef.nativeElement, this.qrCodeText);
this.canvasRef.nativeElement.style.width = 'auto';
this.canvasRef.nativeElement.style.height = 'auto';
});
} else {
this.scheduleUpdateCanvas = true;
}

3
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -3123,7 +3123,8 @@
"update-attribute": "Update attribute",
"update-timeseries": "Update timeseries",
"value": "Value"
}
},
"invalid-qr-code-text": "Invalid input text for QR code. Input should have a string type"
},
"icon": {
"icon": "Icon",