Settings for appliances added

src/app/components/project-map/new-template-dialog/new-template-dialog.component.html

@@ -103,14 +103,60 @@
                 [uploader]="uploader"/>
             <button mat-raised-button color="primary" (click)="file.click()">Click to import appliance</button>
         </mat-card>
+
+        <div>
+            <button mat-button matStepperPrevious>Back</button>
+            <button mat-button (click)="onCloseClick()">Cancel</button>
+        </div>
     </mat-step>
 
-    <mat-step>
-      <ng-template matStepLabel>Done</ng-template>
+    <mat-step *ngIf="applianceToInstall">
+        <ng-template matStepLabel>{{secondActionTitle}}</ng-template>
 
-      <div>
-        <button mat-button matStepperPrevious>Back</button>
-        <button mat-button (click)="stepper.reset()">Reset</button>
-      </div>
+        <mat-card [hidden]="!(action==='install')">
+            <div>
+                Server type<br/>
+                <mat-radio-group class="radio-group">
+                    <mat-radio-button [disabled]="true" class="radio-button" value="1" (click)="setServerType('local')">Install the appliance locally</mat-radio-button>
+                    <mat-radio-button class="radio-button" value="2" checked (click)="setServerType('gns3 vm')">Install the appliance on the GNS3 VM</mat-radio-button>
+                </mat-radio-group>
+            </div>
+            <div>
+                Qemu binary<br/>
+                <mat-select
+                    class="selection-group"
+                    placeholder="Qemu binary"
+                    [(ngModel)]="selectedBinary"
+                    [ngModelOptions]="{standalone: true}">
+                    <mat-option *ngFor="let binary of qemuBinaries" [value]="binary">
+                        {{binary.path}}
+                    </mat-option>
+                </mat-select>
+            </div>
+            <div>
+                Install required files
+                <mat-list>
+                    <mat-list-item *ngFor="let image of applianceToInstall.images">
+                      <div class="list-item">
+                        <div>
+                            {{image.filename}}
+                        </div>
+                        <div>
+                            <button class="button" mat-raised-button (click)="importImage(image)">Import</button>
+                            <button class="button" mat-raised-button color="primary" (click)="downloadImage(image)">Download</button>
+                        </div>
+                      </div>
+                    </mat-list-item>
+                </mat-list>
+            </div>
+            <button class="create-button" mat-raised-button color="primary" (click)="create()">
+                Create
+            </button>
+        </mat-card>
+
+        <div>
+            <button mat-button matStepperPrevious>Back</button>
+            <button mat-button (click)="onCloseClick()">Cancel</button>
+        </div>
     </mat-step>
 </mat-horizontal-stepper>

src/app/components/project-map/new-template-dialog/new-template-dialog.component.scss

@@ -37,3 +37,26 @@
 .element-row.expanded {
     border-bottom-color: transparent;
 }
+
+.list-item {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.button {
+    margin-left: 10px;
+}
+
+.create-button {
+    width: 100%;
+}
+
+.radio-button {
+    width: 50%;
+    padding-top: 20px;
+}
+
+.selection-group {
+    padding-bottom: 20px;
+}

src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core';
-import { MatDialogRef, Sort, MatTableDataSource, MatPaginator, MatDialog } from '@angular/material';
+import { MatDialogRef, Sort, MatTableDataSource, MatPaginator, MatDialog, MatStepper, MatSelectionList, MatSelectionListChange } from '@angular/material';
 import { Server } from '../../../models/server';
 import { Node } from '../../../cartography/models/node';
 import { Project } from '../../../models/project';
@@ -9,6 +9,8 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
 import { FileUploader, FileItem, ParsedResponseHeaders } from 'ng2-file-upload';
 import { ToasterService } from '../../../services/toaster.service';
 import { ApplianceInfoDialogComponent } from './appliance-info-dialog/appliance-info-dialog.component';
+import { QemuBinary } from '../../../models/qemu/qemu-binary';
+import { QemuService } from '../../../services/qemu.service';
 
 @Component({
     selector: 'app-new-template-dialog',
@@ -30,10 +32,19 @@ export class NewTemplateDialogComponent implements OnInit {
 
     public action: string = 'install';
     public actionTitle: string = 'Install appliance from server';
+    public secondActionTitle: string = 'Appliance settings';
 
     public searchText: string = '';
     public allAppliances: Appliance[] = [];
     public appliances: Appliance[] = [];
+    public applianceToInstall: Appliance;
+    public selectedImages: any[];
+
+    private isGns3VmChosen = true;
+    private isLocalComputerChosen = false;
+
+    public qemuBinaries: QemuBinary[] = [];
+    public selectedBinary: QemuBinary;
 
     public categories: string[] = ['all categories', 'router', 'multilayer_switch', 'guest', 'firewall'];
     public category: string = 'all categories';
@@ -42,12 +53,14 @@ export class NewTemplateDialogComponent implements OnInit {
     public dataSource: MatTableDataSource<Appliance>;
 
     @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+    @ViewChild('stepper', {static: true}) stepper: MatStepper;
 
     constructor(
         public dialogRef: MatDialogRef<NewTemplateDialogComponent>,
         private applianceService: ApplianceService,
         private changeDetector: ChangeDetectorRef,
         private toasterService: ToasterService,
+        private qemuService: QemuService,
         public dialog: MatDialog
     ) {}
 
@@ -65,6 +78,10 @@ export class NewTemplateDialogComponent implements OnInit {
             this.dataSource.paginator = this.paginator;
         });
 
+        this.qemuService.getBinaries(this.server).subscribe((binaries) => {
+            this.qemuBinaries = binaries;
+        });
+
         this.uploader =  new FileUploader({});
         this.uploader.onAfterAddingFile = file => {
             file.withCredentials = false;
@@ -130,6 +147,16 @@ export class NewTemplateDialogComponent implements OnInit {
         }
     }
 
+    setServerType(serverType: string) {
+        if (serverType === 'gns3 vm') {
+            this.isGns3VmChosen = true;
+            this.isLocalComputerChosen = false;
+        } else {
+            this.isGns3VmChosen = false;
+            this.isLocalComputerChosen = true;
+        }
+    }
+
     sortData(sort: Sort) {
         if (!sort.active || sort.direction === '') return;
 
@@ -150,17 +177,24 @@ export class NewTemplateDialogComponent implements OnInit {
         this.dialogRef.close();
     }
 
-    install(object: any) {
-        console.log(object);
+    install(object: Appliance) {
+        this.applianceToInstall = object;
+        setTimeout(() => {
+            this.stepper.next();
+        }, 100);
     }
 
-    showInfo(object: any) {
+    showInfo(object: Appliance) {
         let dialogRef = this.dialog.open(ApplianceInfoDialogComponent, {
             width: '250px',
             data: {appliance: object}
         });
         dialogRef.componentInstance.appliance = object;
     }
+
+    create() {
+
+    }
 }
 
 function compareNames(a: string, b: string, isAsc: boolean) {