ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-02-21 02:01:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Separate component for symbol selecting

Browse Source
This commit is contained in:
Piotr Pekala 2019-02-03 23:24:07 -08:00
parent eed6466df5
commit f180f7f76f
42 changed files with 574 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/app-routing.module.ts
View File

@ -31,6 +31,8 @@ import { CloudNodesTemplateDetailsComponent } from './components/preferences/bui
import { EthernetSwitchesTemplatesComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component';
import { EthernetSwitchesAddTemplateComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component';
import { EthernetSwitchesTemplateDetailsComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component';
import { DynamipsPreferencesComponent } from './components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component';
import { IosTemplatesComponent } from './components/preferences/dynamips/ios-templates/ios-templates.component';
const routes: Routes = [
{
@ -58,6 +60,11 @@ const routes: Routes = [
{ path: 'server/:server_id/preferences/builtin/cloud-nodes/addtemplate', component: CloudNodesAddTemplateComponent },
{ path: 'server/:server_id/preferences/builtin/cloud-nodes/:template_id', component: CloudNodesTemplateDetailsComponent },
//{ path: 'server/:server_id/preferences/dynamips', component: DynamipsPreferencesComponent },
{ path: 'server/:server_id/preferences/dynamips/templates', component: IosTemplatesComponent },
{ path: 'server/:server_id/preferences/dynamips/templates/addtemplate', component: IosTemplatesComponent },
{ path: 'server/:server_id/preferences/dynamips/templates/:template_id', component: IosTemplatesComponent },
// { path: 'server/:server_id/preferences/qemu', component: QemuPreferencesComponent },
{ path: 'server/:server_id/preferences/qemu/templates', component: QemuVmTemplatesComponent },
{ path: 'server/:server_id/preferences/qemu/templates/:template_id', component: QemuVmTemplateDetailsComponent },

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

@ -119,6 +119,10 @@ import { CloudNodesTemplateDetailsComponent } from './components/preferences/bui
import { EthernetSwitchesTemplatesComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component';
import { EthernetSwitchesAddTemplateComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component';
import { EthernetSwitchesTemplateDetailsComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component';
import { DynamipsPreferencesComponent } from './components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component';
import { IosTemplatesComponent } from './components/preferences/dynamips/ios-templates/ios-templates.component';
import { IosService } from './services/ios.service';
import { SymbolsComponent } from './components/preferences/common/symbols/symbols.component';
if (environment.production) {
Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@ -194,7 +198,10 @@ if (environment.production) {
CloudNodesTemplateDetailsComponent,
EthernetSwitchesTemplatesComponent,
EthernetSwitchesAddTemplateComponent,
EthernetSwitchesTemplateDetailsComponent
EthernetSwitchesTemplateDetailsComponent,
DynamipsPreferencesComponent,
IosTemplatesComponent,
SymbolsComponent
],
imports: [
BrowserModule,
@ -246,7 +253,8 @@ if (environment.production) {
VpcsService,
TemplateMocksService,
VirtualBoxService,
BuiltInTemplatesService
BuiltInTemplatesService,
IosService
],
entryComponents: [
AddServerDialogComponent,
@ -257,7 +265,8 @@ if (environment.production) {
ImportProjectDialogComponent,
ConfirmationDialogComponent,
StyleEditorDialogComponent,
TextEditorDialogComponent
TextEditorDialogComponent,
SymbolsComponent
],
bootstrap: [AppComponent]
})

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

@ -1,4 +1,4 @@
<div class="content">
<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
<div class="default-header">
<div class="row">
<h1 class="col">Cloud configuration</h1>
@ -30,6 +30,7 @@
[(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">
<mat-select
placeholder="Category"
@ -167,3 +168,14 @@
</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>

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

@ -18,3 +18,17 @@ th.mat-header-cell {
td.mat-cell {
padding-top: 15px;
}
.shadowed {
display: none;
transition: 0.25s;
}
.top-button {
height: 36px;
margin-top: 22px
}
.symbolSelectionButton {
width: 100%;
}

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

@ -17,6 +17,8 @@ export class CloudNodesTemplateDetailsComponent implements OnInit {
server: Server;
cloudNodeTemplate: CloudTemplate;
isSymbolSelectionOpened: boolean = false;
categories = [["Default", "guest"],
["Routers", "router"],
["Switches", "switch"],
@ -108,4 +110,12 @@ export class CloudNodesTemplateDetailsComponent implements OnInit {
this.toasterService.success("Changes saved");
});
}
chooseSymbol() {
this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
}
symbolChanged(chosenSymbol: string) {
this.cloudNodeTemplate.symbol = chosenSymbol;
}
}

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

@ -1,4 +1,4 @@
<div class="content">
<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
<div class="default-header">
<div class="row">
<h1 class="col">Ethernet hub settings</h1>
@ -27,6 +27,7 @@
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"
@ -50,3 +51,14 @@
</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>

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

@ -6,3 +6,17 @@
.select {
width: 100%;
}
.shadowed {
display: none;
transition: 0.25s;
}
.top-button {
height: 36px;
margin-top: 22px
}
.symbolSelectionButton {
width: 100%;
}

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

@ -19,6 +19,8 @@ export class EthernetHubsTemplateDetailsComponent implements OnInit {
numberOfPorts: number;
inputForm: FormGroup;
isSymbolSelectionOpened: boolean = false;
categories = [["Default", "guest"],
["Routers", "router"],
["Switches", "switch"],
@ -69,4 +71,12 @@ export class EthernetHubsTemplateDetailsComponent implements OnInit {
});
}
}
chooseSymbol() {
this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
}
symbolChanged(chosenSymbol: string) {
this.ethernetHubTemplate.symbol = chosenSymbol;
}
}

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

@ -1,4 +1,4 @@
<div class="content">
<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
<div class="default-header">
<div class="row">
<h1 class="col">Ethernet switch configuration</h1>
@ -34,6 +34,7 @@
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"
@ -126,3 +127,14 @@
</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>

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

@ -7,6 +7,20 @@
width: 100%;
}
.shadowed {
display: none;
transition: 0.25s;
}
.top-button {
height: 36px;
margin-top: 22px
}
.symbolSelectionButton {
width: 100%;
}
th {
border: 0px!important;
}

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

@ -22,6 +22,8 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
dataSource: PortsMappingEntity[] = [];
newPort: PortsMappingEntity;
isSymbolSelectionOpened: boolean = false;
categories = [["Default", "guest"],
["Routers", "router"],
["Switches", "switch"],
@ -84,4 +86,12 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
});
}
}
chooseSymbol() {
this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
}
symbolChanged(chosenSymbol: string) {
this.ethernetSwitchTemplate.symbol = chosenSymbol;
}
}

31
src/app/components/preferences/common/symbols/symbols.component.html Normal file
View File

@ -0,0 +1,31 @@
<!-- <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>
</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>

38
src/app/components/preferences/common/symbols/symbols.component.scss Normal file
View File

@ -0,0 +1,38 @@
.buttonWrapper {
width: 85px;
height: 85px;
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
outline: none;
}
.button {
background: border-box;
border-width: 0px;
outline: none;
}
.buttonSelected {
border-width: 3px;
border-color: #0097a7;
}
.image {
width: 75px;
height: 75px;
}
.imageSelected {
width: 105px;
height: 105px;
}
.wrapper {
display: grid;
grid-template-rows: auto;
grid-template-columns: repeat(5, 1fr);
grid-row-gap: 3em;
grid-column-gap: 1em;
}

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

38
src/app/components/preferences/common/symbols/symbols.component.ts Normal file
View File

@ -0,0 +1,38 @@
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';
@Component({
selector: 'app-symbols',
templateUrl: './symbols.component.html',
styleUrls: ['./symbols.component.scss']
})
export class SymbolsComponent implements OnInit {
@Input() server: Server;
@Input() symbol: string;
@Output() symbolChanged = new EventEmitter<string>();
symbols: Symbol[] = [];
isSelected: string = '';
constructor(
private route: ActivatedRoute,
private symbolService: SymbolService
) {}
ngOnInit() {
this.isSelected = this.symbol;
this.symbolService.list(this.server).subscribe((symbols: Symbol[]) => {
this.symbols = symbols;
});
}
setSelected(symbol_id: string) {
this.isSelected = symbol_id;
this.symbolChanged.emit(this.isSelected);
}
}

12
src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.html Normal file
View File

@ -0,0 +1,12 @@
<div class="content">
<div class="default-header">
<div class="row">
<h1 class="col">Dynamips preferences</h1>
</div>
</div>
<div class="default-content">
<mat-form-field class="form-field">
<input matInput type="text" [(ngModel)]="dynamipsPath" placeholder="Path to Dynamips"/>
</mat-form-field>
</div>
</div>

8
src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.scss Normal file
View File

@ -0,0 +1,8 @@
.top-button {
height: 36px;
margin-top: 22px
}
.form-field {
width: 100%;
}

0
src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.spec.ts Normal file
View File

36
src/app/components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component.ts Normal file
View File

@ -0,0 +1,36 @@
import { Component, OnInit } from "@angular/core";
import { ServerSettingsService } from '../../../../services/server-settings.service';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Server } from '../../../../models/server';
import { switchMap } from 'rxjs/operators';
import { ServerService } from '../../../../services/server.service';
@Component({
selector: 'app-dynamips-preferences',
templateUrl: './dynamips-preferences.component.html',
styleUrls: ['./dynamips-preferences.component.scss']
})
export class DynamipsPreferencesComponent implements OnInit {
server: Server;
dynamipsPath: string;
constructor(
private route: ActivatedRoute,
private serverService: ServerService,
private serverSettingsService: ServerSettingsService
) {}
ngOnInit() {
this.route.paramMap
.pipe(
switchMap((params: ParamMap) => {
const server_id = params.get('server_id');
return this.serverService.get(parseInt(server_id, 10));
})
)
.subscribe((server: Server) => {
this.server = server;
});
}
}

17
src/app/components/preferences/dynamips/ios-templates/ios-templates.component.html Normal file
View File

@ -0,0 +1,17 @@
<div class="content">
<div class="default-header">
<div class="row">
<h1 class="col">IOS routers templates</h1>
<button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/dynamips/addtemplate" mat-raised-button color="primary">Add IOS router template</button>
</div>
</div>
<div class="default-content">
<div class="container mat-elevation-z8">
<mat-nav-list *ngIf="server">
<mat-list-item *ngFor='let template of iosTemplates' routerLink="{{template.template_id}}">
{{template.name}}
</mat-list-item>
</mat-nav-list>
</div>
</div>
</div>

4
src/app/components/preferences/dynamips/ios-templates/ios-templates.component.scss Normal file
View File

@ -0,0 +1,4 @@
.top-button {
height: 36px;
margin-top: 22px
}

0
src/app/components/preferences/dynamips/ios-templates/ios-templates.component.spec.ts Normal file
View File

41
src/app/components/preferences/dynamips/ios-templates/ios-templates.component.ts Normal file
View File

@ -0,0 +1,41 @@
import { Component, OnInit } from "@angular/core";
import { Server } from '../../../../models/server';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { ServerService } from '../../../../services/server.service';
import { switchMap } from 'rxjs/operators';
import { IosService } from '../../../../services/ios.service';
import { IosTemplate } from '../../../../models/templates/ios-template';
@Component({
selector: 'app-ios-templates',
templateUrl: './ios-templates.component.html',
styleUrls: ['./ios-templates.component.scss']
})
export class IosTemplatesComponent implements OnInit {
server: Server;
iosTemplates: IosTemplate[];
constructor(
private route: ActivatedRoute,
private serverService: ServerService,
private iosService: IosService
) {}
ngOnInit() {
this.route.paramMap
.pipe(
switchMap((params: ParamMap) => {
const server_id = params.get('server_id');
return this.serverService.get(parseInt(server_id, 10));
})
)
.subscribe((server: Server) => {
this.server = server;
this.iosService.getTemplates(this.server).subscribe((templates: IosTemplate[]) => {
this.iosTemplates = templates.filter((elem) => elem.template_type === 'dynamips');
});
});
}
}

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

@ -12,6 +12,11 @@
Built-in
</button>
</mat-list-item>
<mat-list-item>
<button mat-button routerLink="/server/{{serverId}}/preferences/dynamips/templates">
Dynamips
</button>
</mat-list-item>
<mat-list-item>
<button mat-button routerLink="/server/{{serverId}}/preferences/vpcs/templates">
VPCS

14
src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.html
View File

@ -1,4 +1,4 @@
<div class="content" [ngClass]="{ shadowed: isConfiguratorOpened }" [ngClass]="{ nonshadowed: !isConfiguratorOpened }">
<div class="content" [ngClass]="{ shadowed: isConfiguratorOpened || isSymbolSelectionOpened}">
<div class="default-header">
<div class="row">
<h1 class="col">QEMU VM configuration</h1>
@ -21,6 +21,7 @@
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="qemuTemplate.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" [(ngModel)]="qemuTemplate.category">
<mat-option *ngFor="let category of categories" [value]="category[1]">
@ -359,3 +360,14 @@
</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]="qemuTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
</div>
</div>

9
src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.scss
View File

@ -36,6 +36,15 @@
transition: 0.25s;
}
.top-button {
height: 36px;
margin-top: 22px
}
.symbolSelectionButton {
width: 100%;
}
.nonshadowed {
opacity: 0;
transition: 0.25s;

10
src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts
View File

@ -18,6 +18,8 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
server: Server;
qemuTemplate: QemuTemplate;
isSymbolSelectionOpened: boolean = false;
consoleTypes: string[] = ['telnet', 'vnc', 'spice', 'spice+agent', 'none'];
diskInterfaces: string[] = ['ide', 'sata', 'scsi', 'sd', 'mtd', 'floppy', 'pflash', 'virtio', 'none'];
networkTypes = [["e1000", "Intel Gigabit Ethernet"],
@ -129,4 +131,12 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
this.toasterService.success("Changes saved");
});
}
chooseSymbol() {
this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
}
symbolChanged(chosenSymbol: string) {
this.qemuTemplate.symbol = chosenSymbol;
}
}

