Files
SkydiveLogs/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html
Sébastien André 673876edd6 Fix sur le formulaire
2020-05-05 14:01:37 +02:00

116 lines
4.9 KiB
HTML

<div class="content">
<form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="allDatasLoaded() else loading">
<mat-form-field>
<mat-label>Choose the jump type</mat-label>
<input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType"
name="selectedJumpType">
<mat-autocomplete #autoJumpType="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
{{jumpType.name}}
</mat-option>
</mat-autocomplete>
<button mat-button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedJumpType=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field>
<mat-label>Choose the aircraft</mat-label>
<input type="text" matInput [matAutocomplete]="autoAircraft" [(ngModel)]="selectedAircraft"
name="selectedAircraft">
<mat-autocomplete #autoAircraft="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft">
{{aircraft.name}}
</mat-option>
</mat-autocomplete>
<button mat-button *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedAircraft=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field>
<mat-label>Choose the DZ</mat-label>
<input type="text" matInput [matAutocomplete]="autoDropZone" [(ngModel)]="selectedDz"
(ngModelChange)="onChangeDz($event)" name="selectedDz">
<mat-autocomplete #autoDropZone="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let dropZone of listOfFilteredDropZone" [value]="dropZone">
{{dropZone.name}}
<img src="../../assets/img/favorite.png" alt="favorite DZ" *ngIf="dropZone.isFavorite === true"
style="width: 16px;">
</mat-option>
</mat-autocomplete>
<button mat-button *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="selectedDz=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<!-- <div>
<label>Float label: </label>
<mat-radio-group [(ngModel)]="toto" name="toto">
<mat-radio-button value="dz">DZ</mat-radio-button>
<mat-radio-button value="tunel">Tunel</mat-radio-button>
</mat-radio-group>
</div> -->
<mat-form-field>
<mat-label>Choose the used gear</mat-label>
<input type="text" matInput [matAutocomplete]="autoGear" [(ngModel)]="selectedGear" name="selectedGear">
<mat-autocomplete #autoGear="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let gear of listOfGear" [value]="gear">
{{gear.name}}
</mat-option>
</mat-autocomplete>
<button mat-button *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
(click)="selectedGear=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-checkbox [(ngModel)]="withCutaway" name="withCutaway">With a cutaway ?</mat-checkbox>
<mat-form-field>
<input matInput [matDatepicker]="beginDateDp" [(ngModel)]="beginDate" name="beginDate" disabled>
<mat-datepicker-toggle matSuffix [for]="beginDateDp"></mat-datepicker-toggle>
<mat-datepicker #beginDateDp disabled="false"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="endDateDp" [(ngModel)]="endDate" name="endDate" disabled>
<mat-datepicker-toggle matSuffix [for]="endDateDp"></mat-datepicker-toggle>
<mat-datepicker #endDateDp disabled="false"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Exit altitude" [(ngModel)]="exitAltitude" name="exitAltitude" type="number">
<button mat-button *ngIf="exitAltitude" matSuffix mat-icon-button aria-label="Clear"
(click)="exitAltitude=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Deploy altitude" [(ngModel)]="deployAltitude" name="deployAltitude" type="number">
<button mat-button *ngIf="deployAltitude" matSuffix mat-icon-button aria-label="Clear"
(click)="deployAltitude=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Count of jumps" [(ngModel)]="countOfJumps" name="countOfJumps" type="number">
<button mat-button *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear"
(click)="countOfJumps=undefined">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<br />
<button mat-raised-button color="accent" *ngIf="isValidatedForm()">Submit</button>
</form>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div>