ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-22 06:17:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixes after review

Browse Source 
BuilInTemplates,
EthernetHubs
EthernetSwitches,
CloudNodes modificated, back and cancel buttons added
This commit is contained in:
Piotr Pekala 2019-02-15 06:17:27 -08:00
parent f87530b3ee
commit 30ede76507
53 changed files with 395 additions and 402 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.module.ts
View File

@ -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,

19
src/app/components/preferences/built-in/built-in-preferences.component.html
View File

@ -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>
<button mat-button routerLink="/server/{{serverId}}/preferences/builtin/ethernet-hubs">
Ethernet hubs
</button>
<mat-list-item routerLink="/server/{{serverId}}/preferences/builtin/ethernet-hubs">
Ethernet hubs
</mat-list-item>
<mat-list-item>
<button mat-button routerLink="/server/{{serverId}}/preferences/builtin/ethernet-switches">
Ethernet switches
</button>
<mat-list-item routerLink="/server/{{serverId}}/preferences/builtin/ethernet-switches">
Ethernet switches
</mat-list-item>
<mat-list-item>
<button mat-button routerLink="/server/{{serverId}}/preferences/builtin/cloud-nodes">
Cloud nodes
</button>
<mat-list-item routerLink="/server/{{serverId}}/preferences/builtin/cloud-nodes">
Cloud nodes
</mat-list-item>
</mat-nav-list>
</div>

6
src/app/components/preferences/built-in/built-in-preferences.component.ts
View File

@ -1,13 +1,11 @@
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, ParamMap } from '@angular/router';
import { ServerService } from '../../../services/server.service';
import { switchMap } from 'rxjs/operators';
import { ActivatedRoute } from '@angular/router';
@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 = "";

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

@ -5,10 +5,15 @@
</div>
</div>
<div class="default-content">
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
</mat-form-field>
<mat-card class="matCard">
<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>

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

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

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

@ -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`);

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

@ -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/>
<mat-form-field class="row">
<button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
<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="row">{{port.name}}</div><br/><br/>
<div class="form-field" *ngFor="let port of portsMappingEthernet">
<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="row">{{port.name}}</div><br/><br/>
<div class="form-field" *ngFor="let port of portsMappingTap">
<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/>
<mat-form-field class="row">
</table>
<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">
<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>
<app-symbols-menu *ngIf="isSymbolSelectionOpened && cloudNodeTemplate" [server]="server" [symbol]="cloudNodeTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>

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

@ -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%;
}

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

@ -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;
}
}

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

@ -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'>
<span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
<div class="list-item" *ngFor='let template of cloudNodesTemplates'>
<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>

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

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

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

@ -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(

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

@ -5,13 +5,18 @@
</div>
</div>
<div class="default-content">
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="numberOfPorts" placeholder="Number of ports">
</mat-form-field>
<mat-card class="matCard">
<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="form-field">
<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>

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

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

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

@ -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.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-hubs']);
this.builtInTemplatesService.addTemplate(this.server, ethernetHubTemplate).subscribe(() => {
this.goBack();
});
} else {
this.toasterService.error(`Fill all required fields`);

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

@ -5,60 +5,53 @@
</div>
</div>
<div class="default-content" *ngIf="ethernetHubTemplate">
<form [formGroup]="inputForm">
<mat-form-field class="row">
<input
matInput type="text"
[(ngModel)]="ethernetHubTemplate.name"
formControlName="templateName"
placeholder="Template name">
</mat-form-field>
<mat-form-field class="row">
<input
matInput type="text"
[(ngModel)]="ethernetHubTemplate.default_name_format"
formControlName="defaultName"
placeholder="Default name format">
</mat-form-field>
<mat-form-field class="row">
<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/>
<mat-form-field class="row">
<mat-select
placeholder="Category"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="ethernetHubTemplate.category">
<mat-option *ngFor="let category of categories" [value]="category[1]">
{{category[0]}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="row">
<input
matInput type="number"
[(ngModel)]="numberOfPorts"
[ngModelOptions]="{standalone: true}"
placeholder="Number of ports">
</mat-form-field>
</form>
<mat-card>
<form [formGroup]="inputForm">
<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="form-field">
<input
matInput type="text"
[(ngModel)]="ethernetHubTemplate.default_name_format"
formControlName="defaultName"
placeholder="Default name format">
</mat-form-field>
<mat-form-field class="form-field">
<input
matInput type="text"
[(ngModel)]="ethernetHubTemplate.symbol"
formControlName="symbol"
placeholder="Symbol">
</mat-form-field>
<button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
<mat-form-field class="form-field">
<mat-select
placeholder="Category"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="ethernetHubTemplate.category">
<mat-option *ngFor="let category of categories" [value]="category[1]">
{{category[0]}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<input
matInput type="number"
[(ngModel)]="numberOfPorts"
[ngModelOptions]="{standalone: true}"
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">
<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>
<app-symbols-menu *ngIf="isSymbolSelectionOpened && ethernetHubTemplate" [server]="server" [symbol]="ethernetHubTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>

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

@ -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%;
}

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

@ -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;
}
}

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

@ -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'>
<span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
<div class="list-item" *ngFor='let template of ethernetHubsTemplates'>
<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>

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

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

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

@ -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(

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

@ -5,13 +5,15 @@
</div>
</div>
<div class="default-content">
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="numberOfPorts" placeholder="Number of ports">
</mat-form-field>
<mat-card class="matCard">
<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>

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

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

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

@ -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`);

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

