functionality fixes

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/broker-config-control/broker-config-control.component.ts

@@ -37,9 +37,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { generateSecret } from '@core/utils';
 import { Subject } from 'rxjs';
 import { GatewayPortTooltipPipe } from '@home/pipes/gateway-port-tooltip.pipe';
-import {
-  SecurityConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component';
+import { SecurityConfigComponent } from '../security-config/security-config.component';
 
 @Component({
   selector: 'tb-broker-config-control',

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html

@@ -72,7 +72,7 @@
             {{ 'gateway.client-communication-type' | translate }}
           </mat-header-cell>
           <mat-cell *matCellDef="let mapping" class="table-value-column request-column">
-            {{ ModbusClientTypeLabelsMap.get(mapping['type']) }}
+            {{ ModbusProtocolLabelsMap.get(mapping['type']) }}
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" stickyEnd>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.ts

@@ -40,7 +40,9 @@ import {
   Validator,
 } from '@angular/forms';
 import {
-  ModbusClientTypeLabelsMap, ModbusMasterConfig, SlaveConfig,
+  ModbusMasterConfig,
+  ModbusProtocolLabelsMap,
+  SlaveConfig
 } from '@home/components/widget/lib/gateway/gateway-widget.models';
 import { isDefinedAndNotNull, isUndefinedOrNull } from '@core/utils';
 import { SharedModule } from '@shared/shared.module';
@@ -80,7 +82,7 @@ export class ModbusMasterTableComponent implements ControlValueAccessor, Validat
   masterFormGroup: UntypedFormGroup;
   textSearch = this.fb.control('', {nonNullable: true});
 
-  readonly ModbusClientTypeLabelsMap = ModbusClientTypeLabelsMap;
+  readonly ModbusProtocolLabelsMap = ModbusProtocolLabelsMap;
 
   private onChange: (value: string) => void = () => {};
   private onTouched: () => void  = () => {};

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.ts

@@ -41,9 +41,6 @@ import { SharedModule } from '@shared/shared.module';
 import { CommonModule } from '@angular/common';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import {
-  SecurityConfigComponent
-} from '@home/components/widget/lib/gateway/connectors-configuration/security-config/security-config.component';
 import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
@@ -66,7 +63,6 @@ import { coerceBoolean } from '@shared/decorators/coercion';
   imports: [
     CommonModule,
     SharedModule,
-    SecurityConfigComponent,
   ]
 })
 export class ModbusSecurityConfigComponent implements ControlValueAccessor, Validator, OnChanges, OnDestroy {
@@ -74,10 +70,10 @@ export class ModbusSecurityConfigComponent implements ControlValueAccessor, Vali
   @coerceBoolean()
   @Input() isMaster = false;
 
-  disabled = false;
-
   securityConfigFormGroup: UntypedFormGroup;
 
+  private disabled = false;
+
   private onChange: (value: ModbusSecurity) => void;
   private onTouched: () => void;
 
@@ -89,21 +85,14 @@ export class ModbusSecurityConfigComponent implements ControlValueAccessor, Vali
       keyfile: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
       password: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
       server_hostname: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
+      reqclicert: [{value: false, disabled: true}, []],
     });
 
     this.observeValueChanges();
   }
 
   ngOnChanges(): void {
-    if (this.isMaster) {
-      this.securityConfigFormGroup = this.fb.group({
-        certfile: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-        keyfile: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-        password: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-        reqclicert: [false, []],
-      });
-      this.observeValueChanges();
-    }
+    this.updateMasterEnabling();
   }
 
   ngOnDestroy(): void {
@@ -126,6 +115,7 @@ export class ModbusSecurityConfigComponent implements ControlValueAccessor, Vali
     } else {
       this.securityConfigFormGroup.enable({emitEvent: false});
     }
+    this.updateMasterEnabling();
     this.cdr.markForCheck();
   }
 
