Volodymyr Babak
5 years ago
46 changed files with 520 additions and 186 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,21 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2021 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<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> |
||||
|
</div> |
||||
@ -0,0 +1,129 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2021 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; |
||||
|
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, |
||||
|
parseFunction, |
||||
|
processPattern, |
||||
|
safeExecute |
||||
|
} from '@home/components/widget/lib/maps/common-maps-utils'; |
||||
|
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'; |
||||
|
|
||||
|
interface QrCodeWidgetSettings { |
||||
|
qrCodeTextPattern: string; |
||||
|
useQrCodeTextFunction: boolean; |
||||
|
qrCodeTextFunction: string; |
||||
|
} |
||||
|
|
||||
|
type QrCodeTextFunction = (data: FormattedData) => string; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-qrcode-widget', |
||||
|
templateUrl: './qrcode-widget.component.html', |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class QrCodeWidgetComponent extends PageComponent implements OnInit, AfterViewInit { |
||||
|
|
||||
|
settings: QrCodeWidgetSettings; |
||||
|
qrCodeTextFunction: QrCodeTextFunction; |
||||
|
|
||||
|
@Input() |
||||
|
ctx: WidgetContext; |
||||
|
|
||||
|
qrCodeText: string; |
||||
|
|
||||
|
private viewInited: boolean; |
||||
|
private scheduleUpdateCanvas: boolean; |
||||
|
|
||||
|
@ViewChild('canvas', {static: false}) canvasRef: ElementRef<HTMLCanvasElement>; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected cd: ChangeDetectorRef) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.ctx.$scope.qrCodeWidget = this; |
||||
|
this.settings = this.ctx.settings; |
||||
|
this.qrCodeTextFunction = this.settings.useQrCodeTextFunction ? parseFunction(this.settings.qrCodeTextFunction, ['data']) : null; |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit(): void { |
||||
|
this.viewInited = true; |
||||
|
if (this.scheduleUpdateCanvas) { |
||||
|
this.scheduleUpdateCanvas = false; |
||||
|
this.updateCanvas(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public onDataUpdated() { |
||||
|
let initialData: DatasourceData[]; |
||||
|
let qrCodeText: string; |
||||
|
if (this.ctx.data?.length) { |
||||
|
initialData = this.ctx.data; |
||||
|
} else if (this.ctx.datasources?.length) { |
||||
|
initialData = [ |
||||
|
{ |
||||
|
datasource: this.ctx.datasources[0], |
||||
|
dataKey: { |
||||
|
type: DataKeyType.attribute, |
||||
|
name: 'empty' |
||||
|
}, |
||||
|
data: [] |
||||
|
} |
||||
|
]; |
||||
|
} |
||||
|
if (initialData) { |
||||
|
const data = parseData(initialData); |
||||
|
const dataSourceData = data[0]; |
||||
|
const pattern = this.settings.useQrCodeTextFunction ? |
||||
|
safeExecute(this.qrCodeTextFunction, [dataSourceData]) : this.settings.qrCodeTextPattern; |
||||
|
const replaceInfo = processPattern(pattern, data); |
||||
|
qrCodeText = fillPattern(pattern, replaceInfo, dataSourceData); |
||||
|
} |
||||
|
this.updateQrCodeText(qrCodeText); |
||||
|
} |
||||
|
|
||||
|
private updateQrCodeText(newQrCodeText: string): void { |
||||
|
if (this.qrCodeText !== newQrCodeText) { |
||||
|
this.qrCodeText = newQrCodeText; |
||||
|
if (this.qrCodeText) { |
||||
|
this.updateCanvas(); |
||||
|
} |
||||
|
this.cd.detectChanges(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private updateCanvas() { |
||||
|
if (this.viewInited) { |
||||
|
QRCode.toCanvas(this.canvasRef.nativeElement, this.qrCodeText); |
||||
|
this.canvasRef.nativeElement.style.width = 'auto'; |
||||
|
this.canvasRef.nativeElement.style.height = 'auto'; |
||||
|
} else { |
||||
|
this.scheduleUpdateCanvas = true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue