277 lines
10 KiB
HTML
277 lines
10 KiB
HTML
<div class="content">
|
|
<div>
|
|
<button
|
|
mat-raised-button
|
|
color="accent"
|
|
[routerLink]="['/jumps']"
|
|
[routerLinkActive]="['active']"
|
|
skipLocationChange
|
|
>
|
|
{{ "NewJump_GoToJump" | translate }}
|
|
</button>
|
|
<p>
|
|
<mat-checkbox [(ngModel)]="resetForm" labelPosition="before">{{
|
|
"NewJump_ResetForm" | translate
|
|
}}</mat-checkbox>
|
|
</p>
|
|
</div>
|
|
|
|
@if (notLoadingToDisplay()) {
|
|
<form class="formNewJumps" (ngSubmit)="onFormSubmit()">
|
|
<mat-form-field>
|
|
<mat-label>{{
|
|
"NewJump_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>{{
|
|
"NewJump_ChooseAircraft" | translate
|
|
}}</mat-label>
|
|
<input
|
|
type="text"
|
|
matInput
|
|
[matAutocomplete]="autoAircraft"
|
|
[(ngModel)]="selectedAircraft"
|
|
name="selectedAircraft"
|
|
/>
|
|
<mat-autocomplete
|
|
#autoAircraft="matAutocomplete"
|
|
[displayWith]="displayNameFn"
|
|
>
|
|
@for (aircraft of listOfAircraft; track aircraft) {
|
|
<mat-option [value]="aircraft">
|
|
{{ aircraft.name }}
|
|
</mat-option>
|
|
}
|
|
</mat-autocomplete>
|
|
@if (selectedAircraft) {
|
|
<button
|
|
matSuffix
|
|
mat-icon-button
|
|
aria-label="Clear"
|
|
(click)="selectedAircraft = undefined"
|
|
>
|
|
<mat-icon svgIcon="close"></mat-icon>
|
|
</button>
|
|
}
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<mat-label>{{ "NewJump_ChooseDz" | translate }}</mat-label>
|
|
<input
|
|
type="text"
|
|
matInput
|
|
[matAutocomplete]="autoDropZone"
|
|
[(ngModel)]="selectedDz"
|
|
(ngModelChange)="onChangeDz($event)"
|
|
name="selectedDz"
|
|
/>
|
|
<mat-autocomplete
|
|
#autoDropZone="matAutocomplete"
|
|
[displayWith]="displayNameFn"
|
|
>
|
|
@for (dropZone of listOfFilteredDropZone; track dropZone) {
|
|
<mat-option [value]="dropZone">
|
|
{{ dropZone.name }}
|
|
@if (dropZone.isFavorite === true) {
|
|
<mat-icon
|
|
aria-hidden="false"
|
|
aria-label="Favorite"
|
|
color="primary"
|
|
svgIcon="favorite"
|
|
>
|
|
</mat-icon>
|
|
}
|
|
</mat-option>
|
|
}
|
|
</mat-autocomplete>
|
|
@if (selectedDz) {
|
|
<button
|
|
matSuffix
|
|
mat-icon-button
|
|
aria-label="Clear"
|
|
(click)="resetDz()"
|
|
>
|
|
<mat-icon svgIcon="close"></mat-icon>
|
|
</button>
|
|
}
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<mat-label>{{ "NewJump_ChooseGear" | translate }}</mat-label>
|
|
<input
|
|
type="text"
|
|
matInput
|
|
[matAutocomplete]="autoGear"
|
|
[(ngModel)]="selectedGear"
|
|
name="selectedGear"
|
|
/>
|
|
<mat-autocomplete
|
|
#autoGear="matAutocomplete"
|
|
[displayWith]="displayGearFn"
|
|
>
|
|
@for (gear of listOfGear; track gear) {
|
|
<mat-option [value]="gear">
|
|
{{ gear.name }} ({{ gear.mainCanopy }})
|
|
</mat-option>
|
|
}
|
|
</mat-autocomplete>
|
|
@if (selectedGear) {
|
|
<button
|
|
matSuffix
|
|
mat-icon-button
|
|
aria-label="Clear"
|
|
(click)="selectedGear = undefined"
|
|
>
|
|
<mat-icon svgIcon="close"></mat-icon>
|
|
</button>
|
|
}
|
|
</mat-form-field>
|
|
<mat-checkbox [(ngModel)]="withCutaway" name="withCutaway">{{
|
|
"NewJump_Cutaway" | translate
|
|
}}</mat-checkbox>
|
|
<mat-checkbox [(ngModel)]="isSpecial" name="isSpecial">{{
|
|
"NewJump_Special" | translate
|
|
}}</mat-checkbox>
|
|
<mat-form-field>
|
|
<input
|
|
matInput
|
|
[matDatepicker]="beginDateDp"
|
|
[(ngModel)]="beginDate"
|
|
name="beginDate"
|
|
disabled
|
|
(ngModelChange)="onChangeBeginDate($event)"
|
|
/>
|
|
<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="{{ 'NewJump_ExitAlt' | translate }}"
|
|
[(ngModel)]="exitAltitude"
|
|
name="exitAltitude"
|
|
type="number"
|
|
/>
|
|
@if (exitAltitude) {
|
|
<button
|
|
matSuffix
|
|
mat-icon-button
|
|
aria-label="Clear"
|
|
(click)="exitAltitude = undefined"
|
|
>
|
|
<mat-icon svgIcon="close"></mat-icon>
|
|
</button>
|
|
}
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<input
|
|
matInput
|
|
placeholder="{{ 'NewJump_DeployAlt' | translate }}"
|
|
[(ngModel)]="deployAltitude"
|
|
name="deployAltitude"
|
|
type="number"
|
|
/>
|
|
@if (deployAltitude) {
|
|
<button
|
|
matSuffix
|
|
mat-icon-button
|
|
aria-label="Clear"
|
|
(click)="deployAltitude = undefined"
|
|
>
|
|
<mat-icon svgIcon="close"></mat-icon>
|
|
</button>
|
|
}
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<input
|
|
matInput
|
|
placeholder="{{ 'NewJump_Count' | translate }}"
|
|
[(ngModel)]="countOfJumps"
|
|
name="countOfJumps"
|
|
type="number"
|
|
/>
|
|
@if (countOfJumps) {
|
|
<button
|
|
matSuffix
|
|
mat-icon-button
|
|
aria-label="Clear"
|
|
(click)="countOfJumps = undefined"
|
|
>
|
|
<mat-icon svgIcon="close"></mat-icon>
|
|
</button>
|
|
}
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<textarea
|
|
matInput
|
|
placeholder="{{ 'NewJump_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">
|
|
{{ "NewJump_Submit" | translate }}
|
|
</button>
|
|
}
|
|
</form>
|
|
} @else {
|
|
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
|
|
}
|
|
</div>
|