dynamic tables

common/utils/websrv/frontend/src/app/api/commands.api.ts

@@ -26,13 +26,6 @@ export enum ILogOutput {
     file = "/tmp/<component>.log",
 }
 
-export interface ILog {
-    component: string;
-    level: ILogLvl;
-    output: ILogOutput;
-    enabled: boolean;
-}
-
 export interface IColumn { //should use IVariable ?
     name: string;
     type: IArgType;
@@ -45,11 +38,6 @@ export interface ITable {
     rows: IRow[];
 }
 
-export interface IResp {
-    display: string[],
-    logs?: ILog[]
-}
-
 export enum IArgType {
     boolean = "boolean",
     list = "list",
@@ -75,7 +63,7 @@ export class CommandsApi {
 
     public readCommands$ = (moduleName?: string) => this.httpClient.get<ICommand[]>(environment.backend + route + '/' + (moduleName ? ('/' + moduleName) : "") + '/commands/');
 
-    public runCommand$ = (command: ICommand, moduleName: string) => this.httpClient.post<IResp>(environment.backend + route + '/' + moduleName + '/commands/', command);
+    public runCommand$ = (command: ICommand, moduleName: string) => this.httpClient.post<ITable>(environment.backend + route + '/' + moduleName + '/commands/', command);
 
     public setVariable$ = (variable: IVariable, moduleName?: string) => this.httpClient.post<string[]>(environment.backend + route + (moduleName ? ('/' + moduleName) : "") + '/variables/', variable);
 

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

@@ -50,59 +50,31 @@
   </div>
 
 
-  <mat-table mat-table [dataSource]="logs$" multiTemplateDataRows class="mat-elevation-z8">
+  <mat-table mat-table [dataSource]="rows$" multiTemplateDataRows class="mat-elevation-z8">
 
     <!-- For anyone who has set the multiTemplateDataRows property of mat-table to true,
               you can't use index. Instead you have use either dataIndex or renderIndex.
               See https://github.com/angular/material2/issues/12793 -->
 
 
-    <div matColumnDef="component">
-      <mat-header-cell *matHeaderCellDef> Component
-      </mat-header-cell>
-      <mat-cell *matCellDef="let log">
-        <div fxLayout="row" fxLayoutAlign="start end">
-          <p>{{log.component}}</p>
-        </div>
-      </mat-cell>
-    </div>
-
-
-    <div matColumnDef="level">
-      <mat-header-cell *matHeaderCellDef> Level
-      </mat-header-cell>
-      <mat-cell *matCellDef="let log">
-        <div fxLayout="row" fxLayoutAlign="start end">
-          <p>{{log.level}}</p>
-        </div>
-      </mat-cell>
-    </div>
-
-
-    <div matColumnDef="output">
-      <mat-header-cell *matHeaderCellDef> Output
-      </mat-header-cell>
-      <mat-cell *matCellDef="let log">
-        <div fxLayout="row" fxLayoutAlign="start end">
-          <p>{{log.output}}</p>
+    <div *ngFor="let col of columns; index as colIndex" matColumnDef="{{col.name}}">
+      <mat-header-cell *matHeaderCellDef>
+        <div>
+          <h4>{{ col.name }}</h4>
         </div>
-      </mat-cell>
-    </div>
-
-
-    <div matColumnDef="enabled">
-      <mat-header-cell *matHeaderCellDef> Enabled
       </mat-header-cell>
-      <mat-cell *matCellDef="let log">
-        <div fxLayout="row" fxLayoutAlign="start end">
-          <p>{{log.enabled}}</p>
-        </div>
+      <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.boolean" matInput [formControl]="row.stringFC"
+            [disabled]="!col.modifiable" />
+        </mat-form-field>
       </mat-cell>
     </div>
 
-    <mat-header-row *matHeaderRowDef="DISPLAYED_COLUMNS"></mat-header-row>
-    <mat-row *matRowDef="let stageCtrl; columns: DISPLAYED_COLUMNS"></mat-row>
-
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
 
   </mat-table>
 

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

 import { Component } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { map } from 'rxjs/internal/operators/map';
-import { tap, mergeMap } from 'rxjs/operators';
-import { CommandsApi, IArgType, ILog } from 'src/app/api/commands.api';
+import { CommandsApi, IArgType, IColumn, IRow } from 'src/app/api/commands.api';
 import { CmdCtrl } from 'src/app/controls/cmd.control';
+import { RowCtrl } from 'src/app/controls/row.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';
@@ -32,14 +32,9 @@ export class CommandsComponent {
   // selectedArg?: VarCtrl
 
   //table columns
-  DISPLAYED_COLUMNS = [
-    'component',
-    'level',
-    'output',
-    'enabled'
-  ]
-
-  logs$: Observable<ILog[]> = new Observable<ILog[]>()
+  displayedColumns: string[] = []
+  rows$: Observable<RowCtrl[]> = new Observable<RowCtrl[]>()
+  columns: IColumn[] = []
 
   constructor(
     public commandsApi: CommandsApi,
@@ -92,9 +87,14 @@ export class CommandsComponent {
   }
 
   onCmdSubmit(control: CmdCtrl) {
-    this.logs$ = this.commandsApi.runCommand$(control.api(), `${this.selectedModule!.nameFC.value}`).pipe(
-      tap(resp => this.success('runCommand ' + control.nameFC.value + ' OK', resp.display!.join("</p><p>"))),
-      map(iresp => iresp.logs!)
+    this.rows$ = this.commandsApi.runCommand$(control.api(), `${this.selectedModule!.nameFC.value}`).pipe(
+      map(iresp => {
+        this.columns = iresp.columns
+        this.displayedColumns = this.columns.map(col => col.name)
+        let rows: RowCtrl[] = []
+        iresp.rows.map(row => this.columns.map(col => rows.push(new RowCtrl(row, col.type))))
+        return rows
+      })
     );
   }
 

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 ? "true" : "false";
+      case IArgType.number:
+        return this.numberFC.value ? "true" : "false";
+      case IArgType.range:
+        return this.rangeFC.value ? "true" : "false";
+      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);
+  }
+}
+