Igor Kulikov
3 years ago
committed by
GitHub
GitHub
16 changed files with 1874 additions and 105 deletions
@ -0,0 +1,54 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<mat-toolbar color="primary"> |
||||
|
<h2 translate>gateway.rpc.save-template</h2> |
||||
|
<span fxFlex></span> |
||||
|
<button mat-icon-button |
||||
|
(click)="close()" |
||||
|
type="button"> |
||||
|
<mat-icon class="material-icons">close</mat-icon> |
||||
|
</button> |
||||
|
</mat-toolbar> |
||||
|
<div mat-dialog-content style="width: 600px" class="mat-content" fxLayout="column"> |
||||
|
<mat-form-field class="mat-block tb-value-type" style="flex-grow: 0"> |
||||
|
<mat-label translate>gateway.rpc.template-name</mat-label> |
||||
|
<input matInput [formControl]="templateNameCtrl" required/> |
||||
|
<mat-error |
||||
|
*ngIf="templateNameCtrl.hasError('required')"> |
||||
|
{{ 'gateway.rpc.template-name-required' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<div class="mat-mdc-form-field-error" |
||||
|
style="margin-top: -15px; padding-left: 10px; font-size: 14px;" |
||||
|
*ngIf="validateDuplicateName(templateNameCtrl)"> |
||||
|
{{ 'gateway.rpc.template-name-duplicate' | translate }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div mat-dialog-actions fxLayoutAlign="end center"> |
||||
|
<button mat-button |
||||
|
type="button" |
||||
|
(click)="close()"> |
||||
|
{{ 'action.cancel' | translate }} |
||||
|
</button> |
||||
|
<button mat-raised-button color="primary" |
||||
|
type="button" |
||||
|
[disabled]="!templateNameCtrl.valid" |
||||
|
(click)="save()"> |
||||
|
{{ 'action.save' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
@ -0,0 +1,63 @@ |
|||||
|
///
|
||||
|
/// 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 { Component, Inject } from '@angular/core'; |
||||
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { DialogComponent } from '@shared/components/dialog.component'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { FormBuilder, FormControl, UntypedFormControl, Validators } from '@angular/forms'; |
||||
|
import { RPCTemplate, SaveRPCTemplateData } from '@home/components/widget/lib/gateway/gateway-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'gateway-service-rpc-connector-template-dialog', |
||||
|
templateUrl: './gateway-service-rpc-connector-template-dialog.html' |
||||
|
}) |
||||
|
|
||||
|
export class GatewayServiceRPCConnectorTemplateDialogComponent extends DialogComponent<GatewayServiceRPCConnectorTemplateDialogComponent, boolean> { |
||||
|
|
||||
|
config: { |
||||
|
[key: string]: any; |
||||
|
}; |
||||
|
templates: Array<RPCTemplate>; |
||||
|
templateNameCtrl: FormControl; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected router: Router, |
||||
|
@Inject(MAT_DIALOG_DATA) public data: SaveRPCTemplateData, |
||||
|
public dialogRef: MatDialogRef<GatewayServiceRPCConnectorTemplateDialogComponent, boolean>, |
||||
|
public fb: FormBuilder) { |
||||
|
super(store, router, dialogRef); |
||||
|
this.config = this.data.config; |
||||
|
this.templates = this.data.templates; |
||||
|
this.templateNameCtrl = this.fb.control('', [Validators.required]); |
||||
|
} |
||||
|
|
||||
|
validateDuplicateName(c: UntypedFormControl) { |
||||
|
const name = c.value.trim(); |
||||
|
return !!this.templates.find((template) => template.name === name); |
||||
|
}; |
||||
|
|
||||
|
close(): void { |
||||
|
this.dialogRef.close(); |
||||
|
} |
||||
|
|
||||
|
save(): void { |
||||
|
this.templateNameCtrl.setValue(this.templateNameCtrl.value.trim()); |
||||
|
if (this.templateNameCtrl.valid) this.dialogRef.close(this.templateNameCtrl.value); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,60 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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 class="mat-subtitle-1 title">{{ 'gateway.rpc.templates-title' | translate }}</div> |
||||
|
<mat-expansion-panel hideToggle *ngFor="let template of rpcTemplates"> |
||||
|
<mat-expansion-panel-header> |
||||
|
<mat-panel-title> |
||||
|
{{template.name}} |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description> |
||||
|
<button mat-icon-button matTooltip="Delete" (click)="deleteTemplate($event, template)"> |
||||
|
<mat-icon class="material-icons">delete</mat-icon> |
||||
|
</button> |
||||
|
<button mat-icon-button matTooltip="Use" (click)="applyTemplate($event, template)"> |
||||
|
<mat-icon class="material-icons">play_arrow</mat-icon> |
||||
|
</button> |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
|
||||
|
<ng-container |
||||
|
*ngFor="let config of template.config | keyvalue : originalOrder" |
||||
|
[ngTemplateOutlet]="RPCTemplateRef" |
||||
|
[ngTemplateOutletContext]="{ $implicit: config, innerValue: false }"> |
||||
|
</ng-container> |
||||
|
<ng-template #RPCTemplateRef let-config let-innerValue='innerValue'> |
||||
|
<div [fxLayout]="isObject(config.value) ? 'column': 'row'" |
||||
|
[fxLayoutAlign]="!isObject(config.value) ? 'space-between center' : ''" |
||||
|
[ngStyle]="{'padding-left': innerValue ? '16px': '0'}" |
||||
|
class="rpc-params-row"> |
||||
|
<div class="template-key"> |
||||
|
{{!innerValue ? ('gateway.rpc.' + config.key | translate) : config.key}} |
||||
|
</div> |
||||
|
<div *ngIf="!isObject(config.value) else RPCObjectRow" |
||||
|
[ngClass]="{'boolean-true': config.value === true, |
||||
|
'boolean-false': config.value === false }"> |
||||
|
{{config.value}}</div> |
||||
|
<ng-template #RPCObjectRow> |
||||
|
<ng-container |
||||
|
*ngFor="let subConfig of config.value | keyvalue : originalOrder" |
||||
|
[ngTemplateOutlet]="RPCTemplateRef" |
||||
|
[ngTemplateOutletContext]="{ $implicit: subConfig, innerValue: true }"> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
@ -0,0 +1,94 @@ |
|||||
|
/** |
||||
|
* 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 { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 0; |
||||
|
|
||||
|
.title { |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.template-key { |
||||
|
color: rgba(0, 0, 0, 0.38); |
||||
|
height: 32px; |
||||
|
line-height: 32px; |
||||
|
} |
||||
|
|
||||
|
.boolean-true, .boolean-false { |
||||
|
border-radius: 3px; |
||||
|
height: 32px; |
||||
|
line-height: 32px; |
||||
|
padding: 0 12px; |
||||
|
width: fit-content; |
||||
|
font-size: 14px; |
||||
|
text-transform: capitalize; |
||||
|
} |
||||
|
|
||||
|
.boolean-false { |
||||
|
color: #d12730; |
||||
|
background-color: rgba(209, 39, 48, 0.08); |
||||
|
} |
||||
|
|
||||
|
.boolean-true { |
||||
|
color: #198038; |
||||
|
background-color: rgba(25, 128, 56, 0.08); |
||||
|
} |
||||
|
|
||||
|
mat-expansion-panel { |
||||
|
margin-top: 10px; |
||||
|
overflow: visible; |
||||
|
} |
||||
|
|
||||
|
.mat-expansion-panel-header-description { |
||||
|
flex-direction: row-reverse; |
||||
|
align-items: center; |
||||
|
margin-right: 0; |
||||
|
|
||||
|
& > mat-icon { |
||||
|
margin-left: 15px; |
||||
|
color: rgba(0, 0, 0, 0.38); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.mat-expansion-panel-header { |
||||
|
padding: 0 0 0 12px; |
||||
|
|
||||
|
&.mat-expansion-panel-header.mat-expanded { |
||||
|
height: 48px; |
||||
|
} |
||||
|
|
||||
|
.mat-content.mat-content-hide-toggle { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.rpc-params-row { |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
|
||||
|
& :not(:first-child) { |
||||
|
white-space: pre; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
@ -0,0 +1,82 @@ |
|||||
|
///
|
||||
|
/// 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 { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; |
||||
|
import { |
||||
|
ConnectorType, |
||||
|
RPCTemplate |
||||
|
} from '@home/components/widget/lib/gateway/gateway-widget.models'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { AttributeService } from '@core/http/attribute.service'; |
||||
|
import { WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { isLiteralObject } from '@app/core/utils'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-gateway-service-rpc-connector-templates', |
||||
|
templateUrl: './gateway-service-rpc-connector-templates.component.html', |
||||
|
styleUrls: ['./gateway-service-rpc-connector-templates.component.scss'] |
||||
|
}) |
||||
|
export class GatewayServiceRPCConnectorTemplatesComponent implements OnInit { |
||||
|
|
||||
|
@Input() |
||||
|
connectorType: ConnectorType; |
||||
|
|
||||
|
@Input() |
||||
|
ctx: WidgetContext; |
||||
|
|
||||
|
@Output() |
||||
|
saveTemplate: EventEmitter<any> = new EventEmitter(); |
||||
|
|
||||
|
@Output() |
||||
|
useTemplate: EventEmitter<any> = new EventEmitter(); |
||||
|
|
||||
|
@Input() |
||||
|
rpcTemplates: Array<RPCTemplate>; |
||||
|
|
||||
|
public readonly originalOrder = (): number => 0; |
||||
|
public readonly isObject = (value: any) => isLiteralObject(value); |
||||
|
|
||||
|
constructor(private attributeService: AttributeService) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
} |
||||
|
|
||||
|
public applyTemplate($event: Event, template: RPCTemplate): void { |
||||
|
$event.stopPropagation(); |
||||
|
this.useTemplate.emit(template); |
||||
|
} |
||||
|
|
||||
|
public deleteTemplate($event: Event, template: RPCTemplate): void { |
||||
|
$event.stopPropagation(); |
||||
|
const index = this.rpcTemplates.findIndex(data => { |
||||
|
return data.name == template.name; |
||||
|
}) |
||||
|
this.rpcTemplates.splice(index, 1); |
||||
|
const key = `${this.connectorType}_template`; |
||||
|
this.attributeService.saveEntityAttributes( |
||||
|
{ |
||||
|
id: this.ctx.defaultSubscription.targetDeviceId, |
||||
|
entityType: EntityType.DEVICE |
||||
|
} |
||||
|
, AttributeScope.SERVER_SCOPE, [{ |
||||
|
key, |
||||
|
value: this.rpcTemplates |
||||
|
}]).subscribe(() => { |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,542 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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 fxLayout="column" class="command-form" [formGroup]="commandForm"> |
||||
|
<div |
||||
|
class="mat-subtitle-1 title">{{ 'gateway.rpc.title' | translate: {type: gatewayConnectorDefaultTypesTranslates.get(connectorType)} }}</div> |
||||
|
<ng-template [ngIf]="connectorType"> |
||||
|
<ng-container [ngSwitch]="connectorType"> |
||||
|
<ng-template [ngSwitchCase]="ConnectorType.MQTT"> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.methodFilter' | 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()" [formControl]="isMQTTWithResponse"> |
||||
|
{{ 'gateway.rpc.withResponse' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-form-field *ngIf="isMQTTWithResponse.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="isMQTTWithResponse.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-template> |
||||
|
<ng-template [ngSwitchCase]="ConnectorType.MODBUS"> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.tag' | translate }}</mat-label> |
||||
|
<input matInput formControlName="tag" placeholder="setValue"/> |
||||
|
</mat-form-field> |
||||
|
<div fxFlex fxLayout="row" fxLayoutGap="10px"> |
||||
|
<mat-form-field fxFlex="50" class="mat-block"> |
||||
|
<mat-label>{{ 'gateway.rpc.type' | translate }}</mat-label> |
||||
|
<mat-select formControlName="type"> |
||||
|
<mat-option *ngFor="let type of modbusCommandTypes" [value]="type"> |
||||
|
{{ type }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex="50" class="mat-block"> |
||||
|
<mat-label>{{ 'gateway.rpc.functionCode' | translate }}</mat-label> |
||||
|
<mat-select formControlName="functionCode"> |
||||
|
<mat-option *ngFor="let code of codesArray" [value]="code"> |
||||
|
{{ modbusCodesTranslate.get(code) | translate}} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<mat-form-field *ngIf="commandForm.get('functionCode').value>4"> |
||||
|
<mat-label>{{ 'gateway.rpc.value' | translate }}</mat-label> |
||||
|
<input matInput formControlName="value" placeholder="value"/> |
||||
|
</mat-form-field> |
||||
|
<div fxFlex fxLayout="row" fxLayoutGap="10px"> |
||||
|
<mat-form-field fxFlex="50"> |
||||
|
<mat-label>{{ 'gateway.rpc.address' | translate }}</mat-label> |
||||
|
<input matInput formControlName="address" type="number" min="0" |
||||
|
placeholder="1" step="1"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex="50"> |
||||
|
<mat-label>{{ 'gateway.rpc.objectsCount' | translate }}</mat-label> |
||||
|
<input matInput formControlName="objectsCount" type="number" min="0" |
||||
|
placeholder="31" step="1"/> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
<ng-template [ngSwitchCase]="ConnectorType.BACNET"> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label> |
||||
|
<input matInput formControlName="method" placeholder="set_state"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<mat-label>{{ 'gateway.rpc.requestType' | translate }}</mat-label> |
||||
|
<mat-select formControlName="requestType"> |
||||
|
<mat-option *ngFor="let type of bACnetRequestTypes" [value]="type"> |
||||
|
{{bACnetRequestTypesTranslates.get(type) | translate}} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.requestTimeout' | translate }}</mat-label> |
||||
|
<input matInput formControlName="requestTimeout" type="number" |
||||
|
min="10" step="1" placeholder="1000"/> |
||||
|
</mat-form-field> |
||||
|
<div fxFlex fxLayout="row" fxLayoutGap="10px"> |
||||
|
<mat-form-field fxFlex="50" class="mat-block"> |
||||
|
<mat-label>{{ 'gateway.rpc.objectType' | translate }}</mat-label> |
||||
|
<mat-select formControlName="objectType"> |
||||
|
<mat-option *ngFor="let type of bACnetObjectTypes" [value]="type"> |
||||
|
{{bACnetObjectTypesTranslates.get(type) | translate}} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex="50"> |
||||
|
<mat-label>{{ 'gateway.rpc.identifier' | translate }}</mat-label> |
||||
|
<input matInput formControlName="identifier" type="number" |
||||
|
min="1" step="1" placeholder="1"/> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<mat-label>{{ 'gateway.rpc.propertyId' | translate }}</mat-label> |
||||
|
<input matInput formControlName="propertyId" placeholder="presentValue"/> |
||||
|
</mat-form-field> |
||||
|
</ng-template> |
||||
|
<ng-template [ngSwitchCase]="ConnectorType.BLE"> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label> |
||||
|
<input matInput formControlName="methodRPC" placeholder="rpcMethod1"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.characteristicUUID' | translate }}</mat-label> |
||||
|
<input matInput formControlName="characteristicUUID" placeholder="00002A00-0000-1000-8000-00805F9B34FB"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<mat-label>{{ 'gateway.rpc.methodProcessing' | translate }}</mat-label> |
||||
|
<mat-select formControlName="methodProcessing"> |
||||
|
<mat-option *ngFor="let type of bLEMethods" [value]="type"> |
||||
|
{{bLEMethodsTranslates.get(type) | translate}} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="withResponse"> |
||||
|
{{ 'gateway.rpc.withResponse' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</ng-template> |
||||
|
<ng-template [ngSwitchCase]="ConnectorType.CAN"> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label> |
||||
|
<input matInput formControlName="method" placeholder="sendSameData"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.nodeID' | translate }}</mat-label> |
||||
|
<input matInput formControlName="nodeID" type="number" placeholder="4" min="0" step="1"/> |
||||
|
</mat-form-field> |
||||
|
<mat-slide-toggle class="mat-slide margin" formControlName="isExtendedID"> |
||||
|
{{ 'gateway.rpc.isExtendedID' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-slide-toggle class="mat-slide margin" formControlName="isFD"> |
||||
|
{{ 'gateway.rpc.isFD' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-slide-toggle class="mat-slide margin" formControlName="bitrateSwitch"> |
||||
|
{{ 'gateway.rpc.bitrateSwitch' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutGap="10px"> |
||||
|
<mat-form-field fxFlex="50"> |
||||
|
<mat-label>{{ 'gateway.rpc.dataLength' | translate }}</mat-label> |
||||
|
<input matInput formControlName="dataLength" type="number" placeholder="2" min="1" step="1"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field class="mat-block" fxFlex="50"> |
||||
|
<mat-label>{{ 'gateway.rpc.dataByteorder' | translate }}</mat-label> |
||||
|
<mat-select formControlName="dataByteorder"> |
||||
|
<mat-option *ngFor="let order of cANByteOrders" [value]="order"> |
||||
|
{{ order | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div fxFlex fxLayout="row" fxLayoutGap="10px"> |
||||
|
<mat-form-field fxFlex="50"> |
||||
|
<mat-label>{{ 'gateway.rpc.dataBefore' | translate }}</mat-label> |
||||
|
<input matInput formControlName="dataBefore" placeholder="00AA"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex="50"> |
||||
|
<mat-label>{{ 'gateway.rpc.dataAfter' | translate }}</mat-label> |
||||
|
<input matInput formControlName="dataAfter" placeholder="0102"/> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.dataInHEX' | translate }}</mat-label> |
||||
|
<input matInput formControlName="dataInHEX" |
||||
|
placeholder="aa bb cc dd ee ff aa bb aa bb cc d ee ff"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.dataExpression' | translate }}</mat-label> |
||||
|
<input matInput formControlName="dataExpression" |
||||
|
placeholder="userSpeed if maxAllowedSpeed > userSpeed else maxAllowedSpeed"/> |
||||
|
</mat-form-field> |
||||
|
</ng-template> |
||||
|
<ng-template [ngSwitchCase]="ConnectorType.FTP"> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.methodFilter' | translate }}</mat-label> |
||||
|
<input matInput formControlName="methodFilter" placeholder="read"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label> |
||||
|
<input matInput formControlName="valueExpression" placeholder="${params}"/> |
||||
|
</mat-form-field> |
||||
|
</ng-template> |
||||
|
<ng-template [ngSwitchCase]="ConnectorType.OCPP"> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label> |
||||
|
<input matInput formControlName="methodRPC" placeholder="rpc1"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label> |
||||
|
<input matInput formControlName="valueExpression" placeholder="${params}"/> |
||||
|
</mat-form-field> |
||||
|
<mat-slide-toggle class="mat-slide margin" formControlName="withResponse"> |
||||
|
{{ 'gateway.rpc.withResponse' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</ng-template> |
||||
|
<ng-template [ngSwitchCase]="ConnectorType.SOCKET"> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label> |
||||
|
<input matInput formControlName="methodRPC" placeholder="rpcMethod1"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<mat-label>{{ 'gateway.rpc.methodProcessing' | translate }}</mat-label> |
||||
|
<mat-select formControlName="methodProcessing"> |
||||
|
<mat-option *ngFor="let method of socketMethodProcessings" [value]="method"> |
||||
|
{{ SocketMethodProcessingsTranslates.get(method) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<mat-label>{{ 'gateway.rpc.encoding' | translate }}</mat-label> |
||||
|
<input matInput formControlName="encoding" placeholder="{{socketEncodings[0]}}"/> |
||||
|
</mat-form-field> |
||||
|
<mat-slide-toggle class="mat-slide margin" formControlName="withResponse"> |
||||
|
{{ 'gateway.rpc.withResponse' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</ng-template> |
||||
|
<ng-template [ngSwitchCase]="ConnectorType.XMPP"> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.methodRPC' | translate }}</mat-label> |
||||
|
<input matInput formControlName="methodRPC" placeholder="rpc1"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label> |
||||
|
<input matInput formControlName="valueExpression" placeholder="${params}"/> |
||||
|
</mat-form-field> |
||||
|
<mat-slide-toggle class="mat-slide margin" formControlName="withResponse"> |
||||
|
{{ 'gateway.rpc.withResponse' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</ng-template> |
||||
|
<ng-template [ngSwitchCase]="ConnectorType.SNMP"> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.requestFilter' | translate }}</mat-label> |
||||
|
<input matInput formControlName="requestFilter" placeholder="setData"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<mat-label>{{ 'gateway.rpc.method' | translate }}</mat-label> |
||||
|
<mat-select formControlName="method"> |
||||
|
<mat-option *ngFor="let method of sNMPMethods" [value]="method"> |
||||
|
{{ SNMPMethodsTranslations.get(method) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-slide-toggle class="mat-slide margin" formControlName="withResponse"> |
||||
|
{{ 'gateway.rpc.withResponse' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="oid"> |
||||
|
<span class="fields-label">{{ 'gateway.rpc.oids' | translate }}*</span> |
||||
|
<div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center" |
||||
|
*ngFor="let control of getFormArrayControls('oid'); let i = index"> |
||||
|
<mat-form-field class="tb-inline-field" appearance="outline" fxFlex subscriptSizing="dynamic"> |
||||
|
<input matInput [formControl]="control" required/> |
||||
|
</mat-form-field> |
||||
|
<mat-icon style="cursor:pointer;" |
||||
|
fxFlex="30px" |
||||
|
(click)="removeSNMPoid(i)" |
||||
|
matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete |
||||
|
</mat-icon> |
||||
|
</div> |
||||
|
<button mat-raised-button |
||||
|
fxFlexAlign="start" |
||||
|
(click)="addSNMPoid()"> |
||||
|
{{ 'gateway.rpc.add-oid' | translate }} |
||||
|
</button> |
||||
|
</fieldset> |
||||
|
</ng-template> |
||||
|
<ng-template [ngSwitchCase]="ConnectorType.REST"> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.methodFilter' | translate }}</mat-label> |
||||
|
<input matInput formControlName="methodFilter" placeholder="post_attributes"/> |
||||
|
</mat-form-field> |
||||
|
<div fxFlex fxLayout="row" fxLayoutGap="10px"> |
||||
|
<mat-form-field class="mat-block" fxFlex="33"> |
||||
|
<mat-label>{{ 'gateway.rpc.httpMethod' | translate }}</mat-label> |
||||
|
<mat-select formControlName="httpMethod"> |
||||
|
<mat-option *ngFor="let method of hTTPMethods" [value]="method"> |
||||
|
{{ method }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.rpc.requestUrlExpression' | translate }}</mat-label> |
||||
|
<input matInput formControlName="requestUrlExpression" |
||||
|
placeholder="http://127.0.0.1:5000/my_devices"/> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div fxFlex fxLayout="row" fxLayoutGap="10px"> |
||||
|
<mat-form-field fxFlex="33"> |
||||
|
<mat-label>{{ 'gateway.rpc.responseTimeout' | translate }}</mat-label> |
||||
|
<input matInput formControlName="responseTimeout" type="number" |
||||
|
step="1" min="10" placeholder="10"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.rpc.timeout' | translate }}</mat-label> |
||||
|
<input matInput formControlName="timeout" type="number" |
||||
|
step="1" min="10" placeholder="1000"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.rpc.tries' | translate }}</mat-label> |
||||
|
<input matInput formControlName="tries" type="number" |
||||
|
step="1" min="1" placeholder="3"/> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.valueExpression' | translate }}</mat-label> |
||||
|
<input matInput formControlName="valueExpression" placeholder="${params}"/> |
||||
|
</mat-form-field> |
||||
|
<fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="httpHeaders"> |
||||
|
<span class="fields-label">{{ 'gateway.rpc.httpHeaders' | translate }}</span> |
||||
|
<div class="border" fxLayout="column" fxLayoutGap="10px" *ngIf="getFormArrayControls('httpHeaders').length"> |
||||
|
<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"> |
||||
|
<span fxFlex class="title">{{ 'gateway.rpc.header-name' | translate }}</span> |
||||
|
<span fxFlex class="title">{{ 'gateway.rpc.value' | translate }}</span> |
||||
|
<span fxFlex="30px"></span> |
||||
|
</div> |
||||
|
<mat-divider></mat-divider> |
||||
|
<div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center" |
||||
|
*ngFor="let control of getFormArrayControls('httpHeaders'); let i = index"> |
||||
|
<ng-container [formGroupName]="i"> |
||||
|
<mat-form-field appearance="outline" fxFlex> |
||||
|
<input matInput formControlName="headerName"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field appearance="outline" fxFlex> |
||||
|
<input matInput formControlName="value" placeholder="application/json"/> |
||||
|
</mat-form-field> |
||||
|
<mat-icon style="cursor:pointer;" |
||||
|
fxFlex="30px" |
||||
|
(click)="removeHTTPHeader(i)" |
||||
|
matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete |
||||
|
</mat-icon> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
</div> |
||||
|
<button mat-raised-button |
||||
|
fxFlexAlign="start" |
||||
|
(click)="addHTTPHeader()"> |
||||
|
{{ 'gateway.rpc.add-header' | translate }} |
||||
|
</button> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="security"> |
||||
|
<span class="fields-label">{{ 'gateway.rpc.security' | translate }}</span> |
||||
|
<div class="border" fxLayout="column" fxLayoutGap="10px" *ngIf="getFormArrayControls('security').length"> |
||||
|
<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"> |
||||
|
<span fxFlex class="title">{{ 'gateway.rpc.security-name' | translate }}</span> |
||||
|
<span fxFlex class="title">{{ 'gateway.rpc.value' | translate }}</span> |
||||
|
<span fxFlex="30px"></span> |
||||
|
</div> |
||||
|
<mat-divider></mat-divider> |
||||
|
<div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center" |
||||
|
*ngFor="let control of getFormArrayControls('security'); let i = index"> |
||||
|
<ng-container [formGroupName]="i"> |
||||
|
<mat-form-field appearance="outline" fxFlex> |
||||
|
<input matInput formControlName="securityName"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field appearance="outline" fxFlex> |
||||
|
<input matInput formControlName="value" placeholder="anonymous"/> |
||||
|
</mat-form-field> |
||||
|
<mat-icon style="cursor:pointer;" |
||||
|
fxFlex="30px" |
||||
|
(click)="removeHTTPSecurity(i)" |
||||
|
matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete |
||||
|
</mat-icon> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
</div> |
||||
|
<button mat-raised-button |
||||
|
fxFlexAlign="start" |
||||
|
(click)="addHTTPSecurity()"> |
||||
|
{{ 'gateway.rpc.add-security' | translate }} |
||||
|
</button> |
||||
|
</fieldset> |
||||
|
</ng-template> |
||||
|
<ng-template [ngSwitchCase]="ConnectorType.REQUEST"> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.methodFilter' | translate }}</mat-label> |
||||
|
<input matInput formControlName="methodFilter" placeholder="echo"/> |
||||
|
</mat-form-field> |
||||
|
<div fxFlex fxLayout="row" fxLayoutGap="10px"> |
||||
|
<mat-form-field class="mat-block" fxFlex="33"> |
||||
|
<mat-label>{{ 'gateway.rpc.httpMethod' | translate }}</mat-label> |
||||
|
<mat-select formControlName="httpMethod"> |
||||
|
<mat-option *ngFor="let method of hTTPMethods" [value]="method"> |
||||
|
{{ method }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.rpc.requestUrlExpression' | translate }}</mat-label> |
||||
|
<input matInput formControlName="requestUrlExpression" placeholder="http://127.0.0.1:5000/my_devices"/> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div fxFlex fxLayout="row" fxLayoutGap="10px"> |
||||
|
<mat-form-field fxFlex="33"> |
||||
|
<mat-label>{{ 'gateway.rpc.responseTimeout' | translate }}</mat-label> |
||||
|
<input matInput formControlName="responseTimeout" type="number" |
||||
|
step="1" min="10" placeholder="10"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.rpc.timeout' | translate }}</mat-label> |
||||
|
<input matInput formControlName="timeout" type="number" |
||||
|
step="1" min="10" placeholder="10"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'gateway.rpc.tries' | translate }}</mat-label> |
||||
|
<input matInput formControlName="tries" type="number" |
||||
|
step="1" min="1" placeholder="1"/> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.requestValueExpression' | translate }}</mat-label> |
||||
|
<input matInput formControlName="requestValueExpression" placeholder="${params}"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.rpc.responseValueExpression' | translate }}</mat-label> |
||||
|
<input matInput formControlName="responseValueExpression" placeholder="${temp}"/> |
||||
|
</mat-form-field> |
||||
|
<fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="httpHeaders"> |
||||
|
<span class="fields-label">{{ 'gateway.rpc.httpHeaders' | translate }}</span> |
||||
|
<div class="border" fxLayout="column" fxLayoutGap="10px" *ngIf="getFormArrayControls('httpHeaders').length"> |
||||
|
<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"> |
||||
|
<span fxFlex class="title">{{ 'gateway.rpc.header-name' | translate }}</span> |
||||
|
<span fxFlex class="title">{{ 'gateway.rpc.value' | translate }}</span> |
||||
|
<span fxFlex="30px"></span> |
||||
|
</div> |
||||
|
<mat-divider></mat-divider> |
||||
|
<div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center" |
||||
|
*ngFor="let control of getFormArrayControls('httpHeaders'); let i = index"> |
||||
|
<ng-container [formGroupName]="i"> |
||||
|
<mat-form-field appearance="outline" fxFlex> |
||||
|
<input matInput formControlName="headerName" placeholder="{{ 'gateway.rpc.set' | translate }}"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field appearance="outline" fxFlex> |
||||
|
<input matInput formControlName="value"/> |
||||
|
</mat-form-field> |
||||
|
<mat-icon style="cursor:pointer;" |
||||
|
fxFlex="30px" |
||||
|
(click)="removeHTTPHeader(i)" |
||||
|
matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete |
||||
|
</mat-icon> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
</div> |
||||
|
<button mat-raised-button |
||||
|
fxFlexAlign="start" |
||||
|
(click)="addHTTPHeader()"> |
||||
|
{{ 'gateway.rpc.add-header' | translate }} |
||||
|
</button> |
||||
|
</fieldset> |
||||
|
</ng-template> |
||||
|
<ng-template [ngSwitchCase]="ConnectorType.OPCUA_ASYNCIO"> |
||||
|
<ng-container *ngTemplateOutlet="OPCUAForm"></ng-container> |
||||
|
</ng-template> |
||||
|
<ng-template [ngSwitchCase]="ConnectorType.OPCUA" #OPCUAForm> |
||||
|
<mat-form-field > |
||||
|
<mat-label>{{ 'gateway.rpc.method' | translate }}</mat-label> |
||||
|
<input matInput formControlName="method" placeholder="multiply"/> |
||||
|
</mat-form-field> |
||||
|
<fieldset class="fields border" fxLayout="column" fxLayoutGap="10px" formArrayName="arguments"> |
||||
|
<span class="fields-label">{{ 'gateway.rpc.arguments' | translate }}</span> |
||||
|
<div fxFlex fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center" |
||||
|
*ngFor="let control of getFormArrayControls('arguments'); let i = index"> |
||||
|
<mat-form-field appearance="outline" fxFlex> |
||||
|
<input matInput [formControl]="control" required/> |
||||
|
</mat-form-field> |
||||
|
<mat-icon style="cursor:pointer;" |
||||
|
fxFlex="30px" |
||||
|
(click)="removeOCPUAArguments(i)" |
||||
|
matTooltip="{{ 'gateway.rpc.remove' | translate }}">delete |
||||
|
</mat-icon> |
||||
|
</div> |
||||
|
<button mat-raised-button |
||||
|
fxFlexAlign="start" |
||||
|
(click)="addOCPUAArguments()"> |
||||
|
{{ 'gateway.rpc.add-argument' | translate }} |
||||
|
</button> |
||||
|
</fieldset> |
||||
|
</ng-template> |
||||
|
<ng-template ngSwitchDefault> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'gateway.statistics.command' | translate }}</mat-label> |
||||
|
<input matInput formControlName="command"/> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label>{{ 'widget-config.datasource-parameters' | translate }}</mat-label> |
||||
|
<input matInput formControlName="params" type="JSON" tb-json-to-string/> |
||||
|
<mat-icon class="material-icons-outlined" aria-hidden="false" aria-label="help-icon" |
||||
|
matIconSuffix style="cursor:pointer;" |
||||
|
(click)="openEditJSONDialog($event)" |
||||
|
matTooltip="{{ 'gateway.rpc-command-edit-params' | translate }}">edit |
||||
|
</mat-icon> |
||||
|
<mat-error *ngIf="commandForm.get('params').hasError('invalidJSON')"> |
||||
|
{{ 'gateway.rpc.json-value-invalid' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
</ng-template> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
|
<div class="template-actions" fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px"> |
||||
|
<button mat-raised-button |
||||
|
(click)="save()" |
||||
|
[disabled]="commandForm.invalid"> |
||||
|
{{ 'gateway.rpc-command-save-template' | translate }} |
||||
|
</button> |
||||
|
<button mat-raised-button |
||||
|
color="primary" |
||||
|
(click)="sendCommand.emit()" |
||||
|
[disabled]="commandForm.invalid"> |
||||
|
{{ 'gateway.rpc-command-send' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,67 @@ |
|||||
|
/** |
||||
|
* 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 { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 0; |
||||
|
|
||||
|
.title { |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.command-form { |
||||
|
flex-wrap: nowrap; |
||||
|
|
||||
|
& > button { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.mat-mdc-slide-toggle.margin { |
||||
|
margin-bottom: 10px; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.fields{ |
||||
|
.fields-label { |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.border { |
||||
|
padding: 16px; |
||||
|
margin-bottom: 10px; |
||||
|
box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%); |
||||
|
border: solid 1px #e0e0e0; |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
.title { |
||||
|
color: rgba(0, 0, 0, .54); |
||||
|
} |
||||
|
|
||||
|
.mat-icon { |
||||
|
color: rgba(0, 0, 0, .38); |
||||
|
} |
||||
|
|
||||
|
.mat-divider { |
||||
|
margin-left: -16px; |
||||
|
margin-right: -16px; |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,428 @@ |
|||||
|
///
|
||||
|
/// 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 { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'; |
||||
|
import { |
||||
|
ControlValueAccessor, |
||||
|
FormArray, |
||||
|
FormBuilder, |
||||
|
FormControl, |
||||
|
FormGroup, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import { |
||||
|
BACnetObjectTypes, |
||||
|
BACnetObjectTypesTranslates, |
||||
|
BACnetRequestTypes, |
||||
|
BACnetRequestTypesTranslates, |
||||
|
BLEMethods, |
||||
|
BLEMethodsTranslates, |
||||
|
CANByteOrders, |
||||
|
ConnectorType, |
||||
|
GatewayConnectorDefaultTypesTranslates, |
||||
|
HTTPMethods, |
||||
|
ModbusCodesTranslate, |
||||
|
ModbusCommandTypes, |
||||
|
RPCCommand, |
||||
|
RPCTemplateConfig, |
||||
|
SNMPMethods, |
||||
|
SNMPMethodsTranslations, |
||||
|
SocketEncodings, |
||||
|
SocketMethodProcessings, |
||||
|
SocketMethodProcessingsTranslates |
||||
|
} from '@home/components/widget/lib/gateway/gateway-widget.models'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { |
||||
|
JsonObjectEditDialogComponent, |
||||
|
JsonObjectEditDialogData |
||||
|
} from '@shared/components/dialog/json-object-edit-dialog.component'; |
||||
|
import { jsonRequired } from '@shared/components/json-object-edit.component'; |
||||
|
import { deepClone } from '@core/utils'; |
||||
|
|
||||
|
export const noLeadTrailSpacesRegex: RegExp = /^(?! )[\S\s]*(?<! )$/; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-gateway-service-rpc-connector', |
||||
|
templateUrl: './gateway-service-rpc-connector.component.html', |
||||
|
styleUrls: ['./gateway-service-rpc-connector.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => GatewayServiceRPCConnectorComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class GatewayServiceRPCConnectorComponent implements OnInit, ControlValueAccessor { |
||||
|
|
||||
|
@Input() |
||||
|
connectorType: ConnectorType; |
||||
|
|
||||
|
@Output() |
||||
|
sendCommand: EventEmitter<RPCCommand> = new EventEmitter(); |
||||
|
|
||||
|
@Output() |
||||
|
saveTemplate: EventEmitter<RPCTemplateConfig> = new EventEmitter(); |
||||
|
|
||||
|
commandForm: FormGroup; |
||||
|
isMQTTWithResponse: FormControl; |
||||
|
codesArray: Array<number> = [1, 2, 3, 4, 5, 6, 15, 16]; |
||||
|
ConnectorType = ConnectorType; |
||||
|
modbusCommandTypes = Object.values(ModbusCommandTypes) as ModbusCommandTypes[]; |
||||
|
bACnetRequestTypes = Object.values(BACnetRequestTypes) as BACnetRequestTypes[]; |
||||
|
bACnetObjectTypes = Object.values(BACnetObjectTypes) as BACnetObjectTypes[]; |
||||
|
bLEMethods = Object.values(BLEMethods) as BLEMethods[]; |
||||
|
cANByteOrders = Object.values(CANByteOrders) as CANByteOrders[]; |
||||
|
socketMethodProcessings = Object.values(SocketMethodProcessings) as SocketMethodProcessings[]; |
||||
|
socketEncodings = Object.values(SocketEncodings) as SocketEncodings[]; |
||||
|
sNMPMethods = Object.values(SNMPMethods) as SNMPMethods[]; |
||||
|
hTTPMethods = Object.values(HTTPMethods) as HTTPMethods[]; |
||||
|
|
||||
|
bACnetRequestTypesTranslates = BACnetRequestTypesTranslates; |
||||
|
bACnetObjectTypesTranslates = BACnetObjectTypesTranslates; |
||||
|
bLEMethodsTranslates = BLEMethodsTranslates; |
||||
|
SocketMethodProcessingsTranslates = SocketMethodProcessingsTranslates; |
||||
|
SNMPMethodsTranslations = SNMPMethodsTranslations; |
||||
|
gatewayConnectorDefaultTypesTranslates = GatewayConnectorDefaultTypesTranslates; |
||||
|
modbusCodesTranslate = ModbusCodesTranslate; |
||||
|
|
||||
|
urlPattern = /^[-a-zA-Zd_$:{}?~+=\/.0-9-]*$/; |
||||
|
numbersOnlyPattern = /^[0-9]*$/; |
||||
|
hexOnlyPattern = /^[0-9A-Fa-f ]+$/; |
||||
|
|
||||
|
private propagateChange = (v: any) => { |
||||
|
} |
||||
|
|
||||
|
constructor(private fb: FormBuilder, |
||||
|
private dialog: MatDialog,) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.commandForm = this.connectorParamsFormGroupByType(this.connectorType); |
||||
|
this.commandForm.valueChanges.subscribe(value => { |
||||
|
const httpHeaders = {}; |
||||
|
const security = {}; |
||||
|
switch (this.connectorType) { |
||||
|
case ConnectorType.REST: |
||||
|
value.httpHeaders.forEach(data => { |
||||
|
httpHeaders[data.headerName] = data.value; |
||||
|
}) |
||||
|
value.httpHeaders = httpHeaders; |
||||
|
value.security.forEach(data => { |
||||
|
security[data.securityName] = data.value; |
||||
|
}) |
||||
|
value.security = security; |
||||
|
break; |
||||
|
case ConnectorType.REQUEST: |
||||
|
value.httpHeaders.forEach(data => { |
||||
|
httpHeaders[data.headerName] = data.value; |
||||
|
}) |
||||
|
value.httpHeaders = httpHeaders; |
||||
|
break; |
||||
|
} |
||||
|
if (this.commandForm.valid) { |
||||
|
this.propagateChange({...this.commandForm.value, ...value}); |
||||
|
} |
||||
|
}); |
||||
|
this.isMQTTWithResponse = this.fb.control(false); |
||||
|
} |
||||
|
|
||||
|
connectorParamsFormGroupByType(type: ConnectorType): FormGroup { |
||||
|
let formGroup: FormGroup; |
||||
|
|
||||
|
switch (type) { |
||||
|
case ConnectorType.MQTT: |
||||
|
formGroup = this.fb.group({ |
||||
|
methodFilter: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
requestTopicExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
responseTopicExpression: [null, [Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
responseTimeout: [null, [Validators.min(10), Validators.pattern(this.numbersOnlyPattern)]], |
||||
|
valueExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
}) |
||||
|
break; |
||||
|
case ConnectorType.MODBUS: |
||||
|
formGroup = this.fb.group({ |
||||
|
tag: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
type: [null, [Validators.required]], |
||||
|
functionCode: [null, [Validators.required]], |
||||
|
value: [null, []], |
||||
|
address: [null, [Validators.required, Validators.min(0), Validators.pattern(this.numbersOnlyPattern)]], |
||||
|
objectsCount: [null, [Validators.required, Validators.min(0), Validators.pattern(this.numbersOnlyPattern)]] |
||||
|
}) |
||||
|
const valueForm = formGroup.get('value'); |
||||
|
formGroup.get('functionCode').valueChanges.subscribe(value => { |
||||
|
if (value > 4) { |
||||
|
valueForm.addValidators([Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]); |
||||
|
} else { |
||||
|
valueForm.clearValidators(); |
||||
|
valueForm.setValue(null); |
||||
|
} |
||||
|
valueForm.updateValueAndValidity(); |
||||
|
}) |
||||
|
break; |
||||
|
case ConnectorType.BACNET: |
||||
|
formGroup = this.fb.group({ |
||||
|
method: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
requestType: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
requestTimeout: [null, [Validators.required, Validators.min(10), Validators.pattern(this.numbersOnlyPattern)]], |
||||
|
objectType: [null, []], |
||||
|
identifier: [null, [Validators.required, Validators.min(1), Validators.pattern(this.numbersOnlyPattern)]], |
||||
|
propertyId: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]] |
||||
|
}) |
||||
|
break; |
||||
|
case ConnectorType.BLE: |
||||
|
formGroup = this.fb.group({ |
||||
|
methodRPC: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
characteristicUUID: ["00002A00-0000-1000-8000-00805F9B34FB", [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
methodProcessing: [null, [Validators.required]], |
||||
|
withResponse: [false, []] |
||||
|
}) |
||||
|
break; |
||||
|
case ConnectorType.CAN: |
||||
|
formGroup = this.fb.group({ |
||||
|
method: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
nodeID: [null, [Validators.required, Validators.min(0), Validators.pattern(this.numbersOnlyPattern)]], |
||||
|
isExtendedID: [false, []], |
||||
|
isFD: [false, []], |
||||
|
bitrateSwitch: [false, []], |
||||
|
dataLength: [null, [Validators.min(1), Validators.pattern(this.numbersOnlyPattern)]], |
||||
|
dataByteorder: [null, []], |
||||
|
dataBefore: [null, [Validators.pattern(noLeadTrailSpacesRegex), Validators.pattern(this.hexOnlyPattern)]], |
||||
|
dataAfter: [null, [Validators.pattern(noLeadTrailSpacesRegex), Validators.pattern(this.hexOnlyPattern)]], |
||||
|
dataInHEX: [null, [Validators.pattern(noLeadTrailSpacesRegex), Validators.pattern(this.hexOnlyPattern)]], |
||||
|
dataExpression: [null, [Validators.pattern(noLeadTrailSpacesRegex)]] |
||||
|
}) |
||||
|
break; |
||||
|
case ConnectorType.FTP: |
||||
|
formGroup = this.fb.group({ |
||||
|
methodFilter: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
valueExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]] |
||||
|
}) |
||||
|
break; |
||||
|
case ConnectorType.OCPP: |
||||
|
formGroup = this.fb.group({ |
||||
|
methodRPC: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
valueExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
withResponse: [false, []] |
||||
|
}) |
||||
|
break; |
||||
|
case ConnectorType.SOCKET: |
||||
|
formGroup = this.fb.group({ |
||||
|
methodRPC: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
methodProcessing: [null, [Validators.required]], |
||||
|
encoding: [SocketEncodings.UTF_8, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
withResponse: [false, []] |
||||
|
}) |
||||
|
break; |
||||
|
case ConnectorType.XMPP: |
||||
|
formGroup = this.fb.group({ |
||||
|
methodRPC: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
valueExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
withResponse: [false, []] |
||||
|
}) |
||||
|
break; |
||||
|
case ConnectorType.SNMP: |
||||
|
formGroup = this.fb.group({ |
||||
|
requestFilter: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
method: [null, [Validators.required]], |
||||
|
withResponse: [false, []], |
||||
|
oid: this.fb.array([], [Validators.required]) |
||||
|
}) |
||||
|
break; |
||||
|
case ConnectorType.REST: |
||||
|
formGroup = this.fb.group({ |
||||
|
methodFilter: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
httpMethod: [null, [Validators.required]], |
||||
|
requestUrlExpression: [null, [Validators.required, Validators.pattern(this.urlPattern)]], |
||||
|
responseTimeout: [null, [Validators.required, Validators.min(10), Validators.pattern(this.numbersOnlyPattern)]], |
||||
|
timeout: [null, [Validators.required, Validators.min(10), Validators.pattern(this.numbersOnlyPattern)]], |
||||
|
tries: [null, [Validators.required, Validators.min(1), Validators.pattern(this.numbersOnlyPattern)]], |
||||
|
valueExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
httpHeaders: this.fb.array([]), |
||||
|
security: this.fb.array([]) |
||||
|
}) |
||||
|
break; |
||||
|
case ConnectorType.REQUEST: |
||||
|
formGroup = this.fb.group({ |
||||
|
methodFilter: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
httpMethod: [null, [Validators.required]], |
||||
|
requestUrlExpression: [null, [Validators.required, Validators.pattern(this.urlPattern)]], |
||||
|
responseTimeout: [null, [Validators.required, Validators.min(10), Validators.pattern(this.numbersOnlyPattern)]], |
||||
|
timeout: [null, [Validators.required, Validators.min(10), Validators.pattern(this.numbersOnlyPattern)]], |
||||
|
tries: [null, [Validators.required, Validators.min(1), Validators.pattern(this.numbersOnlyPattern)]], |
||||
|
requestValueExpression: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
responseValueExpression: [null, [Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
httpHeaders: this.fb.array([]), |
||||
|
}) |
||||
|
break; |
||||
|
case ConnectorType.OPCUA: |
||||
|
case ConnectorType.OPCUA_ASYNCIO: |
||||
|
formGroup = this.fb.group({ |
||||
|
method: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
arguments: this.fb.array([]), |
||||
|
}) |
||||
|
break; |
||||
|
default: |
||||
|
formGroup = this.fb.group({ |
||||
|
command: [null, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
params: [{}, [jsonRequired]], |
||||
|
}) |
||||
|
} |
||||
|
return formGroup; |
||||
|
} |
||||
|
|
||||
|
addSNMPoid(value: string = null) { |
||||
|
const oidsFA = this.commandForm.get('oid') as FormArray; |
||||
|
if (oidsFA) { |
||||
|
oidsFA.push(this.fb.control(value, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]), {emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
removeSNMPoid(index: number) { |
||||
|
const oidsFA = this.commandForm.get('oid') as FormArray; |
||||
|
oidsFA.removeAt(index); |
||||
|
} |
||||
|
|
||||
|
addHTTPHeader(value: { headerName: string, value: string } = {headerName: null, value: null}) { |
||||
|
const headerFA = this.commandForm.get('httpHeaders') as FormArray; |
||||
|
const formGroup = this.fb.group({ |
||||
|
headerName: [value.headerName, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
value: [value.value, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]] |
||||
|
}) |
||||
|
if (headerFA) { |
||||
|
headerFA.push(formGroup, {emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
removeHTTPHeader(index: number) { |
||||
|
const oidsFA = this.commandForm.get('httpHeaders') as FormArray; |
||||
|
oidsFA.removeAt(index); |
||||
|
} |
||||
|
|
||||
|
addHTTPSecurity(value: { securityName: string, value: string } = {securityName: null, value: null}) { |
||||
|
const securityFA = this.commandForm.get('security') as FormArray; |
||||
|
const formGroup = this.fb.group({ |
||||
|
securityName: [value.securityName, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], |
||||
|
value: [value.value, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]] |
||||
|
}) |
||||
|
if (securityFA) { |
||||
|
securityFA.push(formGroup, {emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
removeHTTPSecurity(index: number) { |
||||
|
const oidsFA = this.commandForm.get('security') as FormArray; |
||||
|
oidsFA.removeAt(index); |
||||
|
} |
||||
|
|
||||
|
getFormArrayControls(path: string) { |
||||
|
return (this.commandForm.get(path) as FormArray).controls as FormControl[]; |
||||
|
} |
||||
|
|
||||
|
addOCPUAArguments(value: string = null) { |
||||
|
const oidsFA = this.commandForm.get('arguments') as FormArray; |
||||
|
if (oidsFA) { |
||||
|
oidsFA.push(this.fb.control(value, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]), {emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
removeOCPUAArguments(index: number) { |
||||
|
const oidsFA = this.commandForm.get('arguments') as FormArray; |
||||
|
oidsFA.removeAt(index); |
||||
|
} |
||||
|
|
||||
|
openEditJSONDialog($event: Event) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
this.dialog.open<JsonObjectEditDialogComponent, JsonObjectEditDialogData, object>(JsonObjectEditDialogComponent, { |
||||
|
disableClose: true, |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
||||
|
data: { |
||||
|
jsonValue: this.commandForm.get('params').value, |
||||
|
required: true |
||||
|
} |
||||
|
}).afterClosed().subscribe( |
||||
|
(res) => { |
||||
|
if (res) { |
||||
|
this.commandForm.get('params').setValue(res); |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
save() { |
||||
|
this.saveTemplate.emit(); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
clearFromArrayByName(name: string) { |
||||
|
const formArray = this.commandForm.get(name) as FormArray; |
||||
|
while (formArray.length !== 0) { |
||||
|
formArray.removeAt(0) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: RPCTemplateConfig): void { |
||||
|
if (typeof value == "object") { |
||||
|
value = deepClone(value); |
||||
|
switch (this.connectorType) { |
||||
|
case ConnectorType.SNMP: |
||||
|
this.clearFromArrayByName("oids"); |
||||
|
value.oids.forEach(value => { |
||||
|
this.addSNMPoid(value) |
||||
|
}) |
||||
|
delete value.oids; |
||||
|
break; |
||||
|
case ConnectorType.REQUEST: |
||||
|
this.clearFromArrayByName("httpHeaders"); |
||||
|
value.httpHeaders && Object.entries(value.httpHeaders).forEach(httpHeader => { |
||||
|
this.addHTTPHeader({headerName: httpHeader[0], value: httpHeader[1] as string}) |
||||
|
}) |
||||
|
delete value.httpHeaders; |
||||
|
break; |
||||
|
case ConnectorType.REST: |
||||
|
this.clearFromArrayByName("httpHeaders"); |
||||
|
this.clearFromArrayByName("security"); |
||||
|
value.security && Object.entries(value.security).forEach(securityHeader => { |
||||
|
this.addHTTPSecurity({securityName: securityHeader[0], value: securityHeader[1] as string}) |
||||
|
}) |
||||
|
delete value.security; |
||||
|
value.httpHeaders && Object.entries(value.httpHeaders).forEach(httpHeader => { |
||||
|
this.addHTTPHeader({headerName: httpHeader[0], value: httpHeader[1] as string}) |
||||
|
}) |
||||
|
delete value.httpHeaders; |
||||
|
break; |
||||
|
case ConnectorType.OPCUA: |
||||
|
case ConnectorType.OPCUA_ASYNCIO: |
||||
|
this.clearFromArrayByName("arguments"); |
||||
|
value.arguments.forEach(value => { |
||||
|
this.addOCPUAArguments(value) |
||||
|
}) |
||||
|
delete value.arguments; |
||||
|
break; |
||||
|
} |
||||
|
this.commandForm.patchValue(value, {onlySelf: false}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue