Commit d0c39416b66b0f4ee68313abd6bad44a13f30232
Committed by
Andrew Shvayka
1 parent
71324536
UI: Added copied button device provision parameters in device profile
Showing
3 changed files
with
38 additions
and
1 deletions
ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
@@ -31,6 +31,14 @@ | @@ -31,6 +31,14 @@ | ||
31 | <mat-form-field fxFlex class="mat-block"> | 31 | <mat-form-field fxFlex class="mat-block"> |
32 | <mat-label translate>device-profile.provision-device-key</mat-label> | 32 | <mat-label translate>device-profile.provision-device-key</mat-label> |
33 | <input matInput formControlName="provisionDeviceKey" required/> | 33 | <input matInput formControlName="provisionDeviceKey" required/> |
34 | + <button mat-button matSuffix mat-icon-button | ||
35 | + ngxClipboard | ||
36 | + [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceKey').value" | ||
37 | + (cbOnSuccess)="onProvisionCopied(true)" | ||
38 | + matTooltip="{{ 'device-profile.copy-provision-key' | translate }}" | ||
39 | + matTooltipPosition="above"> | ||
40 | + <mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon> | ||
41 | + </button> | ||
34 | <mat-error *ngIf="provisionConfigurationFormGroup.get('provisionDeviceKey').hasError('required')"> | 42 | <mat-error *ngIf="provisionConfigurationFormGroup.get('provisionDeviceKey').hasError('required')"> |
35 | {{ 'device-profile.provision-device-key-required' | translate }} | 43 | {{ 'device-profile.provision-device-key-required' | translate }} |
36 | </mat-error> | 44 | </mat-error> |
@@ -38,6 +46,14 @@ | @@ -38,6 +46,14 @@ | ||
38 | <mat-form-field fxFlex class="mat-block"> | 46 | <mat-form-field fxFlex class="mat-block"> |
39 | <mat-label translate>device-profile.provision-device-secret</mat-label> | 47 | <mat-label translate>device-profile.provision-device-secret</mat-label> |
40 | <input matInput formControlName="provisionDeviceSecret" required/> | 48 | <input matInput formControlName="provisionDeviceSecret" required/> |
49 | + <button mat-button matSuffix mat-icon-button | ||
50 | + ngxClipboard | ||
51 | + [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceSecret').value" | ||
52 | + (cbOnSuccess)="onProvisionCopied(false)" | ||
53 | + matTooltip="{{ 'device-profile.copy-provision-secret' | translate }}" | ||
54 | + matTooltipPosition="above"> | ||
55 | + <mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon> | ||
56 | + </button> | ||
41 | <mat-error *ngIf="provisionConfigurationFormGroup.get('provisionDeviceSecret').hasError('required')"> | 57 | <mat-error *ngIf="provisionConfigurationFormGroup.get('provisionDeviceSecret').hasError('required')"> |
42 | {{ 'device-profile.provision-device-secret-required' | translate }} | 58 | {{ 'device-profile.provision-device-secret-required' | translate }} |
43 | </mat-error> | 59 | </mat-error> |
@@ -33,6 +33,10 @@ import { | @@ -33,6 +33,10 @@ import { | ||
33 | deviceProvisionTypeTranslationMap | 33 | deviceProvisionTypeTranslationMap |
34 | } from '@shared/models/device.models'; | 34 | } from '@shared/models/device.models'; |
35 | import { generateSecret, isDefinedAndNotNull } from '@core/utils'; | 35 | import { generateSecret, isDefinedAndNotNull } from '@core/utils'; |
36 | +import { ActionNotificationShow } from '@core/notification/notification.actions'; | ||
37 | +import { Store } from '@ngrx/store'; | ||
38 | +import { AppState } from '@core/core.state'; | ||
39 | +import { TranslateService } from '@ngx-translate/core'; | ||
36 | 40 | ||
37 | @Component({ | 41 | @Component({ |
38 | selector: 'tb-device-profile-provision-configuration', | 42 | selector: 'tb-device-profile-provision-configuration', |
@@ -73,7 +77,9 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu | @@ -73,7 +77,9 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu | ||
73 | 77 | ||
74 | private propagateChange = (v: any) => { }; | 78 | private propagateChange = (v: any) => { }; |
75 | 79 | ||
76 | - constructor(private fb: FormBuilder) { | 80 | + constructor(protected store: Store<AppState>, |
81 | + private fb: FormBuilder, | ||
82 | + private translate: TranslateService) { | ||
77 | } | 83 | } |
78 | 84 | ||
79 | ngOnInit(): void { | 85 | ngOnInit(): void { |
@@ -149,4 +155,15 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu | @@ -149,4 +155,15 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu | ||
149 | } | 155 | } |
150 | this.propagateChange(deviceProvisionConfiguration); | 156 | this.propagateChange(deviceProvisionConfiguration); |
151 | } | 157 | } |
158 | + | ||
159 | + onProvisionCopied(isKey: boolean) { | ||
160 | + this.store.dispatch(new ActionNotificationShow( | ||
161 | + { | ||
162 | + message: this.translate.instant(isKey ? 'device-profile.provision-key-copied-message' : 'device-profile.provision-secret-copied-message'), | ||
163 | + type: 'success', | ||
164 | + duration: 1200, | ||
165 | + verticalPosition: 'bottom', | ||
166 | + horizontalPosition: 'right' | ||
167 | + })); | ||
168 | + } | ||
152 | } | 169 | } |
@@ -950,8 +950,12 @@ | @@ -950,8 +950,12 @@ | ||
950 | "provision-strategy-check-pre-provisioned": "Check for pre-provisioned devices", | 950 | "provision-strategy-check-pre-provisioned": "Check for pre-provisioned devices", |
951 | "provision-device-key": "Provision device key", | 951 | "provision-device-key": "Provision device key", |
952 | "provision-device-key-required": "Provision device key is required.", | 952 | "provision-device-key-required": "Provision device key is required.", |
953 | + "copy-provision-key": "Copy provision key", | ||
954 | + "provision-key-copied-message": "Provision key has been copied to clipboard", | ||
953 | "provision-device-secret": "Provision device secret", | 955 | "provision-device-secret": "Provision device secret", |
954 | "provision-device-secret-required": "Provision device secret is required.", | 956 | "provision-device-secret-required": "Provision device secret is required.", |
957 | + "copy-provision-secret": "Copy provision secret", | ||
958 | + "provision-secret-copied-message": "Provision secret has been copied to clipboard", | ||
955 | "condition": "Condition", | 959 | "condition": "Condition", |
956 | "condition-type": "Condition type", | 960 | "condition-type": "Condition type", |
957 | "condition-type-simple": "Simple", | 961 | "condition-type-simple": "Simple", |