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

<div class="content">
  <div class="default-header">
    <div class="row">
      <h1 class="col">New Docker container template</h1>
    </div>
  </div>
  <div class="default-content">
    <div class="container mat-elevation-z8">
      <mat-vertical-stepper [linear]="true">
        <mat-step label="Controller type" [completed]="isLocalComputerChosen">
          <mat-radio-group class="radio-group">
            <!-- <mat-radio-button class="radio-button" value="1" (click)="setControllerType('remote compute')">Run this Docker container on a remote compute</mat-radio-button> -->
            <mat-radio-button class="radio-button" value="1" (click)="setControllerType('local')" checked
              >Run this Docker container locally</mat-radio-button
            >
          </mat-radio-group>
        </mat-step>

        <mat-step
          label="Docker Virtual Machine"
          [completed]="selectedImage || virtualMachineForm.get('filename').value"
        >
          <form [formGroup]="virtualMachineForm">
            <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="Image list"
              [ngModelOptions]="{ standalone: true }"
              [(ngModel)]="selectedImage"
            >
              <mat-option *ngFor="let image of dockerImages" [value]="image">
                {{ image.image }}
              </mat-option>
            </mat-select>
            <div *ngIf="newImageSelected">
              <mat-form-field class="form-field">
                <input matInput class="filename" type="text" formControlName="filename" placeholder="Image name" />
              </mat-form-field>
            </div>
          </form>
        </mat-step>

        <mat-step label="Container name" [completed]="containerNameForm.get('templateName').value">
          <form [formGroup]="containerNameForm">
            <mat-form-field class="form-field">
              <input
                matInput
                class="templatename"
                type="text"
                formControlName="templateName"
                placeholder="Container name"
              />
            </mat-form-field>
          </form>
        </mat-step>

        <mat-step label="Network adapters" [completed]="networkAdaptersForm.get('adapters').value">
          <form [formGroup]="networkAdaptersForm">
            <mat-form-field class="form-field">
              <input matInput class="networkadapter" type="number" formControlName="adapters" placeholder="Adapters" />
            </mat-form-field>
          </form>
        </mat-step>

        <mat-step label="Start command" [completed]="dockerTemplate.start_command">
          <mat-form-field class="form-field">
            <input matInput type="text" [(ngModel)]="dockerTemplate.start_command" placeholder="Start command" />
          </mat-form-field>
        </mat-step>

        <mat-step label="Console type" [completed]="dockerTemplate.console_type">
          <mat-select
            placeholder="Console type"
            [ngModelOptions]="{ standalone: true }"
            [(ngModel)]="dockerTemplate.console_type"
          >
            <mat-option *ngFor="let type of consoleTypes" [value]="type">
              {{ type }}
            </mat-option>
          </mat-select>
        </mat-step>

        <mat-step label="Auxiliary console type" [completed]="dockerTemplate.aux_type">
          <mat-select
            placeholder="Auxiliary console type"
            [ngModelOptions]="{ standalone: true }"
            [(ngModel)]="dockerTemplate.aux_type"
          >
            <mat-option *ngFor="let type of auxConsoleTypes" [value]="type">
              {{ type }}
            </mat-option>
          </mat-select>
        </mat-step>

        <mat-step label="Environment">
          <mat-form-field class="form-field">
            <textarea matInput type="text" [(ngModel)]="dockerTemplate.environment"></textarea>
          </mat-form-field>
        </mat-step>
      </mat-vertical-stepper>
    </div>
    <div class="buttons-bar">
      <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
      <button mat-raised-button class="add-button" color="primary" (click)="addTemplate()">Add template</button>
    </div>
  </div>
</div>