2
src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.ts
View File

@ -4,7 +4,7 @@ import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { ServerService } from '../../../../services/server.service';
import { switchMap } from 'rxjs/operators';
import { VirtualBoxService } from '../../../../services/virtual-box.service';
import { VirtualBoxVm } from '../../../../models/virtualbox/virtualboxVm';
import { VirtualBoxVm } from '../../../../models/virtualBox/virtual-box-vm';
import { ToasterService } from '../../../../services/toaster.service';
import { TemplateMocksService } from '../../../../services/template-mocks.service';
import { VirtualBoxTemplate } from '../../../../models/templates/virtualbox-template';

14
src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.html
View File

@ -1,4 +1,4 @@
<div class="content" [ngClass]="{ shadowed: isConfiguratorOpened }" [ngClass]="{ nonshadowed: !isConfiguratorOpened }">
<div class="content" [ngClass]="{ shadowed: isConfiguratorOpened || isSymbolSelectionOpened }">
<div class="default-header">
<div class="row">
<h1 class="col">VirtualBox VM configuration</h1>
@ -21,6 +21,7 @@
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="virtualBoxTemplate.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" [(ngModel)]="virtualBoxTemplate.category">
<mat-option *ngFor="let category of categories" [value]="category[1]">
@ -138,3 +139,14 @@
</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]="virtualBoxTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
</div>
</div>

9
src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.scss
View File

@ -23,6 +23,15 @@
transition: 0.25s;
}
.top-button {
height: 36px;
margin-top: 22px
}
.symbolSelectionButton {
width: 100%;
}
.nonshadowed {
opacity: 0;
transition: 0.25s;

10
src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.ts
View File

@ -18,6 +18,8 @@ export class VirtualBoxTemplateDetailsComponent implements OnInit {
server: Server;
virtualBoxTemplate: VirtualBoxTemplate;
isSymbolSelectionOpened: boolean = false;
consoleTypes: string[] = ['telnet', 'none'];
onCloseOptions = [["Power off the VM", "power_off"],
["Send the shutdown signal (ACPI)", "shutdown_signal"],
@ -79,4 +81,12 @@ export class VirtualBoxTemplateDetailsComponent implements OnInit {
this.toasterService.success("Changes saved");
});
}
chooseSymbol() {
this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
}
symbolChanged(chosenSymbol: string) {
this.virtualBoxTemplate.symbol = chosenSymbol;
}
}

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

@ -1,4 +1,4 @@
<div class="content">
<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
<div class="default-header">
<div class="row">
<h1 class="col">VPCS device configuration</h1>
@ -34,6 +34,7 @@
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"
@ -65,3 +66,15 @@
</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]="vpcsTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
</div>
</div>

