ing

src/app/app.component.html

@@ -5,4 +5,42 @@
       <router-outlet></router-outlet>
     </div>
   </div>
-</div>
+</div>
+
+
+<p-dialog header="About" [(visible)]="displayAbout" [modal]="true" [responsive]="true" [width]="350" [minWidth]="200"
+  [minY]="70" [closable]="false">
+  <app-menu-about></app-menu-about>
+
+  <p-footer>
+    <button type="button" pButton icon="pi pi-check" (click)="displayAbout=false" label="Yes"></button>
+    <button type="button" pButton icon="pi pi-close" (click)="displayAbout=false" label="No" class="ui-button-secondary"></button>
+  </p-footer>
+</p-dialog>
+
+<p-dialog header="Export as CSV" [(visible)]="displayExportCSV" [modal]="true" [responsive]="true" [width]="350"
+  [minWidth]="200" [minY]="70" [closable]="false">
+  <app-menu-export-csv></app-menu-export-csv>
+  <p-footer>
+    <button type="button" pButton icon="pi pi-check" (click)="displayExportCSV=false" label="Yes"></button>
+    <button type="button" pButton icon="pi pi-close" (click)="displayExportCSV=false" label="No" class="ui-button-secondary"></button>
+  </p-footer>
+</p-dialog>
+
+<p-dialog header="Preferences" [(visible)]="displayPreferences" [modal]="true" [responsive]="true" [width]="350"
+  [minWidth]="200" [minY]="70" [closable]="false">
+  <app-menu-preferences></app-menu-preferences>
+  <p-footer>
+    <button type="button" pButton icon="pi pi-check" (click)="displayPreferences=false" label="Yes"></button>
+    <button type="button" pButton icon="pi pi-close" (click)="displayPreferences=false" label="No" class="ui-button-secondary"></button>
+  </p-footer>
+</p-dialog>
+
+<p-dialog header="Print" [(visible)]="displayPrint" [modal]="true" [responsive]="true" [width]="350" [minWidth]="200"
+  [minY]="70" [closable]="false">
+  <app-menu-print></app-menu-print>
+  <p-footer>
+    <button type="button" pButton icon="pi pi-check" (click)="displayPrint=false" label="Yes"></button>
+    <button type="button" pButton icon="pi pi-close" (click)="displayPrint=false" label="No" class="ui-button-secondary"></button>
+  </p-footer>
+</p-dialog>

src/app/app.component.ts

@@ -1,17 +1,29 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+
+import { of, Subscription } from 'rxjs';
+import { map, catchError, take } from 'rxjs/operators';
+
 import { ElectronProxyService } from '../commons/service/electron-proxy.service';
 import { ProbeService } from '../commons/service/probe.service';
