Max Petrov
2 years ago
GitHub
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 112 KiB |
|
Before Width: | Height: | Size: 138 KiB After Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 112 KiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 120 KiB |
|
Before Width: | Height: | Size: 113 KiB After Width: | Height: | Size: 113 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 118 KiB |
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 120 KiB |
|
Before Width: | Height: | Size: 121 KiB After Width: | Height: | Size: 121 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 120 KiB |
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 101 KiB |
|
Before Width: | Height: | Size: 113 KiB After Width: | Height: | Size: 113 KiB |
47
ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-rpc-parameters/modbus-rpc-parameters.component.html → ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.html
@ -0,0 +1,20 @@ |
|||||
|
/** |
||||
|
* 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 { |
||||
|
.hint-container { |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
} |
||||
10
ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-rpc-parameters/modbus-rpc-parameters.component.ts → ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/rpc-parameters/modbus-rpc-parameters/modbus-rpc-parameters.component.ts
@ -0,0 +1,48 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="rpcParametersFormGroup"> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.method-name' | translate }}</mat-label> |
||||
|
<input matInput formControlName="methodFilter" |
||||
|
placeholder="echo"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.requestTopicExpression' | translate }}</mat-label> |
||||
|
<input matInput formControlName="requestTopicExpression" |
||||
|
placeholder="sensor/${deviceName}/request/${methodName}/${requestId}"/> |
||||
|
</mat-form-field> |
||||
|
<mat-slide-toggle class="margin" (click)="$event.stopPropagation()" formControlName="withResponse"> |
||||
|
{{ 'gateway.rpc.withResponse' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-form-field *ngIf="rpcParametersFormGroup.get('withResponse')?.value"> |
||||
|
<mat-label>{{ 'gateway.rpc.responseTopicExpression' | translate }}</mat-label> |
||||
|
<input matInput formControlName="responseTopicExpression" |
||||
|
placeholder="sensor/${deviceName}/response/${methodName}/${requestId}"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field *ngIf="rpcParametersFormGroup.get('withResponse')?.value"> |
||||
|
<mat-label>{{ 'gateway.rpc.responseTimeout' | translate }}</mat-label> |
||||
|
<input matInput formControlName="responseTimeout" type="number" |
||||
|
placeholder="10000" min="10" step="1"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label> |
||||
|
<input matInput formControlName="valueExpression" |
||||
|
placeholder="${params}"/> |
||||
|
</mat-form-field> |
||||
|
</ng-container> |
||||
|
|
||||
@ -0,0 +1,24 @@ |
|||||
|
/** |
||||
|
* 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 { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.mat-mdc-slide-toggle.margin { |
||||
|
margin-bottom: 10px; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,139 @@ |
|||||
|
///
|
||||
|
/// 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 { |
||||
|
ChangeDetectionStrategy, |
||||
|
Component, |
||||
|
forwardRef, |
||||
|
OnDestroy, |
||||
|
} from '@angular/core'; |
||||
|
import { |
||||
|
ControlValueAccessor, |
||||
|
FormBuilder, |
||||
|
NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
UntypedFormGroup, |
||||
|
ValidationErrors, |
||||
|
Validator, Validators, |
||||
|
} from '@angular/forms'; |
||||
|
import { SharedModule } from '@shared/shared.module'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { takeUntil, tap } from 'rxjs/operators'; |
||||
|
import { |
||||
|
integerRegex, |
||||
|
noLeadTrailSpacesRegex, |
||||
|
RPCTemplateConfigMQTT |
||||
|
} from '@home/components/widget/lib/gateway/gateway-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-mqtt-rpc-parameters', |
||||
|
templateUrl: './mqtt-rpc-parameters.component.html', |
||||
|
styleUrls: ['./mqtt-rpc-parameters.component.scss'], |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => MqttRpcParametersComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => MqttRpcParametersComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
], |
||||
|
standalone: true, |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
SharedModule, |
||||
|
], |
||||
|
}) |
||||
|
export class MqttRpcParametersComponent implements ControlValueAccessor, Validator, OnDestroy { |
||||
|
|
||||
|
rpcParametersFormGroup: UntypedFormGroup; |
||||
|
|
||||
|
private onChange: (value: RPCTemplateConfigMQTT) => void = (_) => {}; |
||||
|
private onTouched: () => void = () => {}; |
||||
|
|
||||
|
private destroy$ = new Subject<void>(); |
||||
|
|
||||
|
constructor(private fb: FormBuilder) { |
||||
|
this.rpcParametersFormGroup = this.fb.group({ |
||||
|
methodFilter: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
requestTopicExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
responseTopicExpression: [{ value: null, disabled: true }, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
responseTimeout: [{ value: null, disabled: true }, [Validators.min(10), Validators.pattern(integerRegex)]], |
||||
|
valueExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
withResponse: [false, []], |
||||
|
}); |
||||
|
|
||||
|
this.observeValueChanges(); |
||||
|
this.observeWithResponse(); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
this.destroy$.next(); |
||||
|
this.destroy$.complete(); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: (value: RPCTemplateConfigMQTT) => void): void { |
||||
|
this.onChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: () => void): void { |
||||
|
this.onTouched = fn; |
||||
|
} |
||||
|
|
||||
|
validate(): ValidationErrors | null { |
||||
|
return this.rpcParametersFormGroup.valid ? null : { |
||||
|
rpcParametersFormGroup: { valid: false } |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
writeValue(value: RPCTemplateConfigMQTT): void { |
||||
|
this.rpcParametersFormGroup.patchValue(value, {emitEvent: false}); |
||||
|
this.toggleResponseFields(value.withResponse); |
||||
|
} |
||||
|
|
||||
|
private observeValueChanges(): void { |
||||
|
this.rpcParametersFormGroup.valueChanges.pipe( |
||||
|
takeUntil(this.destroy$) |
||||
|
).subscribe((value) => { |
||||
|
this.onChange(value); |
||||
|
this.onTouched(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private observeWithResponse(): void { |
||||
|
this.rpcParametersFormGroup.get('withResponse').valueChanges.pipe( |
||||
|
tap((isActive: boolean) => this.toggleResponseFields(isActive)), |
||||
|
takeUntil(this.destroy$), |
||||
|
).subscribe(); |
||||
|
} |
||||
|
|
||||
|
private toggleResponseFields(enabled: boolean): void { |
||||
|
const responseTopicControl = this.rpcParametersFormGroup.get('responseTopicExpression'); |
||||
|
const responseTimeoutControl = this.rpcParametersFormGroup.get('responseTimeout'); |
||||
|
if (enabled) { |
||||
|
responseTopicControl.enable(); |
||||
|
responseTimeoutControl.enable(); |
||||
|
} else { |
||||
|
responseTopicControl.disable(); |
||||
|
responseTimeoutControl.disable(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,93 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="rpcParametersFormGroup"> |
||||
|
<div class="tb-form-hint tb-primary-fill tb-flex no-padding-top hint-container"> |
||||
|
{{ 'gateway.rpc.hint.opc-method' | translate }} |
||||
|
</div> |
||||
|
<mat-form-field class="tb-flex"> |
||||
|
<mat-label>{{ 'gateway.rpc.method' | translate }}</mat-label> |
||||
|
<input matInput formControlName="method" placeholder="multiply"/> |
||||
|
</mat-form-field> |
||||
|
<fieldset class="tb-form-panel stroked arguments-container" fxLayout="column" formArrayName="arguments"> |
||||
|
<strong> |
||||
|
<span class="fields-label">{{ 'gateway.rpc.arguments' | translate }}</span> |
||||
|
</strong> |
||||
|
<div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center" |
||||
|
*ngFor="let argumentFormGroup of rpcParametersFormGroup.get('arguments')['controls']; let i = index" [formGroup]="argumentFormGroup"> |
||||
|
<div class="tb-form-row column-xs type-container" fxLayoutAlign="space-between center"> |
||||
|
<div class="tb-required" translate>gateway.type</div> |
||||
|
<div class="tb-flex no-gap"> |
||||
|
<mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="type"> |
||||
|
<mat-select-trigger> |
||||
|
<div class="tb-flex align-center"> |
||||
|
<mat-icon class="tb-mat-18" [svgIcon]="valueTypes.get(argumentFormGroup.get('type').value)?.icon"> |
||||
|
</mat-icon> |
||||
|
<span>{{ valueTypes.get(argumentFormGroup.get('type').value)?.name | translate }}</span> |
||||
|
</div> |
||||
|
</mat-select-trigger> |
||||
|
<mat-option *ngFor="let valueType of valueTypeKeys" [value]="valueType"> |
||||
|
<mat-icon class="tb-mat-20" svgIcon="{{ valueTypes.get(valueType).icon }}"> |
||||
|
</mat-icon> |
||||
|
<span>{{ valueTypes.get(valueType).name | translate }}</span> |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row column-xs value-container" fxLayoutAlign="space-between center"> |
||||
|
<div class="tb-required" translate>gateway.value</div> |
||||
|
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute"> |
||||
|
<ng-container [ngSwitch]="argumentFormGroup.get('type').value"> |
||||
|
<input *ngSwitchCase="MappingValueType.STRING" matInput required formControlName="string" |
||||
|
placeholder="{{ 'gateway.set' | translate }}" /> |
||||
|
<input *ngSwitchCase="MappingValueType.INTEGER" matInput required formControlName="integer" type="number" |
||||
|
placeholder="{{ 'gateway.set' | translate }}" /> |
||||
|
<input *ngSwitchCase="MappingValueType.DOUBLE" matInput required formControlName="double" type="number" |
||||
|
placeholder="{{ 'gateway.set' | translate }}" /> |
||||
|
<mat-select *ngSwitchCase="MappingValueType.BOOLEAN" formControlName="boolean"> |
||||
|
<mat-option [value]="true">true</mat-option> |
||||
|
<mat-option [value]="false">false</mat-option> |
||||
|
</mat-select> |
||||
|
</ng-container> |
||||
|
<mat-icon matSuffix |
||||
|
matTooltipPosition="above" |
||||
|
matTooltipClass="tb-error-tooltip" |
||||
|
[matTooltip]="('gateway.value-required') | translate" |
||||
|
*ngIf="argumentFormGroup.get(argumentFormGroup.get('type').value).hasError('required') |
||||
|
&& argumentFormGroup.get(argumentFormGroup.get('type').value).touched" |
||||
|
class="tb-error"> |
||||
|
warning |
||||
|
</mat-icon> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<button mat-icon-button (click)="removeArgument(i)" |
||||
|
class="tb-box-button" |
||||
|
matTooltip="{{ 'gateway.rpc.remove' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>delete</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
<button mat-raised-button |
||||
|
fxFlexAlign="start" |
||||
|
(click)="addArgument()"> |
||||
|
{{ 'gateway.rpc.add-argument' | translate }} |
||||
|
</button> |
||||
|
</fieldset> |
||||
|
</ng-container> |
||||
|
|
||||
@ -0,0 +1,32 @@ |
|||||
|
/** |
||||
|
* 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 { |
||||
|
.arguments-container { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.type-container { |
||||
|
width: 40%; |
||||
|
} |
||||
|
|
||||
|
.value-container { |
||||
|
width: 50%; |
||||
|
} |
||||
|
|
||||
|
.hint-container { |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,169 @@ |
|||||
|
///
|
||||
|
/// 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 { |
||||
|
ChangeDetectionStrategy, |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
forwardRef, |
||||
|
OnDestroy, |
||||
|
} from '@angular/core'; |
||||
|
import { |
||||
|
ControlValueAccessor, |
||||
|
FormArray, |
||||
|
FormBuilder, |
||||
|
FormGroup, |
||||
|
NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
UntypedFormGroup, |
||||
|
ValidationErrors, |
||||
|
Validator, Validators, |
||||
|
} from '@angular/forms'; |
||||
|
import { SharedModule } from '@shared/shared.module'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { takeUntil } from 'rxjs/operators'; |
||||
|
import { |
||||
|
integerRegex, |
||||
|
MappingValueType, |
||||
|
mappingValueTypesMap, |
||||
|
noLeadTrailSpacesRegex, |
||||
|
OPCTypeValue, |
||||
|
RPCTemplateConfigOPC |
||||
|
} from '@home/components/widget/lib/gateway/gateway-widget.models'; |
||||
|
import { isDefinedAndNotNull, isEqual } from '@core/utils'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-opc-rpc-parameters', |
||||
|
templateUrl: './opc-rpc-parameters.component.html', |
||||
|
styleUrls: ['./opc-rpc-parameters.component.scss'], |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => OpcRpcParametersComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => OpcRpcParametersComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
], |
||||
|
standalone: true, |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
SharedModule, |
||||
|
], |
||||
|
}) |
||||
|
export class OpcRpcParametersComponent implements ControlValueAccessor, Validator, OnDestroy { |
||||
|
|
||||
|
rpcParametersFormGroup: UntypedFormGroup; |
||||
|
|
||||
|
readonly valueTypeKeys: MappingValueType[] = Object.values(MappingValueType); |
||||
|
readonly MappingValueType = MappingValueType; |
||||
|
readonly valueTypes = mappingValueTypesMap; |
||||
|
|
||||
|
private onChange: (value: RPCTemplateConfigOPC) => void = (_) => {} ; |
||||
|
private onTouched: () => void = () => {}; |
||||
|
|
||||
|
private destroy$ = new Subject<void>(); |
||||
|
|
||||
|
constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) { |
||||
|
this.rpcParametersFormGroup = this.fb.group({ |
||||
|
method: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
arguments: this.fb.array([]), |
||||
|
}); |
||||
|
|
||||
|
this.observeValueChanges(); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
this.destroy$.next(); |
||||
|
this.destroy$.complete(); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: (value: RPCTemplateConfigOPC) => void): void { |
||||
|
this.onChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: () => void): void { |
||||
|
this.onTouched = fn; |
||||
|
} |
||||
|
|
||||
|
validate(): ValidationErrors | null { |
||||
|
return this.rpcParametersFormGroup.valid ? null : { |
||||
|
rpcParametersFormGroup: { valid: false } |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
writeValue(params: RPCTemplateConfigOPC): void { |
||||
|
this.clearArguments(); |
||||
|
params.arguments?.map(({type, value}) => ({type, [type]: value })) |
||||
|
.forEach(argument => this.addArgument(argument as OPCTypeValue)); |
||||
|
this.cdr.markForCheck(); |
||||
|
this.rpcParametersFormGroup.get('method').patchValue(params.method); |
||||
|
} |
||||
|
|
||||
|
private observeValueChanges(): void { |
||||
|
this.rpcParametersFormGroup.valueChanges.pipe( |
||||
|
takeUntil(this.destroy$) |
||||
|
).subscribe(params => { |
||||
|
const updatedArguments = params.arguments.map(({type, ...config}) => ({type, value: config[type]})); |
||||
|
this.onChange({method: params.method, arguments: updatedArguments}); |
||||
|
this.onTouched(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
removeArgument(index: number): void { |
||||
|
(this.rpcParametersFormGroup.get('arguments') as FormArray).removeAt(index); |
||||
|
} |
||||
|
|
||||
|
addArgument(value: OPCTypeValue = {} as OPCTypeValue): void { |
||||
|
const fromGroup = this.fb.group({ |
||||
|
type: [value.type ?? MappingValueType.STRING], |
||||
|
string: [ |
||||
|
value.string ?? { value: '', disabled: !(isEqual(value, {}) || value.string)}, |
||||
|
[Validators.required, Validators.pattern(noLeadTrailSpacesRegex)] |
||||
|
], |
||||
|
integer: [ |
||||
|
{value: value.integer ?? 0, disabled: !isDefinedAndNotNull(value.integer)}, |
||||
|
[Validators.required, Validators.pattern(integerRegex)] |
||||
|
], |
||||
|
double: [{value: value.double ?? 0, disabled: !isDefinedAndNotNull(value.double)}, [Validators.required]], |
||||
|
boolean: [{value: value.boolean ?? false, disabled: !isDefinedAndNotNull(value.boolean)}, [Validators.required]], |
||||
|
}); |
||||
|
this.observeTypeChange(fromGroup); |
||||
|
(this.rpcParametersFormGroup.get('arguments') as FormArray).push(fromGroup, {emitEvent: false}); |
||||
|
} |
||||
|
|
||||
|
clearArguments(): void { |
||||
|
const formArray = this.rpcParametersFormGroup.get('arguments') as FormArray; |
||||
|
while (formArray.length !== 0) { |
||||
|
formArray.removeAt(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private observeTypeChange(dataKeyFormGroup: FormGroup): void { |
||||
|
dataKeyFormGroup.get('type').valueChanges |
||||
|
.pipe(takeUntil(this.destroy$)) |
||||
|
.subscribe(type => { |
||||
|
dataKeyFormGroup.disable({emitEvent: false}); |
||||
|
dataKeyFormGroup.get('type').enable({emitEvent: false}); |
||||
|
dataKeyFormGroup.get(type).enable({emitEvent: false}); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,28 @@ |
|||||
|
///
|
||||
|
/// 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 { Pipe, PipeTransform } from '@angular/core'; |
||||
|
|
||||
|
@Pipe({ |
||||
|
name: 'getRpcTemplateArrayView', |
||||
|
standalone: true, |
||||
|
}) |
||||
|
export class RpcTemplateArrayViewPipe implements PipeTransform { |
||||
|
|
||||
|
transform(values: {value: string | boolean | number}[]): string { |
||||
|
return values.map(({value}) => value.toString()).join(', '); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,35 @@ |
|||||
|
///
|
||||
|
/// 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 { Directive, ElementRef, EventEmitter, OnDestroy, Output } from '@angular/core'; |
||||
|
import { TbContextMenuEvent } from '@shared/models/jquery-event.models'; |
||||
|
|
||||
|
@Directive({ |
||||
|
selector: '[tbcontextmenu]' |
||||
|
}) |
||||
|
export class ContextMenuDirective implements OnDestroy { |
||||
|
|
||||
|
@Output() |
||||
|
tbcontextmenu = new EventEmitter<TbContextMenuEvent>(); |
||||
|
|
||||
|
constructor(private el: ElementRef) { |
||||
|
$(this.el.nativeElement).on('tbcontextmenu', (e: TbContextMenuEvent) => this.tbcontextmenu.emit(e)); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy() { |
||||
|
$(this.el.nativeElement).off('tbcontextmenu'); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,80 @@ |
|||||
|
///
|
||||
|
/// 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 Timeout = NodeJS.Timeout; |
||||
|
|
||||
|
export interface TbContextMenuEvent extends Event { |
||||
|
clientX: number; |
||||
|
clientY: number; |
||||
|
ctrlKey: boolean; |
||||
|
metaKey: boolean; |
||||
|
} |
||||
|
|
||||
|
const isIOSDevice = (): boolean => |
||||
|
/iPhone|iPad|iPod/i.test(navigator.userAgent) || (navigator.userAgent.includes('Mac') && 'ontouchend' in document); |
||||
|
|
||||
|
export const initCustomJQueryEvents = () => { |
||||
|
$.event.special.tbcontextmenu = { |
||||
|
setup(this: HTMLElement) { |
||||
|
const el = $(this); |
||||
|
if (isIOSDevice()) { |
||||
|
let timeoutId: Timeout; |
||||
|
|
||||
|
el.on('touchstart', (e) => { |
||||
|
e.stopPropagation(); |
||||
|
timeoutId = setTimeout(() => { |
||||
|
timeoutId = null; |
||||
|
e.stopPropagation(); |
||||
|
const touch = e.originalEvent.changedTouches[0]; |
||||
|
const event = $.Event('tbcontextmenu', { |
||||
|
clientX: touch.clientX, |
||||
|
clientY: touch.clientY, |
||||
|
ctrlKey: false, |
||||
|
metaKey: false |
||||
|
}); |
||||
|
el.trigger(event, e); |
||||
|
}, 500); |
||||
|
}); |
||||
|
|
||||
|
el.on('touchend touchmove', () => { |
||||
|
if (timeoutId) { |
||||
|
clearTimeout(timeoutId); |
||||
|
} |
||||
|
}); |
||||
|
} else { |
||||
|
el.on('contextmenu', (e) => { |
||||
|
e.preventDefault(); |
||||
|
e.stopPropagation(); |
||||
|
const event = $.Event('tbcontextmenu', { |
||||
|
clientX: e.originalEvent.clientX, |
||||
|
clientY: e.originalEvent.clientY, |
||||
|
ctrlKey: e.originalEvent.ctrlKey, |
||||
|
metaKey: e.originalEvent.metaKey, |
||||
|
}); |
||||
|
el.trigger(event, e); |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
teardown(this: HTMLElement) { |
||||
|
const el = $(this); |
||||
|
if (isIOSDevice()) { |
||||
|
el.off('touchstart touchend touchmove'); |
||||
|
} else { |
||||
|
el.off('contextmenu'); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
}; |
||||