Vladyslav_Prykhodko
5 years ago
committed by
Andrew Shvayka
Andrew Shvayka
20 changed files with 836 additions and 641 deletions
@ -0,0 +1,70 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<section [formGroup]="instancesFormGroup"> |
||||
|
<mat-accordion multi="true" formArrayName="instances"> |
||||
|
<mat-expansion-panel |
||||
|
class="instance-row" |
||||
|
*ngFor="let instances of instancesFormArray.controls; let $index = index; trackBy: trackByParams" |
||||
|
[formGroupName]="$index" |
||||
|
[expanded]="isExpend" |
||||
|
[disabled]="isExpend"> |
||||
|
<mat-expansion-panel-header> |
||||
|
<mat-panel-title class="tb-panel-title-height" fxLayout="row"> |
||||
|
<div fxFlex="30" fxLayoutAlign="start center"> |
||||
|
{{ 'device-profile.lwm2m.instance' | translate }} <<b>{{instances.get('id').value}}</b>> |
||||
|
</div> |
||||
|
<div fxLayoutAlign="center center" fxFlex="10"> |
||||
|
<mat-checkbox color="warn" |
||||
|
[disabled]="this.disabled" |
||||
|
[checked]="getChecked(instances, 'attribute')" |
||||
|
(change)="changeInstanceResourcesCheckBox($event.checked, instances, 'attribute')" |
||||
|
[indeterminate]="getIndeterminate(instances, 'attribute')"> |
||||
|
</mat-checkbox> |
||||
|
</div> |
||||
|
<div fxLayoutAlign="center center" fxFlex="10"> |
||||
|
<mat-checkbox color="primary" |
||||
|
[disabled]="this.disabled" |
||||
|
[checked]="getChecked(instances, 'telemetry')" |
||||
|
(change)="changeInstanceResourcesCheckBox($event.checked, instances, 'telemetry')" |
||||
|
[indeterminate]="getIndeterminate(instances, 'telemetry')"> |
||||
|
</mat-checkbox> |
||||
|
</div> |
||||
|
<div fxLayoutAlign="center center" fxFlex="10"> |
||||
|
<mat-checkbox color="primary" |
||||
|
[disabled]="this.disabled || !(getIndeterminate(instances, 'telemetry') || getIndeterminate(instances, 'attribute'))" |
||||
|
[checked]="getChecked(instances, 'observe')" |
||||
|
(change)="changeInstanceResourcesCheckBox($event.checked, instances, 'observe')" |
||||
|
[indeterminate]="getIndeterminate(instances, 'observe')"> |
||||
|
</mat-checkbox> |
||||
|
</div> |
||||
|
<span fxFlex></span> |
||||
|
<tb-profile-lwm2m-attributes |
||||
|
formControlName="attributes" |
||||
|
[isAttributeTelemetry]="disableObserveInstance(instances)" |
||||
|
[modelName]="getNameInstance(instances.value)"> |
||||
|
</tb-profile-lwm2m-attributes> |
||||
|
</mat-panel-title> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<tb-profile-lwm2m-observe-attr-telemetry-resource |
||||
|
formControlName="resources"> |
||||
|
</tb-profile-lwm2m-observe-attr-telemetry-resource> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</mat-accordion> |
||||
|
</section> |
||||
@ -0,0 +1,219 @@ |
|||||
|
///
|
||||
|
/// 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 { Component, forwardRef, Input, OnDestroy } from '@angular/core'; |
||||
|
import { |
||||
|
AbstractControl, |
||||
|
ControlValueAccessor, |
||||
|
FormArray, |
||||
|
FormBuilder, |
||||
|
FormGroup, |
||||
|
NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
ValidationErrors, |
||||
|
Validator, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
||||
|
import { Instance, ResourceLwM2M, ResourceSettingTelemetry, } from './lwm2m-profile-config.models'; |
||||
|
import { deepClone, isDefinedAndNotNull } from '@core/utils'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { Subscription } from 'rxjs'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-profile-lwm2m-observe-attr-telemetry-instances', |
||||
|
templateUrl: './lwm2m-observe-attr-telemetry-instances.component.html', |
||||
|
styleUrls: [ './lwm2m-observe-attr-telemetry-instances.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => Lwm2mObserveAttrTelemetryInstancesComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => Lwm2mObserveAttrTelemetryInstancesComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
|
||||
|
export class Lwm2mObserveAttrTelemetryInstancesComponent implements ControlValueAccessor, Validator, OnDestroy { |
||||
|
|
||||
|
instancesFormGroup: FormGroup; |
||||
|
|
||||
|
private requiredValue: boolean; |
||||
|
get required(): boolean { |
||||
|
return this.requiredValue; |
||||
|
} |
||||
|
|
||||
|
@Input() |
||||
|
set required(value: boolean) { |
||||
|
const newVal = coerceBooleanProperty(value); |
||||
|
if (this.requiredValue !== newVal) { |
||||
|
this.requiredValue = newVal; |
||||
|
this.updateValidators(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
private valueChange$: Subscription = null; |
||||
|
private propagateChange = (v: any) => { }; |
||||
|
|
||||
|
constructor(private fb: FormBuilder, |
||||
|
public translate: TranslateService) { |
||||
|
this.instancesFormGroup = this.fb.group({ |
||||
|
instances: this.fb.array([]) |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy() { |
||||
|
if (this.valueChange$) { |
||||
|
this.valueChange$.unsubscribe(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (isDisabled) { |
||||
|
this.instancesFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.instancesFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: Instance[]): void { |
||||
|
this.updateInstances(value); |
||||
|
} |
||||
|
|
||||
|
validate(control: AbstractControl): ValidationErrors | null { |
||||
|
return this.instancesFormGroup.valid ? null : { |
||||
|
instancesForm: false |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
get instancesFormArray(): FormArray { |
||||
|
return this.instancesFormGroup.get('instances') as FormArray; |
||||
|
} |
||||
|
|
||||
|
private updateInstances(instances: Instance[]): void { |
||||
|
if (instances.length === this.instancesFormArray.length) { |
||||
|
this.instancesFormArray.patchValue(instances, {emitEvent: false}); |
||||
|
} else { |
||||
|
if (this.valueChange$) { |
||||
|
this.valueChange$.unsubscribe(); |
||||
|
} |
||||
|
const instancesControl: Array<AbstractControl> = []; |
||||
|
if (instances) { |
||||
|
instances.forEach((instance) => { |
||||
|
instancesControl.push(this.createInstanceFormGroup(instance)); |
||||
|
}); |
||||
|
} |
||||
|
this.instancesFormGroup.setControl('instances', this.fb.array(instancesControl)); |
||||
|
if (this.disabled) { |
||||
|
this.instancesFormGroup.disable({emitEvent: false}); |
||||
|
} |
||||
|
this.valueChange$ = this.instancesFormGroup.valueChanges.subscribe(value => { |
||||
|
this.updateModel(value.instances); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private createInstanceFormGroup(instance: Instance): FormGroup { |
||||
|
return this.fb.group({ |
||||
|
id: [instance.id], |
||||
|
attributes: [instance.attributes], |
||||
|
resources: [instance.resources] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private updateModel(instances: Instance[]) { |
||||
|
if (instances && this.instancesFormGroup.valid) { |
||||
|
this.propagateChange(instances); |
||||
|
} else { |
||||
|
this.propagateChange(null); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
changeInstanceResourcesCheckBox = (value: boolean, instance: AbstractControl, type: ResourceSettingTelemetry): void => { |
||||
|
const resources = deepClone(instance.get('resources').value as ResourceLwM2M[]); |
||||
|
if (value && type === 'observe') { |
||||
|
resources.forEach(resource => resource[type] = resource.telemetry || resource.attribute); |
||||
|
} else { |
||||
|
resources.forEach(resource => resource[type] = value); |
||||
|
} |
||||
|
instance.get('resources').patchValue(resources); |
||||
|
} |
||||
|
|
||||
|
private updateValidators(): void { |
||||
|
this.instancesFormArray.setValidators(this.required ? Validators.required : []); |
||||
|
this.instancesFormArray.updateValueAndValidity(); |
||||
|
} |
||||
|
|
||||
|
trackByParams = (index: number, instance: Instance): number => { |
||||
|
return instance.id; |
||||
|
} |
||||
|
|
||||
|
getIndeterminate = (instance: AbstractControl, type: ResourceSettingTelemetry): boolean => { |
||||
|
const resources = instance.get('resources').value as ResourceLwM2M[]; |
||||
|
if (isDefinedAndNotNull(resources)) { |
||||
|
const checkedResource = resources.filter(resource => resource[type]); |
||||
|
return checkedResource.length !== 0 && checkedResource.length !== resources.length; |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
getChecked = (instance: AbstractControl, type: ResourceSettingTelemetry): boolean => { |
||||
|
const resources = instance.get('resources').value as ResourceLwM2M[]; |
||||
|
return isDefinedAndNotNull(resources) && resources.every(resource => resource[type]); |
||||
|
} |
||||
|
|
||||
|
get isExpend(): boolean { |
||||
|
return this.instancesFormArray.length === 1; |
||||
|
} |
||||
|
|
||||
|
getNameInstance(instance: Instance): string { |
||||
|
return `${this.translate.instant('device-profile.lwm2m.instance')} <${instance.id}>`; |
||||
|
} |
||||
|
|
||||
|
disableObserveInstance = (instance: AbstractControl): boolean => { |
||||
|
const checkedAttrTelemetry = this.observeInstance(instance); |
||||
|
if (checkedAttrTelemetry) { |
||||
|
instance.get('attributes').patchValue(null, {emitEvent: false}); |
||||
|
} |
||||
|
return checkedAttrTelemetry; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
observeInstance = (instance: AbstractControl): boolean => { |
||||
|
const resources = instance.get('resources').value as ResourceLwM2M[]; |
||||
|
if (isDefinedAndNotNull(resources)) { |
||||
|
const checkedAttribute = resources.filter(resource => resource.attribute); |
||||
|
const checkedTelemetry = resources.filter(resource => resource.telemetry); |
||||
|
return checkedAttribute.length === 0 && checkedTelemetry.length === 0; |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
@ -1,91 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
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. |
|
||||
|
|
||||
--> |
|
||||
<section [formGroup]="resourceFormGroup"> |
|
||||
<div fxLayout="row" fxFill formArrayName="resources" |
|
||||
*ngFor="let resourceLwM2M of resourceFormArray.controls; let i = index; trackBy: trackByParams"> |
|
||||
<div class="vertical-padding" fxLayout="column" fxFill [formGroupName]="i"> |
|
||||
<div fxLayout="row" fxFill fxLayoutAlign="start center" [fxShow]="!i"> |
|
||||
<div fxFlex="30"> |
|
||||
<mat-label translate>device-profile.lwm2m.resource-label</mat-label> |
|
||||
</div> |
|
||||
<div fxFlex="10" style="text-align: center"> |
|
||||
<mat-label translate>device-profile.lwm2m.attribute-label</mat-label> |
|
||||
</div> |
|
||||
<div fxFlex="10" style="text-align: center"> |
|
||||
<mat-label translate>device-profile.lwm2m.telemetry-label</mat-label> |
|
||||
</div> |
|
||||
<div fxFlex="10" style="text-align: center"> |
|
||||
<mat-label translate>device-profile.lwm2m.observe-label</mat-label> |
|
||||
</div> |
|
||||
<div fxFlex> |
|
||||
<mat-label translate>device-profile.lwm2m.key-name-label</mat-label> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div fxLayout="row" fxFill fxLayoutAlign="start center"> |
|
||||
<div class="resource-name-lw" fxFlex="30" |
|
||||
matTooltip="{{'device-profile.lwm2m.resource-tip' | translate}}" matTooltipPosition="above"> |
|
||||
<<b>{{resourceLwM2M.get('id').value}}</b>> <b><i>{{resourceLwM2M.get('name').value}}</i></b> |
|
||||
</div> |
|
||||
<div fxFlex="10" fxLayoutAlign="center center"> |
|
||||
<mat-checkbox formControlName="attribute" color="warn" |
|
||||
(change)="updateObserve(i)" |
|
||||
matTooltip="{{'device-profile.lwm2m.is-attr-tip' | translate}}" |
|
||||
matTooltipPosition="above"> |
|
||||
</mat-checkbox> |
|
||||
</div> |
|
||||
<div fxFlex="10" fxLayoutAlign="center center"> |
|
||||
<mat-checkbox formControlName="telemetry" color="primary" |
|
||||
(change)="updateObserve(i)" |
|
||||
matTooltip="{{'device-profile.lwm2m.is-telemetry-tip' | translate}}" |
|
||||
matTooltipPosition="above"> |
|
||||
</mat-checkbox> |
|
||||
</div> |
|
||||
<div fxFlex="10" fxLayoutAlign="center center"> |
|
||||
<mat-checkbox formControlName="observe" color="primary" |
|
||||
[disabled]="disableObserve(i)" |
|
||||
matTooltip="{{(disableObserve(i) ? 'device-profile.lwm2m.not-observe-tip' : 'device-profile.lwm2m.is-observe-tip') | translate}}" |
|
||||
matTooltipPosition="above"> |
|
||||
</mat-checkbox> |
|
||||
</div> |
|
||||
<mat-form-field fxFlex="33"> |
|
||||
<mat-label *ngIf="resourceLwM2M.get('keyName').hasError('required')"> |
|
||||
{{ 'device-profile.lwm2m.key-name-label' | translate }}</mat-label> |
|
||||
<input class="resource-name-lw" matInput type="text" formControlName="keyName" required |
|
||||
matTooltip="{{'device-profile.lwm2m.key-name-tip' | translate}}" |
|
||||
(input)="updateValueKeyName($event, i)" |
|
||||
matTooltipPosition="above"> |
|
||||
<mat-error *ngIf="resourceLwM2M.get('keyName').hasError('required')"> |
|
||||
{{ 'device-profile.lwm2m.key-name' | translate }} |
|
||||
<strong>{{ 'device-profile.lwm2m.required' | translate }}</strong> |
|
||||
</mat-error> |
|
||||
</mat-form-field> |
|
||||
<span fxFlex></span> |
|
||||
<div class="resource-name-lw-end"> |
|
||||
<tb-profile-lwm2m-attributes |
|
||||
formControlName="attributeLwm2m" |
|
||||
[isAttributeTelemetry]="disableObserve(i)" |
|
||||
isResource="true" |
|
||||
[modelName]="getNameResourceLwm2m(resourceLwM2M.value)" |
|
||||
[disabled]="this.disabled" |
|
||||
(updateAttributeLwm2m)="updateAttributeLwm2m($event, i)"> |
|
||||
</tb-profile-lwm2m-attributes> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</section> |
|
||||
@ -1,145 +0,0 @@ |
|||||
///
|
|
||||
/// 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 { Component, forwardRef, Input } from '@angular/core'; |
|
||||
import { ControlValueAccessor, FormArray, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; |
|
||||
import { ResourceLwM2M, RESOURCES } from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models'; |
|
||||
import _ from 'lodash'; |
|
||||
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
|
||||
|
|
||||
@Component({ |
|
||||
selector: 'tb-profile-lwm2m-observe-attr-telemetry-resource', |
|
||||
templateUrl: './lwm2m-observe-attr-telemetry-resource.component.html', |
|
||||
styleUrls: ['./lwm2m-attributes.component.scss'], |
|
||||
providers: [ |
|
||||
{ |
|
||||
provide: NG_VALUE_ACCESSOR, |
|
||||
useExisting: forwardRef(() => Lwm2mObserveAttrTelemetryResourceComponent), |
|
||||
multi: true |
|
||||
} |
|
||||
] |
|
||||
}) |
|
||||
|
|
||||
export class Lwm2mObserveAttrTelemetryResourceComponent implements ControlValueAccessor { |
|
||||
|
|
||||
private requiredValue: boolean; |
|
||||
|
|
||||
resourceFormGroup: FormGroup; |
|
||||
disabled = false; |
|
||||
|
|
||||
get required(): boolean { |
|
||||
return this.requiredValue; |
|
||||
} |
|
||||
|
|
||||
@Input() |
|
||||
set required(value: boolean) { |
|
||||
const newVal = coerceBooleanProperty(value); |
|
||||
if (this.requiredValue !== newVal) { |
|
||||
this.requiredValue = newVal; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
constructor(private fb: FormBuilder) { |
|
||||
this.resourceFormGroup = this.fb.group({ |
|
||||
resources: this.fb.array([]) |
|
||||
}); |
|
||||
this.resourceFormGroup.valueChanges.subscribe(value => { |
|
||||
if (!this.disabled) { |
|
||||
this.propagateChangeState(value.resources); |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
registerOnTouched(fn: any): void { |
|
||||
} |
|
||||
|
|
||||
writeValue(value: ResourceLwM2M[]): void { |
|
||||
this.createResourceLwM2M(value); |
|
||||
} |
|
||||
|
|
||||
get resourceFormArray(): FormArray{ |
|
||||
return this.resourceFormGroup.get(RESOURCES) as FormArray; |
|
||||
} |
|
||||
|
|
||||
setDisabledState(isDisabled: boolean): void { |
|
||||
this.disabled = isDisabled; |
|
||||
if (isDisabled) { |
|
||||
this.resourceFormGroup.disable(); |
|
||||
} else { |
|
||||
this.resourceFormGroup.enable(); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
updateValueKeyName = (event: Event, index: number): void => { |
|
||||
this.resourceFormArray.at(index).patchValue({keyName: _.camelCase((event.target as HTMLInputElement).value)}); |
|
||||
} |
|
||||
|
|
||||
updateAttributeLwm2m = (event: Event, index: number): void => { |
|
||||
this.resourceFormArray.at(index).patchValue({attributeLwm2m: event}); |
|
||||
} |
|
||||
|
|
||||
getNameResourceLwm2m = (resourceLwM2M: ResourceLwM2M): string => { |
|
||||
return `<${resourceLwM2M.id}> ${resourceLwM2M.name}`; |
|
||||
} |
|
||||
|
|
||||
createResourceLwM2M(resourcesLwM2M: ResourceLwM2M[]): void { |
|
||||
if (resourcesLwM2M.length === this.resourceFormArray.length) { |
|
||||
this.resourceFormArray.patchValue(resourcesLwM2M, {emitEvent: false}); |
|
||||
} else { |
|
||||
this.resourceFormArray.clear(); |
|
||||
resourcesLwM2M.forEach(resourceLwM2M => { |
|
||||
this.resourceFormArray.push(this.fb.group( { |
|
||||
id: resourceLwM2M.id, |
|
||||
name: resourceLwM2M.name, |
|
||||
observe: resourceLwM2M.observe, |
|
||||
attribute: resourceLwM2M.attribute, |
|
||||
telemetry: resourceLwM2M.telemetry, |
|
||||
keyName: [resourceLwM2M.keyName, Validators.required], |
|
||||
attributeLwm2m: [resourceLwM2M.attributeLwm2m] |
|
||||
})); |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
private propagateChange = (v: any) => { }; |
|
||||
|
|
||||
registerOnChange(fn: any): void { |
|
||||
this.propagateChange = fn; |
|
||||
} |
|
||||
|
|
||||
private propagateChangeState = (value: any): void => { |
|
||||
if (value && this.resourceFormGroup.valid) { |
|
||||
this.propagateChange(value); |
|
||||
} else { |
|
||||
this.propagateChange(null); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
trackByParams = (index: number): number => { |
|
||||
return index; |
|
||||
} |
|
||||
|
|
||||
updateObserve = (index: number): void => { |
|
||||
if (this.resourceFormArray.at(index).value.attribute === false && this.resourceFormArray.at(index).value.telemetry === false) { |
|
||||
this.resourceFormArray.at(index).patchValue({observe: false}); |
|
||||
this.resourceFormArray.at(index).patchValue({attributeLwm2m: {}}); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
disableObserve = (index: number): boolean => { |
|
||||
return !this.resourceFormArray.at(index).value.telemetry && !this.resourceFormArray.at(index).value.attribute; |
|
||||
} |
|
||||
} |
|
||||
@ -0,0 +1,75 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<section [formGroup]="resourcesFormGroup"> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center"> |
||||
|
<div fxFlex="30"> |
||||
|
<mat-label translate>device-profile.lwm2m.resource-label</mat-label> |
||||
|
</div> |
||||
|
<div fxFlex="10" class="checkbox-column-title"> |
||||
|
<mat-label translate>device-profile.lwm2m.attribute-label</mat-label> |
||||
|
</div> |
||||
|
<div fxFlex="10" class="checkbox-column-title"> |
||||
|
<mat-label translate>device-profile.lwm2m.telemetry-label</mat-label> |
||||
|
</div> |
||||
|
<div fxFlex="10" class="checkbox-column-title"> |
||||
|
<mat-label translate>device-profile.lwm2m.observe-label</mat-label> |
||||
|
</div> |
||||
|
<div fxFlex> |
||||
|
<mat-label translate>device-profile.lwm2m.key-name</mat-label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<mat-divider></mat-divider> |
||||
|
<div formArrayName="resources" |
||||
|
*ngFor="let resourceLwM2M of resourcesFormArray.controls; let $index = index; trackBy: trackByParams"> |
||||
|
<div [formGroupName]="$index" fxLayout="row" fxLayoutAlign="start center" class="resource-list"> |
||||
|
<div class="resource-name" fxFlex="30"> |
||||
|
<<b>{{resourceLwM2M.get('id').value}}</b>> <b>{{resourceLwM2M.get('name').value}}</b> |
||||
|
</div> |
||||
|
<div fxFlex="10" fxLayoutAlign="center center"> |
||||
|
<mat-checkbox formControlName="attribute" color="warn"> |
||||
|
</mat-checkbox> |
||||
|
</div> |
||||
|
<div fxFlex="10" fxLayoutAlign="center center"> |
||||
|
<mat-checkbox formControlName="telemetry" color="primary"> |
||||
|
</mat-checkbox> |
||||
|
</div> |
||||
|
<div fxFlex="10" fxLayoutAlign="center center"> |
||||
|
<mat-checkbox fxFlex="10" formControlName="observe" color="primary" |
||||
|
matTooltip="{{ 'device-profile.lwm2m.edit-observe-select' | translate }}" |
||||
|
[matTooltipDisabled]="disabled || !isDisabledObserve($index)" |
||||
|
matTooltipPosition="above"> |
||||
|
</mat-checkbox> |
||||
|
</div> |
||||
|
<mat-form-field fxFlex="33" hideRequiredMarker> |
||||
|
<mat-label></mat-label> |
||||
|
<input matInput type="text" formControlName="keyName" required> |
||||
|
<mat-error *ngIf="resourceLwM2M.get('keyName').hasError('required') || |
||||
|
resourceLwM2M.get('keyName').hasError('pattern')"> |
||||
|
{{ 'device-profile.lwm2m.key-name-required' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<span fxFlex></span> |
||||
|
<tb-profile-lwm2m-attributes |
||||
|
formControlName="attributes" |
||||
|
[isAttributeTelemetry]="isDisabledObserve($index)" |
||||
|
isResource="true" |
||||
|
[modelName]="getNameResourceLwm2m(resourceLwM2M.value)"> |
||||
|
</tb-profile-lwm2m-attributes> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
@ -0,0 +1,56 @@ |
|||||
|
/** |
||||
|
* 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. |
||||
|
*/ |
||||
|
:host { |
||||
|
.resource-name{ |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
.checkbox-column-title { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.mat-divider { |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.resource-list { |
||||
|
padding-bottom: 8px; |
||||
|
height: 42px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
|
.resource-list { |
||||
|
mat-form-field { |
||||
|
.mat-form-field-wrapper { |
||||
|
padding-bottom: 0; |
||||
|
.mat-form-field-infix { |
||||
|
border-top-width: 0.2em; |
||||
|
width: auto; |
||||
|
min-width: auto; |
||||
|
} |
||||
|
.mat-form-field-underline { |
||||
|
bottom: 0; |
||||
|
} |
||||
|
.mat-form-field-subscript-wrapper{ |
||||
|
margin-top: 1.8em; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,193 @@ |
|||||
|
///
|
||||
|
/// 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 { Component, forwardRef, Input, OnDestroy } from '@angular/core'; |
||||
|
import { |
||||
|
AbstractControl, |
||||
|
ControlValueAccessor, |
||||
|
FormArray, |
||||
|
FormBuilder, |
||||
|
FormGroup, |
||||
|
NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
ValidationErrors, |
||||
|
Validator, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import { ResourceLwM2M } from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models'; |
||||
|
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
||||
|
import { combineLatest, Subject, Subscription } from 'rxjs'; |
||||
|
import { startWith, takeUntil } from 'rxjs/operators'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-profile-lwm2m-observe-attr-telemetry-resource', |
||||
|
templateUrl: './lwm2m-observe-attr-telemetry-resources.component.html', |
||||
|
styleUrls: ['./lwm2m-observe-attr-telemetry-resources.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => Lwm2mObserveAttrTelemetryResourcesComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => Lwm2mObserveAttrTelemetryResourcesComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
|
||||
|
export class Lwm2mObserveAttrTelemetryResourcesComponent implements ControlValueAccessor, OnDestroy, Validator { |
||||
|
|
||||
|
resourcesFormGroup: FormGroup; |
||||
|
|
||||
|
@Input() |
||||
|
disabled = false; |
||||
|
|
||||
|
private requiredValue: boolean; |
||||
|
get required(): boolean { |
||||
|
return this.requiredValue; |
||||
|
} |
||||
|
|
||||
|
@Input() |
||||
|
set required(value: boolean) { |
||||
|
const newVal = coerceBooleanProperty(value); |
||||
|
if (this.requiredValue !== newVal) { |
||||
|
this.requiredValue = newVal; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private destroy$ = new Subject(); |
||||
|
private valueChange$: Subscription = null; |
||||
|
private propagateChange = (v: any) => { }; |
||||
|
|
||||
|
constructor(private fb: FormBuilder) { |
||||
|
this.resourcesFormGroup = this.fb.group({ |
||||
|
resources: this.fb.array([]) |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy() { |
||||
|
if (this.valueChange$) { |
||||
|
this.valueChange$.unsubscribe(); |
||||
|
} |
||||
|
this.destroy$.next(); |
||||
|
this.destroy$.complete(); |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
writeValue(value: ResourceLwM2M[]): void { |
||||
|
this.updatedResources(value); |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (isDisabled) { |
||||
|
this.resourcesFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.resourcesFormArray.controls.forEach(resource => { |
||||
|
resource.get('keyName').enable({emitEvent: false}); |
||||
|
resource.get('attribute').enable({emitEvent: false}); |
||||
|
resource.get('telemetry').enable({onlySelf: true}); |
||||
|
resource.get('attributes').enable({emitEvent: false}); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
validate(): ValidationErrors | null { |
||||
|
return this.resourcesFormGroup.valid ? null : { |
||||
|
resources: false |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
get resourcesFormArray(): FormArray { |
||||
|
return this.resourcesFormGroup.get('resources') as FormArray; |
||||
|
} |
||||
|
|
||||
|
getNameResourceLwm2m(resourceLwM2M: ResourceLwM2M): string { |
||||
|
return `<${resourceLwM2M.id}> ${resourceLwM2M.name}`; |
||||
|
} |
||||
|
|
||||
|
private updatedResources(resources: ResourceLwM2M[]): void { |
||||
|
if (resources.length === this.resourcesFormArray.length) { |
||||
|
this.resourcesFormArray.patchValue(resources, {emitEvent: false}); |
||||
|
} else { |
||||
|
if (this.valueChange$) { |
||||
|
this.valueChange$.unsubscribe(); |
||||
|
} |
||||
|
const resourcesControl: Array<AbstractControl> = []; |
||||
|
if (resources) { |
||||
|
resources.forEach((resource) => { |
||||
|
resourcesControl.push(this.createdResourceFormGroup(resource)); |
||||
|
}); |
||||
|
} |
||||
|
this.resourcesFormGroup.setControl('resources', this.fb.array(resourcesControl)); |
||||
|
if (this.disabled) { |
||||
|
this.resourcesFormGroup.disable({emitEvent: false}); |
||||
|
} |
||||
|
this.valueChange$ = this.resourcesFormGroup.valueChanges.subscribe(value => { |
||||
|
this.updateModel(this.resourcesFormGroup.getRawValue().resources); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private createdResourceFormGroup(resource: ResourceLwM2M): FormGroup { |
||||
|
const form = this.fb.group( { |
||||
|
id: [resource.id], |
||||
|
name: [resource.name], |
||||
|
attribute: [resource.attribute], |
||||
|
telemetry: [resource.telemetry], |
||||
|
observe: [resource.observe], |
||||
|
keyName: [resource.keyName, [Validators.required, Validators.pattern('(.|\\s)*\\S(.|\\s)*')]], |
||||
|
attributes: [resource.attributes] |
||||
|
}); |
||||
|
combineLatest([ |
||||
|
form.get('attribute').valueChanges.pipe(startWith(resource.attribute), takeUntil(this.destroy$)), |
||||
|
form.get('telemetry').valueChanges.pipe(startWith(resource.telemetry), takeUntil(this.destroy$)) |
||||
|
]).subscribe(([attribute, telemetry]) => { |
||||
|
if (attribute || telemetry) { |
||||
|
form.get('observe').enable({emitEvent: false}); |
||||
|
} else { |
||||
|
form.get('observe').disable({emitEvent: false}); |
||||
|
form.get('observe').patchValue(false, {emitEvent: false}); |
||||
|
form.get('attributes').patchValue({}, {emitEvent: false}); |
||||
|
} |
||||
|
}); |
||||
|
return form; |
||||
|
} |
||||
|
|
||||
|
private updateModel(value: ResourceLwM2M[]) { |
||||
|
if (value && this.resourcesFormGroup.valid) { |
||||
|
this.propagateChange(value); |
||||
|
} else { |
||||
|
this.propagateChange(null); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
trackByParams(index: number, resource: ResourceLwM2M): number { |
||||
|
return resource.id; |
||||
|
} |
||||
|
|
||||
|
isDisabledObserve(index: number): boolean{ |
||||
|
return this.resourcesFormArray.at(index).get('observe').disabled; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue