fixed cmds display

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

@@ -33,7 +33,7 @@ export class CommandsApi {
 
     public readCommands$ = (moduleName?: string) => this.httpClient.get<ICommand[]>(environment.backend + route + '/' + (moduleName ? ('/' + moduleName) : "") + '/commands/');
 
-    public runCommand$ = (moduleName: string, command: ICommand) => this.httpClient.post<string>(environment.backend + route + '/' + moduleName + '/commands/', command);
+    public runCommand$ = (command: ICommand, moduleName: string) => this.httpClient.post<string>(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

@@ -11,19 +11,22 @@
   </div>
 </div>
 
-<div *ngIf="cmds$ | async as cmds" fxLaypout="row">
+<div *ngIf="modules$ | async as modules" fxLaypout="row">
   <mat-form-field>
     <mat-label>Module</mat-label>
-    <mat-select [formControl]="selectedCmd!.nameFC" [value]="selectedCmd!.nameFC.value"
-      (selectionChange)=" onCmdSelect()">
-      <mat-option *ngFor="let cmd of cmds" [value]="cmd.nameFC.value">{{ cmd.nameFC.value }}
+    <mat-select (selectionChange)="onModuleSelect($event.value)">
+      <mat-option *ngFor="let module of modules" [value]="module"> {{ module.nameFC.value }}
       </mat-option>
     </mat-select>
   </mat-form-field>
+</div>
+
+<div *ngIf="selectedModule">
+  <h1 mat-dialog-title>{{ selectedModule!.nameFC.value }} module</h1>
 
   <div *ngIf="subvars$ | async as subvars" fxLaypout="column">
     <div *ngIf="subvars.length">
-      <h1 mat-dialog-title>{{ selectedCmd!.nameFC.value }} variables</h1>
+      <h2 mat-dialog-title>Variables</h2>
       <div *ngFor="let variable of subvars">
         <mat-form-field>
           <mat-label>{{ variable.nameFC.value }}</mat-label>
@@ -37,34 +40,19 @@
     </div>
   </div>
 
-  <div *ngIf="subcmds$ | async as subcmds" fxLaypout="column" fxLayoutGap="10px">
-    <div *ngIf="subcmds.length">
-      <h1 mat-dialog-title>{{ selectedCmd!.nameFC.value }} commands</h1>
-      <mat-form-field>
-        <mat-label>Command</mat-label>
-        <mat-select [formControl]="selectedSubCmd!.nameFC" [value]="selectedSubCmd!.nameFC.value"
-          (selectionChange)="onSubCmdSelect()">
-          <mat-option *ngFor="let subcmd of subcmds" [value]="subcmd.nameFC.value">{{ subcmd.nameFC.value }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <div *ngIf="args$ | async as args" fxLaypout="column">
-        <div *ngIf="args.length">
-          <h1 mat-dialog-title>{{ selectedSubCmd!.nameFC.value }} Sub-Variables</h1>
-          <div *ngFor="let variable of args">
-            <mat-form-field>
-              <mat-label>{{ variable.nameFC.value }}</mat-label>
-              <input input matInput [formControl]="variable.valueFC" />
-            </mat-form-field>
-            <button mat-raised-button color="primary" [disabled]="!variable.modifiableFC.value"
-              (click)="onSubVarSubmit(variable)">
-              submit
-            </button>
-          </div>
-        </div>
+  <div *ngIf="cmds$ | async as cmds" fxLaypout="column" fxLayoutGap="10px">
+    <div *ngIf="cmds.length">
+      <h2 mat-dialog-title>Commands</h2>
+      <div *ngFor="let cmd of cmds">
+        <!-- <mat-form-field>
+          <mat-label>{{ cmd.nameFC.value }}</mat-label>
+          <input input matInput [formControl]="cmd.nameFC" />
+        </mat-form-field> -->
+        <button mat-raised-button color="primary" (click)="onCmdSubmit(cmd)">
+          {{cmd.nameFC.value}}
+        </button>
       </div>
     </div>
-
   </div>
+
 </div>
\ No newline at end of file

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

@@ -18,17 +18,17 @@ export class CommandsComponent {
   IOptionType = IArgType;
 
   vars$: Observable<VarCtrl[]>
-  cmds$: Observable<CmdCtrl[]>
-  selectedCmd?: CmdCtrl
-  selectedVar?: VarCtrl
+  modules$: Observable<CmdCtrl[]>
+  selectedModule?: CmdCtrl
+  // selectedVar?: VarCtrl
 
   subvars$?: Observable<VarCtrl[]>
-  subcmds$?: Observable<CmdCtrl[]>
-  selectedSubCmd?: CmdCtrl
-  selectedSubVar?: VarCtrl
+  cmds$?: Observable<CmdCtrl[]>
+  // selectedSubCmd?: CmdCtrl
+  // selectedSubVar?: VarCtrl
 
   args$?: Observable<VarCtrl[]>
-  selectedArg?: VarCtrl
+  // selectedArg?: VarCtrl
 
   constructor(
     public commandsApi: CommandsApi,
@@ -38,29 +38,32 @@ export class CommandsComponent {
       map((vars) => vars.map(ivar => new VarCtrl(ivar)))
     );
 
-    this.cmds$ = this.commandsApi.readCommands$().pipe(
+    this.modules$ = this.commandsApi.readCommands$().pipe(
       map((cmds) => cmds.map(icmd => new CmdCtrl(icmd))),
-      tap(controls => [this.selectedCmd] = controls)
+      // tap(controls => [this.selectedCmd] = controls)
     );
   }
 
-  onCmdSelect() {
+  onModuleSelect(control: CmdCtrl) {
 
-    this.subcmds$ = this.commandsApi.readCommands$(`${this.selectedCmd!.nameFC.value}`).pipe(
-      map(icmds => icmds.map(icmd => new CmdCtrl(icmd))),
-      tap(controls => [this.selectedSubCmd] = controls)
+    this.selectedModule = control
+
+    this.cmds$ = this.commandsApi.readCommands$(`${control.nameFC.value}`).pipe(
+      map(icmds => icmds.map(icmd => new CmdCtrl(icmd)))
     )
 
-    this.subvars$ = this.commandsApi.readVariables$(`${this.selectedCmd!.nameFC.value}`).pipe(
+    this.subvars$ = this.commandsApi.readVariables$(`${control.nameFC.value}`).pipe(
       map(ivars => ivars.map(ivar => new VarCtrl(ivar))),
-      tap(controls => [this.selectedSubVar] = controls)
+      // tap(controls => [this.selectedSubVar] = controls)
     )
   }
 
-  onSubCmdSelect() {
-    this.args$ = this.commandsApi.readVariables$(`${this.selectedCmd!.nameFC.value}/${this.selectedSubCmd!.nameFC.value}`).pipe(
-      map(ivars => ivars.map(ivar => new VarCtrl(ivar))),
-      tap(controls => [this.selectedArg] = controls)
+  onCmdSelect(control: CmdCtrl) {
+
+    // this.selectedSubCmd = control
+
+    this.args$ = this.commandsApi.readVariables$(`${this.selectedModule!.nameFC.value}/${control.nameFC.value}`).pipe(
+      map(ivars => ivars.map(ivar => new VarCtrl(ivar)))
     )
   }
 
@@ -69,7 +72,10 @@ export class CommandsComponent {
   }
 
   onSubVarSubmit(control: VarCtrl) {
-    this.commandsApi.setVariable$(control.api(), `${this.selectedCmd?.nameFC.value}`).subscribe();
-    // this.commandsApi.setVariable$(control.api(), `${this.selectedCmd?.nameFC.value} / ${this.selectedSubCmd?.nameFC.value} / ${control.nameFC.value}`).subscribe();
+    this.commandsApi.setVariable$(control.api(), `${this.selectedModule!.nameFC.value}`).subscribe();
+  }
+
+  onCmdSubmit(control: CmdCtrl) {
+    this.commandsApi.runCommand$(control.api(), `${this.selectedModule!.nameFC.value}`).subscribe();
   }
 }