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

Form validation for Qemu

Browse Source
This commit is contained in:
Piotr Pekala
2019-01-29 06:53:18 -08:00
parent 5a21d117ca
commit a6b4c4a9c8
8 changed files with 224 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html
View File

@ -8,60 +8,87 @@
<div class="example-container mat-elevation-z8">
<mat-vertical-stepper [linear]="true">
<mat-step label="QEMU VM Name">
<mat-form-field class="form-field">
<input matInput type="text" [(ngModel)]="templateName" placeholder="Please choose a descriptive name for your new QEMU virtual machine"/>
</mat-form-field><br/>
<mat-checkbox>
This is a legacy ASA VM
</mat-checkbox>
<form [formGroup]="firstStepForm">
<mat-form-field class="form-field">
<input
matInput type="text"
[(ngModel)]="qemuTemplate.name"
formControlName="templateName"
placeholder="Please choose a descriptive name for your new QEMU virtual machine"/>
</mat-form-field><br/>
<mat-checkbox>
This is a legacy ASA VM
</mat-checkbox>
</form>
</mat-step>
<mat-step label="QEMU binary and memory">
<mat-form-field class="form-field">
<mat-select placeholder="Qemu binary" [(ngModel)]="selectedBinary">
<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" [(ngModel)]="ramMemory"/>
</mat-form-field>
<form [formGroup]="secondStepForm">
<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"
[(ngModel)]="ramMemory"
formControlName="ramMemory"/>
</mat-form-field>
</form>
</mat-step>
<mat-step label="Console type">
<mat-form-field class="form-field">
<mat-select placeholder="Console type" [(ngModel)]="selectedConsoleType">
<mat-option *ngFor="let type of consoleTypes" [value]="type">
{{type}}
</mat-option>
</mat-select>
</mat-form-field>
<form [formGroup]="thirdStepForm">
<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>
</form>
</mat-step>
<mat-step label="Disk image">
<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>
<mat-select *ngIf="!newImageSelected" placeholder="Disk image (hda)" [(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)"/>
<button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
<mat-form-field class="file-name-form-field">
<form [formGroup]="fourthStepForm">
<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>
<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
matInput
type="text"
[(ngModel)]="chosenImage"
placeholder="Please enter name"/>
</mat-form-field>
</div>
type="file"
accept=".qcow2"
#file
class="nonvisible"
(change)="uploadImageFile($event)"/>
<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>
<div class="buttons-bar"><button mat-raised-button color="primary" (click)="addTemplate()">Add template</button></div>
</mat-step>
</mat-vertical-stepper>