14
src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.scss
View File

@ -6,3 +6,17 @@
.select {
width: 100%;
}
.top-button {
height: 36px;
margin-top: 22px
}
.shadowed {
display: none;
transition: 0.25s;
}
.symbolSelectionButton {
width: 100%;
}

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

@ -18,6 +18,8 @@ export class VpcsTemplateDetailsComponent implements OnInit {
vpcsTemplate: VpcsTemplate;
inputForm: FormGroup;
isSymbolSelectionOpened: boolean = false;
consoleTypes: string[] = ['telnet', 'none'];
categories = [["Default", "guest"],
["Routers", "routers"],
@ -61,4 +63,12 @@ export class VpcsTemplateDetailsComponent implements OnInit {
});
}
}
chooseSymbol() {
this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
}
symbolChanged(chosenSymbol: string) {
this.vpcsTemplate.symbol = chosenSymbol;
}
}

6
src/app/material.imports.ts
View File

@ -18,7 +18,8 @@ import {
MatSelectModule,
MatTooltipModule,
MatStepperModule,
MatRadioModule
MatRadioModule,
MatGridListModule
} from '@angular/material';
export const MATERIAL_IMPORTS = [
@ -41,5 +42,6 @@ export const MATERIAL_IMPORTS = [
MatSelectModule,
MatTooltipModule,
MatStepperModule,
MatRadioModule
MatRadioModule,
MatGridListModule
];

8
src/app/models/symbol.ts
View File

@ -1,6 +1,6 @@
export class Symbol {
builtin: boolean;
filename: string;
symbol_id: string;
raw: string;
builtin: boolean;
filename: string;
symbol_id: string;
raw: string;
}

35
src/app/models/templates/ios-template.ts Normal file
View File

@ -0,0 +1,35 @@
export interface IosTemplate {
auto_delete_disks: boolean;
builtin: boolean;
category: string;
chassis: string;
compute_id: string;
console_auto_start: boolean;
console_type: string;
default_name_format: string;
disk0: number;
disk1: number;
exec_area: number;
idlemax: number;
idlepc: string;
idlesleep: number;
image: string;
iomem: number;
mac_addr: string;
mmap: boolean;
name: string;
nvram: number;
platform: string;
private_config: string;
ram: number;
slot0: string;
sparsemem: boolean;
startup_config: string;
symbol: string;
system_id: string;
template_id: string;
template_type: string;
usage: string;
wic0: string;
wic1: string;
}

0
src/app/models/virtualBox/virtualBoxVm.ts → src/app/models/virtualBox/virtual-box-vm.ts
View File

0
src/app/services/ios.service.spec.ts Normal file
View File

26
src/app/services/ios.service.ts Normal file
View File

@ -0,0 +1,26 @@
import { Injectable } from "@angular/core";
import { HttpServer } from './http-server.service';
import { Server } from '../models/server';
import { Observable } from 'rxjs';
import { IosTemplate } from '../models/templates/ios-template';
@Injectable()
export class IosService {
constructor(private httpServer: HttpServer) {}
getTemplates(server: Server): Observable<IosTemplate[]> {
return this.httpServer.get<IosTemplate[]>(server, '/templates') as Observable<IosTemplate[]>;
}
getTemplate(server: Server, template_id: string): Observable<IosTemplate> {
return this.httpServer.get<IosTemplate>(server, `/templates/${template_id}`) as Observable<IosTemplate>;
}
addTemplate(server: Server, iosTemplate: IosTemplate): Observable<IosTemplate> {
return this.httpServer.post<IosTemplate>(server, `/templates`, iosTemplate) as Observable<IosTemplate>;
}
saveTemplate(server: Server, iosTemplate: IosTemplate): Observable<IosTemplate> {
return this.httpServer.put<IosTemplate>(server, `/templates/${iosTemplate.template_id}`, iosTemplate) as Observable<IosTemplate>;
}
}

41
src/app/services/template-mocks.service.ts
View File

@ -6,6 +6,7 @@ import { VirtualBoxTemplate } from '../models/templates/virtualbox-template';
import { EthernetHubTemplate } from '../models/templates/ethernet-hub-template';
import { CloudTemplate } from '../models/templates/cloud-template';
import { EthernetSwitchTemplate } from '../models/templates/ethernet-switch-template';
import { IosTemplate } from '../models/templates/ios-template';
@Injectable()
export class TemplateMocksService {
@ -155,4 +156,44 @@ export class TemplateMocksService {
return of(template);
}
getIosTemplate() : Observable<IosTemplate> {
let template: IosTemplate = {
auto_delete_disks: true,
builtin: false,
category: 'router',
chassis: '1720',
compute_id: 'local',
console_auto_start: false,
console_type: 'telnet',
default_name_format: 'R{0}',
disk0: 0,
disk1: 0,
exec_area: 64,
idlemax: 500,
idlepc: '',
idlesleep: 30,
image: '',
iomem: 0,
mac_addr: '',
mmap: true,
name: '',
nvram: 128,
platform: '',
private_config: '',
ram: 128,
slot0: '',
sparsemem: true,
startup_config: '',
symbol: ':/symbols/router.svg',
system_id: 'FTX0945W0MY',
template_id: '',
template_type: 'dynamips',
usage: '',
wic0: '',
wic1: ''
}
return of(template);
}
}

2
src/app/services/virtual-box.service.ts
View File

@ -3,7 +3,7 @@ import { HttpServer } from './http-server.service';
import { Server } from '../models/server';
import { Observable } from 'rxjs';
import { VirtualBoxTemplate } from '../models/templates/virtualbox-template';
import { VirtualBoxVm } from '../models/virtualbox/virtualboxVm';
import { VirtualBoxVm } from '../models/virtualBox/virtual-box-vm';
@Injectable()
export class VirtualBoxService {