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