table OK

common/utils/websrv/frontend/src/app/components/commands/commands.component.html

@@ -64,12 +64,20 @@
         </div>
       </mat-header-cell>
       <mat-cell *matCellDef="let row; dataIndex as rowIndex">
-        <mat-form-field [ngSwitch]="col.type">
-          <mat-slide-toggle *ngSwitchCase="IOptionType.boolean" [formControl]="row.booleanFC"
-            [checked]="row.isEnabledFC.value" [disabled]="!col.modifiable"></mat-slide-toggle>
-          <input *ngSwitchCase="IOptionType.string" matInput [formControl]="row.stringFC"
-            [disabled]="!col.modifiable" />
-        </mat-form-field>
+
+        <div *ngIf="col.type === IOptionType.boolean; then toggle else default"></div>
+
+        <ng-template #toggle>
+          <mat-slide-toggle [formControl]="row[colIndex]" [checked]="row[colIndex].value" [disabled]="!col.modifiable">
+          </mat-slide-toggle>
+        </ng-template>
+
+        <ng-template #default>
+          <mat-form-field>
+            <input matInput [formControl]="row[colIndex]" [disabled]="!col.modifiable" />
+          </mat-form-field>
+        </ng-template>
+
       </mat-cell>
     </div>
 

common/utils/websrv/frontend/src/app/components/commands/commands.component.ts

@@ -3,9 +3,9 @@ import { Observable } from 'rxjs/internal/Observable';
 import { of } from 'rxjs/internal/observable/of';
 import { map } from 'rxjs/internal/operators/map';
 import { mergeMap } from 'rxjs/internal/operators/mergeMap';
-import { CommandsApi, IArgType, IColumn, ITable } from 'src/app/api/commands.api';
+import { CommandsApi, IArgType, IColumn } from 'src/app/api/commands.api';
 import { CmdCtrl } from 'src/app/controls/cmd.control';
-import { RowCtrl } from 'src/app/controls/row.control';
+import { EntryFC } from 'src/app/controls/entry.control';
 import { VarCtrl } from 'src/app/controls/var.control';
 import { DialogService } from 'src/app/services/dialog.service';
 import { LoadingService } from 'src/app/services/loading.service';
@@ -35,7 +35,7 @@ export class CommandsComponent {
 
   //table columns
   displayedColumns: string[] = []
-  rows$: Observable<RowCtrl[]> = new Observable<RowCtrl[]>()
+  rows$: Observable<EntryFC[][]> = new Observable<EntryFC[][]>()
   columns: IColumn[] = []
 
   constructor(
@@ -103,8 +103,17 @@ export class CommandsComponent {
       map(resp => {
         this.columns = resp.table!.columns
         this.displayedColumns = this.columns.map(col => col.name)
-        let rows: RowCtrl[] = []
-        resp.table?.rows.map(row => this.columns.map(col => rows.push(new RowCtrl(row, col.type))))
+
+        let rows = [];
+
+        for (let i = 0; i < resp.table!.rows.length; i++) {
+          let row: EntryFC[] = []
+
+          for (let j = 0; j < this.columns.length; j++) {
+            row[j] = new EntryFC(resp.table!.rows[i][j], this.columns[j].type)
+          }
+          rows[i] = row
+        }
         return rows
       })
     );

common/utils/websrv/frontend/src/app/controls/entry.control.ts

+import { FormControl } from '@angular/forms';
+import { IArgType } from '../api/commands.api';
+
+
+export class EntryFC extends FormControl {
+
+  type: IArgType
+
+  constructor(entry: string, type: IArgType) {
+    super(entry);
+    this.type = type
+  }
+}
+

common/utils/websrv/frontend/src/app/controls/row.control.ts

-import { FormControl, FormGroup } from '@angular/forms';
-import { IArgType, IRow } from '../api/commands.api';
-
-
-
-export class RowCtrl extends FormGroup {
-
-  type: IArgType
-
-  constructor(irow: IRow, type: IArgType) {
-    super({});
-    this.type = type
-    this.addControl(type, new FormControl(irow));
-  }
-
-  api() {
-
-    switch (this.type) {
-      case IArgType.boolean:
-        return this.boolFC.value ? "true" : "false";
-      // case IArgType.list:
-      //   return this.listFC.value as string;
-      case IArgType.number:
-        return this.numberFC.value as string;
-      // case IArgType.range:
-      //   return this.rangeFC.value as string;
-      case IArgType.string:
-        return this.stringFC.value
-    }
-  }
-
-  get boolFC() {
-    return this.get(IArgType.boolean) as FormControl;
-  }
-
-  set boolFC(control: FormControl) {
-    this.setControl(IArgType.boolean, control);
-  }
-
-  get listFC() {
-    return this.get(IArgType.list) as FormControl;
-  }
-
-  set listFC(control: FormControl) {
-    this.setControl(IArgType.list, control);
-  }
-
-  get numberFC() {
-    return this.get(IArgType.number) as FormControl;
-  }
-
-  set numberFC(control: FormControl) {
-    this.setControl(IArgType.number, control);
-  }
-
-  get rangeFC() {
-    return this.get(IArgType.range) as FormControl;
-  }
-
-  set rangeFC(control: FormControl) {
-    this.setControl(IArgType.range, control);
-  }
-
-  get stringFC() {
-    return this.get(IArgType.string) as FormControl;
-  }
-
-  set stringFC(control: FormControl) {
-    this.setControl(IArgType.string, control);
-  }
-}
-