@ -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/>
<mat-form-field class="row">
<button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
<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">
<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>
<app-symbols-menu *ngIf="isSymbolSelectionOpened && ethernetSwitchTemplate" [server]="server" [symbol]="ethernetSwitchTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>

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

@ -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;
}

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

@ -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;
}
}

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

@ -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'>
<span class="name" routerLink="{{template.template_id}}">{{template.name}}</span>
<div class="list-item" *ngFor='let template of ethernetSwitchesTemplates'>
<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>

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

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

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

@ -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(

3
src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.html Normal file
View File

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

3
src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.scss Normal file
View File

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

0
src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.spec.ts Normal file
View File

11
src/app/components/preferences/common/empty-templates-list/empty-templates-list.component.ts Normal file
View File

@ -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';
}

12
src/app/components/preferences/common/symbols-menu/symbols-menu.component.html Normal file
View File

@ -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>

0
src/app/components/preferences/common/symbols-menu/symbols-menu.component.scss Normal file
View File

0
src/app/components/preferences/common/symbols-menu/symbols-menu.component.spec.ts Normal file
View File

28
src/app/components/preferences/common/symbols-menu/symbols-menu.component.ts Normal file
View File

@ -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);
}
}

38
src/app/components/preferences/common/symbols/symbols.component.html
View File

@ -1,31 +1,9 @@
<!-- <mat-selection-list *ngIf="symbols">
<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>
<mat-card>
<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)">
<img [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }" class="image" src="http://127.0.0.1:3080/v2/symbols/{{symbol.symbol_id}}/raw"/>
</button>
</div>
</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)">
<img [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }" class="image" src="http://127.0.0.1:3080/v2/symbols/{{symbol.symbol_id}}/raw"/>
</button>
</div>
</div>
</mat-card>

10
src/app/components/preferences/common/symbols/symbols.component.scss
View File

@ -17,22 +17,22 @@
.buttonSelected {
border-width: 3px;
border-color: #0097a7;
width: 77px;
}
.image {
width: 75px;
height: 75px;
width: 65px;
height: 65px;
}
.imageSelected {
width: 105px;
height: 105px;
margin-left: -3px;
}
.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;
}

1
src/app/components/preferences/common/symbols/symbols.component.ts
View File

@ -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';

3
src/app/components/preferences/docker/docker-templates/docker-templates.component.html
View File

@ -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'>

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

@ -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'>

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

@ -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(

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

@ -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'>

48
src/app/components/preferences/preferences.component.html
View File

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

57
src/app/components/preferences/preferences.component.scss
View File

@ -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;
}

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

@ -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'>

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

@ -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'>

3
src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.html
View File

@ -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'>

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

@ -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">

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

@ -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;
}

3
src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.html
View File

@ -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'>