Igor Kulikov
5 years ago
24 changed files with 1456 additions and 163 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,41 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<mat-form-field fxFlex class="mat-block" [formGroup]="deviceKeyFormGroup"> |
||||
|
<mat-label>{{ (keyType === dataKeyType.attribute |
||||
|
? attributeLabel |
||||
|
: timeseriesLabel) | translate }}</mat-label> |
||||
|
<input [required]="required" matInput |
||||
|
type="text" placeholder="{{ 'entity.key-name' | translate }}" |
||||
|
#keyInput |
||||
|
(focusin)="onFocus()" |
||||
|
formControlName="key" |
||||
|
[matAutocomplete]="keyAutocomplete"> |
||||
|
<button *ngIf="deviceKeyFormGroup.get('key').value && !deviceKeyFormGroup.get('key').disabled" |
||||
|
type="button" |
||||
|
matSuffix mat-icon-button aria-label="Clear" |
||||
|
(click)="clearKey()"> |
||||
|
<mat-icon class="material-icons">close</mat-icon> |
||||
|
</button> |
||||
|
<mat-autocomplete |
||||
|
class="tb-autocomplete" |
||||
|
#keyAutocomplete="matAutocomplete"> |
||||
|
<mat-option *ngFor="let key of filteredKeys | async" [value]="key"> |
||||
|
<span [innerHTML]="key | highlight:keySearchText"></span> |
||||
|
</mat-option> |
||||
|
</mat-autocomplete> |
||||
|
</mat-form-field> |
||||
@ -0,0 +1,216 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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, ElementRef, forwardRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core'; |
||||
|
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { Observable, of } from 'rxjs'; |
||||
|
import { IAliasController } from '@core/api/widget-api.models'; |
||||
|
import { catchError, map, mergeMap, publishReplay, refCount, tap } from 'rxjs/operators'; |
||||
|
import { DataKey } from '@shared/models/widget.models'; |
||||
|
import { EntityService } from '@core/http/entity.service'; |
||||
|
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-device-key-autocomplete', |
||||
|
templateUrl: './device-key-autocomplete.component.html', |
||||
|
styleUrls: [], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => DeviceKeyAutocompleteComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class DeviceKeyAutocompleteComponent extends PageComponent implements OnInit, ControlValueAccessor, OnChanges { |
||||
|
|
||||
|
@ViewChild('keyInput') keyInput: ElementRef; |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
aliasController: IAliasController; |
||||
|
|
||||
|
@Input() |
||||
|
targetDeviceAliasId: string; |
||||
|
|
||||
|
@Input() |
||||
|
keyType: DataKeyType; |
||||
|
|
||||
|
@Input() |
||||
|
attributeLabel = 'widgets.rpc.attribute-value-key'; |
||||
|
|
||||
|
@Input() |
||||
|
timeseriesLabel = 'widgets.rpc.timeseries-value-key'; |
||||
|
|
||||
|
private requiredValue: boolean; |
||||
|
get required(): boolean { |
||||
|
return this.requiredValue; |
||||
|
} |
||||
|
@Input() |
||||
|
set required(value: boolean) { |
||||
|
this.requiredValue = coerceBooleanProperty(value); |
||||
|
} |
||||
|
|
||||
|
dataKeyType = DataKeyType; |
||||
|
|
||||
|
private modelValue: string; |
||||
|
|
||||
|
private propagateChange = null; |
||||
|
|
||||
|
public deviceKeyFormGroup: FormGroup; |
||||
|
|
||||
|
filteredKeys: Observable<Array<string>>; |
||||
|
keySearchText = ''; |
||||
|
|
||||
|
private latestKeySearchResult: Array<string> = null; |
||||
|
private keysFetchObservable$: Observable<Array<string>> = null; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private translate: TranslateService, |
||||
|
private entityService: EntityService, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.deviceKeyFormGroup = this.fb.group({ |
||||
|
key: [null, this.required ? [Validators.required] : []] |
||||
|
}); |
||||
|
this.deviceKeyFormGroup.valueChanges.subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}); |
||||
|
|
||||
|
this.filteredKeys = this.deviceKeyFormGroup.get('key').valueChanges |
||||
|
.pipe( |
||||
|
map(value => value ? value : ''), |
||||
|
mergeMap(name => this.fetchKeys(name) ) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
ngOnChanges(changes: SimpleChanges): void { |
||||
|
for (const propName of Object.keys(changes)) { |
||||
|
const change = changes[propName]; |
||||
|
if (!change.firstChange && change.currentValue !== change.previousValue) { |
||||
|
if (propName === 'targetDeviceAliasId' || propName === 'keyType') { |
||||
|
this.clearKeysCache(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (isDisabled) { |
||||
|
this.deviceKeyFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.deviceKeyFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: string): void { |
||||
|
this.modelValue = value; |
||||
|
this.deviceKeyFormGroup.patchValue( |
||||
|
{key: value}, {emitEvent: false} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
clearKey() { |
||||
|
this.deviceKeyFormGroup.get('key').patchValue(null, {emitEvent: true}); |
||||
|
setTimeout(() => { |
||||
|
this.keyInput.nativeElement.blur(); |
||||
|
this.keyInput.nativeElement.focus(); |
||||
|
}, 0); |
||||
|
} |
||||
|
|
||||
|
onFocus() { |
||||
|
this.deviceKeyFormGroup.get('key').updateValueAndValidity({onlySelf: true, emitEvent: true}); |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
const value: string = this.deviceKeyFormGroup.get('key').value; |
||||
|
this.modelValue = value; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} |
||||
|
|
||||
|
private clearKeysCache(): void { |
||||
|
this.latestKeySearchResult = null; |
||||
|
this.keysFetchObservable$ = null; |
||||
|
} |
||||
|
|
||||
|
private fetchKeys(searchText?: string): Observable<Array<string>> { |
||||
|
if (this.keySearchText !== searchText || this.latestKeySearchResult === null) { |
||||
|
this.keySearchText = searchText; |
||||
|
const dataKeyFilter = this.createKeyFilter(this.keySearchText); |
||||
|
return this.getKeys().pipe( |
||||
|
map(name => name.filter(dataKeyFilter)), |
||||
|
tap(res => this.latestKeySearchResult = res) |
||||
|
); |
||||
|
} |
||||
|
return of(this.latestKeySearchResult); |
||||
|
} |
||||
|
|
||||
|
private getKeys() { |
||||
|
if (this.keysFetchObservable$ === null) { |
||||
|
let fetchObservable: Observable<Array<DataKey>>; |
||||
|
if (this.targetDeviceAliasId) { |
||||
|
const dataKeyTypes = [this.keyType]; |
||||
|
fetchObservable = this.fetchEntityKeys(this.targetDeviceAliasId, dataKeyTypes); |
||||
|
} else { |
||||
|
fetchObservable = of([]); |
||||
|
} |
||||
|
this.keysFetchObservable$ = fetchObservable.pipe( |
||||
|
map((dataKeys) => dataKeys.map((dataKey) => dataKey.name)), |
||||
|
publishReplay(1), |
||||
|
refCount() |
||||
|
); |
||||
|
} |
||||
|
return this.keysFetchObservable$; |
||||
|
} |
||||
|
|
||||
|
private fetchEntityKeys(entityAliasId: string, dataKeyTypes: Array<DataKeyType>): Observable<Array<DataKey>> { |
||||
|
return this.aliasController.getAliasInfo(entityAliasId).pipe( |
||||
|
mergeMap((aliasInfo) => { |
||||
|
return this.entityService.getEntityKeysByEntityFilter( |
||||
|
aliasInfo.entityFilter, |
||||
|
dataKeyTypes, |
||||
|
{ignoreLoading: true, ignoreErrors: true} |
||||
|
).pipe( |
||||
|
catchError(() => of([])) |
||||
|
); |
||||
|
}), |
||||
|
catchError(() => of([] as Array<DataKey>)) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
private createKeyFilter(query: string): (key: string) => boolean { |
||||
|
const lowercaseQuery = query.toLowerCase(); |
||||
|
return key => key.toLowerCase().startsWith(lowercaseQuery); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,81 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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 class="tb-widget-settings" [formGroup]="knobControlWidgetSettingsForm" fxLayout="column"> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.rpc.common-settings</legend> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.knob-title</mat-label> |
||||
|
<input matInput formControlName="title"> |
||||
|
</mat-form-field> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.rpc.value-settings</legend> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.initial-value</mat-label> |
||||
|
<input matInput type="number" formControlName="initialValue"> |
||||
|
</mat-form-field> |
||||
|
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.min-value</mat-label> |
||||
|
<input required matInput type="number" formControlName="minValue"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.max-value</mat-label> |
||||
|
<input required matInput type="number" formControlName="maxValue"> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.get-value-method</mat-label> |
||||
|
<input required matInput formControlName="getValueMethod"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.set-value-method</mat-label> |
||||
|
<input required matInput formControlName="setValueMethod"> |
||||
|
</mat-form-field> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.rpc.rpc-settings</legend> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.request-timeout</mat-label> |
||||
|
<input required matInput type="number" min="0" formControlName="requestTimeout"> |
||||
|
</mat-form-field> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="knobControlWidgetSettingsForm.get('requestPersistent').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.rpc.request-persistent' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.persistent-polling-interval</mat-label> |
||||
|
<input matInput type="number" min="1000" formControlName="persistentPollingInterval"> |
||||
|
</mat-form-field> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
</fieldset> |
||||
|
</section> |
||||
@ -0,0 +1,95 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 } from '@angular/core'; |
||||
|
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-knob-control-widget-settings', |
||||
|
templateUrl: './knob-control-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class KnobControlWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
knobControlWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.knobControlWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
title: '', |
||||
|
minValue: 0, |
||||
|
maxValue: 100, |
||||
|
initialValue: 50, |
||||
|
getValueMethod: 'getValue', |
||||
|
setValueMethod: 'setValue', |
||||
|
requestTimeout: 500, |
||||
|
requestPersistent: false, |
||||
|
persistentPollingInterval: 5000 |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.knobControlWidgetSettingsForm = this.fb.group({ |
||||
|
|
||||
|
// Common settings
|
||||
|
|
||||
|
title: [settings.title, []], |
||||
|
|
||||
|
// Value settings
|
||||
|
|
||||
|
initialValue: [settings.initialValue, []], |
||||
|
minValue: [settings.minValue, [Validators.required]], |
||||
|
maxValue: [settings.maxValue, [Validators.required]], |
||||
|
|
||||
|
getValueMethod: [settings.getValueMethod, [Validators.required]], |
||||
|
setValueMethod: [settings.setValueMethod, [Validators.required]], |
||||
|
|
||||
|
// RPC settings
|
||||
|
|
||||
|
requestTimeout: [settings.requestTimeout, [Validators.min(0), Validators.required]], |
||||
|
|
||||
|
// --> Persistent RPC settings
|
||||
|
|
||||
|
requestPersistent: [settings.requestPersistent, []], |
||||
|
persistentPollingInterval: [settings.persistentPollingInterval, [Validators.min(1000)]] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['requestPersistent']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean): void { |
||||
|
const requestPersistent: boolean = this.knobControlWidgetSettingsForm.get('requestPersistent').value; |
||||
|
if (requestPersistent) { |
||||
|
this.knobControlWidgetSettingsForm.get('persistentPollingInterval').enable({emitEvent}); |
||||
|
} else { |
||||
|
this.knobControlWidgetSettingsForm.get('persistentPollingInterval').disable({emitEvent}); |
||||
|
} |
||||
|
this.knobControlWidgetSettingsForm.get('persistentPollingInterval').updateValueAndValidity({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,104 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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 class="tb-widget-settings" [formGroup]="ledIndicatorWidgetSettingsForm" fxLayout="column"> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.rpc.common-settings</legend> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.led-title</mat-label> |
||||
|
<input matInput formControlName="title"> |
||||
|
</mat-form-field> |
||||
|
<tb-color-input fxFlex |
||||
|
formControlName="ledColor" |
||||
|
icon="format_color_fill" |
||||
|
label="{{ 'widgets.rpc.led-color' | translate }}" openOnInput colorClearButton> |
||||
|
</tb-color-input> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.rpc.value-settings</legend> |
||||
|
<mat-checkbox formControlName="initialValue" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.rpc.initial-value' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.rpc.check-status-settings</legend> |
||||
|
<mat-slide-toggle formControlName="performCheckStatus" class="slide-block"> |
||||
|
{{ 'widgets.rpc.perform-rpc-status-check' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-form-field [fxShow]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.retrieve-led-status-value-method</mat-label> |
||||
|
<mat-select formControlName="retrieveValueMethod"> |
||||
|
<mat-option [value]="'attribute'"> |
||||
|
{{ 'widgets.rpc.retrieve-value-method-attribute' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'timeseries'"> |
||||
|
{{ 'widgets.rpc.retrieve-value-method-timeseries' | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<tb-device-key-autocomplete fxFlex |
||||
|
[fxShow]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" |
||||
|
[aliasController]="aliasController" |
||||
|
[targetDeviceAliasId]="targetDeviceAliasId" |
||||
|
[keyType]="ledIndicatorWidgetSettingsForm.get('retrieveValueMethod').value === 'attribute' ? dataKeyType.attribute : dataKeyType.timeseries" |
||||
|
attributeLabel="widgets.rpc.led-status-value-attribute" |
||||
|
timeseriesLabel="widgets.rpc.led-status-value-timeseries" |
||||
|
required |
||||
|
formControlName="valueAttribute"> |
||||
|
</tb-device-key-autocomplete> |
||||
|
<mat-form-field [fxShow]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.check-status-method</mat-label> |
||||
|
<input required matInput formControlName="checkStatusMethod"> |
||||
|
</mat-form-field> |
||||
|
<tb-js-func formControlName="parseValueFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['data']" |
||||
|
functionTitle="{{ 'widgets.rpc.parse-led-status-value-function' | translate }}" |
||||
|
helpId="widget/lib/rpc/parse_value_fn"> |
||||
|
</tb-js-func> |
||||
|
</fieldset> |
||||
|
</fieldset> |
||||
|
<fieldset [fxShow]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.rpc.rpc-settings</legend> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.request-timeout</mat-label> |
||||
|
<input matInput type="number" min="0" formControlName="requestTimeout"> |
||||
|
</mat-form-field> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="ledIndicatorWidgetSettingsForm.get('requestPersistent').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.rpc.request-persistent' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.persistent-polling-interval</mat-label> |
||||
|
<input matInput type="number" min="1000" formControlName="persistentPollingInterval"> |
||||
|
</mat-form-field> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
</fieldset> |
||||
|
</section> |
||||
@ -0,0 +1,133 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 } from '@angular/core'; |
||||
|
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { WidgetService } from '@core/http/widget.service'; |
||||
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-led-indicator-widget-settings', |
||||
|
templateUrl: './led-indicator-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class LedIndicatorWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
functionScopeVariables = this.widgetService.getWidgetScopeVariables(); |
||||
|
|
||||
|
get targetDeviceAliasId(): string { |
||||
|
const aliasIds = this.widget.config.targetDeviceAliasIds; |
||||
|
if (aliasIds && aliasIds.length) { |
||||
|
return aliasIds[0]; |
||||
|
} |
||||
|
return null; |
||||
|
} |
||||
|
|
||||
|
dataKeyType = DataKeyType; |
||||
|
|
||||
|
ledIndicatorWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private widgetService: WidgetService, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.ledIndicatorWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
title: '', |
||||
|
ledColor: 'green', |
||||
|
initialValue: false, |
||||
|
performCheckStatus: true, |
||||
|
checkStatusMethod: 'checkStatus', |
||||
|
retrieveValueMethod: 'attribute', |
||||
|
valueAttribute: 'value', |
||||
|
parseValueFunction: 'return data ? true : false;', |
||||
|
requestTimeout: 500, |
||||
|
requestPersistent: false, |
||||
|
persistentPollingInterval: 5000 |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.ledIndicatorWidgetSettingsForm = this.fb.group({ |
||||
|
|
||||
|
// Common settings
|
||||
|
|
||||
|
title: [settings.title, []], |
||||
|
ledColor: [settings.ledColor, []], |
||||
|
|
||||
|
// Value settings
|
||||
|
|
||||
|
initialValue: [settings.initialValue, []], |
||||
|
|
||||
|
// --> Check status settings
|
||||
|
|
||||
|
performCheckStatus: [settings.performCheckStatus, []], |
||||
|
retrieveValueMethod: [settings.retrieveValueMethod, []], |
||||
|
checkStatusMethod: [settings.checkStatusMethod, [Validators.required]], |
||||
|
valueAttribute: [settings.valueAttribute, [Validators.required]], |
||||
|
parseValueFunction: [settings.parseValueFunction, []], |
||||
|
|
||||
|
// RPC settings
|
||||
|
|
||||
|
requestTimeout: [settings.requestTimeout, [Validators.min(0)]], |
||||
|
|
||||
|
// --> Persistent RPC settings
|
||||
|
|
||||
|
requestPersistent: [settings.requestPersistent, []], |
||||
|
persistentPollingInterval: [settings.persistentPollingInterval, [Validators.min(1000)]] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['performCheckStatus', 'requestPersistent']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean): void { |
||||
|
const performCheckStatus: boolean = this.ledIndicatorWidgetSettingsForm.get('performCheckStatus').value; |
||||
|
const requestPersistent: boolean = this.ledIndicatorWidgetSettingsForm.get('requestPersistent').value; |
||||
|
if (performCheckStatus) { |
||||
|
this.ledIndicatorWidgetSettingsForm.get('valueAttribute').disable({emitEvent}); |
||||
|
this.ledIndicatorWidgetSettingsForm.get('checkStatusMethod').enable({emitEvent}); |
||||
|
this.ledIndicatorWidgetSettingsForm.get('requestTimeout').enable({emitEvent}); |
||||
|
this.ledIndicatorWidgetSettingsForm.get('requestPersistent').enable({emitEvent: false}); |
||||
|
if (requestPersistent) { |
||||
|
this.ledIndicatorWidgetSettingsForm.get('persistentPollingInterval').enable({emitEvent}); |
||||
|
} else { |
||||
|
this.ledIndicatorWidgetSettingsForm.get('persistentPollingInterval').disable({emitEvent}); |
||||
|
} |
||||
|
} else { |
||||
|
this.ledIndicatorWidgetSettingsForm.get('valueAttribute').enable({emitEvent}); |
||||
|
this.ledIndicatorWidgetSettingsForm.get('checkStatusMethod').disable({emitEvent}); |
||||
|
this.ledIndicatorWidgetSettingsForm.get('requestTimeout').disable({emitEvent}); |
||||
|
this.ledIndicatorWidgetSettingsForm.get('requestPersistent').disable({emitEvent: false}); |
||||
|
this.ledIndicatorWidgetSettingsForm.get('persistentPollingInterval').disable({emitEvent}); |
||||
|
} |
||||
|
this.ledIndicatorWidgetSettingsForm.get('valueAttribute').updateValueAndValidity({emitEvent: false}); |
||||
|
this.ledIndicatorWidgetSettingsForm.get('checkStatusMethod').updateValueAndValidity({emitEvent: false}); |
||||
|
this.ledIndicatorWidgetSettingsForm.get('requestTimeout').updateValueAndValidity({emitEvent: false}); |
||||
|
this.ledIndicatorWidgetSettingsForm.get('requestPersistent').updateValueAndValidity({emitEvent: false}); |
||||
|
this.ledIndicatorWidgetSettingsForm.get('persistentPollingInterval').updateValueAndValidity({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,40 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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 class="tb-widget-settings" [formGroup]="rpcButtonStyleFormGroup" fxLayout="column"> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.rpc.button-style</legend> |
||||
|
<mat-slide-toggle formControlName="isRaised" class="slide-block"> |
||||
|
{{ 'widgets.rpc.button-raised' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-slide-toggle formControlName="isPrimary" class="slide-block"> |
||||
|
{{ 'widgets.rpc.button-primary' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
||||
|
<tb-color-input fxFlex |
||||
|
formControlName="textColor" |
||||
|
icon="format_color_fill" |
||||
|
label="{{ 'widgets.rpc.button-text-color' | translate }}" openOnInput colorClearButton> |
||||
|
</tb-color-input> |
||||
|
<tb-color-input fxFlex |
||||
|
formControlName="bgColor" |
||||
|
icon="format_color_fill" |
||||
|
label="{{ 'widgets.rpc.button-background-color' | translate }}" openOnInput colorClearButton> |
||||
|
</tb-color-input> |
||||
|
</section> |
||||
|
</fieldset> |
||||
|
</section> |
||||
@ -0,0 +1,98 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
export interface RpcButtonStyle { |
||||
|
isRaised: boolean; |
||||
|
isPrimary: boolean; |
||||
|
bgColor: string; |
||||
|
textColor: string; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-rpc-button-style', |
||||
|
templateUrl: './rpc-button-style.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => RpcButtonStyleComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class RpcButtonStyleComponent extends PageComponent implements OnInit, ControlValueAccessor { |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
private modelValue: RpcButtonStyle; |
||||
|
|
||||
|
private propagateChange = null; |
||||
|
|
||||
|
public rpcButtonStyleFormGroup: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.rpcButtonStyleFormGroup = this.fb.group({ |
||||
|
isRaised: [true, []], |
||||
|
isPrimary: [false, []], |
||||
|
bgColor: [null, []], |
||||
|
textColor: [null, []] |
||||
|
}); |
||||
|
this.rpcButtonStyleFormGroup.valueChanges.subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (isDisabled) { |
||||
|
this.rpcButtonStyleFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.rpcButtonStyleFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: RpcButtonStyle): void { |
||||
|
this.modelValue = value; |
||||
|
this.rpcButtonStyleFormGroup.patchValue( |
||||
|
value, {emitEvent: false} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
this.modelValue = this.rpcButtonStyleFormGroup.value; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,27 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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 class="tb-widget-settings" [formGroup]="rpcShellWidgetSettingsForm" fxLayout="column"> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.rpc.rpc-settings</legend> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.request-timeout</mat-label> |
||||
|
<input required matInput type="number" min="0" formControlName="requestTimeout"> |
||||
|
</mat-form-field> |
||||
|
</fieldset> |
||||
|
</section> |
||||
@ -0,0 +1,53 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 } from '@angular/core'; |
||||
|
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-rpc-shell-widget-settings', |
||||
|
templateUrl: './rpc-shell-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class RpcShellWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
rpcShellWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.rpcShellWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
requestTimeout: 500 |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.rpcShellWidgetSettingsForm = this.fb.group({ |
||||
|
// RPC settings
|
||||
|
requestTimeout: [settings.requestTimeout, [Validators.min(0), Validators.required]] |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,49 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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 class="tb-widget-settings" [formGroup]="rpcTerminalWidgetSettingsForm" fxLayout="column"> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.rpc.rpc-settings</legend> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.request-timeout</mat-label> |
||||
|
<input required matInput type="number" min="0" formControlName="requestTimeout"> |
||||
|
</mat-form-field> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="rpcTerminalWidgetSettingsForm.get('requestPersistent').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.rpc.request-persistent' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.persistent-polling-interval</mat-label> |
||||
|
<input matInput type="number" min="1000" formControlName="persistentPollingInterval"> |
||||
|
</mat-form-field> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
</fieldset> |
||||
|
</section> |
||||
@ -0,0 +1,75 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 } from '@angular/core'; |
||||
|
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-rpc-terminal-widget-settings', |
||||
|
templateUrl: './rpc-terminal-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class RpcTerminalWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
rpcTerminalWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.rpcTerminalWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
requestTimeout: 500, |
||||
|
requestPersistent: false, |
||||
|
persistentPollingInterval: 5000 |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.rpcTerminalWidgetSettingsForm = this.fb.group({ |
||||
|
// RPC settings
|
||||
|
|
||||
|
requestTimeout: [settings.requestTimeout, [Validators.min(0), Validators.required]], |
||||
|
|
||||
|
// --> Persistent RPC settings
|
||||
|
|
||||
|
requestPersistent: [settings.requestPersistent, []], |
||||
|
persistentPollingInterval: [settings.persistentPollingInterval, [Validators.min(1000)]] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['requestPersistent']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean): void { |
||||
|
const requestPersistent: boolean = this.rpcTerminalWidgetSettingsForm.get('requestPersistent').value; |
||||
|
if (requestPersistent) { |
||||
|
this.rpcTerminalWidgetSettingsForm.get('persistentPollingInterval').enable({emitEvent}); |
||||
|
} else { |
||||
|
this.rpcTerminalWidgetSettingsForm.get('persistentPollingInterval').disable({emitEvent}); |
||||
|
} |
||||
|
this.rpcTerminalWidgetSettingsForm.get('persistentPollingInterval').updateValueAndValidity({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,79 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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 class="tb-widget-settings" [formGroup]="sendRpcWidgetSettingsForm" fxLayout="column"> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.rpc.common-settings</legend> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.widget-title</mat-label> |
||||
|
<input matInput formControlName="title"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.button-label</mat-label> |
||||
|
<input matInput formControlName="buttonText"> |
||||
|
</mat-form-field> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.rpc.rpc-settings</legend> |
||||
|
<mat-checkbox formControlName="oneWayElseTwoWay" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.rpc.is-one-way-command' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.rpc-method</mat-label> |
||||
|
<input matInput formControlName="methodName"> |
||||
|
</mat-form-field> |
||||
|
<tb-json-content |
||||
|
label="{{ 'widgets.rpc.rpc-method-params' | translate }}" |
||||
|
[contentType]="contentTypes.JSON" |
||||
|
validateOnChange |
||||
|
formControlName="methodParams"> |
||||
|
</tb-json-content> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.request-timeout</mat-label> |
||||
|
<input matInput type="number" min="0" formControlName="requestTimeout"> |
||||
|
</mat-form-field> |
||||
|
<mat-checkbox formControlName="showError" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.rpc.show-rpc-error' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="sendRpcWidgetSettingsForm.get('requestPersistent').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.rpc.request-persistent' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.persistent-polling-interval</mat-label> |
||||
|
<input matInput type="number" min="1000" formControlName="persistentPollingInterval"> |
||||
|
</mat-form-field> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
</fieldset> |
||||
|
<tb-rpc-button-style |
||||
|
formControlName="styleButton"> |
||||
|
</tb-rpc-button-style> |
||||
|
</section> |
||||
@ -0,0 +1,99 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 } from '@angular/core'; |
||||
|
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { ContentType } from '@shared/models/constants'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-send-rpc-widget-settings', |
||||
|
templateUrl: './send-rpc-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class SendRpcWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
sendRpcWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
contentTypes = ContentType; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.sendRpcWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
title: '', |
||||
|
buttonText: 'Send RPC', |
||||
|
oneWayElseTwoWay: true, |
||||
|
showError: false, |
||||
|
methodName: 'rpcCommand', |
||||
|
methodParams: '{}', |
||||
|
requestTimeout: 5000, |
||||
|
requestPersistent: false, |
||||
|
persistentPollingInterval: 5000, |
||||
|
styleButton: { |
||||
|
isRaised: true, |
||||
|
isPrimary: false, |
||||
|
bgColor: null, |
||||
|
textColor: null |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.sendRpcWidgetSettingsForm = this.fb.group({ |
||||
|
title: [settings.title, []], |
||||
|
buttonText: [settings.buttonText, []], |
||||
|
|
||||
|
// RPC settings
|
||||
|
|
||||
|
oneWayElseTwoWay: [settings.oneWayElseTwoWay, []], |
||||
|
methodName: [settings.methodName, []], |
||||
|
methodParams: [settings.methodParams, []], |
||||
|
requestTimeout: [settings.requestTimeout, [Validators.min(0)]], |
||||
|
showError: [settings.showError, []], |
||||
|
|
||||
|
// Persistent RPC settings
|
||||
|
|
||||
|
requestPersistent: [settings.requestPersistent, []], |
||||
|
persistentPollingInterval: [settings.persistentPollingInterval, [Validators.min(1000)]], |
||||
|
|
||||
|
styleButton: [settings.styleButton, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['requestPersistent']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean): void { |
||||
|
const requestPersistent: boolean = this.sendRpcWidgetSettingsForm.get('requestPersistent').value; |
||||
|
if (requestPersistent) { |
||||
|
this.sendRpcWidgetSettingsForm.get('persistentPollingInterval').enable({emitEvent}); |
||||
|
} else { |
||||
|
this.sendRpcWidgetSettingsForm.get('persistentPollingInterval').disable({emitEvent}); |
||||
|
} |
||||
|
this.sendRpcWidgetSettingsForm.get('persistentPollingInterval').updateValueAndValidity({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,51 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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 class="tb-widget-settings" [formGroup]="updateDeviceAttributeWidgetSettingsForm" fxLayout="column"> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.rpc.common-settings</legend> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.widget-title</mat-label> |
||||
|
<input matInput formControlName="title"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.button-label</mat-label> |
||||
|
<input matInput formControlName="buttonText"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.rpc.device-attribute-scope</mat-label> |
||||
|
<mat-select formControlName="entityAttributeType"> |
||||
|
<mat-option [value]="'SERVER_SCOPE'"> |
||||
|
{{ 'widgets.rpc.server-attribute' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'SHARED_SCOPE'"> |
||||
|
{{ 'widgets.rpc.shared-attribute' | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<tb-json-content |
||||
|
label="{{ 'widgets.rpc.device-attribute-parameters' | translate }}" |
||||
|
[contentType]="contentTypes.JSON" |
||||
|
validateOnChange |
||||
|
formControlName="entityParameters"> |
||||
|
</tb-json-content> |
||||
|
</fieldset> |
||||
|
<tb-rpc-button-style |
||||
|
formControlName="styleButton"> |
||||
|
</tb-rpc-button-style> |
||||
|
</section> |
||||
@ -0,0 +1,68 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 } from '@angular/core'; |
||||
|
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { ContentType } from '@shared/models/constants'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-update-device-attribute-widget-settings', |
||||
|
templateUrl: './update-device-attribute-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class UpdateDeviceAttributeWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
updateDeviceAttributeWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
contentTypes = ContentType; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.updateDeviceAttributeWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
title: '', |
||||
|
buttonText: 'Update device attribute', |
||||
|
entityAttributeType: 'SERVER_SCOPE', |
||||
|
entityParameters: '{}', |
||||
|
styleButton: { |
||||
|
isRaised: true, |
||||
|
isPrimary: false, |
||||
|
bgColor: null, |
||||
|
textColor: null |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.updateDeviceAttributeWidgetSettingsForm = this.fb.group({ |
||||
|
title: [settings.title, []], |
||||
|
buttonText: [settings.buttonText, []], |
||||
|
entityAttributeType: [settings.entityAttributeType, []], |
||||
|
entityParameters: [settings.entityParameters, []], |
||||
|
styleButton: [settings.styleButton, []] |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue