Dialog added to projects page

src/app/components/projects/projects.component.ts

@@ -20,6 +20,8 @@ import { ChooseNameDialogComponent } from './choose-name-dialog/choose-name-dial
 import { NavigationDialogComponent } from './navigation-dialog/navigation-dialog.component';
 import { ConfirmationBottomSheetComponent } from './confirmation-bottomsheet/confirmation-bottomsheet.component';
 import { ToasterService } from '../../services/toaster.service';
+import { ConfigureGns3VMDialogComponent } from '../servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component';
+import { ElectronService } from 'ngx-electron';
 
 @Component({
   selector: 'app-projects',
@@ -46,7 +48,8 @@ export class ProjectsComponent implements OnInit {
     public dialog: MatDialog,
     private router: Router,
     private bottomSheet: MatBottomSheet,
-    private toasterService: ToasterService
+    private toasterService: ToasterService,
+    private electronService: ElectronService
   ) {}
 
   ngOnInit() {
@@ -69,6 +72,22 @@ export class ProjectsComponent implements OnInit {
       });
 
     this.settings = this.settingsService.getAll();
+
+    let gns3vmConfig = localStorage.getItem('gns3vmConfig');
+    if (this.electronService.isElectronApp && gns3vmConfig!=='configured') {
+      const dialogRef = this.dialog.open(ConfigureGns3VMDialogComponent, {
+        width: '350px',
+        height: '120px',
+        autoFocus: false
+      });
+  
+      dialogRef.afterClosed().subscribe((answer: boolean) => {
+        if (answer) {
+          localStorage.setItem('gns3vmConfig', 'configured');
+          this.router.navigate(['/server', this.server.id, 'preferences', 'gns3vm']);
+        }
+      });
+    };
   }
 
   refresh() {

src/app/components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component.html

@@ -0,0 +1,7 @@
+<span class="message">{{message}}</span>
+<div mat-dialog-actions>
+  <button mat-button class="cancelButton" (click)="onNoClick()" color="accent">No</button>
+  <button mat-button class="confirmButton" (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">
+    Yes
+  </button>
+</div>

src/app/components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef} from '@angular/material';
+
+@Component({
+  selector: 'app-configure-gns3-vm-dialog',
+  templateUrl: 'configure-gns3vm-dialog.component.html',
+  styleUrls: ['configure-gns3vm-dialog.component.scss']
+})
+export class ConfigureGns3VMDialogComponent implements OnInit {
+  public message: string = 'Do you want to configure GNS3 VM?';
+  constructor(public dialogRef: MatDialogRef<ConfigureGns3VMDialogComponent>) {}
+
+  ngOnInit() {}
+
+  onNoClick(): void {
+    this.dialogRef.close(false);
+  }
+
+  onYesClick(): void {
+    this.dialogRef.close(true);
+  }
+}

src/app/components/servers/servers.component.ts

@@ -1,16 +1,16 @@
 import { Component, Inject, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { DataSource } from '@angular/cdk/collections';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
-
 import { Observable, merge, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
-
+import { Router } from '@angular/router';
 import { Server } from '../../models/server';
 import { ServerService } from '../../services/server.service';
 import { ServerDatabase } from '../../services/server.database';
 import { AddServerDialogComponent } from './add-server-dialog/add-server-dialog.component';
 import { ServerManagementService } from '../../services/server-management.service';
 
+
 @Component({
   selector: 'app-server-list',
   templateUrl: './servers.component.html',