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

<div class="content">
    <div class="default-header">
        <div class="row">
            <h1 class="col">New IOS router template</h1>
        </div>
    </div>
    <div class="default-content" *ngIf="iosTemplate">
        <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 IOS router locally</mat-radio-button>
                        <mat-radio-button [disabled]="!isGns3VmAvailable" class="radio-button" value="2" (click)="setServerType('gns3 vm')">Run this IOS router on the GNS3 VM</mat-radio-button>
                    </mat-radio-group>
                </mat-step>

                <mat-step label="IOS image" [completed]="iosImageForm.get('imageName').value">
                    <input
                        type="file"
                        accept=".bin, .image"
                        class="non-visible"
                        #file
                        (change)="addImage($event)"
                        ng2FileSelect
                        [uploader]="uploader"/>
                    <button mat-raised-button color="primary" (click)="file.click()">Click to add image</button> or create from existing one
                    <form [formGroup]="iosImageForm">
                        <mat-form-field class="form-field">
                            <mat-select
                                placeholder="Image"
                                (selectionChange)="onImageChosen($event)"
                                formControlName="imageName">
                                <mat-option *ngFor="let image of iosImages" [value]="image.filename">
                                    {{image.filename}}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                    </form>
                </mat-step>

                <mat-step 
                    label="Name and platform" 
                    [completed]="iosNameForm.get('templateName').value && iosNameForm.get('platform').value && iosNameForm.get('chassis').value">
                    <form [formGroup]="iosNameForm">
                        <mat-form-field class="form-field">
                            <input
                                matInput type="text"
                                formControlName="templateName"
                                placeholder="Name"/>
                        </mat-form-field>
                        <mat-form-field class="form-field">
                            <mat-select
                                placeholder="Platform"
                                (selectionChange)="onPlatformChosen($event)"
                                formControlName="platform">
                                <mat-option *ngFor="let platform of platforms" [value]="platform">
                                    {{platform}}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                        <mat-form-field class="form-field" *ngIf="chassis[iosNameForm.get('platform').value]">
                            <mat-select
                                placeholder="Chassis"
                                (selectionChange)="onChassisChosen($event)"
                                formControlName="chassis">
                                <mat-option *ngFor="let chassis of chassis[iosNameForm.get('platform').value]" [value]="chassis">
                                    {{chassis}}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                    </form>
                    <mat-checkbox
                        *ngIf="platformsWithEtherSwitchRouterOption[iosTemplate.platform]"
                        [(ngModel)]="isEtherSwitchRouter">
                        This is an EtherSwitch router
                    </mat-checkbox>
                </mat-step>

                <mat-step label="Memory" [completed]="iosMemoryForm.get('memory').value">
                    <form [formGroup]="iosMemoryForm">
                        <mat-form-field class="form-field">
                            <input
                                matInput type="number"
                                formControlName="memory"
                                value="defaultRam[iosNameForm.get('platform').value]"
                                placeholder="Default RAM"/>
                            <span matSuffix>MB</span>
                        </mat-form-field>
                        <mat-label>
                            <a href="{{ciscoUrl}}">Check for minimum and maximum RAM requirement</a>
                        </mat-label>
                    </form>
                </mat-step>

                <mat-step label="Network adapters">
                    <!-- <div *ngIf="chassis[iosNameForm.get('platform').value]">
                        <div *ngFor="let index of [0,1,2,3,4,5,6,7]">
                            <mat-select
                                placeholder="Slot {{index}}"
                                [(ngModel)]="networkAdaptersForTemplate[index]"
                                [ngModelOptions]="{standalone: true}"
                                *ngIf="networkAdapters[iosNameForm.get('chassis').value] && networkAdapters[iosNameForm.get('chassis').value][index]">
                                <mat-option *ngFor="let option of networkAdapters[iosNameForm.get('chassis').value][index]" [value]="option">
                                    {{option}}
                                </mat-option>
                            </mat-select>
                        </div>
                    </div> -->
                    <div *ngIf="selectedPlatform">
                        <div *ngFor="let index of [0,1,2,3,4,5,6,7]">
                            <mat-select
                                placeholder="Slot {{index}}"
                                [(ngModel)]="networkAdaptersForTemplate[index]"
                                [ngModelOptions]="{standalone: true}"
                                *ngIf="networkAdaptersForPlatform[iosNameForm.get('platform').value] && networkAdaptersForPlatform[iosNameForm.get('platform').value][index]">
                                <mat-option *ngFor="let option of networkAdaptersForPlatform[iosNameForm.get('platform').value][index]" [value]="option">
                                    {{option}}
                                </mat-option>
                            </mat-select>
                        </div>
                    </div>
                </mat-step>

                <mat-step label="WIC modules">
                    <div *ngIf="iosNameForm.get('platform').value">
                        <div *ngFor="let index of [0,1,2,3]">
                            <mat-select
                                placeholder="WIC {{index}}"
                                [(ngModel)]="networkModulesForTemplate[index]"
                                [ngModelOptions]="{standalone: true}"
                                *ngIf="networkModules[iosNameForm.get('platform').value] && networkModules[iosNameForm.get('platform').value][index]">
                                <mat-option *ngFor="let option of networkModules[iosNameForm.get('platform').value][index]" [value]="option">
                                    {{option}}
                                </mat-option>
                            </mat-select>
                        </div>
                    </div>
                </mat-step>

                <mat-step label="Idle-PC">
                    <mat-form-field class="form-field">
                        <input
                            matInput type="text"
                            [(ngModel)]="iosTemplate.idlepc"
                            placeholder="Idle-PC"/>
                    </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 color="primary" (click)="addTemplate()">Add template</button>
        </div>
    </div>
</div>