154 lines
5.5 KiB
HTML
154 lines
5.5 KiB
HTML
<div class="content">
|
|
<div>
|
|
<button
|
|
mat-raised-button
|
|
color="accent"
|
|
[routerLink]="['/tunnelFlights']"
|
|
[routerLinkActive]="['active']"
|
|
skipLocationChange
|
|
>
|
|
{{ "NewTunnelFlight_GoToJump" | translate }}
|
|
</button>
|
|
</div>
|
|
|
|
@if (notLoadingToDisplay()) {
|
|
<form class="formNewJumps" (ngSubmit)="onFormSubmit()">
|
|
<mat-form-field>
|
|
<mat-label>{{
|
|
"NewTunnelFlight_ChooseJumpType" | translate
|
|
}}</mat-label>
|
|
<input
|
|
type="text"
|
|
matInput
|
|
[matAutocomplete]="autoJumpType"
|
|
[(ngModel)]="selectedJumpType"
|
|
name="selectedJumpType"
|
|
/>
|
|
<mat-autocomplete
|
|
#autoJumpType="matAutocomplete"
|
|
[displayWith]="displayNameFn"
|
|
>
|
|
@for (jumpType of listOfJumpType; track jumpType) {
|
|
<mat-option [value]="jumpType">
|
|
{{ jumpType.name }}
|
|
</mat-option>
|
|
}
|
|
</mat-autocomplete>
|
|
@if (selectedJumpType) {
|
|
<button
|
|
matSuffix
|
|
mat-icon-button
|
|
aria-label="Clear"
|
|
(click)="selectedJumpType = undefined"
|
|
>
|
|
<mat-icon svgIcon="close"></mat-icon>
|
|
</button>
|
|
}
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<mat-label>{{
|
|
"NewTunnelFlight_ChooseTunnel" | translate
|
|
}}</mat-label>
|
|
<input
|
|
type="text"
|
|
matInput
|
|
[matAutocomplete]="autoDropZone"
|
|
[(ngModel)]="selectedTunnel"
|
|
(ngModelChange)="onChangeTunnel($event)"
|
|
name="selectedTunnel"
|
|
/>
|
|
<mat-autocomplete
|
|
#autoDropZone="matAutocomplete"
|
|
[displayWith]="displayNameFn"
|
|
>
|
|
@for (tunnel of listOfFilteredTunnel; track tunnel) {
|
|
<mat-option [value]="tunnel">
|
|
{{ tunnel.name }}
|
|
</mat-option>
|
|
}
|
|
</mat-autocomplete>
|
|
@if (selectedTunnel) {
|
|
<button
|
|
matSuffix
|
|
mat-icon-button
|
|
aria-label="Clear"
|
|
(click)="resetTunnel()"
|
|
>
|
|
<mat-icon svgIcon="close"></mat-icon>
|
|
</button>
|
|
}
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<mat-label>{{
|
|
"NewTunnelFlight_Date_Lbl" | translate
|
|
}}</mat-label>
|
|
<input
|
|
matInput
|
|
[max]="maxDate"
|
|
[matDatepicker]="flightDateDp"
|
|
[(ngModel)]="flightDate"
|
|
name="flightDate"
|
|
disabled
|
|
/>
|
|
<mat-datepicker-toggle
|
|
matSuffix
|
|
[for]="flightDateDp"
|
|
></mat-datepicker-toggle>
|
|
<mat-datepicker #flightDateDp disabled="false"></mat-datepicker>
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<mat-label>{{
|
|
"NewTunnelFlight_Minutes_Lbl" | translate
|
|
}}</mat-label>
|
|
<input
|
|
matInput
|
|
placeholder="{{ 'NewTunnelFlight_Minutes' | translate }}"
|
|
[(ngModel)]="minutesOfFlight"
|
|
name="minutesOfFlight"
|
|
type="number"
|
|
/>
|
|
@if (minutesOfFlight) {
|
|
<button
|
|
matSuffix
|
|
mat-icon-button
|
|
aria-label="Clear"
|
|
(click)="minutesOfFlight = undefined"
|
|
>
|
|
<mat-icon svgIcon="close"></mat-icon>
|
|
</button>
|
|
}
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<mat-label>{{
|
|
"NewTunnelFlight_Comments_Lbl" | translate
|
|
}}</mat-label>
|
|
<textarea
|
|
matInput
|
|
placeholder="{{ 'NewTunnelFlight_Comments' | translate }}"
|
|
[(ngModel)]="comments"
|
|
name="comments"
|
|
type="text"
|
|
></textarea>
|
|
@if (comments) {
|
|
<button
|
|
matSuffix
|
|
mat-icon-button
|
|
aria-label="Clear"
|
|
(click)="comments = undefined"
|
|
>
|
|
<mat-icon svgIcon="close"></mat-icon>
|
|
</button>
|
|
}
|
|
</mat-form-field>
|
|
<br />
|
|
@if (this.isValidatedForm()) {
|
|
<button mat-raised-button color="accent">
|
|
{{ "NewTunnelFlight_Submit" | translate }}
|
|
</button>
|
|
}
|
|
</form>
|
|
} @else {
|
|
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
|
|
}
|
|
</div>
|