Skip to content

O
OpenXG-RAN
Commit 51ce2fb1 authored by El Mghazli Yacine's avatar El Mghazli Yacine
Browse files
Options

setParam$

parent 4ca7dafb
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 210 deletions
common/utils/websrv/frontend/src/app/api/commands.api.ts
View file @ 51ce2fb1
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
View file @ 51ce2fb1
<app-nav></app-nav>
<app-commands></app-commands>
\ No newline at end of file
common/utils/websrv/frontend/src/app/app.module.ts
View file @ 51ce2fb1
......@@ -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
View file @ 51ce2fb1
......@@ -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
View file @ 51ce2fb1
<div *ngIf="vars$ | async as vars">
<h1 mat-dialog-title>Softmodem variables</h1>
<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)">
set
</button>
</div>
</div>
<div *ngIf="modules$ | async as modules" fxLaypout="row">
<mat-form-field>
<mat-label>Module</mat-label>
<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">
<h2 mat-dialog-title>Variables</h2>
<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)="onSubVarSubmit(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-table mat-table [dataSource]="rows$" multiTemplateDataRows class="mat-elevation-z8">
<!-- For anyone who has set the multiTemplateDataRows property of mat-table to true,
<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)">
set
</button>
</div>
</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)">
<mat-option *ngFor="let module of modules" [value]="module"> {{ module.nameFC.value }}
</mat-option>
</mat-select>
</mat-form-field>
</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)="onModuleVarsubmit(variable)">
set
</button>
</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">
<!-- 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 *ngFor="let col of columns; index as colIndex" matColumnDef="{{col.name}}">
<mat-header-cell *matHeaderCellDef>
<div>
<h4>{{ col.name }}</h4>
</div>
</mat-header-cell>
<mat-cell *matCellDef="let row; dataIndex as rowIndex">
<div *ngFor="let col of columns; index as colIndex" matColumnDef="{{col.name}}">
<mat-header-cell *matHeaderCellDef>
<div>
<h4>{{ col.name }}</h4>
</div>
</mat-header-cell>
<mat-cell *matCellDef="let row; dataIndex as rowIndex">
<div *ngIf="col.type === IOptionType.boolean; then toggle else default"> </div>
<!-- <button mat-raised-button color="primary" (click)="onParamSubmit(row)"> set </button> -->
<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" (change)="onParamSubmit(row)">
</mat-slide-toggle>
</ng-template>
<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>
<ng-template #default>
<mat-form-field>
<input matInput [formControl]="row[colIndex]" [disabled]="!col.modifiable" />
</mat-form-field>
</ng-template>
</mat-cell>
</div>
</mat-cell>
</div>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (keydown.enter)="onParamSubmit(row)"></mat-row>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
</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
View file @ 51ce2fb1
......@@ -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 deleted 100644 → 0
View file @ 4ca7dafb
.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 deleted 100644 → 0
View file @ 4ca7dafb
<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 deleted 100644 → 0
View file @ 4ca7dafb
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 deleted 100644 → 0
View file @ 4ca7dafb
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 0 → 100644
View file @ 51ce2fb1
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
View file @ 51ce2fb1
......@@ -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'
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment