Artem Dzhereleiko
2 years ago
37 changed files with 901 additions and 294 deletions
@ -0,0 +1,77 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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]="valueSourceFormGroup" class="tb-value-source tb-form-row no-padding no-border"> |
|||
<div class="tb-source-field"> |
|||
<mat-form-field class="tb-type-field" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-select formControlName="type"> |
|||
<mat-option *ngFor="let type of valueSourceDataKeyTypes" [value]="type"> |
|||
{{ valueSourceDataKeyTypeTranslation.get(type) | translate }} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
<tb-entity-alias-input |
|||
class="tb-entity-alias-field" |
|||
*ngIf="valueSourceFormGroup.get('type').value === valueSourceDataKeyType.entity" |
|||
[aliasController]="aliasController" |
|||
required |
|||
formControlName="entityAlias"> |
|||
</tb-entity-alias-input> |
|||
</div> |
|||
<div class="tb-key-value-field"> |
|||
<mat-form-field *ngIf="valueSourceFormGroup.get('type').value === valueSourceDataKeyType.constant" |
|||
appearance="outline" class="tb-constant-field number" subscriptSizing="dynamic" |
|||
[class.tb-suffix-absolute]="!valueSourceFormGroup.get('value').value"> |
|||
<input required matInput formControlName="value" type="number" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="'widgets.value-source.value-required' | translate" |
|||
*ngIf="valueSourceFormGroup.get('value').hasError('required') |
|||
&& valueSourceFormGroup.get('value').touched" |
|||
class="tb-error"> |
|||
warning |
|||
</mat-icon> |
|||
</mat-form-field> |
|||
<tb-data-key-input |
|||
*ngIf="valueSourceFormGroup.get('type').value === valueSourceDataKeyType.latestKey" |
|||
required |
|||
requiredText="widgets.value-source.key-required" |
|||
[datasourceType]="datasource?.type" |
|||
[entityAliasId]="datasource?.entityAliasId" |
|||
[deviceId]="datasource?.deviceId" |
|||
[aliasController]="aliasController" |
|||
[dataKeyType]="datasource?.type === datasourceType.function ? dataKeyType.function : null" |
|||
[dataKeyTypes]="[dataKeyType.attribute, dataKeyType.timeseries]" |
|||
[callbacks]="dataKeyCallbacks" |
|||
[editable]="false" |
|||
[formControl]="latestKeyFormControl"> |
|||
</tb-data-key-input> |
|||
<tb-data-key-input |
|||
*ngIf="valueSourceFormGroup.get('type').value === valueSourceDataKeyType.entity" |
|||
required |
|||
requiredText="widgets.value-source.entity-key-required" |
|||
[datasourceType]="datasourceType.entity" |
|||
[aliasController]="aliasController" |
|||
[entityAlias]="valueSourceFormGroup.get('entityAlias').value" |
|||
[dataKeyTypes]="[dataKeyType.attribute, dataKeyType.timeseries]" |
|||
[callbacks]="dataKeyCallbacks" |
|||
[editable]="false" |
|||
[formControl]="entityKeyFormControl"> |
|||
</tb-data-key-input> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,40 @@ |
|||
/** |
|||
* Copyright © 2016-2024 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 { |
|||
.tb-value-source { |
|||
display: flex; |
|||
gap: 12px; |
|||
} |
|||
.tb-source-field { |
|||
display: flex; |
|||
flex: 1; |
|||
gap: 12px; |
|||
.tb-type-field, .tb-entity-alias-field { |
|||
flex: 1; |
|||
} |
|||
} |
|||
.tb-key-value-field, .tb-constant-field { |
|||
display: flex; |
|||
flex: 1; |
|||
} |
|||
::ng-deep { |
|||
.tb-data-key-input { |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,191 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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 { ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, |
|||
NG_VALUE_ACCESSOR, |
|||
UntypedFormBuilder, |
|||
UntypedFormControl, |
|||
UntypedFormGroup, |
|||
Validators |
|||
} from '@angular/forms'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { IAliasController } from '@core/api/widget-api.models'; |
|||
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
|||
import { DataKey, Datasource, DatasourceType } from '@app/shared/models/widget.models'; |
|||
import { DataKeysCallbacks } from '@home/components/widget/config/data-keys.component.models'; |
|||
import { |
|||
ValueSourceDataKeyType, |
|||
ValueSourceDataKeyTypes, |
|||
ValueSourceDataKeyTypeTranslation |
|||
} from '@shared/models/widget-settings.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-value-source-data-key', |
|||
templateUrl: './value-source-data-key.component.html', |
|||
styleUrls: ['value-source-data-key.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => ValueSourceDataKeyComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class ValueSourceDataKeyComponent extends PageComponent implements OnInit, ControlValueAccessor { |
|||
|
|||
dataKeyType = DataKeyType; |
|||
datasourceType = DatasourceType; |
|||
|
|||
valueSourceDataKeyType = ValueSourceDataKeyType; |
|||
valueSourceDataKeyTypes = ValueSourceDataKeyTypes; |
|||
valueSourceDataKeyTypeTranslation = ValueSourceDataKeyTypeTranslation; |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
@Input() |
|||
aliasController: IAliasController; |
|||
|
|||
@Input() |
|||
dataKeyCallbacks: DataKeysCallbacks; |
|||
|
|||
@Input() |
|||
datasource: Datasource; |
|||
|
|||
valueSourceFormGroup: UntypedFormGroup; |
|||
|
|||
modelValue; |
|||
|
|||
latestKeyFormControl: UntypedFormControl; |
|||
entityKeyFormControl: UntypedFormControl; |
|||
|
|||
private propagateChange = (_val: any) => {}; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private fb: UntypedFormBuilder, |
|||
private cd: ChangeDetectorRef) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.valueSourceFormGroup = this.fb.group({ |
|||
type: [ValueSourceDataKeyType.constant, []], |
|||
value: [null, [Validators.required]], |
|||
entityAlias: [null, [Validators.required]] |
|||
}); |
|||
this.latestKeyFormControl = this.fb.control(null, [Validators.required]); |
|||
this.entityKeyFormControl = this.fb.control(null, [Validators.required]); |
|||
this.valueSourceFormGroup.valueChanges.subscribe( |
|||
() => this.updateModel() |
|||
); |
|||
this.latestKeyFormControl.valueChanges.subscribe( |
|||
() => this.updateModel() |
|||
); |
|||
this.entityKeyFormControl.valueChanges.subscribe( |
|||
() => this.updateModel() |
|||
); |
|||
this.valueSourceFormGroup.get('type').valueChanges.subscribe(() => { |
|||
this.updateValidators(); |
|||
}); |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
if (isDisabled) { |
|||
this.valueSourceFormGroup.disable({emitEvent: false}); |
|||
this.latestKeyFormControl.disable({emitEvent: false}); |
|||
this.entityKeyFormControl.disable({emitEvent: false}); |
|||
} else { |
|||
this.valueSourceFormGroup.enable({emitEvent: false}); |
|||
this.updateValidators(); |
|||
} |
|||
} |
|||
|
|||
writeValue(value): void { |
|||
this.modelValue = value; |
|||
this.valueSourceFormGroup.patchValue( |
|||
{ |
|||
type: value.type, |
|||
value: value.value, |
|||
entityAlias: value.entityAlias |
|||
}, {emitEvent: false} |
|||
); |
|||
if (value.type === ValueSourceDataKeyType.latestKey) { |
|||
this.latestKeyFormControl.patchValue({ |
|||
type: value.latestKeyType, |
|||
name: value.latestKey |
|||
}, {emitEvent: false}); |
|||
} else if (value.type === ValueSourceDataKeyType.entity) { |
|||
this.entityKeyFormControl.patchValue({ |
|||
type: value.entityKeyType, |
|||
name: value.entityKey |
|||
}, {emitEvent: false}); |
|||
} |
|||
|
|||
this.updateValidators(); |
|||
this.cd.markForCheck(); |
|||
} |
|||
|
|||
private updateModel() { |
|||
const value = this.valueSourceFormGroup.value; |
|||
this.modelValue.type = value.type; |
|||
this.modelValue.value = value.value; |
|||
this.modelValue.entityAlias = value.entityAlias; |
|||
|
|||
if (value.type === ValueSourceDataKeyType.latestKey) { |
|||
const latestKey: DataKey = this.latestKeyFormControl.value; |
|||
this.modelValue.latestKey = latestKey?.name; |
|||
this.modelValue.latestKeyType = (latestKey?.type as any); |
|||
} else if (value.type === ValueSourceDataKeyType.entity) { |
|||
const entityKey: DataKey = this.entityKeyFormControl.value; |
|||
this.modelValue.entityKey = entityKey?.name; |
|||
this.modelValue.entityKeyType = (entityKey?.type as any); |
|||
} |
|||
this.propagateChange(this.modelValue); |
|||
} |
|||
|
|||
private updateValidators(): void { |
|||
const type: ValueSourceDataKeyType = this.valueSourceFormGroup.get('type').value; |
|||
if (type === ValueSourceDataKeyType.constant) { |
|||
this.valueSourceFormGroup.get('value').enable({emitEvent: false}); |
|||
this.valueSourceFormGroup.get('entityAlias').disable({emitEvent: false}); |
|||
this.latestKeyFormControl.disable({emitEvent: false}); |
|||
this.entityKeyFormControl.disable({emitEvent: false}); |
|||
} else if (type === ValueSourceDataKeyType.latestKey) { |
|||
this.valueSourceFormGroup.get('value').disable({emitEvent: false}); |
|||
this.valueSourceFormGroup.get('entityAlias').disable({emitEvent: false}); |
|||
this.latestKeyFormControl.enable({emitEvent: false}); |
|||
this.entityKeyFormControl.disable({emitEvent: false}); |
|||
} else if (type === ValueSourceDataKeyType.entity) { |
|||
this.valueSourceFormGroup.get('value').disable({emitEvent: false}); |
|||
this.valueSourceFormGroup.get('entityAlias').enable({emitEvent: false}); |
|||
this.latestKeyFormControl.disable({emitEvent: false}); |
|||
this.entityKeyFormControl.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
} |
|||
Loading…
Reference in new issue