confirm dialog before sending cmd

common/utils/websrv/frontend/package.json

@@ -5,7 +5,7 @@
     "lint": "ng lint",
     "build": "ng build",
     "dev": "ng serve --configuration=development",
-    "prod": "ng serve  --configuration=production"
+    "prod": "ng serve --configuration=production"
   },
   "private": true,
   "dependencies": {

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

@@ -29,6 +29,7 @@ import { CommandsApi } from './api/commands.api';
 import { AppRoutingModule } from './app-routing.module';
 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';
@@ -40,6 +41,7 @@ import { LoadingService } from './services/loading.service';
     NavComponent,
     ErrorDialogComponent,
     CommandsComponent,
+    ConfirmDialogComponent
   ],
   imports: [
     BrowserModule,

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 { tap, mergeMap, filter } from 'rxjs/operators';
 import { CommandsApi, IArgType, ILog } from 'src/app/api/commands.api';
 import { CmdCtrl } from 'src/app/controls/cmd.control';
 import { VarCtrl } from 'src/app/controls/var.control';
@@ -92,16 +92,19 @@ export class CommandsComponent {
   }
 
   onCmdSubmit(control: CmdCtrl) {
-    this.logs$ = this.commandsApi.runCommand$(control.api(), `${this.selectedModule!.nameFC.value}`).pipe(
+    this.logs$ = this.dialogService.openConfirmDialog().pipe(
+      mergeMap(() => this.commandsApi.runCommand$(control.api(), `${this.selectedModule!.nameFC.value}`)),
       tap(resp => this.success('runCommand ' + control.nameFC.value + ' OK', resp.display!.join("</p><p>"))),
       map(iresp => iresp.logs!)
     );
   }
 
-  private success = (mess: string, str: string) => this.dialogService.openDialog({
-    title: mess,
-    body: str,
-  });
+  private success = (mess: string, str: string) => {
+    return this.dialogService.openDialog({
+      title: mess,
+      body: str,
+    })
+  };
 
 
 }
\ No newline at end of file

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

+<h1>Really ?</h1>
+
+<div fxLayoutGap="10px" mat-dialog-actions fxLayout="row" fxLayoutAlign="center start">
+    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Ok</button>
+    <button mat-button (click)="onNoClick()">Cancel</button>
+</div>
\ No newline at end of file

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

+/* eslint-disable @typescript-eslint/naming-convention */
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-confirm',
+  templateUrl: './confirm.component.html',
+  styleUrls: ['./confirm.component.css']
+})
+export class ConfirmDialogComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<void>
+  ) { }
+
+  onNoClick() {
+    this.dialogRef.close();
+  }
+}
+

common/utils/websrv/frontend/src/app/services/dialog.service.ts

 import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { of } from 'rxjs/internal/observable/of';
+import { tap } from 'rxjs/internal/operators/tap';
+import { ConfirmDialogComponent } from '../components/confirm/confirm.component';
 import { ErrorDialogComponent } from '../components/error-dialog/error-dialog.component';
 
 @Injectable({
@@ -39,4 +42,18 @@ export class DialogService {
       verticalPosition: 'bottom',
     });
   }
+
+  openConfirmDialog() {
+    if (this.isDialogOpen) {
+      return of(undefined);
+    }
+
+    this.isDialogOpen = true;
+
+    return this._dialog.open(ConfirmDialogComponent, {
+      width: '300px'
+    })
+      .afterClosed()
+      .pipe(tap(() => this.isDialogOpen = false));
+  }
 }