mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-06-19 15:23:51 +00:00
Code optimization
This commit is contained in:
piotrpekala7
@ -1,108 +1,123 @@
|
||||
<div class="content">
|
||||
<div class="default-header">
|
||||
<div class="row">
|
||||
<h1 class="col">New QEMU VM template</h1>
|
||||
</div>
|
||||
<div class="default-header">
|
||||
<div class="row">
|
||||
<h1 class="col">New QEMU VM template</h1>
|
||||
</div>
|
||||
<div class="default-content">
|
||||
<div class="container mat-elevation-z8">
|
||||
<mat-vertical-stepper [linear]="true">
|
||||
<mat-step label="Server type" [completed]="isGns3VmChosen || isLocalComputerChosen">
|
||||
<mat-radio-group class="radio-group">
|
||||
<mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked>Run this QEMU VM locally</mat-radio-button>
|
||||
<mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run this QEMU VM on the GNS3 VM</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</mat-step>
|
||||
</div>
|
||||
<div class="default-content">
|
||||
<div class="container mat-elevation-z8">
|
||||
<mat-vertical-stepper [linear]="true">
|
||||
<mat-step label="Server type" [completed]="isGns3VmChosen || isLocalComputerChosen">
|
||||
<mat-radio-group class="radio-group">
|
||||
<mat-radio-button class="radio-button" value="1" (click)="setServerType('local')" checked
|
||||
>Run this QEMU VM locally</mat-radio-button
|
||||
>
|
||||
<mat-radio-button
|
||||
[disabled]="!isGns3VmAvailable"
|
||||
class="radio-button"
|
||||
value="2"
|
||||
(click)="setServerType('gns3 vm')"
|
||||
>Run this QEMU VM on the GNS3 VM</mat-radio-button
|
||||
>
|
||||
</mat-radio-group>
|
||||
</mat-step>
|
||||
|
||||
<mat-step label="QEMU VM Name" [completed]="nameForm.get('templateName').value">
|
||||
<form [formGroup]="nameForm">
|
||||
<mat-form-field class="form-field">
|
||||
<input
|
||||
matInput type="text"
|
||||
formControlName="templateName"
|
||||
placeholder="Please choose a descriptive name for your new QEMU virtual machine"
|
||||
ngDefaultContro/>
|
||||
</mat-form-field><br/>
|
||||
</form>
|
||||
</mat-step>
|
||||
<mat-step label="QEMU VM Name" [completed]="nameForm.get('templateName').value">
|
||||
<form [formGroup]="nameForm">
|
||||
<mat-form-field class="form-field">
|
||||
<input
|
||||
matInput
|
||||
type="text"
|
||||
formControlName="templateName"
|
||||
placeholder="Please choose a descriptive name for your new QEMU virtual machine"
|
||||
ngDefaultContro
|
||||
/> </mat-form-field
|
||||
><br />
|
||||
</form>
|
||||
</mat-step>
|
||||
|
||||
<mat-step label="QEMU binary and memory" [completed]="memoryForm.get('ramMemory').value && selectedBinary">
|
||||
<form [formGroup]="memoryForm">
|
||||
<mat-form-field class="form-field">
|
||||
<mat-select
|
||||
placeholder="Qemu binary"
|
||||
[(ngModel)]="selectedBinary"
|
||||
[ngModelOptions]="{standalone: true}">
|
||||
<mat-option *ngFor="let binary of qemuBinaries" [value]="binary">
|
||||
{{binary.path}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field><br/>
|
||||
<mat-form-field class="form-field">
|
||||
<input
|
||||
matInput type="number"
|
||||
placeholder="RAM"
|
||||
formControlName="ramMemory"
|
||||
ngDefaultControl/>
|
||||
<span matSuffix>MB</span>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</mat-step>
|
||||
<mat-step label="QEMU binary and memory" [completed]="memoryForm.get('ramMemory').value && selectedBinary">
|
||||
<form [formGroup]="memoryForm">
|
||||
<mat-form-field class="form-field">
|
||||
<mat-select
|
||||
placeholder="Qemu binary"
|
||||
[(ngModel)]="selectedBinary"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
>
|
||||
<mat-option *ngFor="let binary of qemuBinaries" [value]="binary">
|
||||
{{ binary.path }}
|
||||
</mat-option>
|
||||
</mat-select> </mat-form-field
|
||||
><br />
|
||||
<mat-form-field class="form-field">
|
||||
<input matInput type="number" placeholder="RAM" formControlName="ramMemory" ngDefaultControl />
|
||||
<span matSuffix>MB</span>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</mat-step>
|
||||
|
||||
<mat-step label="Console type" [completed]="qemuTemplate.console_type">
|
||||
<mat-form-field class="form-field">
|
||||
<mat-select
|
||||
placeholder="Console type"
|
||||
[(ngModel)]="qemuTemplate.console_type"
|
||||
[ngModelOptions]="{standalone: true}" >
|
||||
<mat-option *ngFor="let type of consoleTypes" [value]="type">
|
||||
{{type}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</mat-step>
|
||||
<mat-step label="Console type" [completed]="qemuTemplate.console_type">
|
||||
<mat-form-field class="form-field">
|
||||
<mat-select
|
||||
placeholder="Console type"
|
||||
[(ngModel)]="qemuTemplate.console_type"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
>
|
||||
<mat-option *ngFor="let type of consoleTypes" [value]="type">
|
||||
{{ type }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</mat-step>
|
||||
|
||||
<mat-step label="Disk image">
|
||||
<form [formGroup]="diskForm">
|
||||
<mat-radio-group class="radio-group">
|
||||
<mat-radio-button class="radio-button" value="1" (click)="setDiskImage('existingImage')" checked>Existing image</mat-radio-button>
|
||||
<mat-radio-button class="radio-button" value="2" (click)="setDiskImage('newImage')">New image</mat-radio-button>
|
||||
</mat-radio-group><br/><br/>
|
||||
<mat-select
|
||||
*ngIf="!newImageSelected"
|
||||
placeholder="Disk image (hda)"
|
||||
[ngModelOptions]="{standalone: true}"
|
||||
[(ngModel)]="selectedImage">
|
||||
<mat-option *ngFor="let image of qemuImages" [value]="image">
|
||||
{{image.filename}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<div *ngIf="newImageSelected">
|
||||
<input
|
||||
type="file"
|
||||
accept=".qcow2"
|
||||
#file
|
||||
class="nonvisible"
|
||||
(change)="uploadImageFile($event)"
|
||||
ng2FileSelect
|
||||
[uploader]="uploader"/>
|
||||
<button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
|
||||
<mat-form-field class="file-name-form-field">
|
||||
<input
|
||||
matInput
|
||||
type="text"
|
||||
[(ngModel)]="chosenImage"
|
||||
formControlName="fileName"
|
||||
placeholder="Please enter name"/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
</mat-vertical-stepper>
|
||||
</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>
|
||||
<mat-step label="Disk image">
|
||||
<form [formGroup]="diskForm">
|
||||
<mat-radio-group class="radio-group">
|
||||
<mat-radio-button class="radio-button" value="1" (click)="setDiskImage('existingImage')" checked
|
||||
>Existing image</mat-radio-button
|
||||
>
|
||||
<mat-radio-button class="radio-button" value="2" (click)="setDiskImage('newImage')"
|
||||
>New image</mat-radio-button
|
||||
> </mat-radio-group
|
||||
><br /><br />
|
||||
<mat-select
|
||||
*ngIf="!newImageSelected"
|
||||
placeholder="Disk image (hda)"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
[(ngModel)]="selectedImage"
|
||||
>
|
||||
<mat-option *ngFor="let image of qemuImages" [value]="image">
|
||||
{{ image.filename }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<div *ngIf="newImageSelected">
|
||||
<input
|
||||
type="file"
|
||||
accept=".qcow2"
|
||||
#file
|
||||
class="nonvisible"
|
||||
(change)="uploadImageFile($event)"
|
||||
ng2FileSelect
|
||||
[uploader]="uploader"
|
||||
/>
|
||||
<button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
|
||||
<mat-form-field class="file-name-form-field">
|
||||
<input
|
||||
matInput
|
||||
type="text"
|
||||
[(ngModel)]="chosenImage"
|
||||
formControlName="fileName"
|
||||
placeholder="Please enter name"
|
||||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
</mat-vertical-stepper>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user