gns3-web-ui/src/app/components/projects/import-project-dialog/import-project-dialog.component.html
2019-08-29 08:07:08 -07:00

67 lines
2.0 KiB
HTML

<h1 mat-dialog-title>Import project</h1>
<div [hidden]="isFirstStepCompleted">
<form [formGroup]="projectNameForm" class="file-name-form">
<input
type="file"
accept=".gns3project, .gns3p"
class="non-visible"
#file
(change)="uploadProjectFile($event)"
ng2FileSelect
[uploader]="uploader"
/>
<button mat-raised-button color="primary" (click)="file.click()" class="file-button">Choose file</button>
<mat-form-field [ngClass]="{ empty: !isDeleteVisible }" class="file-name-form-field">
<input
matInput
type="text"
formControlName="projectName"
[ngClass]="{ 'is-invalid': form.projectName.errors }"
placeholder="Please enter name"
/>
<mat-error *ngIf="form.projectName.errors && form.projectName.errors.required"
>Project name is required</mat-error
>
<mat-error *ngIf="form.projectName.errors && form.projectName.errors.invalidName"
>Project name is incorrect</mat-error
>
</mat-form-field>
<button class="delete-button" [hidden]="!isDeleteVisible">
<mat-icon color="primary" (click)="onDeleteClick()" class="delete-icon">clear</mat-icon>
</button>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()" color="accent">Cancel</button>
<button
mat-button
[disabled]="!isImportEnabled"
(click)="onImportClick()"
tabindex="2"
mat-raised-button
color="primary"
>
Import
</button>
</div>
</form>
</div>
<div [hidden]="!isFirstStepCompleted">
<div class="progress">
<div class="progress-bar" role="progressbar" [ngStyle]="{ width: uploader.progress + '%' }"></div>
</div>
<div class="result-message-box">
<span>{{ resultMessage }}</span>
</div>
<div mat-dialog-actions>
<button
mat-button
[disabled]="!isFinishEnabled"
(click)="onNoClick()"
tabindex="2"
mat-raised-button
color="primary"
>
Finish
</button>
</div>
</div>