Fixes after review

BuilInTemplates,
EthernetHubs
EthernetSwitches,
CloudNodes modificated, back and cancel buttons added

src/app/app.module.ts

@@ -159,6 +159,8 @@ import { CopyQemuVmTemplateComponent } from './components/preferences/qemu/copy-
 import { CopyIosTemplateComponent } from './components/preferences/dynamips/copy-ios-template/copy-ios-template.component';
 import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component';
 import { CopyDockerTemplateComponent } from './components/preferences/docker/copy-docker-template/copy-docker-template.component';
+import { EmptyTemplatesListComponent } from './components/preferences/common/empty-templates-list/empty-templates-list.component';
+import { SymbolsMenuComponent } from './components/preferences/common/symbols-menu/symbols-menu.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -257,7 +259,9 @@ if (environment.production) {
     CopyQemuVmTemplateComponent,
     CopyIosTemplateComponent,
     CopyIouTemplateComponent,
-    CopyDockerTemplateComponent
+    CopyDockerTemplateComponent,
+    EmptyTemplatesListComponent,
+    SymbolsMenuComponent
   ],
   imports: [
     BrowserModule,

src/app/components/preferences/built-in/built-in-preferences.component.html

@@ -2,25 +2,20 @@
     <div class="default-header">
         <div class="row">
             <h1 class="col">Built-in preferences</h1>
+            <button class="top-button" class="cancel-button" routerLink="/server/{{serverId}}/preferences" mat-button>Back</button>
         </div>
     </div>
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-nav-list>
-                <mat-list-item>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/builtin/ethernet-hubs">
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/builtin/ethernet-hubs">
                     Ethernet hubs
-                    </button>
                 </mat-list-item>
-                <mat-list-item>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/builtin/ethernet-switches">
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/builtin/ethernet-switches">
                     Ethernet switches
-                    </button>
                 </mat-list-item>
-                <mat-list-item>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/builtin/cloud-nodes">
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/builtin/cloud-nodes">
                     Cloud nodes
-                    </button>
                 </mat-list-item>
             </mat-nav-list>
         </div>

src/app/components/preferences/built-in/built-in-preferences.component.ts

@@ -1,13 +1,11 @@
 import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
-import { ServerService } from '../../../services/server.service';
-import { switchMap } from 'rxjs/operators';
 
 
 @Component({
     selector: 'app-built-in-preferences',
     templateUrl: './built-in-preferences.component.html',
-    styleUrls: ['./built-in-preferences.component.scss']
+    styleUrls: ['./built-in-preferences.component.scss', '../preferences.component.scss']
 })
 export class BuiltInPreferencesComponent implements OnInit {
     public serverId: string = "";

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.html

@@ -5,10 +5,15 @@
         </div>
     </div>
     <div class="default-content">
-        <mat-form-field class="row">
+        <mat-card class="matCard">
-            <input matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
+            <form [formGroup]="formGroup">
+                <mat-form-field class="form-field">
+                    <input formControlName="templateName" matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
                 </mat-form-field>
+            </form>
+        </mat-card>
         <div class="buttons-bar">
+            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
             <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
         </div>
     </div>

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.scss

@@ -1,3 +0,0 @@
-.row {
-    width: 100%;
-}

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts

@@ -7,16 +7,18 @@ import { v4 as uuid } from 'uuid';
 import { TemplateMocksService } from '../../../../../services/template-mocks.service';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { CloudTemplate } from '../../../../../models/templates/cloud-template';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 
 
 @Component({
     selector: 'app-cloud-nodes-add-template',
     templateUrl: './cloud-nodes-add-template.component.html',
-    styleUrls: ['./cloud-nodes-add-template.component.scss']
+    styleUrls: ['./cloud-nodes-add-template.component.scss', '../../../preferences.component.scss']
 })
 export class CloudNodesAddTemplateComponent implements OnInit {
     server: Server;
     templateName: string = '';
+    formGroup: FormGroup;
     
     constructor(
         private route: ActivatedRoute,
@@ -24,8 +26,13 @@ export class CloudNodesAddTemplateComponent implements OnInit {
         private builtInTemplatesService: BuiltInTemplatesService,
         private router: Router,
         private toasterService: ToasterService,
-        private templateMocksService: TemplateMocksService
+        private templateMocksService: TemplateMocksService,
-    ) {}
+        private formBuilder: FormBuilder
+    ) {
+        this.formGroup = this.formBuilder.group({
+            templateName: new FormControl('', Validators.required)
+        });
+    }
 
     ngOnInit() {
         const server_id = this.route.snapshot.paramMap.get("server_id");
@@ -34,8 +41,12 @@ export class CloudNodesAddTemplateComponent implements OnInit {
         });
     }
 
+    goBack() {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'cloud-nodes']);
+    }
+
     addTemplate() {
-        if (this.templateName) {
+        if (!this.formGroup.invalid) {
             let cloudTemplate: CloudTemplate;
 
             this.templateMocksService.getCloudNodeTemplate().subscribe((template: CloudTemplate) => {
@@ -46,7 +57,7 @@ export class CloudNodesAddTemplateComponent implements OnInit {
             cloudTemplate.name = this.templateName;
 
             this.builtInTemplatesService.addTemplate(this.server, cloudTemplate).subscribe((cloudNodeTemplate) => {
-                this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'cloud-nodes']);
+                this.goBack();
             });
         } else {
             this.toasterService.error(`Fill all required fields`);

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.html

@@ -12,26 +12,26 @@
                         General
                     </mat-panel-title>
                 </mat-expansion-panel-header>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="cloudNodeTemplate.name" 
                         placeholder="Template name">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="cloudNodeTemplate.default_name_format" 
                         placeholder="Default name format">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="cloudNodeTemplate.symbol" 
                         placeholder="Symbol">
                 </mat-form-field>
-                <button mat-raised-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
+                <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <mat-select 
                         placeholder="Category" 
                         [(ngModel)]="cloudNodeTemplate.category">
@@ -49,19 +49,19 @@
                             </mat-option>
                     </mat-select>
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="cloudNodeTemplate.remote_console_host" 
                         placeholder="Console host">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="cloudNodeTemplate.remote_console_port" 
                         placeholder="Console port">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="cloudNodeTemplate.remote_console_http_path" 
@@ -74,8 +74,8 @@
                         Ethernet interfaces
                     </mat-panel-title>
                 </mat-expansion-panel-header>
-                <div class="row" *ngFor="let port of portsMappingEthernet">
+                <div class="form-field" *ngFor="let port of portsMappingEthernet">
-                    <div class="row">{{port.name}}</div><br/><br/>
+                    <div class="form-field">{{port.name}}</div><br/><br/>
                 </div>
                 <mat-form-field class="select">
                     <mat-select 
@@ -87,7 +87,7 @@
                             </mat-option>
                     </mat-select>
                 </mat-form-field>
-                <button mat-raised-button class="row" (click)="onAddEthernetInterface()">Add</button> 
+                <button mat-button class="form-field" (click)="onAddEthernetInterface()">Add</button> 
             </mat-expansion-panel>
             <mat-expansion-panel>
                 <mat-expansion-panel-header>
@@ -95,16 +95,16 @@
                         TAP interfaces
                     </mat-panel-title>
                 </mat-expansion-panel-header>
-                <div class="row" *ngFor="let port of portsMappingTap">
+                <div class="form-field" *ngFor="let port of portsMappingTap">
-                    <div class="row">{{port.name}}</div><br/><br/>
+                    <div class="form-field">{{port.name}}</div><br/><br/>
                 </div>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="tapInterface" 
                         placeholder="TAP interface">
                 </mat-form-field>
-                <button mat-raised-button class="row" (click)="onAddTapInterface()">Add</button> 
+                <button mat-button class="form-field" (click)="onAddTapInterface()">Add</button> 
             </mat-expansion-panel>
             <mat-expansion-panel>
                 <mat-expansion-panel-header>
@@ -112,7 +112,7 @@
                         UDP tunnels
                     </mat-panel-title>
                 </mat-expansion-panel-header>
-                <table class="table" mat-table [dataSource]="dataSourceUdp">
+                <table *ngIf="dataSourceUdp.length" class="table" mat-table [dataSource]="dataSourceUdp">
                     <ng-container matColumnDef="name">
                         <th mat-header-cell *matHeaderCellDef> Name </th>
                         <td mat-cell *matCellDef="let element"> {{element.name}} </td>
@@ -135,47 +135,39 @@
                     
                     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-                </table><br/>
+                </table>
-                <mat-form-field class="row">
+                <br *ngIf="dataSourceUdp.length"/>
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="newPort.name" 
                         placeholder="Name">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="number" 
                         [(ngModel)]="newPort.lport" 
                         placeholder="Local port">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="newPort.rhost" 
                         placeholder="Remote host">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="number" 
                         [(ngModel)]="newPort.rport" 
                         placeholder="Remote port">
                 </mat-form-field>
-                <button mat-raised-button class="row" (click)="onAddUdpInterface()">Add</button>
+                <button mat-button class="form-field" (click)="onAddUdpInterface()">Add</button>
             </mat-expansion-panel>
         </mat-accordion>
         <div class="buttons-bar">
+            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
             <button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
         </div>
     </div>
 </div>
-<div class="content" class="configurator" *ngIf="isSymbolSelectionOpened">
+<app-symbols-menu *ngIf="isSymbolSelectionOpened && cloudNodeTemplate" [server]="server" [symbol]="cloudNodeTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Symbol selection</h1>
-            <button class="top-button" (click)="chooseSymbol()" mat-raised-button color="primary">Save</button>
-        </div>
-    </div>
-    <div class="default-content">
-        <app-symbols [server]="server" [symbol]="cloudNodeTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
-    </div>
-</div>

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.scss

@@ -1,34 +0,0 @@
-.row {
-    width: 100%;
-    margin-left: 0px;
-}
-
-.select {
-    width: 100%;
-}
-
-th {
-    border: 0px!important;
-}
-
-th.mat-header-cell {
-    padding-bottom: 15px;
-}
-
-td.mat-cell {
-    padding-top: 15px;
-}
-
-.shadowed {
-    display: none;
-    transition: 0.25s;
-}
-
-.top-button {
-    height: 36px;
-    margin-top: 22px
-}
-
-.symbolSelectionButton {
-    width: 100%;
-}

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
 import { Server } from '../../../../../models/server';
 import { ToasterService } from '../../../../../services/toaster.service';
@@ -12,7 +12,7 @@ import { BuiltInTemplatesConfigurationService } from '../../../../../services/bu
 @Component({
     selector: 'app-cloud-nodes-template-details',
     templateUrl: './cloud-nodes-template-details.component.html',
-    styleUrls: ['./cloud-nodes-template-details.component.scss']
+    styleUrls: ['./cloud-nodes-template-details.component.scss', '../../../preferences.component.scss']
 })
 export class CloudNodesTemplateDetailsComponent implements OnInit {
     server: Server;
@@ -38,7 +38,8 @@ export class CloudNodesTemplateDetailsComponent implements OnInit {
         private serverService: ServerService,
         private builtInTemplatesService: BuiltInTemplatesService,
         private toasterService: ToasterService,
-        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService
+        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
+        private router: Router
     ) {
         this.newPort = {
             name: '',
@@ -70,6 +71,10 @@ export class CloudNodesTemplateDetailsComponent implements OnInit {
         });
     }
 
+    goBack() {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'cloud-nodes']);
+    }
+
     getConfiguration() {
         this.categories = this.builtInTemplatesConfigurationService.getCategoriesForCloudNodes();
         this.consoleTypes = this.builtInTemplatesConfigurationService.getConsoleTypesForCloudNodes();
@@ -120,6 +125,7 @@ export class CloudNodesTemplateDetailsComponent implements OnInit {
     }
 
     symbolChanged(chosenSymbol: string) {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
         this.cloudNodeTemplate.symbol = chosenSymbol;
     }
 }

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.html

@@ -2,18 +2,20 @@
     <div class="default-header">
         <div class="row">
             <h1 class="col">Cloud nodes templates</h1>
+            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences/builtin" mat-button>Back</button>
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/builtin/cloud-nodes/addtemplate" mat-raised-button color="primary">Add cloud node template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!cloudNodesTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="cloudNodesTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
-                <mat-list-item *ngFor='let template of cloudNodesTemplates'>
+                <div class="list-item" *ngFor='let template of cloudNodesTemplates'>
-                    <span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
+                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
                     <button class="delete-button" mat-icon-button (click)="deleteTemplate(template)">
                         <mat-icon>delete</mat-icon>
                     </button>
-                </mat-list-item>
+                </div>
             </mat-nav-list>
         </div>
     </div>

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.scss

@@ -1,12 +0,0 @@
-.top-button {
-    height: 36px;
-    margin-top: 22px
-}
-
-.name {
-    width: 90%;
-}
-
-.delete-button {
-    width: 10%;
-}

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.ts

@@ -1,8 +1,7 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../../models/server';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
-import { switchMap } from 'rxjs/operators';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { CloudTemplate } from '../../../../../models/templates/cloud-template';
 import { DeleteTemplateComponent } from '../../../common/delete-template-component/delete-template.component';
@@ -11,11 +10,11 @@ import { DeleteTemplateComponent } from '../../../common/delete-template-compone
 @Component({
     selector: 'app-cloud-nodes-templates',
     templateUrl: './cloud-nodes-templates.component.html',
-    styleUrls: ['./cloud-nodes-templates.component.scss']
+    styleUrls: ['./cloud-nodes-templates.component.scss', '../../../preferences.component.scss']
 })
 export class CloudNodesTemplatesComponent implements OnInit {
     server: Server;
-    cloudNodesTemplates: CloudTemplate[];
+    cloudNodesTemplates: CloudTemplate[] = [];
     @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.html

@@ -5,13 +5,18 @@
         </div>
     </div>
     <div class="default-content">
-        <mat-form-field class="row">
+        <mat-card class="matCard">
-            <input matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
+            <form [formGroup]="formGroup">
+                <mat-form-field class="form-field">
+                    <input formControlName="templateName" matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
                 </mat-form-field>
-        <mat-form-field class="row">
+                <mat-form-field class="form-field">
-            <input matInput type="text" [(ngModel)]="numberOfPorts" placeholder="Number of ports">
+                    <input formControlName="numberOfPorts" matInput type="text" [(ngModel)]="numberOfPorts" placeholder="Number of ports">
                 </mat-form-field>
+            </form>
+        </mat-card>
         <div class="buttons-bar">
+            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
             <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
         </div>
     </div>

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.scss

@@ -1,3 +0,0 @@
-.row {
-    width: 100%;
-}

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.ts

@@ -1,24 +1,25 @@
 import { Component, OnInit } from "@angular/core";
 import { Server } from '../../../../../models/server';
-import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
-import { switchMap } from 'rxjs/operators';
 import { ToasterService } from '../../../../../services/toaster.service';
 import { v4 as uuid } from 'uuid';
 import { TemplateMocksService } from '../../../../../services/template-mocks.service';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { EthernetHubTemplate } from '../../../../../models/templates/ethernet-hub-template';
+import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
 
 
 @Component({
     selector: 'app-ethernet-hubs-add-template',
     templateUrl: './ethernet-hubs-add-template.component.html',
-    styleUrls: ['./ethernet-hubs-add-template.component.scss']
+    styleUrls: ['./ethernet-hubs-add-template.component.scss', '../../../preferences.component.scss']
 })
 export class EthernetHubsAddTemplateComponent implements OnInit {
     server: Server;
     numberOfPorts: number;
     templateName: string = '';
+    formGroup: FormGroup;
     
     constructor(
         private route: ActivatedRoute,
@@ -26,8 +27,14 @@ export class EthernetHubsAddTemplateComponent implements OnInit {
         private builtInTemplatesService: BuiltInTemplatesService,
         private router: Router,
         private toasterService: ToasterService,
-        private templateMocksService: TemplateMocksService
+        private templateMocksService: TemplateMocksService,
-    ) {}
+        private formBuilder: FormBuilder 
+    ) {
+        this.formGroup = this.formBuilder.group({
+            templateName: new FormControl('', Validators.required),
+            numberOfPorts: new FormControl('', Validators.required)
+        });
+    }
 
     ngOnInit() {
         const server_id = this.route.snapshot.paramMap.get("server_id");
@@ -36,8 +43,12 @@ export class EthernetHubsAddTemplateComponent implements OnInit {
         });
     }
 
+    goBack() {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-hubs']);
+    }
+
     addTemplate() {
-        if (this.templateName && this.numberOfPorts) {
+        if (!this.formGroup.invalid) {
             let ethernetHubTemplate: EthernetHubTemplate;
 
             this.templateMocksService.getEthernetHubTemplate().subscribe((template: EthernetHubTemplate) => {
@@ -54,8 +65,8 @@ export class EthernetHubsAddTemplateComponent implements OnInit {
                 });
             }
 
-            this.builtInTemplatesService.addTemplate(this.server, ethernetHubTemplate).subscribe((ethernetHubTemplate) => {
+            this.builtInTemplatesService.addTemplate(this.server, ethernetHubTemplate).subscribe(() => {
-                this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-hubs']);
+                this.goBack();
             });
         } else {
             this.toasterService.error(`Fill all required fields`);

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.html

@@ -5,30 +5,31 @@
         </div>
     </div>
     <div class="default-content" *ngIf="ethernetHubTemplate">
+        <mat-card>
             <form [formGroup]="inputForm">
-            <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="ethernetHubTemplate.name" 
                         formControlName="templateName"
                         placeholder="Template name">
                 </mat-form-field>
-            <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="ethernetHubTemplate.default_name_format" 
                         formControlName="defaultName"
                         placeholder="Default name format">
                 </mat-form-field>
-            <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="text" 
                         [(ngModel)]="ethernetHubTemplate.symbol" 
                         formControlName="symbol"
                         placeholder="Symbol">
                 </mat-form-field>
-            <button mat-raised-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
+                <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-            <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <mat-select 
                         placeholder="Category" 
                         [ngModelOptions]="{standalone: true}" 
@@ -38,7 +39,7 @@
                         </mat-option>
                     </mat-select>
                 </mat-form-field>
-            <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="number" 
                         [(ngModel)]="numberOfPorts" 
@@ -46,19 +47,11 @@
                         placeholder="Number of ports">
                 </mat-form-field>
             </form>
+        </mat-card>
         <div class="buttons-bar">
+            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
             <button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
         </div>
     </div>
 </div>
-<div class="content" class="configurator" *ngIf="isSymbolSelectionOpened">
+<app-symbols-menu *ngIf="isSymbolSelectionOpened && ethernetHubTemplate" [server]="server" [symbol]="ethernetHubTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Symbol selection</h1>
-            <button class="top-button" (click)="chooseSymbol()" mat-raised-button color="primary">Save</button>
-        </div>
-    </div>
-    <div class="default-content">
-        <app-symbols [server]="server" [symbol]="ethernetHubTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
-    </div>
-</div>

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.scss

@@ -1,22 +0,0 @@
-.row {
-    width: 100%;
-    margin-left: 0px;
-}
-
-.select {
-    width: 100%;
-}
-
-.shadowed {
-    display: none;
-    transition: 0.25s;
-}
-
-.top-button {
-    height: 36px;
-    margin-top: 22px
-}
-
-.symbolSelectionButton {
-    width: 100%;
-}

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
 import { Server } from '../../../../../models/server';
 import { ToasterService } from '../../../../../services/toaster.service';
@@ -12,14 +12,13 @@ import { BuiltInTemplatesConfigurationService } from '../../../../../services/bu
 @Component({
     selector: 'app-ethernet-hubs-template-details',
     templateUrl: './ethernet-hubs-template-details.component.html',
-    styleUrls: ['./ethernet-hubs-template-details.component.scss']
+    styleUrls: ['./ethernet-hubs-template-details.component.scss', '../../../preferences.component.scss']
 })
 export class EthernetHubsTemplateDetailsComponent implements OnInit {
     server: Server;
     ethernetHubTemplate: EthernetHubTemplate;
     numberOfPorts: number;
     inputForm: FormGroup;
-
     isSymbolSelectionOpened: boolean = false;
 
     categories = [];
@@ -30,7 +29,8 @@ export class EthernetHubsTemplateDetailsComponent implements OnInit {
         private builtInTemplatesService: BuiltInTemplatesService,
         private toasterService: ToasterService,
         private formBuilder: FormBuilder,
-        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService
+        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
+        private router: Router
     ) {
         this.inputForm = this.formBuilder.group({
             templateName: new FormControl('', Validators.required),
@@ -53,6 +53,10 @@ export class EthernetHubsTemplateDetailsComponent implements OnInit {
         });
     }
 
+    goBack() {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-hubs']);
+    }
+
     onSave() {
         if (this.inputForm.invalid || ! this.numberOfPorts) {
             this.toasterService.error(`Fill all required fields`);
@@ -76,6 +80,7 @@ export class EthernetHubsTemplateDetailsComponent implements OnInit {
     }
 
     symbolChanged(chosenSymbol: string) {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
         this.ethernetHubTemplate.symbol = chosenSymbol;
     }
 }

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.html

@@ -2,18 +2,20 @@
     <div class="default-header">
         <div class="row">
             <h1 class="col">Ethernet hubs templates</h1>
+            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences/builtin" mat-button>Back</button>
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/builtin/ethernet-hubs/addtemplate" mat-raised-button color="primary">Add Ethernet hub template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!ethernetHubsTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="ethernetHubsTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
-                <mat-list-item *ngFor='let template of ethernetHubsTemplates'>
+                <div class="list-item" *ngFor='let template of ethernetHubsTemplates'>
-                    <span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
+                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
                     <button class="delete-button" mat-icon-button (click)="deleteTemplate(template)">
                         <mat-icon>delete</mat-icon>
                     </button>
-                </mat-list-item>
+                </div>
             </mat-nav-list>
         </div>
     </div>

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.scss

@@ -1,12 +0,0 @@
-.top-button {
-    height: 36px;
-    margin-top: 22px
-}
-
-.name {
-    width: 90%;
-}
-
-.delete-button {
-    width: 10%;
-}

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.ts

@@ -1,8 +1,7 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../../models/server';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
-import { switchMap } from 'rxjs/operators';
 import { EthernetHubTemplate } from '../../../../../models/templates/ethernet-hub-template';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { DeleteTemplateComponent } from '../../../common/delete-template-component/delete-template.component';
@@ -11,11 +10,11 @@ import { DeleteTemplateComponent } from '../../../common/delete-template-compone
 @Component({
     selector: 'app-ethernet-hubs-templates',
     templateUrl: './ethernet-hubs-templates.component.html',
-    styleUrls: ['./ethernet-hubs-templates.component.scss']
+    styleUrls: ['./ethernet-hubs-templates.component.scss', '../../../preferences.component.scss']
 })
 export class EthernetHubsTemplatesComponent implements OnInit {
     server: Server;
-    ethernetHubsTemplates: EthernetHubTemplate[];
+    ethernetHubsTemplates: EthernetHubTemplate[] = [];
     @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.html

@@ -5,13 +5,15 @@
         </div>
     </div>
     <div class="default-content">
-        <mat-form-field class="row">
+        <mat-card class="matCard">
-            <input matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
+            <form [formGroup]="formGroup">
-        </mat-form-field>
+                <mat-form-field class="form-field">
-        <mat-form-field class="row">
+                    <input formControlName="templateName" matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
-            <input matInput type="text" [(ngModel)]="numberOfPorts" placeholder="Number of ports">
                 </mat-form-field>
+            </form>
+        </mat-card>
         <div class="buttons-bar">
+            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
             <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
         </div>
     </div>

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.scss

@@ -1,3 +0,0 @@
-.row {
-    width: 100%;
-}

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.ts

@@ -1,24 +1,25 @@
 import { Component, OnInit } from "@angular/core";
 import { Server } from '../../../../../models/server';
-import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
-import { switchMap } from 'rxjs/operators';
 import { ToasterService } from '../../../../../services/toaster.service';
 import { v4 as uuid } from 'uuid';
 import { TemplateMocksService } from '../../../../../services/template-mocks.service';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 
 
 @Component({
     selector: 'app-ethernet-switches-add-template',
     templateUrl: './ethernet-switches-add-template.component.html',
-    styleUrls: ['./ethernet-switches-add-template.component.scss']
+    styleUrls: ['./ethernet-switches-add-template.component.scss', '../../../preferences.component.scss']
 })
 export class EthernetSwitchesAddTemplateComponent implements OnInit {
     server: Server;
     numberOfPorts: number;
     templateName: string = '';
+    formGroup: FormGroup;
     
     constructor(
         private route: ActivatedRoute,
@@ -26,8 +27,14 @@ export class EthernetSwitchesAddTemplateComponent implements OnInit {
         private builtInTemplatesService: BuiltInTemplatesService,
         private router: Router,
         private toasterService: ToasterService,
-        private templateMocksService: TemplateMocksService
+        private templateMocksService: TemplateMocksService,
-    ) {}
+        private formBuilder: FormBuilder
+    ) {
+        this.formGroup = this.formBuilder.group({
+            templateName: new FormControl('', Validators.required),
+            numberOfPorts: new FormControl('', Validators.required)
+        });
+    }
 
     ngOnInit() {
         const server_id = this.route.snapshot.paramMap.get("server_id");
@@ -36,6 +43,10 @@ export class EthernetSwitchesAddTemplateComponent implements OnInit {
         });
     }
 
+    goBack() {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-switches']);
+    }
+
     addTemplate() {
         if (this.templateName && this.numberOfPorts) {
             let ethernetSwitchTemplate: EthernetSwitchTemplate;
@@ -58,7 +69,7 @@ export class EthernetSwitchesAddTemplateComponent implements OnInit {
             }
 
             this.builtInTemplatesService.addTemplate(this.server, ethernetSwitchTemplate).subscribe((ethernetSwitchTemplate) => {
-                this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-switches']);
+                this.goBack();
             });
         } else {
             this.toasterService.error(`Fill all required fields`);

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html

@@ -13,29 +13,29 @@
                     </mat-panel-title>
                 </mat-expansion-panel-header>
                 <form [formGroup]="inputForm">
-                    <mat-form-field class="row">
+                    <mat-form-field class="form-field">
                         <input 
                             matInput type="text" 
                             [(ngModel)]="ethernetSwitchTemplate.name" 
                             formControlName="templateName"
                             placeholder="Template name">
                     </mat-form-field>
-                    <mat-form-field class="row">
+                    <mat-form-field class="form-field">
                         <input 
                             matInput type="text" 
                             [(ngModel)]="ethernetSwitchTemplate.default_name_format" 
                             formControlName="defaultName"
                             placeholder="Default name format">
                     </mat-form-field>
-                    <mat-form-field class="row">
+                    <mat-form-field class="form-field">
                         <input 
                             matInput type="text" 
                             [(ngModel)]="ethernetSwitchTemplate.symbol" 
                             formControlName="symbol"
                             placeholder="Symbol">
                     </mat-form-field>
-                    <button mat-raised-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
+                    <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
-                    <mat-form-field class="row">
+                    <mat-form-field class="form-field">
                         <mat-select 
                             placeholder="Category" 
                             [ngModelOptions]="{standalone: true}" 
@@ -87,13 +87,13 @@
                     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                 </table><br/>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="number" 
                         [(ngModel)]="newPort.port_number" 
                         placeholder="Port">
                 </mat-form-field>
-                <mat-form-field class="row">
+                <mat-form-field class="form-field">
                     <input 
                         matInput type="number" 
                         [(ngModel)]="newPort.vlan" 
@@ -119,22 +119,13 @@
                             </mat-option>
                     </mat-select>
                 </mat-form-field>
-                <button mat-raised-button class="row" (click)="onAdd()">Add</button>
+                <button mat-button class="form-field" (click)="onAdd()">Add</button>
             </mat-expansion-panel>
         </mat-accordion>
         <div class="buttons-bar">
+            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
             <button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
         </div>
     </div>
 </div>
-<div class="content" class="configurator" *ngIf="isSymbolSelectionOpened">
+<app-symbols-menu *ngIf="isSymbolSelectionOpened && ethernetSwitchTemplate" [server]="server" [symbol]="ethernetSwitchTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>
-    <div class="default-header">
-        <div class="row">
-            <h1 class="col">Symbol selection</h1>
-            <button class="top-button" (click)="chooseSymbol()" mat-raised-button color="primary">Save</button>
-        </div>
-    </div>
-    <div class="default-content">
-        <app-symbols [server]="server" [symbol]="ethernetSwitchTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
-    </div>
-</div>

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.scss

@@ -1,34 +0,0 @@
-.row {
-    width: 100%;
-    margin-left: 0px;
-}
-
-.select {
-    width: 100%;
-}
-
-.shadowed {
-    display: none;
-    transition: 0.25s;
-}
-
-.top-button {
-    height: 36px;
-    margin-top: 22px
-}
-
-.symbolSelectionButton {
-    width: 100%;
-}
-
-th {
-    border: 0px!important;
-}
-
-th.mat-header-cell {
-    padding-bottom: 15px;
-}
-
-td.mat-cell {
-    padding-top: 15px;
-}

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
 import { Server } from '../../../../../models/server';
 import { ToasterService } from '../../../../../services/toaster.service';
@@ -13,7 +13,7 @@ import { BuiltInTemplatesConfigurationService } from '../../../../../services/bu
 @Component({
     selector: 'app-ethernet-switches-template-details',
     templateUrl: './ethernet-switches-template-details.component.html',
-    styleUrls: ['./ethernet-switches-template-details.component.scss']
+    styleUrls: ['./ethernet-switches-template-details.component.scss', '../../../preferences.component.scss']
 })
 export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
     server: Server;
@@ -37,7 +37,8 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
         private builtInTemplatesService: BuiltInTemplatesService,
         private toasterService: ToasterService,
         private formBuilder: FormBuilder,
-        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService
+        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
+        private router: Router
     ){
         this.inputForm = this.formBuilder.group({
             templateName: new FormControl('', Validators.required),
@@ -83,6 +84,10 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
         };
     }
 
+    goBack() {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-switches']);
+    }
+
     onSave() {
         if (this.inputForm.invalid) {
             this.toasterService.error(`Fill all required fields`);
@@ -98,6 +103,7 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
     }
 
     symbolChanged(chosenSymbol: string) {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
         this.ethernetSwitchTemplate.symbol = chosenSymbol;
     }
 }

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.html

@@ -2,18 +2,20 @@
     <div class="default-header">
         <div class="row">
             <h1 class="col">Ethernet switches templates</h1>
+            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences/builtin" mat-button>Back</button>
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/builtin/ethernet-switches/addtemplate" mat-raised-button color="primary">Add Ethernet switch template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!ethernetSwitchesTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="ethernetSwitchesTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
-                <mat-list-item *ngFor='let template of ethernetSwitchesTemplates'>
+                <div class="list-item" *ngFor='let template of ethernetSwitchesTemplates'>
-                    <span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
+                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
                     <button class="delete-button" mat-icon-button (click)="deleteTemplate(template)">
                         <mat-icon>delete</mat-icon>
                     </button>
-                </mat-list-item>
+                </div>
             </mat-nav-list>
         </div>
     </div>

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.scss

@@ -1,12 +0,0 @@
-.top-button {
-    height: 36px;
-    margin-top: 22px
-}
-
-.name {
-    width: 90%;
-}
-
-.delete-button {
-    width: 10%;
-}

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.ts

@@ -1,8 +1,7 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { Server } from '../../../../../models/server';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
-import { switchMap } from 'rxjs/operators';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template';
 import { DeleteTemplateComponent } from '../../../common/delete-template-component/delete-template.component';
@@ -11,11 +10,11 @@ import { DeleteTemplateComponent } from '../../../common/delete-template-compone
 @Component({
     selector: 'app-ethernet-switches-templates',
     templateUrl: './ethernet-switches-templates.component.html',
-    styleUrls: ['./ethernet-switches-templates.component.scss']
+    styleUrls: ['./ethernet-switches-templates.component.scss', '../../../preferences.component.scss']
 })
 export class EthernetSwitchesTemplatesComponent implements OnInit {
     server: Server;
-    ethernetSwitchesTemplates: EthernetSwitchTemplate[];
+    ethernetSwitchesTemplates: EthernetSwitchTemplate[] = [];
     @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(

src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.html

@@ -0,0 +1,3 @@
+<h6 class="header">
+    {{emptyTemplatesListMessage}}
+</h6>

src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.scss

@@ -0,0 +1,3 @@
+.header {
+    text-align: center;
+}

src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.ts

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+
+
+@Component({
+    selector: 'app-empty-templates-list',
+    templateUrl: './empty-templates-list.component.html',
+    styleUrls: ['./empty-templates-list.component.scss']
+})
+export class EmptyTemplatesListComponent {
+    emptyTemplatesListMessage: string = 'Empty templates list';
+}

src/app/components/preferences/common/symbols-menu/symbols-menu.component.html

@@ -0,0 +1,12 @@
+<div class="content" class="configurator">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Symbol selection</h1>
+            <button class="top-button" class="cancel-button" (click)="cancelChooseSymbol()" mat-button>Cancel</button>
+            <button class="top-button" (click)="chooseSymbol()" mat-raised-button color="primary">Choose symbol</button>
+        </div>
+    </div>
+    <div class="default-content">
+        <app-symbols [server]="server" [symbol]="symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
+    </div>
+</div>

src/app/components/preferences/common/symbols-menu/symbols-menu.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { Server } from '../../../../models/server';
+
+
+@Component({
+    selector: 'app-symbols-menu',
+    templateUrl: './symbols-menu.component.html',
+    styleUrls: ['./symbols-menu.component.scss', '../../preferences.component.scss']
+})
+export class SymbolsMenuComponent {
+    @Input() server: Server;
+    @Input() symbol: string;
+    @Output() symbolChangedEmitter = new EventEmitter<string>();
+    
+    chosenSymbol: string = '';
+
+    symbolChanged(chosenSymbol: string) {
+        this.chosenSymbol = chosenSymbol;
+    }
+
+    chooseSymbol() {
+        this.symbolChangedEmitter.emit(this.chosenSymbol);
+    }
+
+    cancelChooseSymbol() {
+        this.symbolChangedEmitter.emit(this.symbol);
+    }
+}

src/app/components/preferences/common/symbols/symbols.component.html

@@ -1,27 +1,4 @@
-<!-- <mat-selection-list *ngIf="symbols">
+<mat-card>
-    <mat-radio-group class="option">
-        <mat-radio-button *ngFor="let symbol of symbols" value="symbol.symbol_id" class="radio-button" (click)="set(symbol.symbol_id)">
-            <img src="http://127.0.0.1:3080/v2/symbols/{{symbol.symbol_id}}/raw"/>
-        </mat-radio-button>
-    </mat-radio-group>
-</mat-selection-list> -->
-
-<!-- <div class="grid-container" *ngIf="symbols">
-    <div class="button" *ngFor="let symbol of symbols">
-        <button (click)="set(symbol.symbol_id)">
-            <img src="http://127.0.0.1:3080/v2/symbols/{{symbol.symbol_id}}/raw"/>
-        </button>
-    </div>
-</div> -->
-
-<!-- <mat-grid-list cols="5" rowHeight="1:1">
-    <div class="button" *ngFor="let symbol of symbols">
-        <button (click)="set(symbol.symbol_id)">
-            <img src="http://127.0.0.1:3080/v2/symbols/{{symbol.symbol_id}}/raw"/>
-        </button>
-    </div>
-</mat-grid-list> -->
-
     <div class="wrapper">
         <div class="buttonWrapper" *ngFor="let symbol of symbols">
             <button [ngClass]="{ buttonSelected: isSelected === symbol.symbol_id }" class="button" (click)="setSelected(symbol.symbol_id)">
@@ -29,3 +6,4 @@
             </button>
         </div>
     </div>
+</mat-card>

src/app/components/preferences/common/symbols/symbols.component.scss

@@ -17,22 +17,22 @@
 .buttonSelected {
     border-width: 3px;
     border-color: #0097a7;
+    width: 77px;
 }
 
 .image {
-    width: 75px;
+    width: 65px;
-    height: 75px;   
+    height: 65px;   
 }
 
 .imageSelected {
-    width: 105px;
+    margin-left: -3px;
-    height: 105px;   
 }
 
 .wrapper {
     display: grid;
     grid-template-rows: auto;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(7, 1fr);
     grid-row-gap: 3em;
     grid-column-gap: 1em;
 }

src/app/components/preferences/common/symbols/symbols.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
 import { SymbolService } from '../../../../services/symbol.service';
 import { Server } from '../../../../models/server';
-import { ActivatedRoute } from '@angular/router';
 import { Symbol } from '../../../../models/symbol';
 
 

src/app/components/preferences/docker/docker-templates/docker-templates.component.html

@@ -5,7 +5,8 @@
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/docker/addtemplate" mat-raised-button color="primary">Add Docker container template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!dockerTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="dockerTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of dockerTemplates'>

src/app/components/preferences/dynamips/ios-templates/ios-templates.component.html

@@ -5,7 +5,8 @@
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/dynamips/templates/addtemplate" mat-raised-button color="primary">Add IOS router template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!iosTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="iosTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of iosTemplates'>

src/app/components/preferences/dynamips/ios-templates/ios-templates.component.ts

@@ -16,7 +16,7 @@ import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
 })
 export class IosTemplatesComponent implements OnInit {
     server: Server;
-    iosTemplates: IosTemplate[];
+    iosTemplates: IosTemplate[] = [];
     @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;
 
     constructor(

src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.html

@@ -5,7 +5,8 @@
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/iou/addtemplate" mat-raised-button color="primary">Add IOU device template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!iouTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="iouTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of iouTemplates'>

src/app/components/preferences/preferences.component.html

@@ -7,45 +7,29 @@
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-nav-list>
-                <mat-list-item>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/builtin">
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/builtin">
                     Built-in
-                    </button>
                 </mat-list-item>
-                <mat-list-item>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/dynamips/templates">
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/dynamips/templates">
                     Dynamips
-                    </button>
                 </mat-list-item>
-                <mat-list-item>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/iou/templates">
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/iou/templates">
                     IOS on Unix
-                    </button>
                 </mat-list-item>
-                <mat-list-item>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/vpcs/templates">
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/vpcs/templates">
                     VPCS
-                    </button>
                 </mat-list-item>
-                <mat-list-item>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/qemu/templates">
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/qemu/templates">
                     QEMU
-                    </button>
                 </mat-list-item>
-                <mat-list-item>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/virtualbox/templates">
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/virtualbox/templates">
                     VirtualBox
-                    </button>
                 </mat-list-item>
-                <mat-list-item>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/vmware/templates">
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/vmware/templates">
                     VMware
-                    </button>
                 </mat-list-item>
-                <mat-list-item>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/docker/templates">
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/docker/templates">
                     Docker
-                    </button>
                 </mat-list-item>
             </mat-nav-list>
         </div>

src/app/components/preferences/preferences.component.scss

@@ -0,0 +1,57 @@
+.top-button {
+    height: 36px;
+    margin-top: 22px
+}
+
+.choose-symbol-button {
+    height: 36px;
+    margin-top: 22px;
+}
+
+.cancel-button {
+    height: 36px;
+    margin-top: 22px;
+    margin-right: 10px;
+}
+
+.form-field {
+    width: 100%;
+}
+
+.select {
+    width: 100%;
+}
+
+.shadowed {
+    display: none;
+    transition: 0.25s;
+}
+
+.symbolSelectionButton {
+    width: 100%;
+}
+
+.list-item {
+    display: flex;
+}
+
+.template-name {
+    width: 90%;
+}
+
+.delete-button {
+    width: 10%;
+    outline: none;
+}
+
+th {
+    border: 0px!important;
+}
+
+th.mat-header-cell {
+    padding-bottom: 15px;
+}
+
+td.mat-cell {
+    padding-top: 15px;
+}

src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.html

@@ -5,7 +5,8 @@
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/qemu/addtemplate" mat-raised-button color="primary">Add QEMU VM template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!qemuTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="qemuTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of qemuTemplates'>

src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.html

@@ -5,7 +5,8 @@
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/virtualbox/addtemplate" mat-raised-button color="primary">Add Virtual Box VM template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!virtualBoxTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="virtualBoxTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of virtualBoxTemplates'>

src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.html

@@ -5,7 +5,8 @@
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/vmware/addtemplate" mat-raised-button color="primary">Add VMware template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!vmwareTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="vmwareTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of vmwareTemplates'>

src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.html

@@ -71,7 +71,8 @@
     <div class="default-header">
         <div class="row">
             <h1 class="col">Symbol selection</h1>
-            <button class="top-button" (click)="chooseSymbol()" mat-raised-button color="primary">Save</button>
+            <button class="top-button" class="cancel-button" (click)="cancelChooseSymbol()" mat-raised-button color="primary">Cancel</button>
+            <button class="top-button" class="choose-symbol-button" (click)="chooseSymbol()" mat-raised-button color="primary">Choose symbol</button>
         </div>
     </div>
     <div class="default-content">

src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.ts

@@ -12,7 +12,7 @@ import { VpcsConfigurationService } from '../../../../services/vpcs-configuratio
 @Component({
     selector: 'app-vpcs-template-details',
     templateUrl: './vpcs-template-details.component.html',
-    styleUrls: ['./vpcs-template-details.component.scss']
+    styleUrls: ['./vpcs-template-details.component.scss','../../preferences.component.scss']
 })
 export class VpcsTemplateDetailsComponent implements OnInit {
     server: Server;
@@ -20,6 +20,7 @@ export class VpcsTemplateDetailsComponent implements OnInit {
     inputForm: FormGroup;
 
     isSymbolSelectionOpened: boolean = false;
+    copyOfSymbol: string;
 
     consoleTypes: string[] = [];
     categories = [];
@@ -69,9 +70,15 @@ export class VpcsTemplateDetailsComponent implements OnInit {
     }
 
     chooseSymbol() {
+        this.copyOfSymbol = this.vpcsTemplate.symbol;
         this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
     }
 
+    cancelChooseSymbol() {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+        this.vpcsTemplate.symbol = this.copyOfSymbol;
+    }
+
     symbolChanged(chosenSymbol: string) {
         this.vpcsTemplate.symbol = chosenSymbol;
     }

src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.html

@@ -5,7 +5,8 @@
             <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/vpcs/addtemplate" mat-raised-button color="primary">Add VPCS template</button>
         </div>
     </div>
-    <div class="default-content">
+    <app-empty-templates-list *ngIf="!vpcsTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="vpcsTemplates.length">
         <div class="container mat-elevation-z8">
             <mat-nav-list *ngIf="server">
                 <mat-list-item *ngFor='let template of vpcsTemplates'>