@@ -137,19 +127,29 @@ export class ModbusSecurityConfigComponent implements ControlValueAccessor, Vali
 
   writeValue(securityConfig: ModbusSecurity): void {
     const { certfile, password, keyfile, server_hostname } = securityConfig;
-    let securityState = {
+    const securityState = {
       certfile: certfile ?? '',
       password: password ?? '',
       keyfile: keyfile ?? '',
-      server_hostname: server_hostname?? '',
+      server_hostname: server_hostname ?? '',
       reqclicert: !!securityConfig.reqclicert,
     };
+
+    this.securityConfigFormGroup.reset(securityState, {emitEvent: false});
+  }
+
+  private updateMasterEnabling(): void {
     if (this.isMaster) {
-      securityState = { ...securityState, reqclicert: !!securityConfig.reqclicert };
+      if (!this.disabled) {
+        this.securityConfigFormGroup.get('reqclicert').enable({emitEvent: false});
+      }
+      this.securityConfigFormGroup.get('server_hostname').disable({emitEvent: false});
     } else {
-      securityState = { ...securityState, server_hostname: server_hostname ?? '' };
+      if (!this.disabled) {
+        this.securityConfigFormGroup.get('server_hostname').enable({emitEvent: false});
+      }
+      this.securityConfigFormGroup.get('reqclicert').disable({emitEvent: false});
     }
-    this.securityConfigFormGroup.reset(securityState, {emitEvent: false});
   }
 
   private observeValueChanges(): void {

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html

@@ -181,8 +181,8 @@
         </mat-form-field>
       </div>
     </div>
-    <div>
-      <mat-expansion-panel>
+    <div class="tb-form-panel stroked">
+      <mat-expansion-panel class="tb-settings">
         <mat-expansion-panel-header>
           <mat-panel-title>
             <div class="tb-form-panel-title" translate>gateway.advanced-connection-settings</div>
@@ -199,19 +199,20 @@
               </mat-form-field>
             </div>
           </div>
-          <mat-expansion-panel *ngIf="this.slaveConfigFormGroup.get('type').value !== ModbusProtocolType.Serial"
-                               [expanded]="showSecurityControl.value">
-            <mat-expansion-panel-header class="nested-expansion-header">
-              <mat-panel-title>
-                <mat-slide-toggle [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">
-                  <mat-label>
-                    {{ 'gateway.tls-connection' | translate }}
-                  </mat-label>
-                </mat-slide-toggle>
-              </mat-panel-title>
-            </mat-expansion-panel-header>
-            <tb-modbus-security-config formControlName="security" [isMaster]="true"></tb-modbus-security-config>
-          </mat-expansion-panel>
+          <div *ngIf="this.slaveConfigFormGroup.get('type').value !== ModbusProtocolType.Serial" class="tb-form-panel stroked tb-slide-toggle">
+            <mat-expansion-panel class="tb-settings" [expanded]="showSecurityControl.value">
+              <mat-expansion-panel-header fxLayout="row wrap">
+                <mat-panel-title>
+                  <mat-slide-toggle fxLayoutAlign="center" [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">
+                    <mat-label>
+                      {{ 'gateway.tls-connection' | translate }}
+                    </mat-label>
+                  </mat-slide-toggle>
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <tb-modbus-security-config formControlName="security"></tb-modbus-security-config>
+            </mat-expansion-panel>
+          </div>
           <ng-container [formGroup]="slaveConfigFormGroup.get('identity')">
             <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
               <div class="fixed-title-width" translate>gateway.vendor-name</div>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts

@@ -47,6 +47,7 @@ import { startWith, takeUntil } from 'rxjs/operators';
 import { GatewayPortTooltipPipe } from '@home/pipes/gateway-port-tooltip.pipe';
 import { ModbusSecurityConfigComponent } from '../modbus-security-config/modbus-security-config.component';
 import { ModbusValuesComponent, } from '../modbus-values/modbus-values.component';
+import { isEqual } from '@core/utils';
 
 @Component({
   selector: 'tb-modbus-slave-config',
@@ -158,7 +159,7 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat
   }
 
   writeValue(slaveConfig: ModbusSlave): void {
-    this.showSecurityControl.patchValue(!!slaveConfig.security);
+    this.showSecurityControl.patchValue(!!slaveConfig.security && !isEqual(slaveConfig.security, {}));
     this.updateSlaveConfig(slaveConfig);
     this.updateFormEnableState(slaveConfig.sendDataToThingsBoard);
   }
@@ -187,16 +188,19 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat
       this.slaveConfigFormGroup.get('sendDataToThingsBoard').enable({emitEvent: false});
     }
     this.updateEnablingByProtocol(this.slaveConfigFormGroup.get('type').value);
+    this.updateSecurityEnable(this.showSecurityControl.value);
   }
 
   private observeShowSecurity(): void {
-    this.showSecurityControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
-      if (value && this.slaveConfigFormGroup.get('sendDataToThingsBoard').value) {
-        this.slaveConfigFormGroup.get('security').enable({emitEvent: false});
-      } else {
-        this.slaveConfigFormGroup.get('security').disable({emitEvent: false});
-      }
-    });
+    this.showSecurityControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => this.updateSecurityEnable(value));
+  }
+
+  private updateSecurityEnable(isEnabled: boolean): void {
+    if (isEnabled && this.slaveConfigFormGroup.get('sendDataToThingsBoard').value) {
+      this.slaveConfigFormGroup.get('security').enable({emitEvent: false});
+    } else {
+      this.slaveConfigFormGroup.get('security').disable({emitEvent: false});
+    }
   }
 
   private updateEnablingByProtocol(type: ModbusProtocolType): void {

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html

@@ -236,108 +236,112 @@
             </mat-label>
           </mat-slide-toggle>
         </div>
-        <mat-expansion-panel>
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              <div class="tb-form-panel-title" translate>gateway.advanced-connection-settings</div>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
-          <div class="tb-form-panel no-border no-padding padding-top">
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width" translate>gateway.connection-timeout</div>
-              <div class="tb-flex no-gap">
-                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                  <input matInput type="number" min="0" name="value" formControlName="timeout" placeholder="{{ 'gateway.set' | translate }}"/>
-                </mat-form-field>
+        <div class="tb-form-panel stroked">
+          <mat-expansion-panel class="tb-settings">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <div class="tb-form-panel-title" translate>gateway.advanced-connection-settings</div>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <div class="tb-form-panel no-border no-padding padding-top">
+              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                <div class="fixed-title-width" translate>gateway.connection-timeout</div>
+                <div class="tb-flex no-gap">
+                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                    <input matInput type="number" min="0" name="value" formControlName="timeout" placeholder="{{ 'gateway.set' | translate }}"/>
+                  </mat-form-field>
+                </div>
               </div>
-            </div>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width" translate>gateway.byte-order</div>
-              <div class="tb-flex no-gap">
-                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                  <mat-select formControlName="byteOrder">
-                    <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>
-                  </mat-select>
-                </mat-form-field>
+              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                <div class="fixed-title-width" translate>gateway.byte-order</div>
+                <div class="tb-flex no-gap">
+                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                    <mat-select formControlName="byteOrder">
+                      <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                </div>
               </div>
-            </div>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width" translate>gateway.word-order</div>
-              <div class="tb-flex no-gap">
-                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                  <mat-select formControlName="wordOrder">
-                    <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>
-                  </mat-select>
-                </mat-form-field>
+              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                <div class="fixed-title-width" translate>gateway.word-order</div>
+                <div class="tb-flex no-gap">
+                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                    <mat-select formControlName="wordOrder">
+                      <mat-option *ngFor="let order of modbusOrderType" [value]="order">{{ order }}</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                </div>
               </div>
-            </div>
-            <mat-expansion-panel *ngIf="this.slaveConfigFormGroup.get('security')" [expanded]="showSecurityControl.value">
-              <mat-expansion-panel-header class="nested-expansion-header">
-                <mat-panel-title>
-                  <mat-slide-toggle [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">
-                    <mat-label>
-                      {{ 'gateway.tls-connection' | translate }}
-                    </mat-label>
-                  </mat-slide-toggle>
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <tb-modbus-security-config formControlName="security"></tb-modbus-security-config>
-            </mat-expansion-panel>
-            <div class="tb-form-row" fxLayoutAlign="space-between center">
-              <mat-slide-toggle class="mat-slide" formControlName="retries">
-                <mat-label>
-                  {{ 'gateway.retries' | translate }}
-                </mat-label>
-              </mat-slide-toggle>
-            </div>
-            <div class="tb-form-row" fxLayoutAlign="space-between center">
-              <mat-slide-toggle class="mat-slide" formControlName="retryOnEmpty">
-                <mat-label>
-                  {{ 'gateway.retries-on-empty' | translate }}
-                </mat-label>
-              </mat-slide-toggle>
-            </div>
-            <div class="tb-form-row" fxLayoutAlign="space-between center">
-              <mat-slide-toggle class="mat-slide" formControlName="retryOnInvalid">
-                <mat-label>
-                  {{ 'gateway.retries-on-invalid' | translate }}
-                </mat-label>
-              </mat-slide-toggle>
-            </div>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width" translate>gateway.poll-period</div>
-              <div class="tb-flex no-gap">
-                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                  <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ 'gateway.set' | translate }}"/>
-                </mat-form-field>
+              <div *ngIf="this.slaveConfigFormGroup.get('type').value !== ModbusProtocolType.Serial" class="tb-form-panel stroked tb-slide-toggle">
+                <mat-expansion-panel class="tb-settings" [expanded]="showSecurityControl.value">
+                  <mat-expansion-panel-header fxLayout="row wrap">
+                    <mat-panel-title>
+                      <mat-slide-toggle fxLayoutAlign="center" [formControl]="showSecurityControl" class="mat-slide" (click)="$event.stopPropagation()">
+                        <mat-label>
+                          {{ 'gateway.tls-connection' | translate }}
+                        </mat-label>
+                      </mat-slide-toggle>
+                    </mat-panel-title>
+                  </mat-expansion-panel-header>
+                  <tb-modbus-security-config formControlName="security"></tb-modbus-security-config>
+                </mat-expansion-panel>
               </div>
-            </div>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width" translate>gateway.connect-attempt-time</div>
-              <div class="tb-flex no-gap">
-                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                  <input matInput type="number" min="0" name="value" formControlName="connectAttemptTimeMs" placeholder="{{ 'gateway.set' | translate }}"/>
-                </mat-form-field>
+              <div class="tb-form-row" fxLayoutAlign="space-between center">
+                <mat-slide-toggle class="mat-slide" formControlName="retries">
+                  <mat-label>
+                    {{ 'gateway.retries' | translate }}
+                  </mat-label>
+                </mat-slide-toggle>
               </div>
-            </div>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width" translate>gateway.connect-attempt-count</div>
-              <div class="tb-flex no-gap">
-                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                  <input matInput type="number" min="0" name="value" formControlName="connectAttemptCount" placeholder="{{ 'gateway.set' | translate }}"/>
-                </mat-form-field>
+              <div class="tb-form-row" fxLayoutAlign="space-between center">
+                <mat-slide-toggle class="mat-slide" formControlName="retryOnEmpty">
+                  <mat-label>
+                    {{ 'gateway.retries-on-empty' | translate }}
+                  </mat-label>
+                </mat-slide-toggle>
               </div>
-            </div>
-            <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width" translate>gateway.wait-after-failed-attempts</div>
-              <div class="tb-flex no-gap">
-                <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                  <input matInput type="number" min="0" name="value" formControlName="waitAfterFailedAttemptsMs" placeholder="{{ 'gateway.set' | translate }}"/>
-                </mat-form-field>
+              <div class="tb-form-row" fxLayoutAlign="space-between center">
+                <mat-slide-toggle class="mat-slide" formControlName="retryOnInvalid">
+                  <mat-label>
+                    {{ 'gateway.retries-on-invalid' | translate }}
+                  </mat-label>
+                </mat-slide-toggle>
+              </div>
+              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                <div class="fixed-title-width-230" translate>gateway.poll-period</div>
+                <div class="tb-flex no-gap">
+                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                    <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ 'gateway.set' | translate }}"/>
+                  </mat-form-field>
+                </div>
+              </div>
+              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                <div class="fixed-title-width-230" translate>gateway.connect-attempt-time</div>
+                <div class="tb-flex no-gap">
+                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                    <input matInput type="number" min="0" name="value" formControlName="connectAttemptTimeMs" placeholder="{{ 'gateway.set' | translate }}"/>
+                  </mat-form-field>
+                </div>
+              </div>
+              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                <div class="fixed-title-width-230" translate>gateway.connect-attempt-count</div>
+                <div class="tb-flex no-gap">
+                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                    <input matInput type="number" min="0" name="value" formControlName="connectAttemptCount" placeholder="{{ 'gateway.set' | translate }}"/>
+                  </mat-form-field>
+                </div>
+              </div>
+              <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+                <div class="fixed-title-width-230" translate>gateway.wait-after-failed-attempts</div>
+                <div class="tb-flex no-gap">
+                  <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+                    <input matInput type="number" min="0" name="value" formControlName="waitAfterFailedAttemptsMs" placeholder="{{ 'gateway.set' | translate }}"/>
+                  </mat-form-field>
+                </div>
               </div>
             </div>
-          </div>
-        </mat-expansion-panel>
+          </mat-expansion-panel>
+        </div>
         <div class="tb-form-panel stroked">
           <tb-modbus-values [singleMode]="true" formControlName="values"></tb-modbus-values>
         </div>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts

@@ -51,6 +51,7 @@ import { Router } from '@angular/router';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { GatewayPortTooltipPipe } from '@home/pipes/gateway-port-tooltip.pipe';
 import { takeUntil } from 'rxjs/operators';
+import { isEqual } from '@core/utils';
 
 @Component({
   selector: 'tb-modbus-slave-dialog',
@@ -81,12 +82,6 @@ import { takeUntil } from 'rxjs/operators';
       .slaves-config-container {
         width: 900px;
       }
-      .nested-expansion-header {
-        .mat-content {
-          height: 100%;
-          overflow: hidden;
-        }
-      }
     }
   `],
 })
@@ -169,10 +164,10 @@ export class ModbusSlaveDialogComponent extends DialogComponent<ModbusSlaveDialo
         rpc: this.data.value.rpc ?? [],
       }
     });
-    this.showSecurityControl.patchValue(!!this.data.value.security);
     this.updateControlsEnabling(this.data.value.type);
     this.observeTypeChange();
     this.observeShowSecurity();
+    this.showSecurityControl.patchValue(!!this.data.value.security && !isEqual(this.data.value.security, {}));
   }
 
   ngOnDestroy(): void {
@@ -192,7 +187,6 @@ export class ModbusSlaveDialogComponent extends DialogComponent<ModbusSlaveDialo
         slaveResult.port = slaveResult.serialPort;
       }
       delete slaveResult.serialPort;
-      slaveResult.security = this.showSecurityControl.value ? slaveResult.security : {};
       this.dialogRef.close(slaveResult);
     }
   }

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.ts

@@ -20,8 +20,8 @@ import {
   Component,
   forwardRef,
   Input,
-  OnChanges,
   OnDestroy,
+  OnInit,
   Renderer2,
   ViewContainerRef
 } from '@angular/core';
@@ -91,7 +91,7 @@ import { coerceBoolean } from '@shared/decorators/coercion';
   `]
 })
 
