gns3-web-ui/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html

<div class="content">
  <div class="default-header">
    <div class="row">
      <h1 class="col">New QEMU VM template</h1>
    </div>
  </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 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="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 *ngIf="uploadedFile">
                <mat-progress-bar mode="determinate" [value]="uploader.progress" ></mat-progress-bar>
              </div>
            </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>