Creating appliance service

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

@@ -0,0 +1,29 @@
+<h1 mat-dialog-title>Add new template</h1>
+
+<mat-horizontal-stepper [linear]="false" #stepper>
+    <mat-step [stepControl]="firstFormGroup">
+        <ng-template matStepLabel>Please select how you want to create new template</ng-template>
+
+        <mat-radio-group class="radio-group" aria-label="Sorting">
+            <mat-radio-button value="1" (click)="setFiletype('svg')" checked>SVG</mat-radio-button>
+            <mat-radio-button [disabled]="!isPngAvailable" value="2" (click)="setFiletype('png')">PNG</mat-radio-button>
+        </mat-radio-group>
+
+        <div>
+            <button mat-button matStepperNext>Next</button>
+        </div>
+    </mat-step>
+
+    <mat-step [stepControl]="secondFormGroup">
+        <ng-template matStepLabel>Appliances from server</ng-template>
+    </mat-step>
+
+    <mat-step>
+      <ng-template matStepLabel>Done</ng-template>
+
+      <div>
+        <button mat-button matStepperPrevious>Back</button>
+        <button mat-button (click)="stepper.reset()">Reset</button>
+      </div>
+    </mat-step>
+</mat-horizontal-stepper>

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

@@ -0,0 +1,25 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+import { Server } from '../../../models/server';
+import { Node } from '../../../cartography/models/node';
+import { Project } from '../../../models/project';
+
+@Component({
+    selector: 'app-new-template-dialog',
+    templateUrl: './new-template-dialog.component.html',
+    styleUrls: ['./new-template-dialog.component.scss']
+})
+export class NewTemplateDialogComponent implements OnInit {
+    @Input() server: Server;
+    @Input() project: Project;
+
+    constructor(
+        public dialogRef: MatDialogRef<NewTemplateDialogComponent>
+    ) {}
+
+    ngOnInit() {}
+
+    onCloseClick() {
+        this.dialogRef.close();
+    }
+}

src/app/components/project-map/project-map.component.html

@@ -59,6 +59,10 @@
           <mat-icon>info</mat-icon>
           <span>Go to system status</span>
         </button>
+        <button mat-menu-item (click)="addNewTemplate()">
+          <mat-icon>control_point</mat-icon>
+          <span>New template</span>
+        </button>
         <app-import-appliance [server]="server" [project]="project"></app-import-appliance>
         <button mat-menu-item [matMenuTriggerFor]="projectMenu">
           <mat-icon>settings</mat-icon>

src/app/components/project-map/project-map.component.ts

@@ -67,6 +67,7 @@ import { NodeAddedEvent } from '../template/template-list-dialog/template-list-d
 import { NotificationService } from '../../services/notification.service';
 import { ThemeService } from '../../services/theme.service';
 import { Title } from '@angular/platform-browser';
+import { NewTemplateDialogComponent } from './new-template-dialog/new-template-dialog.component';
 
 
 @Component({
@@ -850,6 +851,18 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     });
   }
 
+  public addNewTemplate() {
+    const dialogRef = this.dialog.open(NewTemplateDialogComponent, {
+      width: '1000px',
+      height: '500px',
+      autoFocus: false,
+      disableClose: true
+    });
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.project = this.project;
+  }
+
   public ngOnDestroy() {
     this.title.setTitle('GNS3 Web UI');
     this.drawingsDataSource.clear();