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

Fixes after review #2

Browse Source
This commit is contained in:
Piotr Pekala
2019-02-18 02:16:50 -08:00
parent 30ede76507
commit aec31c5fbc
27 changed files with 361 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -124,7 +124,7 @@
</mat-accordion> </mat-accordion>
<div class="buttons-bar"> <div class="buttons-bar">
<button class="cancel-button" (click)="goBack()" mat-button>Cancel</button> <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
<button mat-raised-button color="primary" (click)="onSave()">Save</button><br/> <button mat-raised-button color="primary" (click)="onSave()">Save</button>
</div> </div>
</div> </div>
</div> </div>

47
src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.html
View File

@ -27,27 +27,29 @@
formControlName="templateName" formControlName="templateName"
placeholder="Name"/> placeholder="Name"/>
</mat-form-field> </mat-form-field>
<mat-form-field class="form-field">
<mat-select
placeholder="Platform"
(selectionChange)="onPlatformChosen($event)"
formControlName="platform"
[(ngModel)]="iosTemplate.platform">
<mat-option *ngFor="let platform of platforms" [value]="platform">
{{platform}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field" *ngIf="chassis[iosTemplate.platform]">
<mat-select
placeholder="Chassis"
(selectionChange)="onChassisChosen($event)"
formControlName="chassis"
[(ngModel)]="iosTemplate.chassis">
<mat-option *ngFor="let chassis of chassis[iosTemplate.platform]" [value]="chassis">
{{chassis}}
</mat-option>
</mat-select>
</mat-form-field>
</form> </form>
<mat-form-field class="form-field">
<mat-select
placeholder="Platform"
(selectionChange)="onPlatformChosen($event)"
[(ngModel)]="iosTemplate.platform">
<mat-option *ngFor="let platform of platforms" [value]="platform">
{{platform}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field" *ngIf="chassis[iosTemplate.platform]">
<mat-select
placeholder="Chassis"
(selectionChange)="onChassisChosen($event)"
[(ngModel)]="iosTemplate.chassis">
<mat-option *ngFor="let chassis of chassis[iosTemplate.platform]" [value]="chassis">
{{chassis}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox <mat-checkbox
*ngIf="platformsWithEtherSwitchRouterOption[iosTemplate.platform]" *ngIf="platformsWithEtherSwitchRouterOption[iosTemplate.platform]"
[(ngModel)]="isEtherSwitchRouter"> [(ngModel)]="isEtherSwitchRouter">
@ -119,9 +121,12 @@
[(ngModel)]="iosTemplate.idlepc" [(ngModel)]="iosTemplate.idlepc"
placeholder="Idle-PC"/> placeholder="Idle-PC"/>
</mat-form-field> </mat-form-field>
<div class="buttons-bar"><button mat-raised-button color="primary" (click)="addTemplate()">Add template</button></div>
</mat-step> </mat-step>
</mat-vertical-stepper> </mat-vertical-stepper>
</div> </div>
<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> </div>
</div> </div>

3
src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.scss
View File

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

12
src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts
View File

@ -14,7 +14,7 @@ import { IosConfigurationService } from '../../../../services/ios-configuration.
@Component({ @Component({
selector: 'app-add-ios-template', selector: 'app-add-ios-template',
templateUrl: './add-ios-template.component.html', templateUrl: './add-ios-template.component.html',
styleUrls: ['./add-ios-template.component.scss'] styleUrls: ['./add-ios-template.component.scss', '../../preferences.component.scss']
}) })
export class AddIosTemplateComponent implements OnInit { export class AddIosTemplateComponent implements OnInit {
server: Server; server: Server;
@ -57,7 +57,9 @@ export class AddIosTemplateComponent implements OnInit {
}); });
this.iosNameForm = this.formBuilder.group({ this.iosNameForm = this.formBuilder.group({
templateName: new FormControl(null, [Validators.required]) templateName: new FormControl(null, [Validators.required]),
platform: new FormControl(null, [Validators.required]),
chassis: new FormControl(null, [Validators.required])
}); });
this.iosMemoryForm = this.formBuilder.group({ this.iosMemoryForm = this.formBuilder.group({
@ -98,7 +100,7 @@ export class AddIosTemplateComponent implements OnInit {
if (this.networkModulesForTemplate.length>0) this.completeModulesData(); if (this.networkModulesForTemplate.length>0) this.completeModulesData();
this.iosService.addTemplate(this.server, this.iosTemplate).subscribe((template: IosTemplate) => { this.iosService.addTemplate(this.server, this.iosTemplate).subscribe((template: IosTemplate) => {
this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']); this.goBack();
}); });
} else { } else {
this.toasterService.error(`Fill all required fields`); this.toasterService.error(`Fill all required fields`);
@ -142,6 +144,10 @@ export class AddIosTemplateComponent implements OnInit {
if (this.networkModulesForTemplate[2]) this.iosTemplate.wic2 = this.networkModulesForTemplate[2]; if (this.networkModulesForTemplate[2]) this.iosTemplate.wic2 = this.networkModulesForTemplate[2];
} }
goBack() {
this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']);
}
onPlatformChosen() { onPlatformChosen() {
this.iosTemplate.chassis = ''; this.iosTemplate.chassis = '';
this.networkAdaptersForTemplate = []; this.networkAdaptersForTemplate = [];

23
src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.html
View File

@ -5,15 +5,20 @@
</div> </div>
</div> </div>
<div class="default-content"> <div class="default-content">
<div class="container mat-elevation-z8"> <mat-card class="matCard">
<mat-form-field class="form-field"> <form [formGroup]="formGroup">
<input <mat-form-field class="form-field">
matInput type="text" <input
[(ngModel)]="templateName" matInput type="text"
placeholder="Name" [(ngModel)]="templateName"
ngDefaultControl/> placeholder="Name"
</mat-form-field><br/> formControlName="templateName"/>
<div class="buttons-bar"><button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button></div> </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()">Copy template</button>
</div> </div>
</div> </div>
</div> </div>

30
src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.scss
View File

@ -1,30 +0,0 @@
.form-field {
width: 100%;
}
.radio-button {
width: 50%;
padding-top: 20px;
padding-bottom: 30px;
}
.radio-group {
margin-bottom: 20px;
}
.buttons-bar {
padding-top: 20px;
}
.nonvisible {
display: none;
}
.file-button {
width: 18%;
}
.file-name-form-field {
padding-left: 2%;
width: 80%;
}

21
src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.ts
View File

@ -6,25 +6,32 @@ import { ToasterService } from '../../../../services/toaster.service';
import { v4 as uuid } from 'uuid'; import { v4 as uuid } from 'uuid';
import { IosTemplate } from '../../../../models/templates/ios-template'; import { IosTemplate } from '../../../../models/templates/ios-template';
import { IosService } from '../../../../services/ios.service'; import { IosService } from '../../../../services/ios.service';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
@Component({ @Component({
selector: 'app-copy-ios-template', selector: 'app-copy-ios-template',
templateUrl: './copy-ios-template.component.html', templateUrl: './copy-ios-template.component.html',
styleUrls: ['./copy-ios-template.component.scss'] styleUrls: ['./copy-ios-template.component.scss', '../../preferences.component.scss']
}) })
export class CopyIosTemplateComponent implements OnInit { export class CopyIosTemplateComponent implements OnInit {
server: Server; server: Server;
templateName: string = ''; templateName: string = '';
iosTemplate: IosTemplate; iosTemplate: IosTemplate;
formGroup: FormGroup;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private serverService: ServerService, private serverService: ServerService,
private iosService: IosService, private iosService: IosService,
private toasterService: ToasterService, private toasterService: ToasterService,
private router: Router private router: Router,
) {} private formBuilder: FormBuilder
) {
this.formGroup = this.formBuilder.group({
templateName: new FormControl('', Validators.required)
});
}
ngOnInit() { ngOnInit() {
const server_id = this.route.snapshot.paramMap.get("server_id"); const server_id = this.route.snapshot.paramMap.get("server_id");
@ -40,13 +47,17 @@ export class CopyIosTemplateComponent implements OnInit {
}); });
} }
goBack() {
this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']);
}
addTemplate() { addTemplate() {
if (this.templateName) { if (!this.formGroup.invalid) {
this.iosTemplate.template_id = uuid(); this.iosTemplate.template_id = uuid();
this.iosTemplate.name = this.templateName; this.iosTemplate.name = this.templateName;
this.iosService.addTemplate(this.server, this.iosTemplate).subscribe((template: IosTemplate) => { this.iosService.addTemplate(this.server, this.iosTemplate).subscribe((template: IosTemplate) => {
this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']); this.goBack();
}); });
} else { } else {
this.toasterService.error(`Fill all required fields`); this.toasterService.error(`Fill all required fields`);

145
src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.html
View File

@ -12,34 +12,36 @@
General settings General settings
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-form-field class="row"> <form [formGroup]="generalSettingsForm">
<input matInput type="text" [(ngModel)]="iosTemplate.name" placeholder="Template name"> <mat-form-field class="form-field">
</mat-form-field> <input matInput type="text" formControlName="templateName" [(ngModel)]="iosTemplate.name" placeholder="Template name">
<mat-form-field class="row"> </mat-form-field>
<input matInput type="text" [(ngModel)]="iosTemplate.default_name_format" placeholder="Default name format"> <mat-form-field class="form-field">
</mat-form-field> <input matInput type="text" formControlName="defaultName" [(ngModel)]="iosTemplate.default_name_format" placeholder="Default name format">
<mat-label>Platform - {{iosTemplate.platform}}</mat-label><br/><br/> </mat-form-field>
<mat-label>Chassis - {{iosTemplate.chassis}}</mat-label><br/><br/> <mat-label>Platform - {{iosTemplate.platform}}</mat-label><br/><br/>
<mat-form-field class="row"> <mat-label>Chassis - {{iosTemplate.chassis}}</mat-label><br/><br/>
<input matInput type="text" [(ngModel)]="iosTemplate.symbol" placeholder="Symbol"> <mat-form-field class="form-field">
</mat-form-field> <input matInput type="text" formControlName="symbol" [(ngModel)]="iosTemplate.symbol" placeholder="Symbol">
<button mat-raised-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/> </mat-form-field>
<mat-form-field class="row"> <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
<mat-select placeholder="Category" [(ngModel)]="iosTemplate.category"> <mat-form-field class="form-field">
<mat-option *ngFor="let category of categories" [value]="category[1]"> <mat-select [ngModelOptions]="{standalone: true}" placeholder="Category" [(ngModel)]="iosTemplate.category">
{{category[0]}} <mat-option *ngFor="let category of categories" [value]="category[1]">
</mat-option> {{category[0]}}
</mat-select> </mat-option>
</mat-form-field> </mat-select>
<mat-form-field class="row"> </mat-form-field>
<input matInput type="text" [(ngModel)]="iosTemplate.image" placeholder="IOS image path"> <mat-form-field class="form-field">
</mat-form-field> <input matInput type="text" formControlName="path" [(ngModel)]="iosTemplate.image" placeholder="IOS image path">
<mat-form-field class="row"> </mat-form-field>
<input matInput type="text" [(ngModel)]="iosTemplate.startup_config" placeholder="Initial startup-config"> <mat-form-field class="form-field">
</mat-form-field> <input matInput type="text" formControlName="initialConfig" [(ngModel)]="iosTemplate.startup_config" placeholder="Initial startup-config">
<mat-form-field class="row"> </mat-form-field>
<input matInput type="text" [(ngModel)]="iosTemplate.private_config" placeholder="Initial private-config"> <mat-form-field class="form-field">
</mat-form-field> <input [ngModelOptions]="{standalone: true}" matInput type="text" [(ngModel)]="iosTemplate.private_config" placeholder="Initial private-config">
</mat-form-field>
</form>
<mat-form-field class="select"> <mat-form-field class="select">
<mat-select placeholder="Console type" [(ngModel)]="iosTemplate.console_type"> <mat-select placeholder="Console type" [(ngModel)]="iosTemplate.console_type">
<mat-option *ngFor="let type of consoleTypes" [value]="type"> <mat-option *ngFor="let type of consoleTypes" [value]="type">
@ -57,21 +59,23 @@
Memories and disks Memories and disks
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-form-field class="row"> <form [formGroup]="memoryForm">
<input matInput type="number" [(ngModel)]="iosTemplate.ram" placeholder="RAM size"> <mat-form-field class="form-field">
</mat-form-field> <input matInput type="number" formControlName="ram" [(ngModel)]="iosTemplate.ram" placeholder="RAM size">
<mat-form-field class="row"> </mat-form-field>
<input matInput type="number" [(ngModel)]="iosTemplate.nvram" placeholder="NVRAM size"> <mat-form-field class="form-field">
</mat-form-field> <input matInput type="number" formControlName="nvram" [(ngModel)]="iosTemplate.nvram" placeholder="NVRAM size">
<mat-form-field class="row"> </mat-form-field>
<input matInput type="number" [(ngModel)]="iosTemplate.iomem" placeholder="I/O memory"> <mat-form-field class="form-field">
</mat-form-field> <input matInput type="number" formControlName="iomemory" [(ngModel)]="iosTemplate.iomem" placeholder="I/O memory">
<mat-form-field class="row"> </mat-form-field>
<input matInput type="number" [(ngModel)]="iosTemplate.disk0" placeholder="PCMCIA disk0"> <mat-form-field class="form-field">
</mat-form-field> <input matInput type="number" formControlName="disk0" [(ngModel)]="iosTemplate.disk0" placeholder="PCMCIA disk0">
<mat-form-field class="row"> </mat-form-field>
<input matInput type="number" [(ngModel)]="iosTemplate.disk1" placeholder="PCMCIA disk1"> <mat-form-field class="form-field">
</mat-form-field> <input matInput type="number" formControlName="disk1" [(ngModel)]="iosTemplate.disk1" placeholder="PCMCIA disk1">
</mat-form-field>
</form>
<mat-checkbox [(ngModel)]="iosTemplate.auto_delete_disks"> <mat-checkbox [(ngModel)]="iosTemplate.auto_delete_disks">
Automatically delete NVRAM and disk files Automatically delete NVRAM and disk files
</mat-checkbox> </mat-checkbox>
@ -147,24 +151,26 @@
Advanced Advanced
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-form-field class="row"> <form [formGroup]="advancedForm">
<input matInput type="text" [(ngModel)]="iosTemplate.system_id" placeholder="System ID"> <mat-form-field class="form-field">
</mat-form-field> <input matInput formControlName="systemId" type="text" [(ngModel)]="iosTemplate.system_id" placeholder="System ID">
<mat-form-field class="row"> </mat-form-field>
<input matInput type="text" [(ngModel)]="iosTemplate.mac_addr" placeholder="Base MAC"> <mat-form-field class="form-field">
</mat-form-field> <input [ngModelOptions]="{standalone: true}" matInput type="text" [(ngModel)]="iosTemplate.mac_addr" placeholder="Base MAC">
<mat-form-field class="row"> </mat-form-field>
<input matInput type="text" [(ngModel)]="iosTemplate.idlepc" placeholder="Idle-PC"> <mat-form-field class="form-field">
</mat-form-field> <input [ngModelOptions]="{standalone: true}" matInput type="text" [(ngModel)]="iosTemplate.idlepc" placeholder="Idle-PC">
<mat-form-field class="row"> </mat-form-field>
<input matInput type="number" [(ngModel)]="iosTemplate.idlemax" placeholder="Idlemax"> <mat-form-field class="form-field">
</mat-form-field> <input matInput formControlName="idlemax" type="number" [(ngModel)]="iosTemplate.idlemax" placeholder="Idlemax">
<mat-form-field class="row"> </mat-form-field>
<input matInput type="number" [(ngModel)]="iosTemplate.idlesleep" placeholder="Idlesleep"> <mat-form-field class="form-field">
</mat-form-field> <input matInput formControlName="idlesleep" type="number" [(ngModel)]="iosTemplate.idlesleep" placeholder="Idlesleep">
<mat-form-field class="row"> </mat-form-field>
<input matInput type="number" [(ngModel)]="iosTemplate.exec_area" placeholder="Exec area"> <mat-form-field class="form-field">
</mat-form-field> <input matInput formControlName="execarea" type="number" [(ngModel)]="iosTemplate.exec_area" placeholder="Exec area">
</mat-form-field>
</form>
<mat-checkbox [(ngModel)]="iosTemplate.mmap"> <mat-checkbox [(ngModel)]="iosTemplate.mmap">
Enable mmap support Enable mmap support
</mat-checkbox><br/><br/> </mat-checkbox><br/><br/>
@ -178,22 +184,15 @@
Usage Usage
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-form-field class="row"> <mat-form-field class="form-field">
<textarea matInput type="text" [(ngModel)]="iosTemplate.usage"></textarea> <textarea matInput type="text" [(ngModel)]="iosTemplate.usage"></textarea>
</mat-form-field> </mat-form-field>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>
<div class="buttons-bar"><button mat-raised-button color="primary" (click)="onSave()">Save</button></div> <div class="buttons-bar">
</div> <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
</div> <button mat-raised-button color="primary" (click)="onSave()">Save</button>
<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> </div>
<div class="default-content">
<app-symbols [server]="server" [symbol]="iosTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
</div>
</div> </div>
<app-symbols-menu *ngIf="isSymbolSelectionOpened && iosTemplate" [server]="server" [symbol]="iosTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>

22
src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.scss
View File

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

55
src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { ServerService } from '../../../../services/server.service'; import { ServerService } from '../../../../services/server.service';
import { Server } from '../../../../models/server'; import { Server } from '../../../../models/server';
import { ToasterService } from '../../../../services/toaster.service'; import { ToasterService } from '../../../../services/toaster.service';
@ -12,7 +12,7 @@ import { IosConfigurationService } from '../../../../services/ios-configuration.
@Component({ @Component({
selector: 'app-ios-template-details', selector: 'app-ios-template-details',
templateUrl: './ios-template-details.component.html', templateUrl: './ios-template-details.component.html',
styleUrls: ['./ios-template-details.component.scss'] styleUrls: ['./ios-template-details.component.scss', '../../preferences.component.scss']
}) })
export class IosTemplateDetailsComponent implements OnInit { export class IosTemplateDetailsComponent implements OnInit {
server: Server; server: Server;
@ -22,6 +22,7 @@ export class IosTemplateDetailsComponent implements OnInit {
networkAdaptersForTemplate: string[] = []; networkAdaptersForTemplate: string[] = [];
platforms: string[] = []; platforms: string[] = [];
consoleTypes: string[] = [];
platformsWithEtherSwitchRouterOption = {}; platformsWithEtherSwitchRouterOption = {};
platformsWithChassis = {}; platformsWithChassis = {};
chassis = {}; chassis = {};
@ -31,14 +32,42 @@ export class IosTemplateDetailsComponent implements OnInit {
networkAdaptersForPlatform = {}; networkAdaptersForPlatform = {};
networkModules = {}; networkModules = {};
generalSettingsForm: FormGroup;
memoryForm: FormGroup;
advancedForm: FormGroup;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private serverService: ServerService, private serverService: ServerService,
private iosService: IosService, private iosService: IosService,
private toasterService: ToasterService, private toasterService: ToasterService,
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
private iosConfigurationService: IosConfigurationService private iosConfigurationService: IosConfigurationService,
) {} private router: Router
) {
this.generalSettingsForm = this.formBuilder.group({
templateName: new FormControl('', Validators.required),
defaultName: new FormControl('', Validators.required),
symbol: new FormControl('', Validators.required),
path: new FormControl('', Validators.required),
initialConfig: new FormControl('', Validators.required)
});
this.memoryForm = this.formBuilder.group({
ram: new FormControl('', Validators.required),
nvram: new FormControl('', Validators.required),
iomemory: new FormControl('', Validators.required),
disk0: new FormControl('', Validators.required),
disk1: new FormControl('', Validators.required),
});
this.advancedForm = this.formBuilder.group({
systemId: new FormControl('', Validators.required),
idlemax: new FormControl('', Validators.required),
idlesleep: new FormControl('', Validators.required),
execarea: new FormControl('', Validators.required),
});
}
ngOnInit() { ngOnInit() {
const server_id = this.route.snapshot.paramMap.get("server_id"); const server_id = this.route.snapshot.paramMap.get("server_id");
@ -64,6 +93,7 @@ export class IosTemplateDetailsComponent implements OnInit {
this.platformsWithChassis = this.iosConfigurationService.getPlatformsWithChassis(); this.platformsWithChassis = this.iosConfigurationService.getPlatformsWithChassis();
this.chassis = this.iosConfigurationService.getChassis(); this.chassis = this.iosConfigurationService.getChassis();
this.defaultRam = this.iosConfigurationService.getDefaultRamSettings(); this.defaultRam = this.iosConfigurationService.getDefaultRamSettings();
this.consoleTypes = this.iosConfigurationService.getConsoleTypes();
} }
fillAdaptersData() { fillAdaptersData() {
@ -89,11 +119,19 @@ export class IosTemplateDetailsComponent implements OnInit {
} }
onSave() { onSave() {
this.completeAdaptersData(); if (this.generalSettingsForm.invalid || this.memoryForm.invalid || this.advancedForm.invalid) {
this.toasterService.error(`Fill all required fields`);
} else {
this.completeAdaptersData();
this.iosService.saveTemplate(this.server, this.iosTemplate).subscribe((iosTemplate: IosTemplate) => { this.iosService.saveTemplate(this.server, this.iosTemplate).subscribe((iosTemplate: IosTemplate) => {
this.toasterService.success("Changes saved"); this.toasterService.success("Changes saved");
}); });
}
}
goBack() {
this.router.navigate(['/server', this.server.id, 'preferences', 'dynamips', 'templates']);
} }
chooseSymbol() { chooseSymbol() {
@ -101,6 +139,7 @@ export class IosTemplateDetailsComponent implements OnInit {
} }
symbolChanged(chosenSymbol: string) { symbolChanged(chosenSymbol: string) {
this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
this.iosTemplate.symbol = chosenSymbol; this.iosTemplate.symbol = chosenSymbol;
} }
} }

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

@ -2,6 +2,7 @@
<div class="default-header"> <div class="default-header">
<div class="row"> <div class="row">
<h1 class="col">IOS routers templates</h1> <h1 class="col">IOS routers templates</h1>
<button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences" mat-button>Back</button>
<button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/dynamips/templates/addtemplate" mat-raised-button color="primary">Add IOS router template</button> <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> </div>
@ -9,8 +10,8 @@
<div class="default-content" *ngIf="iosTemplates.length"> <div class="default-content" *ngIf="iosTemplates.length">
<div class="container mat-elevation-z8"> <div class="container mat-elevation-z8">
<mat-nav-list *ngIf="server"> <mat-nav-list *ngIf="server">
<mat-list-item *ngFor='let template of iosTemplates'> <div class="list-item" *ngFor='let template of iosTemplates'>
<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 mat-icon-button class="menu-button" [matMenuTriggerFor]="menu"> <button mat-icon-button class="menu-button" [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
@ -22,7 +23,7 @@
<mat-icon>content_copy</mat-icon><span>Copy</span> <mat-icon>content_copy</mat-icon><span>Copy</span>
</button> </button>
</mat-menu> </mat-menu>
</mat-list-item> </div>
</mat-nav-list> </mat-nav-list>
</div> </div>
</div> </div>

12
src/app/components/preferences/dynamips/ios-templates/ios-templates.component.scss
View File

@ -1,12 +0,0 @@
.top-button {
height: 36px;
margin-top: 22px
}
.name {
width: 95%;
}
.menu-button {
width: 5%;
}

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

@ -1,8 +1,7 @@
import { Component, OnInit, ViewChild } from "@angular/core"; import { Component, OnInit, ViewChild } from "@angular/core";
import { Server } from '../../../../models/server'; 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 { ServerService } from '../../../../services/server.service';
import { switchMap } from 'rxjs/operators';
import { IosService } from '../../../../services/ios.service'; import { IosService } from '../../../../services/ios.service';
import { IosTemplate } from '../../../../models/templates/ios-template'; import { IosTemplate } from '../../../../models/templates/ios-template';
import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component'; import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
@ -12,7 +11,7 @@ import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
@Component({ @Component({
selector: 'app-ios-templates', selector: 'app-ios-templates',
templateUrl: './ios-templates.component.html', templateUrl: './ios-templates.component.html',
styleUrls: ['./ios-templates.component.scss'] styleUrls: ['./ios-templates.component.scss', '../../preferences.component.scss']
}) })
export class IosTemplatesComponent implements OnInit { export class IosTemplatesComponent implements OnInit {
server: Server; server: Server;

7
src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.html
View File

@ -9,7 +9,7 @@
<mat-vertical-stepper [linear]="true"> <mat-vertical-stepper [linear]="true">
<mat-step label="Server type"> <mat-step label="Server type">
<mat-radio-group class="radio-group"> <mat-radio-group class="radio-group">
<mat-radio-button class="radio-button" value="1" (click)="setServerType('remote computer')">Run this IOU device on a remote computer</mat-radio-button> <mat-radio-button class="radio-button" value="1" (click)="setServerType('remote computer')">Run this IOU device on a remote computer</mat-radio-button><br/>
<mat-radio-button class="radio-button" value="2" (click)="setServerType('gns3 vm')" checked>Run this IOU device on the GNS3 VM</mat-radio-button> <mat-radio-button class="radio-button" value="2" (click)="setServerType('gns3 vm')" checked>Run this IOU device on the GNS3 VM</mat-radio-button>
</mat-radio-group> </mat-radio-group>
</mat-step> </mat-step>
@ -65,9 +65,12 @@
</mat-form-field> </mat-form-field>
</div> </div>
</form> </form>
<div class="buttons-bar"><button mat-raised-button color="primary" (click)="addTemplate()">Add template</button></div>
</mat-step> </mat-step>
</mat-vertical-stepper> </mat-vertical-stepper>
</div> </div>
<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> </div>
</div> </div>

30
src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.scss
View File

@ -1,30 +0,0 @@
.form-field {
width: 100%;
}
.radio-button {
width: 50%;
padding-top: 20px;
padding-bottom: 30px;
}
.radio-group {
margin-bottom: 20px;
}
.buttons-bar {
padding-top: 20px;
}
.nonvisible {
display: none;
}
.file-button {
width: 18%;
}
.file-name-form-field {
padding-left: 2%;
width: 80%;
}

10
src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts
View File

@ -13,7 +13,7 @@ import { IouService } from '../../../../services/iou.service';
@Component({ @Component({
selector: 'app-add-iou-template', selector: 'app-add-iou-template',
templateUrl: './add-iou-template.component.html', templateUrl: './add-iou-template.component.html',
styleUrls: ['./add-iou-template.component.scss'] styleUrls: ['./add-iou-template.component.scss', '../../preferences.component.scss']
}) })
export class AddIouTemplateComponent implements OnInit { export class AddIouTemplateComponent implements OnInit {
server: Server; server: Server;
@ -75,12 +75,16 @@ export class AddIouTemplateComponent implements OnInit {
this.iouTemplate.path = event.target.files[0].name; this.iouTemplate.path = event.target.files[0].name;
} }
goBack() {
this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
}
addTemplate() { addTemplate() {
if (!this.templateNameForm.invalid && !this.imageForm.invalid) { if (!this.templateNameForm.invalid && ((this.newImageSelected && !this.imageForm.invalid) || (!this.newImageSelected && this.iouTemplate.path))) {
this.iouTemplate.template_id = uuid(); this.iouTemplate.template_id = uuid();
this.iouService.addTemplate(this.server, this.iouTemplate).subscribe((template: IouTemplate) => { this.iouService.addTemplate(this.server, this.iouTemplate).subscribe((template: IouTemplate) => {
this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']); this.goBack();
}); });
} else { } else {
this.toasterService.error(`Fill all required fields`); this.toasterService.error(`Fill all required fields`);

23
src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.html
View File

@ -5,15 +5,20 @@
</div> </div>
</div> </div>
<div class="default-content"> <div class="default-content">
<div class="container mat-elevation-z8"> <mat-card class="matCard">
<mat-form-field class="form-field"> <form [formGroup]="templateNameForm">
<input <mat-form-field class="form-field">
matInput type="text" <input
[(ngModel)]="templateName" matInput type="text"
placeholder="Name" [(ngModel)]="templateName"
ngDefaultControl/> placeholder="Name"
</mat-form-field><br/> formControlName="templateName"/>
<div class="buttons-bar"><button mat-raised-button color="primary" (click)="addTemplate()">Copy template</button></div> </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()">Copy template</button>
</div> </div>
</div> </div>
</div> </div>

30
src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.scss
View File

@ -1,30 +0,0 @@
.form-field {
width: 100%;
}
.radio-button {
width: 50%;
padding-top: 20px;
padding-bottom: 30px;
}
.radio-group {
margin-bottom: 20px;
}
.buttons-bar {
padding-top: 20px;
}
.nonvisible {
display: none;
}
.file-button {
width: 18%;
}
.file-name-form-field {
padding-left: 2%;
width: 80%;
}

23
src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.ts
View File

@ -1,30 +1,37 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
import { Server } from '../../../../models/server'; 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 { ServerService } from '../../../../services/server.service';
import { ToasterService } from '../../../../services/toaster.service'; import { ToasterService } from '../../../../services/toaster.service';
import { v4 as uuid } from 'uuid'; import { v4 as uuid } from 'uuid';
import { IouTemplate } from '../../../../models/templates/iou-template'; import { IouTemplate } from '../../../../models/templates/iou-template';
import { IouService } from '../../../../services/iou.service'; import { IouService } from '../../../../services/iou.service';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
@Component({ @Component({
selector: 'app-copy-iou-template', selector: 'app-copy-iou-template',
templateUrl: './copy-iou-template.component.html', templateUrl: './copy-iou-template.component.html',
styleUrls: ['./copy-iou-template.component.scss'] styleUrls: ['./copy-iou-template.component.scss', '../../preferences.component.scss']
}) })
export class CopyIouTemplateComponent implements OnInit { export class CopyIouTemplateComponent implements OnInit {
server: Server; server: Server;
templateName: string = ''; templateName: string = '';
iouTemplate: IouTemplate; iouTemplate: IouTemplate;
templateNameForm: FormGroup;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private serverService: ServerService, private serverService: ServerService,
private qemuService: IouService, private qemuService: IouService,
private toasterService: ToasterService, private toasterService: ToasterService,
private router: Router private router: Router,
) {} private formBuilder: FormBuilder
) {
this.templateNameForm = this.formBuilder.group({
templateName: new FormControl('', Validators.required)
});
}
ngOnInit() { ngOnInit() {
const server_id = this.route.snapshot.paramMap.get("server_id"); const server_id = this.route.snapshot.paramMap.get("server_id");
@ -40,13 +47,17 @@ export class CopyIouTemplateComponent implements OnInit {
}); });
} }
goBack() {
this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
}
addTemplate() { addTemplate() {
if (this.templateName) { if (!this.templateNameForm.invalid) {
this.iouTemplate.template_id = uuid(); this.iouTemplate.template_id = uuid();
this.iouTemplate.name = this.templateName; this.iouTemplate.name = this.templateName;
this.qemuService.addTemplate(this.server, this.iouTemplate).subscribe((template: IouTemplate) => { this.qemuService.addTemplate(this.server, this.iouTemplate).subscribe((template: IouTemplate) => {
this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']); this.goBack();
}); });
} else { } else {
this.toasterService.error(`Fill all required fields`); this.toasterService.error(`Fill all required fields`);

112
src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.html
View File

@ -1,6 +1,6 @@
<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}"> <div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened}">
<div class="default-header"> <div class="default-header">
<div class="row"> <div class="form-field">
<h1 class="col">IOU device configuration</h1> <h1 class="col">IOU device configuration</h1>
</div> </div>
</div> </div>
@ -12,44 +12,47 @@
General settings General settings
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-form-field class="row"> <form [formGroup]="generalSettingsForm">
<input matInput type="text" [(ngModel)]="iouTemplate.name" placeholder="Template name"> <mat-form-field class="form-field">
</mat-form-field> <input matInput formControlName="templateName" type="text" [(ngModel)]="iouTemplate.name" placeholder="Template name">
<mat-form-field class="row"> </mat-form-field>
<input matInput type="text" [(ngModel)]="iouTemplate.default_name_format" placeholder="Default name format"> <mat-form-field class="form-field">
</mat-form-field> <input matInput formControlName="defaultName" type="text" [(ngModel)]="iouTemplate.default_name_format" placeholder="Default name format">
<mat-form-field class="row"> </mat-form-field>
<input matInput type="text" [(ngModel)]="iouTemplate.symbol" placeholder="Symbol"> <mat-form-field class="form-field">
<input matInput formControlName="symbol" type="text" [(ngModel)]="iouTemplate.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 [ngModelOptions]="{standalone: true}" placeholder="Category" [(ngModel)]="iouTemplate.category">
<mat-option *ngFor="let category of categories" [value]="category[1]">
{{category[0]}}
</mat-option>
</mat-select>
</mat-form-field> </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)]="iouTemplate.category">
<mat-option *ngFor="let category of categories" [value]="category[1]">
{{category[0]}}
</mat-option>
</mat-select>
</mat-form-field>
<input
type="file"
accept=".bin"
#file
class="nonvisible"
(change)="uploadImageFile($event)"
ngDefaultControl/>
<button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
<mat-form-field class="file-name-form-field">
<input <input
matInput type="file"
type="text" accept=".bin"
[(ngModel)]="iouTemplate.path" #file
placeholder="IOU image path"/> class="nonvisible"
</mat-form-field> (change)="uploadImageFile($event)"
<mat-form-field class="row"> ngDefaultControl/>
<input matInput type="text" [(ngModel)]="iouTemplate.startup_config" placeholder="Startup config"> <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
</mat-form-field> <mat-form-field class="file-name-form-field">
<mat-form-field class="row"> <input
<input matInput type="text" [(ngModel)]="iouTemplate.private_config" placeholder="Private config"> matInput
</mat-form-field> formControlName="path"
type="text"
[(ngModel)]="iouTemplate.path"
placeholder="IOU image path"/>
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="initialConfig" type="text" [(ngModel)]="iouTemplate.startup_config" placeholder="Startup config">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="iouTemplate.private_config" placeholder="Private config">
</mat-form-field>
</form>
<mat-form-field class="select"> <mat-form-field class="select">
<mat-select placeholder="Console type" [(ngModel)]="iouTemplate.console_type"> <mat-select placeholder="Console type" [(ngModel)]="iouTemplate.console_type">
<mat-option *ngFor="let type of consoleTypes" [value]="type"> <mat-option *ngFor="let type of consoleTypes" [value]="type">
@ -66,10 +69,10 @@
<mat-checkbox [(ngModel)]="defaultSettings"> <mat-checkbox [(ngModel)]="defaultSettings">
Use default IOU values for memories Use default IOU values for memories
</mat-checkbox> </mat-checkbox>
<mat-form-field class="row" *ngIf="!defaultSettings"> <mat-form-field class="form-field" *ngIf="!defaultSettings">
<input matInput type="number" [(ngModel)]="iouTemplate.ram" placeholder="RAM size"> <input matInput type="number" [(ngModel)]="iouTemplate.ram" placeholder="RAM size">
</mat-form-field> </mat-form-field>
<mat-form-field class="row" *ngIf="!defaultSettings"> <mat-form-field class="form-field" *ngIf="!defaultSettings">
<input matInput type="number" [(ngModel)]="iouTemplate.nvram" placeholder="NVRAM size"> <input matInput type="number" [(ngModel)]="iouTemplate.nvram" placeholder="NVRAM size">
</mat-form-field> </mat-form-field>
</mat-expansion-panel> </mat-expansion-panel>
@ -79,12 +82,14 @@
Network Network
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-form-field class="row"> <form [formGroup]="networkForm">
<input matInput type="number" [(ngModel)]="iouTemplate.ethernet_adapters" placeholder="Ethernet adapters"> <mat-form-field class="form-field">
</mat-form-field> <input matInput formControlName="ethernetAdapters" type="number" [(ngModel)]="iouTemplate.ethernet_adapters" placeholder="Ethernet adapters">
<mat-form-field class="row"> </mat-form-field>
<input matInput type="number" [(ngModel)]="iouTemplate.serial_adapters" placeholder="Serial adapters"> <mat-form-field class="form-field">
</mat-form-field> <input matInput formControlName="serialAdapters" type="number" [(ngModel)]="iouTemplate.serial_adapters" placeholder="Serial adapters">
</mat-form-field>
</form>
</mat-expansion-panel> </mat-expansion-panel>
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
@ -92,22 +97,15 @@
Usage Usage
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-form-field class="row"> <mat-form-field class="form-field">
<textarea matInput type="text" [(ngModel)]="iouTemplate.usage"></textarea> <textarea matInput type="text" [(ngModel)]="iouTemplate.usage"></textarea>
</mat-form-field> </mat-form-field>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>
<div class="buttons-bar"><button mat-raised-button color="primary" (click)="onSave()">Save</button></div> <div class="buttons-bar">
</div> <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
</div> <button mat-raised-button color="primary" (click)="onSave()">Save</button>
<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> </div>
<div class="default-content">
<app-symbols [server]="server" [symbol]="iouTemplate.symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
</div>
</div> </div>
<app-symbols-menu *ngIf="isSymbolSelectionOpened && iouTemplate" [server]="server" [symbol]="iouTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>

72
src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.scss
View File

@ -1,72 +0,0 @@
.row {
width: 100%;
margin-left: 0px;
}
.select {
width: 100%;
}
.nonvisible {
display: none;
}
.file-button {
width: 18%;
}
.file-name-form-field {
padding-right: 2%;
width: 80%;
}
.configButton {
width: 100%;
margin-bottom: 10px;
}
.configHideButton {
margin-left: 80%;
width: 20%;
margin-bottom: 10px;
}
.shadowed {
display: none;
transition: 0.25s;
}
.top-button {
height: 36px;
margin-top: 22px
}
.symbolSelectionButton {
width: 100%;
}
.nonshadowed {
opacity: 0;
transition: 0.25s;
}
th {
border: 0px!important;
}
th.mat-header-cell {
padding-bottom: 15px;
}
td.mat-cell {
padding-top: 15px;
}
.file-button {
width: 18%;
}
.file-name-form-field {
padding-left: 2%;
width: 80%;
}

43
src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.ts
View File

@ -1,18 +1,18 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, ParamMap } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { ServerService } from '../../../../services/server.service'; import { ServerService } from '../../../../services/server.service';
import { Server } from '../../../../models/server'; import { Server } from '../../../../models/server';
import { ToasterService } from '../../../../services/toaster.service'; import { ToasterService } from '../../../../services/toaster.service';
import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
import { IouTemplate } from '../../../../models/templates/iou-template'; import { IouTemplate } from '../../../../models/templates/iou-template';
import { IouService } from '../../../../services/iou.service'; import { IouService } from '../../../../services/iou.service';
import { IouConfigurationService } from '../../../../services/iou-configuration.service'; import { IouConfigurationService } from '../../../../services/iou-configuration.service';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
@Component({ @Component({
selector: 'app-iou-template-details', selector: 'app-iou-template-details',
templateUrl: './iou-template-details.component.html', templateUrl: './iou-template-details.component.html',
styleUrls: ['./iou-template-details.component.scss'] styleUrls: ['./iou-template-details.component.scss', '../../preferences.component.scss']
}) })
export class IouTemplateDetailsComponent implements OnInit { export class IouTemplateDetailsComponent implements OnInit {
server: Server; server: Server;
@ -25,13 +25,31 @@ export class IouTemplateDetailsComponent implements OnInit {
consoleResolutions: string[] = []; consoleResolutions: string[] = [];
categories = []; categories = [];
generalSettingsForm: FormGroup;
networkForm: FormGroup;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private serverService: ServerService, private serverService: ServerService,
private iouService: IouService, private iouService: IouService,
private toasterService: ToasterService, private toasterService: ToasterService,
private configurationService: IouConfigurationService private configurationService: IouConfigurationService,
){} private router: Router,
private formBuilder: FormBuilder
){
this.generalSettingsForm = this.formBuilder.group({
templateName: new FormControl('', Validators.required),
defaultName: new FormControl('', Validators.required),
symbol: new FormControl('', Validators.required),
path: new FormControl('', Validators.required),
initialConfig: new FormControl('', Validators.required)
});
this.networkForm = this.formBuilder.group({
ethernetAdapters: new FormControl('', Validators.required),
serialAdapters: new FormControl('', Validators.required)
});
}
ngOnInit(){ ngOnInit(){
const server_id = this.route.snapshot.paramMap.get("server_id"); const server_id = this.route.snapshot.paramMap.get("server_id");
@ -51,10 +69,18 @@ export class IouTemplateDetailsComponent implements OnInit {
this.categories = this.configurationService.getCategories(); this.categories = this.configurationService.getCategories();
} }
goBack() {
this.router.navigate(['/server', this.server.id, 'preferences', 'iou', 'templates']);
}
onSave(){ onSave(){
this.iouService.saveTemplate(this.server, this.iouTemplate).subscribe((savedTemplate: IouTemplate) => { if (this.generalSettingsForm.invalid || this.networkForm.invalid) {
this.toasterService.success("Changes saved"); this.toasterService.error(`Fill all required fields`);
}); } else {
this.iouService.saveTemplate(this.server, this.iouTemplate).subscribe(() => {
this.toasterService.success("Changes saved");
});
}
} }
uploadImageFile(event) { uploadImageFile(event) {
@ -66,6 +92,7 @@ export class IouTemplateDetailsComponent implements OnInit {
} }
symbolChanged(chosenSymbol: string) { symbolChanged(chosenSymbol: string) {
this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
this.iouTemplate.symbol = chosenSymbol; this.iouTemplate.symbol = chosenSymbol;
} }
} }

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

@ -2,6 +2,7 @@
<div class="default-header"> <div class="default-header">
<div class="row"> <div class="row">
<h1 class="col">IOU devices templates</h1> <h1 class="col">IOU devices templates</h1>
<button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences" mat-button>Back</button>
<button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/iou/addtemplate" mat-raised-button color="primary">Add IOU device template</button> <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> </div>
@ -9,8 +10,8 @@
<div class="default-content" *ngIf="iouTemplates.length"> <div class="default-content" *ngIf="iouTemplates.length">
<div class="container mat-elevation-z8"> <div class="container mat-elevation-z8">
<mat-nav-list *ngIf="server"> <mat-nav-list *ngIf="server">
<mat-list-item *ngFor='let template of iouTemplates'> <div class="list-item" *ngFor='let template of iouTemplates'>
<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 mat-icon-button class="menu-button" [matMenuTriggerFor]="menu"> <button mat-icon-button class="menu-button" [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
@ -22,7 +23,7 @@
<mat-icon>content_copy</mat-icon><span>Copy</span> <mat-icon>content_copy</mat-icon><span>Copy</span>
</button> </button>
</mat-menu> </mat-menu>
</mat-list-item> </div>
</mat-nav-list> </mat-nav-list>
</div> </div>
</div> </div>

12
src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.scss
View File

@ -1,12 +0,0 @@
.top-button {
height: 36px;
margin-top: 22px
}
.name {
width: 95%;
}
.menu-button {
width: 5%;
}

7
src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.ts
View File

@ -1,17 +1,16 @@
import { Component, OnInit, ViewChild } from "@angular/core"; import { Component, OnInit, ViewChild } from "@angular/core";
import { Server } from '../../../../models/server'; 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 { ServerService } from '../../../../services/server.service';
import { switchMap } from 'rxjs/operators';
import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component'; import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
import { IouTemplate } from '../../../../models/templates/iou-template'; import { IouTemplate } from '../../../../models/templates/iou-template';
import { IouService } from '../../../../services/iou.service'; import { IouService } from '../../../../services/iou.service';
@Component({ @Component({
selector: 'app-iou-templates', selector: 'app-iou-templates',
templateUrl: './iou-templates.component.html', templateUrl: './iou-templates.component.html',
styleUrls: ['./iou-templates.component.scss'] styleUrls: ['./iou-templates.component.scss', '../../preferences.component.scss']
}) })
export class IouTemplatesComponent implements OnInit { export class IouTemplatesComponent implements OnInit {
server: Server; server: Server;

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

@ -27,6 +27,10 @@
transition: 0.25s; transition: 0.25s;
} }
.nonvisible {
display: none;
}
.symbolSelectionButton { .symbolSelectionButton {
width: 100%; width: 100%;
} }
@ -44,6 +48,10 @@
outline: none; outline: none;
} }
.menu-button {
width: 10%;
}
th { th {
border: 0px!important; border: 0px!important;
} }
@ -55,3 +63,21 @@ th.mat-header-cell {
td.mat-cell { td.mat-cell {
padding-top: 15px; padding-top: 15px;
} }
.radio-button {
width: 50%;
padding-top: 20px;
}
.radio-group {
margin-bottom: 20px;
}
.file-button {
width: 18%;
}
.file-name-form-field {
padding-left: 2%;
width: 80%;
}

4
src/app/services/ios-configuration.service.ts
View File

@ -41,6 +41,10 @@ export class IosConfigurationService {
"C7200-IO-GE-E" "C7200-IO-GE-E"
]; ];
getConsoleTypes() {
return ['telnet', 'none'];
}
getDefaultRamSettings() { getDefaultRamSettings() {
return { return {
"c1700": 160, "c1700": 160,