APIv2.1

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

@@ -3,21 +3,22 @@ import { Injectable } from '@angular/core';
 import { environment } from 'src/environments/environment';
 
 
-export enum IOptionType {
-    subcommand = "subcommand",
-    variable = "variable"
+export interface IVariable {
+    name: string;
+    value: string;
+    type: IArgType;
+    modifiable: boolean; //set command ?
 }
-export interface IOption {
-    type: IOptionType;
+
+export enum IArgType {
+    boolean = "boolean",
+    list = "list",
+    range = "range",
+    string = "string"
 }
 
-export interface IVariable extends IOption {
+export interface ICommand {
     name: string;
-    value: string;
-    modifiable: boolean;
-}
-export interface ISubCommands extends IOption {
-    name: string[];
 }
 
 const route = '/oaisoftmodem';
@@ -28,14 +29,16 @@ const route = '/oaisoftmodem';
 export class CommandsApi {
     constructor(private httpClient: HttpClient) { }
 
-    public readStatus$ = () => this.httpClient.get<IVariable[]>(environment.backend + route + '/status/');
+    public readVariables$ = () => this.httpClient.get<IVariable[]>(environment.backend + route + '/variables/');
+
+    public readCommands$ = () => this.httpClient.get<ICommand[]>(environment.backend + route + '/commands/');
 
-    public readModules$ = () => this.httpClient.get<string[]>(environment.backend + route + '/modules/');
+    public readModuleVariables$ = (moduleName: string) => this.httpClient.get<IVariable[]>(environment.backend + route + '/variables/' + moduleName);
 
-    public getOptions$ = (cmdName: string) => this.httpClient.get<IOption[]>(environment.backend + route + '/module/' + cmdName);
+    public readModuleCommands$ = (moduleName: string) => this.httpClient.get<ICommand[]>(environment.backend + route + '/commands/' + moduleName);
 
-    public runCommand$ = (cmdName: string) => this.httpClient.post<string>(environment.backend + route + '/command/' + cmdName, {});
+    public runCommand$ = (command: ICommand) => this.httpClient.post<string>(environment.backend + route + '/run/', command);
 
-    public setVariable$ = (variable: IVariable) => this.httpClient.post<string>(environment.backend + route + '/variable/' + variable.name, variable.value);
+    public setVariable$ = (variable: IVariable) => this.httpClient.post<string>(environment.backend + route + '/set/', variable);
 
 }

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

-<div *ngIf="status$ | async as statusVariables">
-  <h1 mat-dialog-title>Status</h1>
-  <div *ngFor="let status of statusVariables">
+<div *ngIf="vars$ | async as vars">
+  <h1 mat-dialog-title>Variables</h1>
+  <div *ngFor="let variable of vars">
     <mat-form-field>
-      <mat-label>{{ status.nameFC.value }}</mat-label>
-      <input input matInput [formControl]="status.valueFC" />
+      <mat-label>{{ variable.nameFC.value }}</mat-label>
+      <input input matInput [formControl]="variable.valueFC" />
     </mat-form-field>
-    <button mat-raised-button color="primary" [disabled]="!status.modifiableFC.value" (click)="onVarSubmit(status)">
+    <button mat-raised-button color="primary" [disabled]="!variable.modifiableFC.value" (click)="onVarSubmit(variable)">
       set
     </button>
   </div>
 </div>
 
 <div *ngIf="cmds$ | async as cmds" fxLaypout="row">
-  <h1 mat-dialog-title>Commands</h1>
+  <h1 mat-dialog-title>Menus</h1>
   <mat-form-field>
     <mat-label>Command</mat-label>
-    <mat-select [formControl]="selectedCmd" [value]="selectedCmd?.value" (selectionChange)="onSelect(selectedCmd)">
-      <mat-option *ngFor="let cmd of cmds" [value]="cmd">{{ cmd }}
+    <mat-select [formControl]="selectedCmd!.nameFC" [value]="selectedCmd!.nameFC.value"
+      (selectionChange)="onCmdSelect(selectedCmd!)">
+      <mat-option *ngFor="let cmd of cmds" [value]="cmd">{{ cmd.nameFC.value }}
       </mat-option>
     </mat-select>
   </mat-form-field>
 
-  <div *ngIf="variables$ | async as variables" fxLaypout="column">
-    <h1 mat-dialog-title>Variables</h1>
-    <div *ngFor="let variable of variables">
+  <div *ngIf="subvars$ | async as subvars" fxLaypout="column">
+    <h1 mat-dialog-title>Sub-Variables</h1>
+    <div *ngFor="let variable of subvars">
       <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)="onVarSubmit(variable)">
-        set
+        submit
       </button>
     </div>
   </div>
 
   <div *ngIf="subcmds$ | async as subcmds" fxLaypout="column" fxLayoutGap="10px">
     <h1 mat-dialog-title>Sub-commands</h1>
-    <button *ngFor="let control of subcmds.namesFA.controls" mat-raised-button color="primary"
-      (click)="onCmdSubmit(control.value)">
-      {{ control.value }}
+    <mat-form-field>
+      <mat-label>Command</mat-label>
+      <mat-select [formControl]="selectedSubCmd!.nameFC" [value]="selectedSubCmd!.nameFC.value"
+        (selectionChange)="onSubCmdSelect(selectedSubCmd!)">
+        <mat-option *ngFor="let cmd of subcmds" [value]="cmd">{{ cmd.nameFC.value }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <div *ngIf="args$ | async as args" fxLaypout="column">
+      <h1 mat-dialog-title>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)="onVarSubmit(variable)">
+          submit
         </button>
       </div>
+    </div>
+
+  </div>
 </div>
\ No newline at end of file

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

 import { Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { BehaviorSubject } from 'rxjs';
 import { Observable } from 'rxjs/internal/Observable';
 import { map } from 'rxjs/internal/operators/map';
-import { CommandsApi, IOptionType, ISubCommands, IVariable } from 'src/app/api/commands.api';
-import { SubCmdCtrl } from 'src/app/controls/cmds.control';
-import { VariableCtrl } from 'src/app/controls/variable.control';
+import { CommandsApi, IArgType } from 'src/app/api/commands.api';
+import { CmdCtrl } from 'src/app/controls/cmd.control';
+import { VariableCtrl as VarCtrl } from 'src/app/controls/var.control';
 import { LoadingService } from 'src/app/services/loading.service';
 
 
@@ -16,41 +15,59 @@ import { LoadingService } from 'src/app/services/loading.service';
 })
 export class CommandsComponent {
 
-  IOptionType = IOptionType;
+  IOptionType = IArgType;
 
-  status$: Observable<VariableCtrl[]>
-  cmds$: Observable<string[]>
-  variables$ = new BehaviorSubject<VariableCtrl[]>([])
-  subcmds$: BehaviorSubject<SubCmdCtrl> | undefined
+  vars$: Observable<VarCtrl[]>
+  cmds$: Observable<CmdCtrl[]>
+  selectedCmd?: CmdCtrl
+  selectedVar?: VarCtrl
 
-  selectedCmd = new FormControl()
-  selectedSubCmd = new FormControl()
-  selectedVariable?: VariableCtrl
+  subvars$?: Observable<VarCtrl[]>
+  subcmds$?: Observable<CmdCtrl[]>
+  selectedSubCmd?: CmdCtrl
+  selectedSubVar?: VarCtrl
+
+  args$?: Observable<VarCtrl[]>
+  selectedArg?: VarCtrl
 
   constructor(
     public commandsApi: CommandsApi,
     public loadingService: LoadingService,
   ) {
-    this.status$ = this.commandsApi.readStatus$().pipe(
-      map((ivars) => ivars.map(ivar => new VariableCtrl(ivar)))
+    this.vars$ = this.commandsApi.readVariables$().pipe(
+      map((ivars) => ivars.map(ivar => new VarCtrl(ivar)))
     );
 
-    this.cmds$ = this.commandsApi.readModules$();
+    this.cmds$ = this.commandsApi.readCommands$().pipe(
+      map((ivars) => ivars.map(ivar => new CmdCtrl(ivar)))
+    );
   }
 
-  onCmdSubmit(subCmdName: string) {
-    this.commandsApi.runCommand$(subCmdName).subscribe();
+  onCmdSubmit(control: CmdCtrl) {
+    this.commandsApi.runCommand$(control.api()).subscribe();
+  }
+
+  onCmdSelect(control: CmdCtrl) {
+    this.subcmds$ = this.commandsApi.readModuleCommands$(control.nameFC.value).pipe(
+      map(cmds => cmds.map(cmd => new CmdCtrl(cmd))),
+      // tap(cmds => [this.selectedSubCmd] = cmds)
+    )
+
+    this.subvars$ = this.commandsApi.readModuleVariables$(control.nameFC.value).pipe(
+      map(vars => vars.map(v => new VarCtrl(v))),
+      // tap(vars => [this.selectedSubVar] = vars)
+    )
   }
 
-  onVarSubmit(varCtrl: VariableCtrl) {
-    this.commandsApi.setVariable$(varCtrl.api()).subscribe();
+  onSubCmdSelect(control: CmdCtrl) {
+    this.args$ = this.commandsApi.readModuleVariables$(control.nameFC.value).pipe(
+      map(vars => vars.map(v => new VarCtrl(v))),
+      // tap(vars => [this.selectedSubVar] = vars)
+    )
   }
 
-  onSelect(cmdNameFC: FormControl) {
-    this.commandsApi.getOptions$(cmdNameFC.value).subscribe(opts => {
-      this.variables$.next(opts.filter(iopt => iopt.type === IOptionType.variable).map(iopt => new VariableCtrl(iopt as IVariable)))
-      const [subCmds] = opts.filter(iopt => iopt.type === IOptionType.subcommand)
-      this.subcmds$ = new BehaviorSubject<SubCmdCtrl>(new SubCmdCtrl(subCmds as ISubCommands))
-    })
+  onVarSubmit(control: VarCtrl) {
+    control.nameFC = new FormControl(`${this.selectedCmd?.nameFC.value} ${this.selectedSubCmd?.nameFC.value} ${control.nameFC.value}`.trim())
+    this.commandsApi.setVariable$(control.api()).subscribe();
   }
 }

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

+import { FormControl, FormGroup } from '@angular/forms';
+import { ICommand } from '../api/commands.api';
+
+const enum CmdFCN {
+  name = 'name',
+}
+
+export class CmdCtrl extends FormGroup {
+
+  constructor(cmd: ICommand) {
+    super({});
+
+    this.addControl(CmdFCN.name, new FormControl(cmd.name));
+  }
+
+  api() {
+    const doc: ICommand = {
+      name: this.nameFC.value
+    };
+
+    return doc;
+  }
+
+  get nameFC() {
+    return this.get(CmdFCN.name) as FormControl;
+  }
+
+  set nameFC(fc: FormControl) {
+    this.setControl(CmdFCN.name, fc);
+  }
+}
+

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

-import { FormArray, FormControl } from '@angular/forms';
-import { ISubCommands } from '../api/commands.api';
-import { OptionsCtrl } from './options.control';
-
-const enum SubCmdsFCN {
-  names = 'names',
-}
-
-export class SubCmdCtrl extends OptionsCtrl {
-
-  constructor(isubs: ISubCommands) {
-    super(isubs);
-
-    this.addControl(SubCmdsFCN.names, new FormArray(isubs.name.map((name) => new FormControl(name))));
-  }
-
-  api() {
-    const doc: ISubCommands = {
-      type: this.type,
-      name: this.namesFA.value
-    };
-
-    return doc;
-  }
-
-  get namesFA() {
-    return this.get(SubCmdsFCN.names) as FormArray;
-  }
-
-  set namesFA(fa: FormArray) {
-    this.setControl(SubCmdsFCN.names, fa);
-  }
-}
-

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

-import { FormGroup } from "@angular/forms";
-import { IOption, IOptionType } from "../api/commands.api";
-
-export class OptionsCtrl extends FormGroup {
-
-  type: IOptionType
-
-  constructor(ioption: IOption) {
-    super({});
-
-    this.type = ioption.type
-  }
-}
\ No newline at end of file

common/utils/websrv/frontend/src/app/controls/variable.control.ts → common/utils/websrv/frontend/src/app/controls/var.control.ts

-import { FormControl } from '@angular/forms';
-import { IOptionType, IVariable } from '../api/commands.api';
-import { OptionsCtrl } from './options.control';
-
+import { FormControl, FormGroup } from '@angular/forms';
+import { IVariable } from '../api/commands.api';
 
 
 const enum VariablesFCN {
   name = 'name',
   value = "value",
+  type = "type",
   modifiable = "modifiable"
 }
 
 
-export class VariableCtrl extends OptionsCtrl {
+export class VariableCtrl extends FormGroup {
 
   constructor(ivar: IVariable) {
-    super(ivar);
+    super({});
 
     this.addControl(VariablesFCN.name, new FormControl(ivar.name));
     this.addControl(VariablesFCN.value, new FormControl(ivar.value));
+    this.addControl(VariablesFCN.type, new FormControl(ivar.type));
     this.addControl(VariablesFCN.modifiable, new FormControl(ivar.modifiable));
   }
 
   api() {
     const doc: IVariable = {
-      type: this.type,
       name: this.nameFC.value,
       value: this.valueFC.value,
+      type: this.typeFC.value,
       modifiable: this.modifiableFC.value
     };
 
@@ -48,6 +48,14 @@ export class VariableCtrl extends OptionsCtrl {
     this.setControl(VariablesFCN.value, control);
   }
 
+  get typeFC() {
+    return this.get(VariablesFCN.value) as FormControl;
+  }
+
+  set typeFC(control: FormControl) {
+    this.setControl(VariablesFCN.value, control);
+  }
+
   get modifiableFC() {
     return this.get(VariablesFCN.modifiable) as FormControl;
   }