-export class ModbusValuesComponent implements ControlValueAccessor, Validator, OnChanges, OnDestroy {
+export class ModbusValuesComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy {
 
   @coerceBoolean()
   @Input() singleMode = false;
@@ -113,24 +113,13 @@ export class ModbusValuesComponent implements ControlValueAccessor, Validator, O
               private renderer: Renderer2,
               private viewContainerRef: ViewContainerRef,
               private cdr: ChangeDetectorRef,
-  ) {
-    this.valuesFormGroup = this.fb.group(this.modbusRegisterTypes.reduce((registersAcc, register) => {
-      return {
-        ...registersAcc,
-        [register]: this.fb.group(this.modbusValueKeys.reduce((acc, key) => ({...acc, [key]: [[], []]}), {})),
-      };
-    }, {}));
+  ) {}
 
+  ngOnInit() {
+    this.initializeValuesFormGroup();
     this.observeValuesChanges();
   }
 
-  ngOnChanges(): void {
-    if (this.singleMode) {
-      this.valuesFormGroup = this.fb.group(this.modbusValueKeys.reduce((acc, key) => ({...acc, [key]: [[], []]}), {}));
-      this.observeValuesChanges();
-    }
-  }
-
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
@@ -218,6 +207,28 @@ export class ModbusValuesComponent implements ControlValueAccessor, Validator, O
     }
   }
 
+  private initializeValuesFormGroup(): void {
+    if (this.singleMode) {
+      this.valuesFormGroup = this.fb.group(this.modbusValueKeys.reduce((acc, key) => {
+        acc[key] = this.fb.control([[], []]);
+        return acc;
+      }, {}));
+    } else {
+      this.valuesFormGroup = this.fb.group(
+        this.modbusRegisterTypes.reduce((registersAcc, register) => {
+
+          registersAcc[register] = this.fb.group(this.modbusValueKeys.reduce((acc, key) => {
+            acc[key] = this.fb.control([[], []]);
+            return acc;
+          }, {}));
+
+          return registersAcc;
+        }, {})
+      );
+    }
+  }
+
+
   private observeValuesChanges(): void {
     this.valuesFormGroup.valueChanges
       .pipe(takeUntil(this.destroy$))

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

@@ -823,6 +823,9 @@ export enum ModbusDataType {
   STRING = 'string',
   BYTES = 'bytes',
   BITS = 'bits',
+  INT8 = '8int',
+  UINT8 = '8uint',
+  FLOAT8 = '8float',
   INT16 = '16int',
   UINT16 = '16uint',
   FLOAT16 = '16float',
@@ -835,6 +838,9 @@ export enum ModbusDataType {
 }
 
 export enum ModbusObjectCountByDataType {
+  '8int' = 1,
+  '8uint' = 1,
+  '8float' = 1,
   '16int' = 1,
   '16uint' = 1,
   '16float' = 1,
@@ -907,14 +913,6 @@ export const ModbusKeysNoKeysTextTranslationsMap = new Map<ModbusValueKey, strin
   ]
 );
 
-export const ModbusClientTypeLabelsMap = new Map<ModbusProtocolType, string>(
-  [
-    [ModbusProtocolType.TCP, 'TCP/UDP'],
-    [ModbusProtocolType.UDP, 'TCP/UDP'],
-    [ModbusProtocolType.Serial, 'Serial'],
-  ]
-);
-
 export const ModbusFunctionCodeTranslationsMap = new Map<number, string>(
   [
     [1, 'gateway.read-coils'],