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

UI: Added copied button device provision parameters in device profile

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2020-11-17 17:49:32 +02:00 committed by Andrew Shvayka
parent 71324536a3
commit d0c39416b6
3 changed files with 38 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
View File

@ -31,6 +31,14 @@
<mat-form-field fxFlex class="mat-block">
<mat-label translate>device-profile.provision-device-key</mat-label>
<input matInput formControlName="provisionDeviceKey" required/>
<button mat-button matSuffix mat-icon-button
ngxClipboard
[cbContent]="provisionConfigurationFormGroup.get('provisionDeviceKey').value"
(cbOnSuccess)="onProvisionCopied(true)"
matTooltip="{{ 'device-profile.copy-provision-key' | translate }}"
matTooltipPosition="above">
<mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
</button>
<mat-error *ngIf="provisionConfigurationFormGroup.get('provisionDeviceKey').hasError('required')">
{{ 'device-profile.provision-device-key-required' | translate }}
</mat-error>
@ -38,6 +46,14 @@
<mat-form-field fxFlex class="mat-block">
<mat-label translate>device-profile.provision-device-secret</mat-label>
<input matInput formControlName="provisionDeviceSecret" required/>
<button mat-button matSuffix mat-icon-button
ngxClipboard
[cbContent]="provisionConfigurationFormGroup.get('provisionDeviceSecret').value"
(cbOnSuccess)="onProvisionCopied(false)"
matTooltip="{{ 'device-profile.copy-provision-secret' | translate }}"
matTooltipPosition="above">
<mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
</button>
<mat-error *ngIf="provisionConfigurationFormGroup.get('provisionDeviceSecret').hasError('required')">
{{ 'device-profile.provision-device-secret-required' | translate }}
</mat-error>

19
ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts
View File

@ -33,6 +33,10 @@ import {
deviceProvisionTypeTranslationMap
} from '@shared/models/device.models';
import { generateSecret, isDefinedAndNotNull } from '@core/utils';
import { ActionNotificationShow } from '@core/notification/notification.actions';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'tb-device-profile-provision-configuration',
@ -73,7 +77,9 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
private propagateChange = (v: any) => { };
constructor(private fb: FormBuilder) {
constructor(protected store: Store<AppState>,
private fb: FormBuilder,
private translate: TranslateService) {
}
ngOnInit(): void {
@ -149,4 +155,15 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
}
this.propagateChange(deviceProvisionConfiguration);
}
onProvisionCopied(isKey: boolean) {
this.store.dispatch(new ActionNotificationShow(
{
message: this.translate.instant(isKey ? 'device-profile.provision-key-copied-message' : 'device-profile.provision-secret-copied-message'),
type: 'success',
duration: 1200,
verticalPosition: 'bottom',
horizontalPosition: 'right'
}));
}
}

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

@ -950,8 +950,12 @@
"provision-strategy-check-pre-provisioned": "Check for pre-provisioned devices",
"provision-device-key": "Provision device key",
"provision-device-key-required": "Provision device key is required.",
"copy-provision-key": "Copy provision key",
"provision-key-copied-message": "Provision key has been copied to clipboard",
"provision-device-secret": "Provision device secret",
"provision-device-secret-required": "Provision device secret is required.",
"copy-provision-secret": "Copy provision secret",
"provision-secret-copied-message": "Provision secret has been copied to clipboard",
"condition": "Condition",
"condition-type": "Condition type",
"condition-type-simple": "Simple",