+import { MenuEvent } from '../commons/type';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, OnDestroy {
   title = 'scanner-app';
   showTitleBar: boolean;
 
+  menuSubscription: Subscription;
+  displayAbout: boolean;
+  displayExportCSV: boolean;
+  displayPreferences: boolean;
+  displayPrint: boolean;
+
   public constructor(
+    private changeDetector: ChangeDetectorRef,
     private electronProxyService: ElectronProxyService,
     private probeService: ProbeService,
   ) {
@@ -22,5 +34,40 @@ export class AppComponent implements OnInit {
   ngOnInit(): void {
     // this.probeService.connect();
     this.electronProxyService.sendReady(performance.now());
+    this.menuSubscription = this.electronProxyService.menuObservable()
+      .pipe(
+        map((name: MenuEvent) => {
+          switch (name) {
+            case 'show-about':
+              this.displayAbout = true;
+              break;
+            case 'show-export-csv':
+              this.displayExportCSV = true;
+              break;
+            case 'show-preferences':
+              this.displayPreferences = true;
+              break;
+            case 'show-print':
+              this.displayPrint = true;
+              break;
+            default:
+              break;
+          }
+          this.changeDetector.detectChanges();
+        }),
+        catchError(error => {
+          return of();
+        }),
+      )
+      .subscribe();
+
   }
+
+  ngOnDestroy(): void {
+    this.menuSubscription.unsubscribe();
+  }
+
+  // onMenuClosed(event) {
+  //   this.changeDetector.markForCheck();
+  // }
 }

src/commons/component/host-detail.component.ts

@@ -1,9 +1,12 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { Host } from '@overflow/model/discovery';
-import { ProbeService } from '../service/probe.service';
-import { map, catchError, take } from 'rxjs/operators';
-import { PingResult } from '@overflow/model/ping';
+
 import { of } from 'rxjs';
+import { map, catchError, take } from 'rxjs/operators';
+
+import { Host } from '@overflow/model/discovery';
+import { PingResult } from '@overflow/model/ping';
+
+import { ProbeService } from '../service/probe.service';
 
 
 @Component({

src/commons/component/index.ts

@@ -5,11 +5,24 @@ import { ZoneDetailComponent } from './zone-detail.component';
 import { HostDetailComponent } from './host-detail.component';
 import { ServiceDetailComponent } from './service-detail.component';
 
+import {
+  AboutComponent,
+  ExportCSVComponent,
+  PreferencesComponent,
+  PrintComponent,
+} from './menu';
+
+
 export const COMPONENTS = [
   NicDropdownComponent,
   ScannerSettingDropdownComponent,
   NodeDetailComponent,
   ZoneDetailComponent,
   HostDetailComponent,
-  ServiceDetailComponent
+  ServiceDetailComponent,
+  AboutComponent,
+  ExportCSVComponent,
+  PreferencesComponent,
+  PrintComponent,
+
 ];

src/commons/component/menu/about.component.html

@@ -0,0 +1,3 @@
+<div>
+  About
+</div>

src/commons/component/menu/about.component.ts

@@ -0,0 +1,15 @@
+import { Component, } from '@angular/core';
+
+@Component({
+  selector: 'app-menu-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.scss'],
+})
+export class AboutComponent {
+
+  constructor(
+  ) {
+  }
+
+
+}

src/commons/component/menu/export-csv.component.html

@@ -0,0 +1,3 @@
+<div>
+  Export CSV
+</div>

src/commons/component/menu/export-csv.component.ts

@@ -0,0 +1,15 @@
+import { Component, } from '@angular/core';
+
+@Component({
+  selector: 'app-menu-export-csv',
+  templateUrl: './export-csv.component.html',
+  styleUrls: ['./export-csv.component.scss'],
+})
+export class ExportCSVComponent {
+
+  constructor(
+  ) {
+  }
+
+
+}

src/commons/component/menu/index.ts

@@ -0,0 +1,4 @@
+export * from './about.component';
+export * from './export-csv.component';
+export * from './preferences.component';
+export * from './print.component';

src/commons/component/menu/preferences.component.html

@@ -0,0 +1,3 @@
+<div>
+  Preferences
+</div>

src/commons/component/menu/preferences.component.ts

@@ -0,0 +1,15 @@
+import { Component, } from '@angular/core';
+
+@Component({
+  selector: 'app-menu-preferences',
+  templateUrl: './preferences.component.html',
+  styleUrls: ['./preferences.component.scss'],
+})
+export class PreferencesComponent {
+
+  constructor(
+  ) {
+  }
+
+
+}

src/commons/component/menu/print.component.html

@@ -0,0 +1,3 @@
+<div>
+  Print
+</div>

src/commons/component/menu/print.component.ts

@@ -0,0 +1,15 @@
+import { Component, } from '@angular/core';
+
+@Component({
+  selector: 'app-menu-print',
+  templateUrl: './print.component.html',
+  styleUrls: ['./print.component.scss'],
+})
+export class PrintComponent {
+
+  constructor(
+  ) {
+  }
+
+
+}

src/commons/service/electron-proxy.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
+import { Observable, Subject, of } from 'rxjs';
 import { catchError, exhaustMap, map, tap, take } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { ipcRenderer } from 'electron';
@@ -12,18 +12,27 @@ import { LaunchService } from './launch.service';
   providedIn: 'root'
 })
 export class ElectronProxyService {
+  private menuSubject: Subject<MenuEvent>;
+
   public constructor(
     private store: Store<any>,
     private launchService: LaunchService
   ) {
+    this.menuSubject = new Subject<MenuEvent>();
+
     this.bindIpcEventHandlers();
   }
 
+  public menuObservable(): Observable<MenuEvent> {
+    return this.menuSubject.asObservable();
+  }
+
   private bindIpcEventHandlers(): void {
     ipcRenderer.on(
       'menu-event',
       (event: Electron.IpcMessageEvent, { name }: { name: MenuEvent }) => {
         console.log(`menu: ${name}`);
+        this.menuSubject.next(name);
       }
     );