setParam$

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

 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { environment } from 'src/environments/environment';
+import { Param, ParamFC } from '../controls/param.control';
 
 
 export interface IVariable {
@@ -72,12 +73,12 @@ export class CommandsApi {
 
     public setVariable$ = (variable: IVariable, moduleName?: string) => this.httpClient.post<IResp>(environment.backend + route + (moduleName ? ('/' + moduleName) : "") + '/variables/', variable);
 
-    public setParam$ = (moduleName: string, cmdName: string, colName: string, rawIndex: number, value: string) => this.httpClient.post<IResp>(environment.backend + route + '/' + moduleName + '/set',
+    public setParam$ = (param: Param) => this.httpClient.post<IResp>(environment.backend + route + '/' + param.moduleName + '/set',
         {
-            cmdName: cmdName,
-            colName: colName,
-            rawIndex: rawIndex,
-            value: value
+            cmdName: param.cmdName,
+            colName: param.col.name,
+            rawIndex: param.rawIndex,
+            value: param.value
         }
     );
 

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

-<app-nav></app-nav>
+<app-commands></app-commands>
\ No newline at end of file

common/utils/websrv/frontend/src/app/app.module.ts

@@ -31,14 +31,12 @@ import { AppComponent } from './app.component';
 import { CommandsComponent } from './components/commands/commands.component';
 import { ConfirmDialogComponent } from './components/confirm/confirm.component';
 import { ErrorDialogComponent } from './components/error-dialog/error-dialog.component';
-import { NavComponent } from './components/nav/nav.component';
 import { InterceptorProviders } from './interceptors/interceptors';
 import { LoadingService } from './services/loading.service';
 
 @NgModule({
   declarations: [
     AppComponent,
-    NavComponent,
     ErrorDialogComponent,
     CommandsComponent,
     ConfirmDialogComponent
@@ -48,29 +46,23 @@ import { LoadingService } from './services/loading.service';
     AppRoutingModule,
     BrowserAnimationsModule,
     HttpClientModule,
-    ClipboardModule,
     MatFormFieldModule,
     MatInputModule,
     ReactiveFormsModule,
-    MatChipsModule,
+    // MatChipsModule,
     MatProgressSpinnerModule,
-    MatIconModule,
     MatButtonModule,
     FlexLayoutModule,
-    MatDatepickerModule,
-    MatNativeDateModule,
     MatToolbarModule,
-    MatSidenavModule,
-    MatListModule,
+    // MatListModule,
     MatTableModule,
-    MatPaginatorModule,
     MatSelectModule,
     MatDialogModule,
     MatSnackBarModule,
     MatSlideToggleModule,
     MatGridListModule,
     MatCardModule,
-    MatMenuModule,
+    // MatMenuModule,
   ],
   providers: [
     // services

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

@@ -30,5 +30,5 @@ mat-form-field {
 }
 
 .dashboard-card-content {
-  text-align: center;
+  text-align: start;
 }
\ No newline at end of file

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

-<div *ngIf="vars$ | async as vars">
-  <h1 mat-dialog-title>Softmodem variables</h1>
+<div class="grid-container">
+  <mat-grid-list cols="2" rowHeight="200px">
+    <mat-grid-tile [colspan]="1" [rowspan]="2">
+      <mat-card class="dashboard-card">
+        <mat-card-header>
+          <mat-card-title>Softmodem variables</mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="dashboard-card-content">
+          <div *ngIf="vars$ | async as vars">
             <div *ngFor="let variable of vars">
               <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)">
+              <button mat-raised-button color="primary" [disabled]="!variable.modifiableFC.value"
+                (click)="onVarSubmit(variable)">
                 set
               </button>
             </div>
-</div>
-
-<div *ngIf="modules$ | async as modules" fxLaypout="row">
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </mat-grid-tile>
+
+    <mat-grid-tile [colspan]="1" [rowspan]="2">
+      <mat-card class="dashboard-card">
+        <mat-card-header>
+          <mat-card-title>Softmodem commands</mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="dashboard-card-content">
+          <div *ngIf="modules$ | async as modules" fxLaypout="row">
             <mat-form-field>
               <mat-label>Module</mat-label>
               <mat-select (selectionChange)="onModuleSelect($event.value)">
@@ -19,36 +36,44 @@
                 </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">
-      <h2 mat-dialog-title>Variables</h2>
-      <div *ngFor="let variable of subvars">
+          </div>
+          <div *ngIf="modulecmds$ | async as cmds">
+            <div *ngIf="cmds.length">
+              <div *ngFor="let cmd of cmds" fxLayoutGap="10px" fxLayoutAlign="start start">
+                <button mat-raised-button color="primary" (click)="onCmdSubmit(cmd)"> {{cmd.nameFC.value}} </button>
+              </div>
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </mat-grid-tile>
+
+    <mat-grid-tile *ngIf="modulevars$ | async as modulevars" [colspan]="1" [rowspan]="6">
+      <mat-card *ngIf="modulevars.length" class="dashboard-card">
+        <mat-card-header>
+          <mat-card-title>{{ selectedModule!.nameFC.value }} variables</mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="dashboard-card-content">
+          <div *ngFor="let variable of modulevars">
             <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)">
+              (click)="onModuleVarsubmit(variable)">
               set
             </button>
           </div>
-    </div>
-  </div>
-
-  <div *ngIf="cmds$ | async as cmds">
-    <div *ngIf="cmds.length">
-      <h2 mat-dialog-title>Commands</h2>
-      <div *ngFor="let cmd of cmds" fxLayoutGap="10px">
-        <button mat-raised-button color="primary" (click)="onCmdSubmit(cmd)"> {{cmd.nameFC.value}} </button>
-      </div>
-    </div>
-  </div>
+        </mat-card-content>
+      </mat-card>
+    </mat-grid-tile>
 
+    <mat-grid-tile *ngIf="selectedCmd" [colspan]="1" [rowspan]="10">
+      <mat-card class="dashboard-card">
+        <mat-card-header>
+          <mat-card-title>{{ selectedModule!.nameFC.value }} {{ selectedCmd.name }} </mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="dashboard-card-content">
 
           <mat-table mat-table [dataSource]="rows$" multiTemplateDataRows class="mat-elevation-z8">
 
@@ -65,10 +90,12 @@
               </mat-header-cell>
               <mat-cell *matCellDef="let row; dataIndex as rowIndex">
 
-        <div *ngIf="col.type === IOptionType.boolean; then toggle else default"></div>
+                <div *ngIf="col.type === IOptionType.boolean; then toggle else default"> </div>
+                <!-- <button mat-raised-button color="primary" (click)="onParamSubmit(row)"> set </button> -->
 
                 <ng-template #toggle>
-          <mat-slide-toggle [formControl]="row[colIndex]" [checked]="row[colIndex].value" [disabled]="!col.modifiable">
+                  <mat-slide-toggle [formControl]="row[colIndex]" [checked]="row[colIndex].value"
+                    [disabled]="!col.modifiable" (change)="onParamSubmit(row)">
                   </mat-slide-toggle>
                 </ng-template>
 
@@ -82,8 +109,13 @@
             </div>
 
             <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns" (keydown.enter)="onParamSubmit(row)"></mat-row>
 
           </mat-table>
 
+        </mat-card-content>
+      </mat-card>
+    </mat-grid-tile>
+
+  </mat-grid-list>
 </div>
\ No newline at end of file

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

@@ -4,9 +4,9 @@ import { of } from 'rxjs/internal/observable/of';
 import { map } from 'rxjs/internal/operators/map';
 import { mergeMap } from 'rxjs/internal/operators/mergeMap';
 import { filter } from 'rxjs/operators';
-import { CommandsApi, IArgType, IColumn } from 'src/app/api/commands.api';
+import { CommandsApi, IArgType, IColumn, ICommand } from 'src/app/api/commands.api';
 import { CmdCtrl } from 'src/app/controls/cmd.control';
-import { EntryFC } from 'src/app/controls/entry.control';
+import { Param, ParamFC } from 'src/app/controls/param.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';
@@ -24,19 +24,14 @@ export class CommandsComponent {
   vars$: Observable<VarCtrl[]>
   modules$: Observable<CmdCtrl[]>
   selectedModule?: CmdCtrl
-  // selectedVar?: VarCtrl
+  selectedCmd?: ICommand
 
-  subvars$?: Observable<VarCtrl[]>
-  cmds$?: Observable<CmdCtrl[]>
-  // selectedSubCmd?: CmdCtrl
-  // selectedSubVar?: VarCtrl
-
-  args$?: Observable<VarCtrl[]>
-  // selectedArg?: VarCtrl
+  modulevars$?: Observable<VarCtrl[]>
+  modulecmds$?: Observable<CmdCtrl[]>
 
   //table columns
   displayedColumns: string[] = []
-  rows$: Observable<EntryFC[][]> = new Observable<EntryFC[][]>()
+  rows$: Observable<ParamFC[][]> = new Observable<ParamFC[][]>()
   columns: IColumn[] = []
 
   constructor(
@@ -49,8 +44,7 @@ export class CommandsComponent {
     );
 
     this.modules$ = this.commandsApi.readCommands$().pipe(
-      map((cmds) => cmds.map(icmd => new CmdCtrl(icmd))),
-      // tap(controls => [this.selectedCmd] = controls)
+      map((cmds) => cmds.map(icmd => new CmdCtrl(icmd)))
     );
   }
 
@@ -59,22 +53,12 @@ export class CommandsComponent {
 
     this.selectedModule = control
 
-    this.cmds$ = this.commandsApi.readCommands$(`${control.nameFC.value}`).pipe(
+    this.modulecmds$ = this.commandsApi.readCommands$(`${control.nameFC.value}`).pipe(
       map(icmds => icmds.map(icmd => new CmdCtrl(icmd)))
     )
 
-    this.subvars$ = this.commandsApi.readVariables$(`${control.nameFC.value}`).pipe(
+    this.modulevars$ = this.commandsApi.readVariables$(`${control.nameFC.value}`).pipe(
       map(ivars => ivars.map(ivar => new VarCtrl(ivar))),
-      // tap(controls => [this.selectedSubVar] = 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)))
     )
   }
 
@@ -82,7 +66,7 @@ export class CommandsComponent {
     this.commandsApi.setVariable$(control.api()).subscribe();
   }
 
-  onSubVarSubmit(control: VarCtrl) {
+  onModuleVarsubmit(control: VarCtrl) {
     this.commandsApi.setVariable$(control.api(), `${this.selectedModule!.nameFC.value}`)
       .pipe(
         map(resp => this.dialogService.openRespDialog(resp))
@@ -90,9 +74,12 @@ export class CommandsComponent {
   }
 
   onCmdSubmit(control: CmdCtrl) {
+    this.selectedCmd = control.api()
 
     const obs = control.confirm
-      ? this.dialogService.openConfirmDialog(control.confirm).pipe(filter(confirmed => confirmed))
+      ? this.dialogService.openConfirmDialog(control.confirm).pipe(
+        filter(confirmed => confirmed)
+      )
       : of(null)
 
     this.rows$ = obs.pipe(
@@ -108,17 +95,27 @@ export class CommandsComponent {
         let rows = [];
 
         for (let i = 0; i < resp.table!.rows.length; i++) {
-          let row: EntryFC[] = []
+          let row: Param[] = []
 
           for (let j = 0; j < this.columns.length; j++) {
-            row[j] = new EntryFC(resp.table!.rows[i][j], this.columns[j].type)
+            row[j] = new Param(
+              resp.table!.rows[i][j],
+              this.columns[j],
+              j,
+              this.selectedModule!.nameFC.value,
+              this.selectedCmd!.name
+            )
           }
-          rows[i] = row
+          rows[i] = row.map(param => new ParamFC(param))
         }
         return rows
       })
     );
   }
 
+  onParamSubmit(row: ParamFC[]) {
+    row.map(paramFC => this.commandsApi.setParam$(paramFC.api()).subscribe());
+  }
+
 
 }
\ No newline at end of file

common/utils/websrv/frontend/src/app/components/nav/nav.component.css

-.sidenav-container {
-  height: 100%;
-}
-
-.sidenav {
-  width: 200px;
-}
-
-.sidenav .mat-toolbar {
-  background: inherit;
-}
-
-.mat-toolbar.mat-primary {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}

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

-<mat-sidenav-container class="sidenav-container">
-  <mat-sidenav #drawer class="sidenav" fixedInViewport [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
-    [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false">
-    <mat-nav-list>
-      <a mat-list-item routerLink="/commands" routerLinkActive="active">Commands</a>
-    </mat-nav-list>
-  </mat-sidenav>
-
-  <mat-sidenav-content>
-    <mat-toolbar>
-      <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
-
-        <ng-template #not_loading>
-          <button mat-icon-button (click)="drawer.toggle()">
-            <mat-icon>menu</mat-icon>
-          </button>
-          <h1>OAI SoftModem</h1>
-        </ng-template>
-        <ng-template #loading>
-          <mat-progress-spinner mode="indeterminate" diameter="40">
-          </mat-progress-spinner>
-        </ng-template>
-        <div fxLayout="row" fxLayoutAlign="start center">
-          <ng-container *ngIf="loadingService.isLoading$ | async; then loading; else not_loading">
-          </ng-container>
-        </div>
-      </mat-toolbar-row>
-    </mat-toolbar>
-
-    <router-outlet></router-outlet>
-  </mat-sidenav-content>
-</mat-sidenav-container>
\ No newline at end of file

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

-import { Component } from '@angular/core';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { Observable } from 'rxjs';
-import { map, shareReplay } from 'rxjs/operators';
-import { LoadingService } from 'src/app/services/loading.service';
-
-@Component({
-  selector: 'app-nav',
-  templateUrl: './nav.component.html',
-  styleUrls: ['./nav.component.css'],
-})
-export class NavComponent {
-  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
-    map((result) => result.matches),
-    shareReplay(),
-  );
-
-  constructor(
-    public loadingService: LoadingService, private breakpointObserver: BreakpointObserver) { }
-}

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/param.control.ts

+import { FormControl } from '@angular/forms';
+import { IArgType, IColumn } from '../api/commands.api';
+
+export class Param {
+
+  constructor(
+    public value: string,
+    public col: IColumn,
+    public rawIndex: number,
+    public moduleName: string,
+    public cmdName: string) { }
+}
+
+export class ParamFC extends FormControl {
+
+  constructor(public param: Param) {
+    super(param.value);
+  }
+
+  api() {
+    this.param.value = this.value
+    return this.param
+  }
+}
+

common/utils/websrv/frontend/src/environments/environment.ts

@@ -4,7 +4,8 @@
 
 export const environment = {
   production: false,
-  backend: 'http://10.133.10.152:8090'
+  backend: 'http://192.168.1.67:8090'
+  // backend: 'http://10.133.10.152:8090'
   // backend: 'http://10.130.163.206:8090'
 };