Vladyslav Prykhodko
6 years ago
10 changed files with 275 additions and 8 deletions
@ -0,0 +1,46 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2020 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 [formGroup]="provisionConfigurationFormGroup"> |
|||
<mat-form-field class="mat-block"> |
|||
<mat-label translate>device-profile.provision-strategy</mat-label> |
|||
<mat-select formControlName="type" required> |
|||
<mat-option *ngFor="let type of deviceProvisionTypes" [value]="type"> |
|||
{{deviceProvisionTypeTranslateMap.get(type) | translate}} |
|||
</mat-option> |
|||
</mat-select> |
|||
<mat-error *ngIf="provisionConfigurationFormGroup.get('type').hasError('required')"> |
|||
{{ 'device-profile.provision-strategy-required' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
<section *ngIf="provisionConfigurationFormGroup.get('type').value !== deviceProvisionType.DISABLED" fxLayoutGap.gt-xs="8px" fxLayout="row" fxLayout.xs="column"> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>device-profile.provision-device-secret</mat-label> |
|||
<input matInput formControlName="provisionDeviceSecret" required/> |
|||
<mat-error *ngIf="provisionConfigurationFormGroup.get('provisionDeviceSecret').hasError('required')"> |
|||
{{ 'device-profile.provision-device-secret-required' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>device-profile.provision-device-key</mat-label> |
|||
<input matInput formControlName="provisionDeviceKey" required/> |
|||
<mat-error *ngIf="provisionConfigurationFormGroup.get('provisionDeviceKey').hasError('required')"> |
|||
{{ 'device-profile.provision-device-key-required' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
</section> |
|||
</div> |
|||
@ -0,0 +1,140 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 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 { Component, forwardRef, Input, OnInit } from "@angular/core"; |
|||
import { |
|||
ControlValueAccessor, |
|||
FormBuilder, |
|||
FormControl, |
|||
FormGroup, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
ValidationErrors, |
|||
Validator, |
|||
Validators |
|||
} from "@angular/forms"; |
|||
import { coerceBooleanProperty } from "@angular/cdk/coercion"; |
|||
import { |
|||
DeviceProvisionConfiguration, |
|||
DeviceProvisionType, |
|||
deviceProvisionTypeTranslationMap |
|||
} from "@shared/models/device.models"; |
|||
import { isDefinedAndNotNull } from "@core/utils"; |
|||
|
|||
@Component({ |
|||
selector: 'tb-device-profile-provision-configuration', |
|||
templateUrl: './device-profile-provision-configuration.component.html', |
|||
styleUrls: [], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => DeviceProfileProvisionConfigurationComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => DeviceProfileProvisionConfigurationComponent), |
|||
multi: true, |
|||
} |
|||
] |
|||
}) |
|||
export class DeviceProfileProvisionConfigurationComponent implements ControlValueAccessor, OnInit, Validator { |
|||
|
|||
provisionConfigurationFormGroup: FormGroup; |
|||
|
|||
deviceProvisionType = DeviceProvisionType; |
|||
deviceProvisionTypes = Object.keys(DeviceProvisionType); |
|||
deviceProvisionTypeTranslateMap = deviceProvisionTypeTranslationMap; |
|||
|
|||
private requiredValue: boolean; |
|||
get required(): boolean { |
|||
return this.requiredValue; |
|||
} |
|||
@Input() |
|||
set required(value: boolean) { |
|||
this.requiredValue = coerceBooleanProperty(value); |
|||
} |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
private propagateChange = (v: any) => { }; |
|||
|
|||
constructor(private fb: FormBuilder) { |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.provisionConfigurationFormGroup = this.fb.group({ |
|||
type: [DeviceProvisionType.DISABLED, Validators.required], |
|||
provisionDeviceSecret: [{value: null, disabled: true}, Validators.required], |
|||
provisionDeviceKey: [{value: null, disabled: true}, Validators.required] |
|||
}); |
|||
this.provisionConfigurationFormGroup.get('type').valueChanges.subscribe((type) => { |
|||
if(type === DeviceProvisionType.DISABLED) { |
|||
this.provisionConfigurationFormGroup.get('provisionDeviceSecret').disable({emitEvent: false}); |
|||
this.provisionConfigurationFormGroup.get('provisionDeviceSecret').patchValue(null,{emitEvent: false}); |
|||
this.provisionConfigurationFormGroup.get('provisionDeviceKey').disable({emitEvent: false}); |
|||
this.provisionConfigurationFormGroup.get('provisionDeviceKey').patchValue(null); |
|||
} else { |
|||
this.provisionConfigurationFormGroup.get('provisionDeviceSecret').enable({emitEvent: false}); |
|||
this.provisionConfigurationFormGroup.get('provisionDeviceKey').enable({emitEvent: false}); |
|||
} |
|||
}); |
|||
this.provisionConfigurationFormGroup.valueChanges.subscribe(() => { |
|||
this.updateModel(); |
|||
}); |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
writeValue(value: DeviceProvisionConfiguration | null): void { |
|||
if(isDefinedAndNotNull(value)){ |
|||
this.provisionConfigurationFormGroup.patchValue(value, {emitEvent: false}); |
|||
} else { |
|||
this.provisionConfigurationFormGroup.patchValue({type: DeviceProvisionType.DISABLED}); |
|||
} |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean){ |
|||
this.disabled = isDisabled; |
|||
if(this.disabled){ |
|||
this.provisionConfigurationFormGroup.disable(); |
|||
} else { |
|||
this.provisionConfigurationFormGroup.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
validate(c: FormControl): ValidationErrors | null { |
|||
return (this.provisionConfigurationFormGroup.valid) ? null : { |
|||
provisionConfiguration: { |
|||
valid: false, |
|||
}, |
|||
}; |
|||
} |
|||
|
|||
private updateModel(): void { |
|||
let deviceProvisionConfiguration: DeviceProvisionConfiguration = null; |
|||
if (this.provisionConfigurationFormGroup.valid) { |
|||
deviceProvisionConfiguration = this.provisionConfigurationFormGroup.getRawValue(); |
|||
} |
|||
this.propagateChange(deviceProvisionConfiguration); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue