gns3-web-ui/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.html

<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
  <div class="default-header">
    <div class="form-field">
      <div class="row">
        <div class="col col-md-1">
          <button *ngIf="controller" class="top-button" class="cancel-button" mat-button (click)="goBack()">
            <mat-icon>arrow_back</mat-icon>
          </button>
        </div>
        <div class="col col-md-11">
          <h1 class="col">IOU device configuration</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="default-content" *ngIf="iouTemplate">
    <mat-accordion>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title> General settings </mat-panel-title>
        </mat-expansion-panel-header>
        <form [formGroup]="generalSettingsForm">
          <mat-form-field class="form-field">
            <input
              matInput
              formControlName="templateName"
              type="text"
              [(ngModel)]="iouTemplate.name"
              placeholder="Template name"
            />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              matInput
              formControlName="defaultName"
              type="text"
              [(ngModel)]="iouTemplate.default_name_format"
              placeholder="Default name format"
            />
          </mat-form-field>
          <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>
          <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
              matInput
              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-select placeholder="Console type" [(ngModel)]="iouTemplate.console_type">
            <mat-option *ngFor="let type of consoleTypes" [value]="type">
              {{ type }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-checkbox [(ngModel)]="iouTemplate.console_auto_start"> Auto start console </mat-checkbox><br />
        <mat-checkbox [(ngModel)]="iouTemplate.l1_keepalives">
          Enable layer 1 keepalive messages (non-functional) </mat-checkbox
        ><br />
        <mat-checkbox [(ngModel)]="defaultSettings"> Use default IOU values for memories </mat-checkbox>
        <mat-form-field class="form-field" *ngIf="!defaultSettings">
          <input matInput type="number" [(ngModel)]="iouTemplate.ram" placeholder="RAM size" />
          <span matSuffix>MB</span>
        </mat-form-field>
        <mat-form-field class="form-field" *ngIf="!defaultSettings">
          <input matInput type="number" [(ngModel)]="iouTemplate.nvram" placeholder="NVRAM size" />
          <span matSuffix>MB</span>
        </mat-form-field>
      </mat-expansion-panel>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title> Network </mat-panel-title>
        </mat-expansion-panel-header>
        <form [formGroup]="networkForm">
          <mat-form-field class="form-field">
            <input
              matInput
              formControlName="ethernetAdapters"
              type="number"
              [(ngModel)]="iouTemplate.ethernet_adapters"
              placeholder="Ethernet adapters"
            />
          </mat-form-field>
          <mat-form-field class="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-header>
          <mat-panel-title> Usage </mat-panel-title>
        </mat-expansion-panel-header>
        <mat-form-field class="form-field">
          <textarea matInput type="text" [(ngModel)]="iouTemplate.usage"></textarea>
        </mat-form-field>
      </mat-expansion-panel>
    </mat-accordion>
    <div class="buttons-bar">
      <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
      <button mat-raised-button color="primary" (click)="onSave()">Save</button>
    </div>
  </div>
</div>
<app-symbols-menu
  *ngIf="isSymbolSelectionOpened && iouTemplate"
  [controller]="controller"
  [symbol]="iouTemplate.symbol"
  (symbolChangedEmitter)="symbolChanged($event)"
></app-symbols-menu>