dudnikmaksim
3 years ago
13 changed files with 1460 additions and 118 deletions
@ -0,0 +1,60 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 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)"> |
|||
<mat-icon class="material-icons">delete</mat-icon> |
|||
</button> |
|||
<button mat-icon-button matTooltip="Copy" (click)="copyTemplate($event)"> |
|||
<mat-icon class="material-icons">content_copy</mat-icon> |
|||
</button> |
|||
<button mat-icon-button matTooltip="Use" (click)="useTemplate($event)"> |
|||
<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, padding: false }"> |
|||
</ng-container> |
|||
<ng-template #RPCTemplateRef let-config let-padding='padding'> |
|||
<div [fxLayout]="isObject(config.value) ? 'column': 'row'" |
|||
[fxLayoutAlign]="!isObject(config.value) ? 'space-between center' : ''" |
|||
[ngStyle]="{'padding-left': padding ? '16px': '0'}"> |
|||
<div class="template-key">{{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, padding: true }"> |
|||
</ng-container> |
|||
</ng-template> |
|||
</div> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
@ -0,0 +1,79 @@ |
|||
/** |
|||
* Copyright © 2016-2023 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-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; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
@ -0,0 +1,81 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 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 { TranslateService } from '@ngx-translate/core'; |
|||
import { KeyValue } from '@angular/common'; |
|||
|
|||
@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; |
|||
|
|||
@Output() |
|||
saveTemplate: EventEmitter<any> = new EventEmitter(); |
|||
|
|||
rpcTemplates: Array<RPCTemplate> = []; |
|||
|
|||
constructor(private translate: TranslateService) { |
|||
this.rpcTemplates.push( |
|||
{ |
|||
name: 'Test Template', |
|||
config: { |
|||
fieldString: 'string', |
|||
fieldNumber: 666, |
|||
fieldBool: true, |
|||
fieldArray: [111, 222, 333, "String", "444"], |
|||
fieldObj: { |
|||
subKey1: 'dasd', |
|||
subKey2: 666, |
|||
} |
|||
} |
|||
} |
|||
) |
|||
} |
|||
|
|||
|
|||
ngOnInit() { |
|||
|
|||
} |
|||
|
|||
public useTemplate($event: Event): void { |
|||
$event.stopPropagation(); |
|||
console.log("useTemplate") |
|||
} |
|||
|
|||
public copyTemplate($event: Event): void { |
|||
$event.stopPropagation(); |
|||
console.log("copyTemplate") |
|||
} |
|||
|
|||
public deleteTemplate($event: Event): void { |
|||
$event.stopPropagation(); |
|||
console.log("deleteTemplate") |
|||
} |
|||
|
|||
public originalOrder = (a: KeyValue<string, any>, b: KeyValue<string, any>): number => { |
|||
return 0; |
|||
} |
|||
public isObject(value: any) { |
|||
return value !== null && typeof value === 'object' && !Array.isArray(value); |
|||
} |
|||
} |
|||
@ -0,0 +1,531 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 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.method-filter' | translate }}</mat-label> |
|||
<input matInput formControlName="methodFilter" |
|||
placeholder="echo"/> |
|||
</mat-form-field> |
|||
<mat-form-field> |
|||
<mat-label>{{ 'gateway.rpc.request-topic-expression' | translate }}</mat-label> |
|||
<input matInput formControlName="requestTopicExpression" |
|||
placeholder="sensor/${deviceName}/request/${methodName}/${requestId}"/> |
|||
</mat-form-field> |
|||
<mat-form-field> |
|||
<mat-label>{{ 'gateway.rpc.response-topic-expression' | translate }}</mat-label> |
|||
<input matInput formControlName="responseTopicExpression" |
|||
placeholder="sensor/${deviceName}/response/${methodName}/${requestId}"/> |
|||
</mat-form-field> |
|||
<mat-form-field> |
|||
<mat-label>{{ 'gateway.rpc.response-timeout' | 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.value-expression' | 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.function-code' | translate }}</mat-label> |
|||
<mat-select formControlName="functionCode"> |
|||
<mat-option *ngFor="let code of codesArray" [value]="code"> |
|||
{{ code }} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
</div> |
|||
<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.objects-count' | 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.method-rpc' | translate }}</mat-label> |
|||
<input matInput formControlName="method" placeholder="set_state"/> |
|||
</mat-form-field> |
|||
<mat-form-field class="mat-block"> |
|||
<mat-label>{{ 'gateway.rpc.request-type' | 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.request-timeout' | 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.object-type' | 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.property-id' | 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.method-rpc' | translate }}</mat-label> |
|||
<input matInput formControlName="methodRPC" placeholder="rpcMethod1"/> |
|||
</mat-form-field> |
|||
<mat-form-field> |
|||
<mat-label>{{ 'gateway.rpc.characteristic-uuid' | 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.method-processing' | 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.with-response' | translate }} |
|||
</mat-slide-toggle> |
|||
</ng-template> |
|||
|
|||
<ng-template [ngSwitchCase]="ConnectorType.CAN"> |
|||
<mat-form-field> |
|||
<mat-label>{{ 'gateway.rpc.method-rpc' | translate }}</mat-label> |
|||
<input matInput formControlName="method" placeholder="sendSameData"/> |
|||
</mat-form-field> |
|||
<mat-form-field> |
|||
<mat-label>{{ 'gateway.rpc.node-id' | 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.is-extended-id' | translate }} |
|||
</mat-slide-toggle> |
|||
<mat-slide-toggle class="mat-slide margin" formControlName="isFD"> |
|||
{{ 'gateway.rpc.is-fd' | translate }} |
|||
</mat-slide-toggle> |
|||
<mat-slide-toggle class="mat-slide margin" formControlName="bitrateSwitch"> |
|||
{{ 'gateway.rpc.bitrate-switch' | translate }} |
|||
</mat-slide-toggle> |
|||
<div fxFlex fxLayout="row" fxLayoutGap="10px"> |
|||
<mat-form-field fxFlex="50"> |
|||
<mat-label>{{ 'gateway.rpc.data-length' | 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.data-byte-order' | 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.data-before' | translate }}</mat-label> |
|||
<input matInput formControlName="dataBefore" placeholder="00AA"/> |
|||
</mat-form-field> |
|||
<mat-form-field fxFlex="50"> |
|||
<mat-label>{{ 'gateway.rpc.data-after' | translate }}</mat-label> |
|||
<input matInput formControlName="dataAfter" placeholder="0102"/> |
|||
</mat-form-field> |
|||
</div> |
|||
<mat-form-field> |
|||
<mat-label>{{ 'gateway.rpc.data-in-hex' | 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.data-expression' | 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.method-filter' | translate }}</mat-label> |
|||
<input matInput formControlName="methodFilter" placeholder="read"/> |
|||
</mat-form-field> |
|||
<mat-form-field> |
|||
<mat-label>{{ 'gateway.rpc.value-expression' | 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.method-rpc' | translate }}</mat-label> |
|||
<input matInput formControlName="methodRPC" placeholder="rpc1"/> |
|||
</mat-form-field> |
|||
<mat-form-field> |
|||
<mat-label>{{ 'gateway.rpc.value-expression' | translate }}</mat-label> |
|||
<input matInput formControlName="valueExpression" placeholder="${params}"/> |
|||
</mat-form-field> |
|||
<mat-slide-toggle class="mat-slide margin" formControlName="withResponse"> |
|||
{{ 'gateway.rpc.with-response' | translate }} |
|||
</mat-slide-toggle> |
|||
</ng-template> |
|||
|
|||
<ng-template [ngSwitchCase]="ConnectorType.SOCKET"> |
|||
<mat-form-field> |
|||
<mat-label>{{ 'gateway.rpc.method-rpc' | translate }}</mat-label> |
|||
<input matInput formControlName="methodRPC" placeholder="rpcMethod1"/> |
|||
</mat-form-field> |
|||
<mat-form-field class="mat-block"> |
|||
<mat-label>{{ 'gateway.rpc.method-processing' | 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> |
|||
<mat-select formControlName="encoding"> |
|||
<mat-option *ngFor="let encoding of socketEncodings" [value]="encoding"> |
|||
{{ encoding }} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
<mat-slide-toggle class="mat-slide margin" formControlName="withResponse"> |
|||
{{ 'gateway.rpc.with-response' | translate }} |
|||
</mat-slide-toggle> |
|||
</ng-template> |
|||
|
|||
<ng-template [ngSwitchCase]="ConnectorType.XMPP"> |
|||
<mat-form-field> |
|||
<mat-label>{{ 'gateway.rpc.method-rpc' | translate }}</mat-label> |
|||
<input matInput formControlName="methodRPC" placeholder="rpc1"/> |
|||
</mat-form-field> |
|||
<mat-form-field> |
|||
<mat-label>{{ 'gateway.rpc.value-expression' | translate }}</mat-label> |
|||
<input matInput formControlName="valueExpression" placeholder="${params}"/> |
|||
</mat-form-field> |
|||
<mat-slide-toggle class="mat-slide margin" formControlName="withResponse"> |
|||
{{ 'gateway.rpc.with-response' | translate }} |
|||
</mat-slide-toggle> |
|||
</ng-template> |
|||
|
|||
<ng-template [ngSwitchCase]="ConnectorType.SNMP"> |
|||
<mat-form-field> |
|||
<mat-label>{{ 'gateway.rpc.request-filter' | 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> |
|||
<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 appearance="outline" fxFlex> |
|||
<input matInput [formControl]="control"/> |
|||
</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.method-filter' | 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.http-method' | 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.request-url' | 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.response-timeout' | 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.value-expression' | 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.http-headers' | 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.method-filter' | 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.method' | 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.request-url' | 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.response-timeout' | 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.request-value-expression' | translate }}</mat-label> |
|||
<input matInput formControlName="requestValueExpression" placeholder="${params}"/> |
|||
</mat-form-field> |
|||
<mat-form-field> |
|||
<mat-label>{{ 'gateway.rpc.response-value-expression' | 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.http-headers' | 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"/> |
|||
</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-container> |
|||
</ng-template> |
|||
<div class="template-actions" fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px"> |
|||
<button mat-raised-button |
|||
(click)="sendCommand.emit()" |
|||
[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,85 @@ |
|||
/** |
|||
* Copyright © 2016-2023 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 { |
|||
|
|||
::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix { |
|||
padding-top: 6px; |
|||
padding-bottom: 6px; |
|||
min-height: auto; |
|||
} |
|||
|
|||
::ng-deep .mat-mdc-form-field-subscript-wrapper { |
|||
display: none; |
|||
} |
|||
::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading, |
|||
::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch, |
|||
::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing { |
|||
border-color: #e0e0e0; |
|||
} |
|||
|
|||
.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,272 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 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 { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; |
|||
import { |
|||
BACnetObjectTypes, BACnetObjectTypesTranslates, |
|||
BACnetRequestTypes, BACnetRequestTypesTranslates, BLEMethods, BLEMethodsTranslates, |
|||
CANByteOrders, |
|||
ConnectorType, GatewayConnectorDefaultTypesTranslates, HTTPMethods, |
|||
ModbusCommandTypes, |
|||
RPCCommand, |
|||
SNMPMethods, SNMPMethodsTranslations, |
|||
SocketEncodings, |
|||
SocketMethodProcessings, SocketMethodProcessingsTranslates |
|||
} from '@home/components/widget/lib/gateway/gateway-widget.models'; |
|||
import { TranslateService } from "@ngx-translate/core"; |
|||
|
|||
@Component({ |
|||
selector: 'tb-gateway-service-rpc-connector', |
|||
templateUrl: './gateway-service-rpc-connector.component.html', |
|||
styleUrls: ['./gateway-service-rpc-connector.component.scss'] |
|||
}) |
|||
export class GatewayServiceRPCConnectorComponent implements OnInit { |
|||
|
|||
@Input() |
|||
connectorType: ConnectorType; |
|||
|
|||
@Output() |
|||
sendCommand: EventEmitter<RPCCommand> = new EventEmitter(); |
|||
|
|||
commandForm: FormGroup; |
|||
|
|||
codesArray: Array<number> = [1, 2, 3, 4, 5, 6, 15, 16]; |
|||
|
|||
readonly 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; |
|||
|
|||
urlPattern = new RegExp( |
|||
'^(https?:\\/\\/)?' + // protocol
|
|||
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
|
|||
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR IP (v4) address
|
|||
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
|
|||
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
|
|||
'(\\#[-a-z\\d_]*)?$', // fragment locator
|
|||
'i' |
|||
); |
|||
|
|||
constructor(private fb: FormBuilder, |
|||
private translate: TranslateService) { |
|||
} |
|||
|
|||
|
|||
ngOnInit() { |
|||
this.commandForm = this.connectorParamsFormGroupByType(this.connectorType) |
|||
} |
|||
|
|||
connectorParamsFormGroupByType(type: ConnectorType): FormGroup { |
|||
let formGroup: FormGroup; |
|||
|
|||
switch (type) { |
|||
case ConnectorType.MQTT: |
|||
formGroup = this.fb.group({ |
|||
methodFilter: [null, [Validators.required]], |
|||
requestTopicExpression: [null, [Validators.required]], |
|||
responseTopicExpression: [null, []], |
|||
responseTimeout: [null, [Validators.min(10), Validators.pattern("^[0-9]*$")]], |
|||
valueExpression: [null, [Validators.required]], |
|||
}) |
|||
break; |
|||
case ConnectorType.MODBUS: |
|||
formGroup = this.fb.group({ |
|||
tag: [null, [Validators.required]], |
|||
type: [null, [Validators.required]], |
|||
functionCode: [null, [Validators.required]], |
|||
address: [null, [Validators.required, Validators.min(0), Validators.pattern("^[0-9]*$")]], |
|||
objectsCount: [null, [Validators.required, Validators.min(0), Validators.pattern("^[0-9]*$")]] |
|||
}) |
|||
break; |
|||
case ConnectorType.BACNET: |
|||
formGroup = this.fb.group({ |
|||
method: [null, [Validators.required]], |
|||
requestType: [null, [Validators.required]], |
|||
requestTimeout: [null, [Validators.required, Validators.min(10), Validators.pattern("^[0-9]*$")]], |
|||
objectType: [null, []], |
|||
identifier: [null, [Validators.required, Validators.min(1), Validators.pattern("^[0-9]*$")]], |
|||
propertyId: [null, [Validators.required]] |
|||
}) |
|||
break; |
|||
case ConnectorType.BLE: |
|||
formGroup = this.fb.group({ |
|||
methodRPC: [null, [Validators.required]], |
|||
characteristicUUID: [null, [Validators.required]], |
|||
methodProcessing: [null, [Validators.required]], |
|||
withResponse: [false, []] |
|||
}) |
|||
break; |
|||
case ConnectorType.CAN: |
|||
formGroup = this.fb.group({ |
|||
method: [null, [Validators.required]], |
|||
nodeID: [null, [Validators.required, Validators.min(0), Validators.pattern("^[0-9]*$")]], |
|||
isExtendedID: [false, []], |
|||
isFD: [false, []], |
|||
bitrateSwitch: [false, []], |
|||
dataLength: [null, [Validators.min(1), Validators.pattern("^[0-9]*$")]], |
|||
dataByteorder: [null, []], |
|||
dataBefore: [null, []], |
|||
dataAfter: [null, []], |
|||
dataInHEX: [null, []], |
|||
dataExpression: [null, []] |
|||
}) |
|||
break; |
|||
case ConnectorType.FTP: |
|||
formGroup = this.fb.group({ |
|||
methodFilter: [null, [Validators.required]], |
|||
valueExpression: [null, [Validators.required]] |
|||
}) |
|||
break; |
|||
case ConnectorType.OCPP: |
|||
formGroup = this.fb.group({ |
|||
methodRPC: [null, [Validators.required]], |
|||
valueExpression: [null, [Validators.required]], |
|||
withResponse: [false, []] |
|||
}) |
|||
break; |
|||
case ConnectorType.SOCKET: |
|||
formGroup = this.fb.group({ |
|||
methodRPC: [null, [Validators.required]], |
|||
methodProcessing: [null, [Validators.required]], |
|||
encoding: [null, [Validators.required]], |
|||
withResponse: [false, []] |
|||
}) |
|||
break; |
|||
case ConnectorType.XMPP: |
|||
formGroup = this.fb.group({ |
|||
methodRPC: [null, [Validators.required]], |
|||
valueExpression: [null, [Validators.required]], |
|||
withResponse: [false, []] |
|||
}) |
|||
break; |
|||
case ConnectorType.SNMP: |
|||
formGroup = this.fb.group({ |
|||
requestFilter: [null, [Validators.required]], |
|||
method: [null, [Validators.required]], |
|||
oid: this.fb.array([], [Validators.required]) |
|||
}) |
|||
break; |
|||
case ConnectorType.REST: |
|||
formGroup = this.fb.group({ |
|||
methodFilter: [null, [Validators.required]], |
|||
HTTPMethod: [null, [Validators.required]], |
|||
requestUrlExpression: [null, [Validators.required, Validators.pattern(this.urlPattern)]], |
|||
responseTimeout: [null, [Validators.required, Validators.min(10), Validators.pattern("^[0-9]*$")]], |
|||
timeout: [null, [Validators.required, Validators.min(10), Validators.pattern("^[0-9]*$")]], |
|||
tries: [null, [Validators.required, Validators.min(1), Validators.pattern("^[0-9]*$")]], |
|||
valueExpression: [null, [Validators.required]], |
|||
httpHeaders: this.fb.array([]), |
|||
security: this.fb.array([]) |
|||
}) |
|||
break; |
|||
case ConnectorType.REQUEST: |
|||
formGroup = this.fb.group({ |
|||
methodFilter: [null, [Validators.required]], |
|||
httpMethod: [null, [Validators.required]], |
|||
requestUrlExpression: [null, [Validators.required, Validators.pattern(this.urlPattern)]], |
|||
responseTimeout: [null, [Validators.required, Validators.min(10), Validators.pattern("^[0-9]*$")]], |
|||
timeout: [null, [Validators.required, Validators.min(10), Validators.pattern("^[0-9]*$")]], |
|||
tries: [null, [Validators.required, Validators.min(1), Validators.pattern("^[0-9]*$")]], |
|||
requestValueExpression: [null, [Validators.required]], |
|||
responseValueExpression: [null, []], |
|||
httpHeaders: this.fb.array([]), |
|||
}) |
|||
break; |
|||
case ConnectorType.OPCUA: |
|||
case ConnectorType.OPCUA_ASYNCIO: |
|||
formGroup = this.fb.group({ |
|||
method: [null, [Validators.required]], |
|||
arguments: this.fb.array([]), |
|||
}) |
|||
} |
|||
return formGroup; |
|||
} |
|||
|
|||
addSNMPoid(value: string = null) { |
|||
const oidsFA = this.commandForm.get('oid') as FormArray; |
|||
if (oidsFA) { |
|||
oidsFA.push(this.fb.control(value, [Validators.required])); |
|||
} |
|||
} |
|||
|
|||
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]], |
|||
value: [value.value, [Validators.required]] |
|||
}) |
|||
if (headerFA) { |
|||
headerFA.push(formGroup); |
|||
} |
|||
} |
|||
|
|||
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]], |
|||
value: [value.value, [Validators.required]] |
|||
}) |
|||
if (securityFA) { |
|||
securityFA.push(formGroup); |
|||
} |
|||
} |
|||
|
|||
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)); |
|||
} |
|||
} |
|||
|
|||
removeOCPUAArguments(index: number) { |
|||
const oidsFA = this.commandForm.get('arguments') as FormArray; |
|||
oidsFA.removeAt(index); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue