tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Refactoring gateway connectors configuration

pull/11101/head
Vladyslav_Prykhodko 2 years ago
parent
5813ce515d
commit
bbb2b1683e
4 changed files with 34 additions and 42 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html
  2. 16
      ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.ts
  3. 50
      ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts
  4. 8
      ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts

2
ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html
View File

@ -32,7 +32,7 @@
<div class="fixed-title-width tb-required" translate>gateway.type</div>
<div class="tb-flex no-gap">
<mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">
<mat-select name="valueType" formControlName="type">
<mat-select formControlName="type">
<mat-select-trigger>
<div class="tb-flex align-center">
<mat-icon class="tb-mat-18" [svgIcon]="valueTypes.get(keyControl.get('type').value)?.icon">

16
ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.ts
View File

@ -14,12 +14,7 @@
/// limitations under the License.
///
import {
Component,
forwardRef,
OnDestroy,
OnInit,
} from '@angular/core';
import { Component, forwardRef, OnDestroy, OnInit } from '@angular/core';
import {
AbstractControl,
ControlValueAccessor,
@ -31,7 +26,6 @@ import {
Validator,
Validators
} from '@angular/forms';
import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
import { isDefinedAndNotNull } from '@core/utils';
import {
MappingDataKey,
@ -60,12 +54,10 @@ import { Subject } from 'rxjs';
]
})
export class TypeValuePanelComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy {
valueTypeKeys = Object.values(MappingValueType);
valueTypeEnum = MappingValueType;
valueTypeKeys: MappingValueType[] = Object.values(MappingValueType);
valueTypes = mappingValueTypesMap;
dataKeyType: DataKeyType;
valueListFormArray: UntypedFormArray;
errorText = '';
private destroy$ = new Subject<void>();
private propagateChange = (v: any) => {};
@ -138,7 +130,7 @@ export class TypeValuePanelComponent implements ControlValueAccessor, Validator,
};
}
updateView(value: any): void {
private updateView(value: any): void {
this.propagateChange(value);
}
}

50
ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts
View File

@ -22,6 +22,8 @@ import { FormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { DialogComponent } from '@shared/components/dialog.component';
import { Router } from '@angular/router';
import {
Attribute,
AttributesUpdate,
ConvertorType,
ConvertorTypeTranslationsMap,
DataConversionTranslationsMap,
@ -34,16 +36,19 @@ import {
MappingKeysPanelTitleTranslationsMap,
MappingKeysType,
MappingType,
MappingTypeTranslationsMap, MappingValue,
MappingTypeTranslationsMap,
MappingValue,
noLeadTrailSpacesRegex,
OPCUaSourceTypes,
QualityTypes,
QualityTypeTranslationsMap,
RequestType,
RequestTypesTranslationsMap,
RpcMethod,
ServerSideRPCType,
SourceTypes,
SourceTypeTranslationsMap
SourceTypeTranslationsMap,
Timeseries
} from '@home/components/widget/lib/gateway/gateway-widget.models';
import { Subject } from 'rxjs';
import { startWith, takeUntil } from 'rxjs/operators';
@ -66,17 +71,17 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
qualityTypes = QualityTypes;
QualityTranslationsMap = QualityTypeTranslationsMap;
convertorTypes = Object.values(ConvertorType);
convertorTypes: ConvertorType[] = Object.values(ConvertorType);
ConvertorTypeEnum = ConvertorType;
ConvertorTypeTranslationsMap = ConvertorTypeTranslationsMap;
sourceTypes = Object.values(SourceTypes);
sourceTypes: SourceTypes[] = Object.values(SourceTypes);
OPCUaSourceTypes = Object.values(OPCUaSourceTypes) as Array<OPCUaSourceTypes>;
OPCUaSourceTypesEnum = OPCUaSourceTypes;
sourceTypesEnum = SourceTypes;
SourceTypeTranslationsMap = SourceTypeTranslationsMap;
requestTypes = Object.values(RequestType);
requestTypes: RequestType[] = Object.values(RequestType);
RequestTypeEnum = RequestType;
RequestTypesTranslationsMap = RequestTypesTranslationsMap;
@ -92,12 +97,8 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
DataConversionTranslationsMap = DataConversionTranslationsMap;
hiddenAttributesCount = 0;
keysPopupClosed = true;
submitted = false;
private destroy$ = new Subject<void>();
constructor(protected store: Store<AppState>,
@ -116,30 +117,30 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
get converterAttributes(): Array<string> {
if (this.converterType) {
return this.mappingForm.get('converter').get(this.converterType).value.attributes.map(value => value.key);
return this.mappingForm.get('converter').get(this.converterType).value.attributes.map((value: Attribute) => value.key);
}
}
get converterTelemetry(): Array<string> {
if (this.converterType) {
return this.mappingForm.get('converter').get(this.converterType).value.timeseries.map(value => value.key);
return this.mappingForm.get('converter').get(this.converterType).value.timeseries.map((value: Timeseries) => value.key);
}
}
get opcAttributes(): Array<string> {
return this.mappingForm.get('attributes').value?.map(value => value.key) || [];
return this.mappingForm.get('attributes').value?.map((value: Attribute) => value.key) || [];
}
get opcTelemetry(): Array<string> {
return this.mappingForm.get('timeseries').value?.map(value => value.key) || [];
return this.mappingForm.get('timeseries').value?.map((value: Timeseries) => value.key) || [];
}
get opcRpcMethods(): Array<string> {
return this.mappingForm.get('rpc_methods').value?.map(value => value.method) || [];
return this.mappingForm.get('rpc_methods').value?.map((value: RpcMethod) => value.method) || [];
}
get opcAttributesUpdates(): Array<string> {
return this.mappingForm.get('attributes_updates')?.value?.map(value => value.key) || [];
return this.mappingForm.get('attributes_updates')?.value?.map((value: AttributesUpdate) => value.key) || [];
}
get converterType(): ConvertorType {
@ -197,7 +198,6 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
}
add(): void {
this.submitted = true;
if (this.mappingForm.valid) {
this.dialogRef.close(this.prepareMappingData());
}
@ -215,9 +215,9 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
: this.mappingForm;
const keysControl = group.get(keysType);
const ctx: {[key: string]: any} = {
const ctx: { [key: string]: any } = {
keys: keysControl.value,
keysType: keysType,
keysType,
rawData: this.mappingForm.get('converter.type')?.value === ConvertorType.BYTES,
panelTitle: MappingKeysPanelTitleTranslationsMap.get(keysType),
addKeyTitle: MappingKeysAddKeyTranslationsMap.get(keysType),
@ -247,11 +247,11 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
}
}
private prepareMappingData(): {[key: string]: unknown} {
private prepareMappingData(): { [key: string]: unknown } {
const formValue = this.mappingForm.value;
switch (this.data.mappingType) {
case MappingType.DATA:
const { converter, topicFilter, subscriptionQos } = formValue;
const {converter, topicFilter, subscriptionQos} = formValue;
return {
topicFilter,
subscriptionQos,
@ -270,17 +270,17 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
}
}
private prepareFormValueData(): {[key: string]: unknown} {
private prepareFormValueData(): { [key: string]: unknown } {
if (this.data.value && Object.keys(this.data.value).length) {
switch (this.data.mappingType) {
case MappingType.DATA:
const { converter, topicFilter, subscriptionQos } = this.data.value;
const {converter, topicFilter, subscriptionQos} = this.data.value;
return {
topicFilter,
subscriptionQos,
converter: {
type: converter.type,
[converter.type]: { ...converter }
[converter.type]: {...converter}
}
};
case MappingType.REQUESTS:
@ -327,7 +327,7 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
converterGroup.get('bytes').disable({emitEvent: false});
converterGroup.get('custom').disable({emitEvent: false});
converterGroup.get(value).enable({emitEvent: false});
})
});
}
private createRequestMappingForm(): void {
@ -343,7 +343,7 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
}),
attributeRequests: this.fb.group({
topicFilter: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
deviceInfo: this.fb.group({
deviceInfo: this.fb.group({
deviceNameExpressionSource: [SourceTypes.MSG, []],
deviceNameExpression: ['', [Validators.required]],
}),

8
ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
View File

@ -195,13 +195,13 @@ interface DeviceInfo {
deviceProfileExpressionSource: string;
}
interface Attribute {
export interface Attribute {
key: string;
type: string;
value: string;
}
interface Timeseries {
export interface Timeseries {
key: string;
type: string;
value: string;
@ -212,12 +212,12 @@ interface RpcArgument {
value: number;
}
interface RpcMethod {
export interface RpcMethod {
method: string;
arguments: RpcArgument[];
}
interface AttributesUpdate {
export interface AttributesUpdate {
key: string;
type: string;
value: string;

Write Preview
Loading…
Cancel
Save