sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update angular/core et angular/cli

Browse Source
This commit is contained in:
sandre
2026-01-20 15:00:27 +01:00
parent 137b2ab1fc
commit f4c565888f
25 changed files with 2730 additions and 7495 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
Front/skydivelogs-app/angular.json
View File

@@ -15,7 +15,7 @@
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"builder": "@angular/build:application",
"options": {
"outputPath": "dist",
"index": "src/index.html",
@@ -87,7 +87,7 @@
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"builder": "@angular/build:dev-server",
"configurations": {
"production": {
"buildTarget": "skydivelogs-app:build:production"
@@ -99,10 +99,10 @@
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n"
"builder": "@angular/build:extract-i18n"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"builder": "@angular/build:karma",
"options": {
"polyfills": ["zone.js", "zone.js/testing"],
"tsConfig": "tsconfig.spec.json",
@@ -119,5 +119,31 @@
}
}
}
},
"schematics": {
"@schematics/angular:component": {
"type": "component"
},
"@schematics/angular:directive": {
"type": "directive"
},
"@schematics/angular:service": {
"type": "service"
},
"@schematics/angular:guard": {
"typeSeparator": "."
},
"@schematics/angular:interceptor": {
"typeSeparator": "."
},
"@schematics/angular:module": {
"typeSeparator": "."
},
"@schematics/angular:pipe": {
"typeSeparator": "."
},
"@schematics/angular:resolver": {
"typeSeparator": "."
}
}
}

8037
Front/skydivelogs-app/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
Front/skydivelogs-app/package.json
View File

@@ -12,16 +12,16 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^19.2.6",
"@angular/animations": "^20.3.16",
"@angular/cdk": "^19.2.9",
"@angular/common": "^19.2.6",
"@angular/compiler": "^19.2.6",
"@angular/core": "^19.2.6",
"@angular/forms": "^19.2.6",
"@angular/common": "^20.3.16",
"@angular/compiler": "^20.3.16",
"@angular/core": "^20.3.16",
"@angular/forms": "^20.3.16",
"@angular/material": "^19.2.9",
"@angular/platform-browser": "^19.2.6",
"@angular/platform-browser-dynamic": "^19.2.6",
"@angular/router": "^19.2.6",
"@angular/platform-browser": "^20.3.16",
"@angular/platform-browser-dynamic": "^20.3.16",
"@angular/router": "^20.3.16",
"@ngx-translate/core": "^17.0.0",
"@ngx-translate/http-loader": "^17.0.0",
"chart.js": "^4.3.0",
@@ -31,9 +31,9 @@
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.2.7",
"@angular/cli": "~19.2.7",
"@angular/compiler-cli": "^19.2.6",
"@angular/build": "^20.3.14",
"@angular/cli": "~20.3.14",
"@angular/compiler-cli": "^20.3.16",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
@@ -41,6 +41,6 @@
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.5.4"
"typescript": "~5.9.3"
}
}
}

353
Front/skydivelogs-app/src/app/app.component.html
View File

@@ -1,26 +1,27 @@
<mat-toolbar *ngIf="this.show()">
<mat-icon svgIcon="menu" (click)="snav.toggle()"></mat-icon>
<h2>{{ translatedTitle }}</h2>
<mat-select
[(value)]="selectedLanguageFlag"
(selectionChange)="switchLang($event)"
style="margin-left: 50px; width: 100px"
>
<mat-select-trigger>
<img
src="{{ 'assets/img/' + selectedLanguageFlag + '.svg' }}"
style="width: 30px"
/>
</mat-select-trigger>
<mat-option value="fr">
<img src="assets/img/fr.svg" style="width: 30px" />
</mat-option>
<mat-option value="en">
<img src="assets/img/en.svg" style="width: 30px" />
</mat-option>
</mat-select>
</mat-toolbar>
@if (this.show()) {
<mat-toolbar>
<mat-icon svgIcon="menu" (click)="snav.toggle()"></mat-icon>
<h2>{{ translatedTitle }}</h2>
<mat-select
[(value)]="selectedLanguageFlag"
(selectionChange)="switchLang($event)"
style="margin-left: 50px; width: 100px"
>
<mat-select-trigger>
<img
src="{{ 'assets/img/' + selectedLanguageFlag + '.svg' }}"
style="width: 30px"
/>
</mat-select-trigger>
<mat-option value="fr">
<img src="assets/img/fr.svg" style="width: 30px" />
</mat-option>
<mat-option value="en">
<img src="assets/img/en.svg" style="width: 30px" />
</mat-option>
</mat-select>
</mat-toolbar>
}
<mat-sidenav-container>
<mat-sidenav #snav mode="over" style="padding: 0 20px 0 10px">
@@ -36,155 +37,159 @@
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_Summary" | translate }}</a
>
<hr class="splitter" />
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="List of jumps"
svgIcon="list"
></mat-icon>
<a
routerLink="/jumps"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_Jumps" | translate }}</a
>
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="Add jumps"
svgIcon="add"
></mat-icon>
<a
routerLink="/newjump"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_NewJump" | translate }}</a
>
<hr class="splitter" />
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="List of tunnel flights"
svgIcon="list"
></mat-icon>
<a
routerLink="/tunnelFlights"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_TunnelFlights" | translate }}</a
>
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="Add flights in tunnel"
svgIcon="add"
></mat-icon>
<a
routerLink="/newTunnelFlight"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_NewTunnelFlight" | translate }}</a
>
<hr class="splitter" />
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="Dropzones"
svgIcon="dz"
></mat-icon>
<a
routerLink="/dzs"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_Dzs" | translate }}</a
>
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="Aircrafts"
svgIcon="aircraft"
></mat-icon>
<a
routerLink="/aircrafts"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_Aircrafts" | translate }}</a
>
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="List of jump types"
svgIcon="flight_land"
></mat-icon>
<a
routerLink="/jumpTypes"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_JumpTypes" | translate }}</a
>
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="List of gears"
svgIcon="gear"
></mat-icon>
<a
routerLink="/gears"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_Gears" | translate }}</a
>
</mat-nav-list>
<mat-nav-list *ngIf="currentUser">
<hr class="splitter" />
<mat-icon
aria-hidden="false"
aria-label="User account"
svgIcon="account"
></mat-icon>
<a
routerLink="/user"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>
{{ this.currentUser.firstName }} {{ this.currentUser.lastName }}
</a>
</mat-nav-list>
<mat-nav-list *ngIf="currentUser">
<mat-icon
aria-hidden="false"
aria-label="To logout"
svgIcon="logout"
></mat-icon>
<span (click)="snav.toggle(); logout()" style="cursor: pointer">{{
"App_Nav_Logout" | translate
}}</span>
</mat-nav-list>
</mat-sidenav>
>
<hr class="splitter" />
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="List of jumps"
svgIcon="list"
></mat-icon>
<a
routerLink="/jumps"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_Jumps" | translate }}</a
>
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="Add jumps"
svgIcon="add"
></mat-icon>
<a
routerLink="/newjump"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_NewJump" | translate }}</a
>
<hr class="splitter" />
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="List of tunnel flights"
svgIcon="list"
></mat-icon>
<a
routerLink="/tunnelFlights"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_TunnelFlights" | translate }}</a
>
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="Add flights in tunnel"
svgIcon="add"
></mat-icon>
<a
routerLink="/newTunnelFlight"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_NewTunnelFlight" | translate }}</a
>
<hr class="splitter" />
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="Dropzones"
svgIcon="dz"
></mat-icon>
<a
routerLink="/dzs"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_Dzs" | translate }}</a
>
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="Aircrafts"
svgIcon="aircraft"
></mat-icon>
<a
routerLink="/aircrafts"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_Aircrafts" | translate }}</a
>
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="List of jump types"
svgIcon="flight_land"
></mat-icon>
<a
routerLink="/jumpTypes"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_JumpTypes" | translate }}</a
>
</mat-nav-list>
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="List of gears"
svgIcon="gear"
></mat-icon>
<a
routerLink="/gears"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>{{ "App_Nav_Gears" | translate }}</a
>
</mat-nav-list>
@if (currentUser) {
<mat-nav-list>
<hr class="splitter" />
<mat-icon
aria-hidden="false"
aria-label="User account"
svgIcon="account"
></mat-icon>
<a
routerLink="/user"
routerLinkActive="active"
(click)="snav.toggle()"
skipLocationChange
>
{{ this.currentUser.firstName }} {{ this.currentUser.lastName }}
</a>
</mat-nav-list>
}
@if (currentUser) {
<mat-nav-list>
<mat-icon
aria-hidden="false"
aria-label="To logout"
svgIcon="logout"
></mat-icon>
<span (click)="snav.toggle(); logout()" style="cursor: pointer">{{
"App_Nav_Logout" | translate
}}</span>
</mat-nav-list>
}
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
<footer style="text-align: right">
{{ "App_Footer" | translate }}{{ version }} - &#64;Séb
</footer>
</mat-sidenav-content>
</mat-sidenav-container>
<mat-sidenav-content>
<router-outlet></router-outlet>
<footer style="text-align: right">
{{ "App_Footer" | translate }}{{ version }} - &#64;Séb
</footer>
</mat-sidenav-content>
</mat-sidenav-container>

7
Front/skydivelogs-app/src/app/app.component.ts
View File

@@ -1,6 +1,6 @@
import { Component, inject, OnInit } from "@angular/core";
import { Router, RouterLink, RouterOutlet } from "@angular/router";
import { CommonModule } from "@angular/common";
import { DomSanitizer } from "@angular/platform-browser";
import { MatToolbarModule } from "@angular/material/toolbar";
import {
@@ -31,7 +31,6 @@ import { ServiceCacheApi } from "../services/service-cache-api.service";
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
imports: [
CommonModule,
MatToolbarModule,
MatIconModule,
MatSelectModule,
@@ -41,8 +40,8 @@ import { ServiceCacheApi } from "../services/service-cache-api.service";
RouterOutlet,
RouterLink,
TranslateModule,
TranslatePipe,
],
TranslatePipe
],
})
export class AppComponent implements OnInit {
public translatedTitle = "???";

96
Front/skydivelogs-app/src/app/create-user/create-user.component.html
View File

@@ -4,7 +4,7 @@
style="padding: 10px"
(ngSubmit)="onCreateSubmit()"
[formGroup]="createForm"
>
>
<p>
<mat-form-field>
<mat-label>{{ "LoginCreateUser_Firstname" | translate }}</mat-label>
@@ -15,13 +15,17 @@
formControlName="firstname"
[ngClass]="{ 'is-invalid': submitted && formCtrls['firstname'].errors }"
tabindex="0"
/>
<mat-error *ngIf="formCtrls['firstname'].hasError('required')">
{{ "LoginCreateUser_FirstnameRequired" | translate }}
</mat-error>
<mat-error *ngIf="formCtrls['firstname'].hasError('minlength')">
{{ "LoginCreateUser_FirstnamePattern" | translate }}
</mat-error>
/>
@if (formCtrls['firstname'].hasError('required')) {
<mat-error>
{{ "LoginCreateUser_FirstnameRequired" | translate }}
</mat-error>
}
@if (formCtrls['firstname'].hasError('minlength')) {
<mat-error>
{{ "LoginCreateUser_FirstnamePattern" | translate }}
</mat-error>
}
</mat-form-field>
</p>
<p>
@@ -33,13 +37,17 @@
formControlName="lastname"
[ngClass]="{ 'is-invalid': submitted && formCtrls['lastname'].errors }"
tabindex="1"
/>
<mat-error *ngIf="formCtrls['lastname'].hasError('required')">
{{ "LoginCreateUser_LastnameRequired" | translate }}
</mat-error>
<mat-error *ngIf="formCtrls['lastname'].hasError('minlength')">
{{ "LoginCreateUser_LastnamePattern" | translate }}
</mat-error>
/>
@if (formCtrls['lastname'].hasError('required')) {
<mat-error>
{{ "LoginCreateUser_LastnameRequired" | translate }}
</mat-error>
}
@if (formCtrls['lastname'].hasError('minlength')) {
<mat-error>
{{ "LoginCreateUser_LastnamePattern" | translate }}
</mat-error>
}
</mat-form-field>
</p>
<p>
@@ -51,13 +59,17 @@
formControlName="email"
[ngClass]="{ 'is-invalid': submitted && formCtrls['email'].errors }"
tabindex="3"
/>
<mat-error *ngIf="formCtrls['email'].hasError('required')">
{{ "LoginCreateUser_EmailRequired" | translate }}
</mat-error>
<mat-error *ngIf="formCtrls['email'].hasError('email')">
{{ "LoginCreateUser_EmailPattern" | translate }}
</mat-error>
/>
@if (formCtrls['email'].hasError('required')) {
<mat-error>
{{ "LoginCreateUser_EmailRequired" | translate }}
</mat-error>
}
@if (formCtrls['email'].hasError('email')) {
<mat-error>
{{ "LoginCreateUser_EmailPattern" | translate }}
</mat-error>
}
</mat-form-field>
</p>
<p>
@@ -69,13 +81,17 @@
formControlName="username"
[ngClass]="{ 'is-invalid': submitted && formCtrls['username'].errors }"
tabindex="4"
/>
<mat-error *ngIf="formCtrls['username'].hasError('required')">
{{ "LoginCreateUser_UsernameRequired" | translate }}
</mat-error>
<mat-error *ngIf="formCtrls['username'].hasError('minlength')">
{{ "LoginCreateUser_UsernamePattern" | translate }}
</mat-error>
/>
@if (formCtrls['username'].hasError('required')) {
<mat-error>
{{ "LoginCreateUser_UsernameRequired" | translate }}
</mat-error>
}
@if (formCtrls['username'].hasError('minlength')) {
<mat-error>
{{ "LoginCreateUser_UsernamePattern" | translate }}
</mat-error>
}
</mat-form-field>
</p>
<p>
@@ -87,18 +103,24 @@
formControlName="password"
[ngClass]="{ 'is-invalid': submitted && formCtrls['password'].errors }"
tabindex="5"
/>
<mat-error *ngIf="formCtrls['password'].hasError('required')">
{{ "LoginCreateUser_PasswordRequired" | translate }}
</mat-error>
<mat-error *ngIf="formCtrls['password'].hasError('pattern')">
{{ "LoginCreateUser_PasswordPattern" | translate }}
</mat-error>
/>
@if (formCtrls['password'].hasError('required')) {
<mat-error>
{{ "LoginCreateUser_PasswordRequired" | translate }}
</mat-error>
}
@if (formCtrls['password'].hasError('pattern')) {
<mat-error>
{{ "LoginCreateUser_PasswordPattern" | translate }}
</mat-error>
}
</mat-form-field>
</p>
<button [disabled]="!createForm.valid" mat-raised-button color="accent">
{{ "LoginCreateUser_BtnLogin" | translate }}
</button>
<div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{ error }}</div>
@if (error) {
<div class="alert alert-danger mt-3 mb-0">{{ error }}</div>
}
</form>

48
Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.html
View File

@@ -8,27 +8,29 @@
name="isSpecial"
labelPosition="before"
>Special jump</mat-checkbox
>
</p>
<p>
<mat-checkbox
[(ngModel)]="jump.withCutaway"
name="withCutaway"
labelPosition="before"
>Cutaway</mat-checkbox
>
</p>
<mat-form-field>
<textarea
matInput
placeholder="Comments"
name="comments"
[(ngModel)]="jump.notes"
name="comments"
type="text"
></textarea>
</mat-form-field>
>
</p>
<p>
<mat-checkbox
[(ngModel)]="jump.withCutaway"
name="withCutaway"
labelPosition="before"
>Cutaway</mat-checkbox
>
</p>
<mat-form-field>
<textarea
matInput
placeholder="Comments"
name="comments"
[(ngModel)]="jump.notes"
name="comments"
type="text"
></textarea>
</mat-form-field>
<br />
<button mat-raised-button color="accent" *ngIf="editMode">Update</button>
</form>
<br />
@if (editMode) {
<button mat-raised-button color="accent">Update</button>
}
</form>

7
Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.ts
View File

@@ -1,5 +1,5 @@
import { Component, Inject, OnInit } from "@angular/core";
import { CommonModule } from "@angular/common";
import { MAT_DIALOG_DATA } from "@angular/material/dialog";
import { TranslateModule } from "@ngx-translate/core";
import { MatCheckboxModule } from "@angular/material/checkbox";
@@ -20,14 +20,13 @@ import { ServiceComm } from "../../services/service-comm.service";
styleUrls: ["./jump-infos.component.css"],
imports: [
TranslateModule,
CommonModule,
FormsModule,
MatCheckboxModule,
MatFormFieldModule,
ReactiveFormsModule,
MatInputModule,
MatButtonModule,
],
MatButtonModule
],
})
export class JumpInfosComponent implements OnInit {
public editMode: boolean;

88
Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html
View File

@@ -1,49 +1,47 @@
<div class="content">
<div *ngIf="dataSourceTable != null; else loading">
<button
mat-raised-button
color="accent"
(click)="openDialogToAdd()"
*ngIf="isUserAdmin == true"
>
{{ "ListAircrafts_Add" | translate }}
</button>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>
{{ "ListAircrafts_Header_Id" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>
{{ "ListAircrafts_Header_Name" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<ng-container matColumnDef="imageData">
<th mat-header-cell *matHeaderCellDef>
{{ "ListAircrafts_Header_Image" | translate }}
</th>
<td mat-cell *matCellDef="let element">
<img
src="{{ element.imageData }}"
alt="No image"
style="width: 128px"
/>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
@if (dataSourceTable != null) {
<div>
@if (isUserAdmin == true) {
<button
mat-raised-button
color="accent"
(click)="openDialogToAdd()"
>
{{ "ListAircrafts_Add" | translate }}
</button>
}
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>
{{ "ListAircrafts_Header_Id" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>
{{ "ListAircrafts_Header_Name" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<ng-container matColumnDef="imageData">
<th mat-header-cell *matHeaderCellDef>
{{ "ListAircrafts_Header_Image" | translate }}
</th>
<td mat-cell *matCellDef="let element">
<img
src="{{ element.imageData }}"
alt="No image"
style="width: 128px"
/>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
} @else {
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
}
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div>

7
Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts
View File

@@ -3,7 +3,7 @@ import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
import { MatTableDataSource, MatTableModule } from "@angular/material/table";
import { MatDialog } from "@angular/material/dialog";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import { CommonModule } from "@angular/common";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { MatButtonModule } from "@angular/material/button";
@@ -20,12 +20,11 @@ import { AircraftResp } from "../../models/aircraft";
styleUrls: ["./list-of-aircrafts.component.css"],
imports: [
TranslateModule,
CommonModule,
MatPaginatorModule,
MatProgressSpinnerModule,
MatTableModule,
MatButtonModule,
],
MatButtonModule
],
})
export class ListOfAircraftsComponent implements OnInit {
public displayedColumns: Array<string> = ["name", "imageData"];

217
Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
View File

@@ -1,118 +1,117 @@
<div class="content">
<div *ngIf="dataSourceTable != null; else loading">
<button
mat-raised-button
color="accent"
(click)="openDialogToAdd()"
*ngIf="isUserAdmin == true"
>
{{ "ListDz_Add" | translate }}
</button>
<mat-form-field>
<mat-label>{{ "ListDz_Filter" | translate }}</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="{{ 'ListDz_Filter_PlaceHolder' | translate }}"
#input
/>
</mat-form-field>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="isfavorite">
<th mat-header-cell *matHeaderCellDef style="min-width: 144px"></th>
<td mat-cell *matCellDef="let element" style="text-align: left">
<mat-icon
aria-hidden="false"
aria-label="Favorite"
*ngIf="element.isFavorite === true"
(click)="removeToFavorite(element)"
color="primary"
style="cursor: pointer"
svgIcon="favorite"
></mat-icon>
<mat-icon
aria-hidden="false"
aria-label="Not favorite"
*ngIf="element.isFavorite === false"
(click)="setToFavorite(element)"
style="cursor: pointer"
svgIcon="not_favorite"
></mat-icon>
<a href="http://{{ element.website }}" target="_blank">
<mat-icon
aria-hidden="false"
aria-label="URL to the DZ website"
style="color: white"
svgIcon="link"
></mat-icon>
</a>
<a
@if (dataSourceTable != null) {
<div>
@if (isUserAdmin == true) {
<button
mat-raised-button
color="accent"
(click)="openDialogToAdd()"
>
{{ "ListDz_Add" | translate }}
</button>
}
<mat-form-field>
<mat-label>{{ "ListDz_Filter" | translate }}</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="{{ 'ListDz_Filter_PlaceHolder' | translate }}"
#input
/>
</mat-form-field>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="isfavorite">
<th mat-header-cell *matHeaderCellDef style="min-width: 144px"></th>
<td mat-cell *matCellDef="let element" style="text-align: left">
@if (element.isFavorite === true) {
<mat-icon
aria-hidden="false"
aria-label="Favorite"
(click)="removeToFavorite(element)"
color="primary"
style="cursor: pointer"
svgIcon="favorite"
></mat-icon>
}
@if (element.isFavorite === false) {
<mat-icon
aria-hidden="false"
aria-label="Not favorite"
(click)="setToFavorite(element)"
style="cursor: pointer"
svgIcon="not_favorite"
></mat-icon>
}
<a href="http://{{ element.website }}" target="_blank">
<mat-icon
aria-hidden="false"
aria-label="URL to the DZ website"
style="color: white"
svgIcon="link"
></mat-icon>
</a>
<a
href="https://www.openstreetmap.org/?mlat={{
element.latitude
}}&mlon={{ element.longitude }}#map=14/{{ element.latitude }}/{{
element.longitude
}}"
target="_blank"
>
<mat-icon
aria-hidden="false"
aria-label="Location of the DZ"
style="color: white"
svgIcon="map"
></mat-icon>
</a>
<a href="mailto:{{ element.email }}" *ngIf="element.email">
<mat-icon
aria-hidden="false"
aria-label="Contact mail of the DZ"
style="color: white"
svgIcon="mail"
></mat-icon>
</a>
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>
{{ "ListDz_Header_ID" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>
{{ "ListDz_Header_Name" | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span class="spanWithBreakWord" [innerHTML]="element.name"></span>
</td>
</ng-container>
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef>
{{ "ListDz_Header_Address" | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span class="spanWithBreakWord" [innerHTML]="element.address"></span>
</td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef>
{{ "ListDz_Header_Type" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.type }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
target="_blank"
>
<mat-icon
aria-hidden="false"
aria-label="Location of the DZ"
style="color: white"
svgIcon="map"
></mat-icon>
</a>
@if (element.email) {
<a href="mailto:{{ element.email }}">
<mat-icon
aria-hidden="false"
aria-label="Contact mail of the DZ"
style="color: white"
svgIcon="mail"
></mat-icon>
</a>
}
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>
{{ "ListDz_Header_ID" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>
{{ "ListDz_Header_Name" | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span class="spanWithBreakWord" [innerHTML]="element.name"></span>
</td>
</ng-container>
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef>
{{ "ListDz_Header_Address" | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span class="spanWithBreakWord" [innerHTML]="element.address"></span>
</td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef>
{{ "ListDz_Header_Type" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.type }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
} @else {
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
}
<mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div>

7
Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts
View File

@@ -3,7 +3,7 @@ import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
import { MatTableDataSource, MatTableModule } from "@angular/material/table";
import { MatDialog } from "@angular/material/dialog";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import { CommonModule } from "@angular/common";
import { MatIconModule } from "@angular/material/icon";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { MatFormFieldModule } from "@angular/material/form-field";
@@ -24,7 +24,6 @@ import { NewDropZoneComponent } from "../new-drop-zone/new-drop-zone.component";
styleUrls: ["./list-of-dzs.component.css"],
imports: [
TranslateModule,
CommonModule,
MatIconModule,
MatPaginatorModule,
MatProgressSpinnerModule,
@@ -32,8 +31,8 @@ import { NewDropZoneComponent } from "../new-drop-zone/new-drop-zone.component";
MatFormFieldModule,
ReactiveFormsModule,
MatInputModule,
MatButtonModule,
],
MatButtonModule
],
})
export class ListOfDzsComponent implements OnInit {
public displayedColumns: Array<string> = [

121
Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html
View File

@@ -1,68 +1,61 @@
<div class="content">
<div *ngIf="dataSourceTable != null; else loading">
<button mat-raised-button color="accent" (click)="openDialogToAdd()">
{{ "ListGears_Add" | translate }}
</button>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>
{{ "ListGears_Header_Id" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef style="min-width: 130px">
{{ "ListGears_Header_Name" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<ng-container matColumnDef="manufacturer">
<th mat-header-cell *matHeaderCellDef>
{{ "ListGears_Header_Manufacturer" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.manufacturer }}</td>
</ng-container>
<ng-container matColumnDef="maxSize">
<th mat-header-cell *matHeaderCellDef style="min-width: 90px">
{{ "ListGears_Header_CanopySize" | translate }}
</th>
<td mat-cell *matCellDef="let element">
{{ element.minSize }} - {{ element.maxSize }}
</td>
</ng-container>
<ng-container matColumnDef="aad">
<th mat-header-cell *matHeaderCellDef>
{{ "ListGears_Header_Aad" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.aad }}</td>
</ng-container>
<ng-container matColumnDef="mainCanopy">
<th mat-header-cell *matHeaderCellDef>
{{ "ListGears_Header_Main" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.mainCanopy }}</td>
</ng-container>
<ng-container matColumnDef="reserveCanopy">
<th mat-header-cell *matHeaderCellDef>
{{ "ListGears_Header_Reserve" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.reserveCanopy }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
@if (dataSourceTable != null) {
<div>
<button mat-raised-button color="accent" (click)="openDialogToAdd()">
{{ "ListGears_Add" | translate }}
</button>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>
{{ "ListGears_Header_Id" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef style="min-width: 130px">
{{ "ListGears_Header_Name" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<ng-container matColumnDef="manufacturer">
<th mat-header-cell *matHeaderCellDef>
{{ "ListGears_Header_Manufacturer" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.manufacturer }}</td>
</ng-container>
<ng-container matColumnDef="maxSize">
<th mat-header-cell *matHeaderCellDef style="min-width: 90px">
{{ "ListGears_Header_CanopySize" | translate }}
</th>
<td mat-cell *matCellDef="let element">
{{ element.minSize }} - {{ element.maxSize }}
</td>
</ng-container>
<ng-container matColumnDef="aad">
<th mat-header-cell *matHeaderCellDef>
{{ "ListGears_Header_Aad" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.aad }}</td>
</ng-container>
<ng-container matColumnDef="mainCanopy">
<th mat-header-cell *matHeaderCellDef>
{{ "ListGears_Header_Main" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.mainCanopy }}</td>
</ng-container>
<ng-container matColumnDef="reserveCanopy">
<th mat-header-cell *matHeaderCellDef>
{{ "ListGears_Header_Reserve" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.reserveCanopy }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
} @else {
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
}
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div>

7
Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts
View File

@@ -3,7 +3,7 @@ import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
import { MatTableDataSource, MatTableModule } from "@angular/material/table";
import { MatDialog } from "@angular/material/dialog";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import { CommonModule } from "@angular/common";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { MatButtonModule } from "@angular/material/button";
@@ -19,12 +19,11 @@ import { NewGearComponent } from "../new-gear/new-gear.component";
styleUrls: ["./list-of-gears.component.css"],
imports: [
TranslateModule,
CommonModule,
MatPaginatorModule,
MatProgressSpinnerModule,
MatTableModule,
MatButtonModule,
],
MatButtonModule
],
})
export class ListOfGearsComponent implements OnInit {
public displayedColumns: Array<string> = [

71
Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html
View File

@@ -4,7 +4,7 @@
(ngSubmit)="onSubmit(imgForm.value)"
autocomplete="off"
style="padding: 10px"
>
>
<p>
<input
type="file"
@@ -14,7 +14,7 @@
accept="image/*"
formControlName="image"
(change)="onFileChanged($event)"
/>
/>
</p>
<p>
<mat-form-field>
@@ -31,43 +31,42 @@
</form>
</div>
<div *ngIf="resultsLength > 0">
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="comment">
<th mat-header-cell *matHeaderCellDef style="text-align: center">
Comments
</th>
<td mat-cell *matCellDef="let element" style="text-align: left">
<span style="white-space: nowrap">{{ element.comment }}</span>
</td>
</ng-container>
<ng-container matColumnDef="data">
<th mat-header-cell *matHeaderCellDef style="text-align: center">
Image
</th>
<td mat-cell *matCellDef="let element" style="text-align: center">
<img
src="{{ element.data }}"
alt="image"
style="width: 50%"
(click)="openModal(element)"
class="cursor"
/>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div>
@if (resultsLength > 0) {
<div>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="comment">
<th mat-header-cell *matHeaderCellDef style="text-align: center">
Comments
</th>
<td mat-cell *matCellDef="let element" style="text-align: left">
<span style="white-space: nowrap">{{ element.comment }}</span>
</td>
</ng-container>
<ng-container matColumnDef="data">
<th mat-header-cell *matHeaderCellDef style="text-align: center">
Image
</th>
<td mat-cell *matCellDef="let element" style="text-align: center">
<img
src="{{ element.data }}"
alt="image"
style="width: 50%"
(click)="openModal(element)"
class="cursor"
/>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div>
}
<div
class="imgmodal"
[ngStyle]="{ display: showPopin === true ? 'block' : 'none' }"
>
>
<span class="close cursor" (click)="closeModal()">&times;</span>
<mat-icon
aria-hidden="false"
@@ -82,6 +81,6 @@
src="{{ popinImage }}"
(click)="closeModal()"
[@rotatedState]="stateRotation"
/>
/>
</div>
</div>

63
Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html
View File

@@ -1,36 +1,35 @@
<div class="content">
<div *ngIf="dataSourceTable != null; else loading">
<button
mat-raised-button
color="accent"
(click)="openDialogToAdd()"
*ngIf="isUserAdmin == true"
>
{{ "ListJumpType_Add" | translate }}
</button>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>
{{ "ListJumpType_Header_Id" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>
{{ "ListJumpType_Header_Name" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
@if (dataSourceTable != null) {
<div>
@if (isUserAdmin == true) {
<button
mat-raised-button
color="accent"
(click)="openDialogToAdd()"
>
{{ "ListJumpType_Add" | translate }}
</button>
}
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>
{{ "ListJumpType_Header_Id" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>
{{ "ListJumpType_Header_Name" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
} @else {
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
}
<mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div>

7
Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts
View File

@@ -3,7 +3,7 @@ import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
import { MatTableDataSource, MatTableModule } from "@angular/material/table";
import { MatDialog } from "@angular/material/dialog";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import { CommonModule } from "@angular/common";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { MatButtonModule } from "@angular/material/button";
@@ -20,12 +20,11 @@ import { NewJumpTypeComponent } from "../new-jump-type/new-jump-type.component";
styleUrls: ["./list-of-jump-types.component.css"],
imports: [
TranslateModule,
CommonModule,
MatPaginatorModule,
MatProgressSpinnerModule,
MatTableModule,
MatButtonModule,
],
MatButtonModule
],
})
export class ListOfJumpTypesComponent implements OnInit {
public displayedColumns: Array<string> = ["name"];

19
Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
View File

@@ -6,15 +6,16 @@
[routerLink]="['/newjump']"
[routerLinkActive]="['active']"
skipLocationChange
>
>
{{ "ListJump_Add" | translate }}
</button>
</div>
<mat-progress-bar
[mode]="'indeterminate'"
*ngIf="isLoading"
></mat-progress-bar>
@if (isLoading) {
<mat-progress-bar
[mode]="'indeterminate'"
></mat-progress-bar>
}
<div>
<table mat-table [dataSource]="dataSourceTable">
@@ -28,7 +29,7 @@
mat-cell
*matCellDef="let element"
style="text-align: left; text-wrap: nowrap"
>
>
<mat-icon
aria-hidden="false"
aria-label="Additional informations of the jump"
@@ -59,7 +60,7 @@
</th>
<td mat-cell *matCellDef="let element; let i = index">
{{
paginator.length - (paginator.pageIndex * paginator.pageSize + i)
paginator.length - (paginator.pageIndex * paginator.pageSize + i)
}}
</td>
</ng-container>
@@ -81,7 +82,7 @@
mat-header-cell
*matHeaderCellDef
style="min-width: 100px; text-wrap: nowrap"
>
>
{{ "ListJump_Header_JumpType" | translate }}
</th>
<td mat-cell *matCellDef="let element" style="text-wrap: nowrap">
@@ -133,7 +134,7 @@
mat-cell
*matCellDef="let element"
style="text-align: left; text-wrap: nowrap"
>
>
<mat-icon
aria-hidden="false"
aria-label="Delete this jump"

173
Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html
View File

@@ -6,20 +6,21 @@
[routerLink]="['/newTunnelFlight']"
[routerLinkActive]="['active']"
skipLocationChange
>
>
{{ "ListTunnelFlight_Add" | translate }}
</button>
</div>
<mat-progress-bar
[mode]="'indeterminate'"
*ngIf="isLoading"
></mat-progress-bar>
@if (isLoading) {
<mat-progress-bar
[mode]="'indeterminate'"
></mat-progress-bar>
}
<mat-radio-group
[(ngModel)]="selectedPeriod"
(ngModelChange)="onPeriodChange()"
>
>
<mat-radio-button value="currentYear">{{
"ListTunnelFlight_CurrentYear" | translate
}}</mat-radio-button>
@@ -32,9 +33,11 @@
</mat-radio-group>
<mat-nav-list>
<mat-list-item matListItemLine *ngFor="let stat of stats">
<label>{{ stat.id }} : {{ stat.values }}</label>
</mat-list-item>
@for (stat of stats; track stat) {
<mat-list-item matListItemLine>
<label>{{ stat.id }} : {{ stat.values }}</label>
</mat-list-item>
}
</mat-nav-list>
<div class="chart-container">
@@ -45,7 +48,7 @@
[options]="barChartOptions"
[legend]="barChartLegend"
[type]="barChartType"
>
>
</canvas>
</div>
@@ -54,83 +57,77 @@
{{ "ListTunnelFlight_LoadTable" | translate }}
</button>
<table
mat-table
[dataSource]="dataSourceTable"
*ngIf="dataSourceTable?.data.length"
>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.id"></span>
</td>
</ng-container>
<ng-container matColumnDef="tunnel">
<th mat-header-cell *matHeaderCellDef>Tunnel</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.tunnel.name"
></span>
</td>
</ng-container>
<ng-container matColumnDef="jumpType">
<th mat-header-cell *matHeaderCellDef>Jump Type</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.jumpType.name"
></span>
</td>
</ng-container>
<ng-container matColumnDef="nbMinutes">
<th mat-header-cell *matHeaderCellDef>Minutes</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.nbMinutes"
></span>
</td>
</ng-container>
<ng-container matColumnDef="notes">
<th mat-header-cell *matHeaderCellDef>Notes</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.notes"
></span>
</td>
</ng-container>
<ng-container matColumnDef="flightDate">
<th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.flightDate | date: 'yyyy-MM-dd'"
></span>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef style="min-width: 80px"></th>
<td mat-cell *matCellDef="let element" style="text-align: left">
<mat-icon
aria-hidden="false"
aria-label="Delete this jump"
style="cursor: pointer"
(click)="delete(element)"
svgIcon="delete"
></mat-icon>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
@if (dataSourceTable?.data.length) {
<table
mat-table
[dataSource]="dataSourceTable"
>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let element">
<span class="smallSpanWithBreakWord" [innerHTML]="element.id"></span>
</td>
</ng-container>
<ng-container matColumnDef="tunnel">
<th mat-header-cell *matHeaderCellDef>Tunnel</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.tunnel.name"
></span>
</td>
</ng-container>
<ng-container matColumnDef="jumpType">
<th mat-header-cell *matHeaderCellDef>Jump Type</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.jumpType.name"
></span>
</td>
</ng-container>
<ng-container matColumnDef="nbMinutes">
<th mat-header-cell *matHeaderCellDef>Minutes</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.nbMinutes"
></span>
</td>
</ng-container>
<ng-container matColumnDef="notes">
<th mat-header-cell *matHeaderCellDef>Notes</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.notes"
></span>
</td>
</ng-container>
<ng-container matColumnDef="flightDate">
<th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.flightDate | date: 'yyyy-MM-dd'"
></span>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef style="min-width: 80px"></th>
<td mat-cell *matCellDef="let element" style="text-align: left">
<mat-icon
aria-hidden="false"
aria-label="Delete this jump"
style="cursor: pointer"
(click)="delete(element)"
svgIcon="delete"
></mat-icon>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
}
</div>
</div>

46
Front/skydivelogs-app/src/app/login-user/login-user.component.html
View File

@@ -4,7 +4,7 @@
style="padding: 10px"
[formGroup]="loginForm"
(ngSubmit)="onLoginSubmit()"
>
>
<p>
<mat-form-field>
<mat-label>{{ "LoginUser_Username" | translate }}</mat-label>
@@ -14,13 +14,17 @@
#username="matInput"
formControlName="username"
[ngClass]="{ 'is-invalid': submitted && formCtrls['username'].errors }"
/>
<mat-error *ngIf="formCtrls['username'].hasError('required')">
{{ "LoginUser_UsernameRequired" | translate }}
</mat-error>
<mat-error *ngIf="formCtrls['username'].hasError('minlength')">
{{ 'LoginUser_UsernamePattern | translate }}
</mat-error>
/>
@if (formCtrls['username'].hasError('required')) {
<mat-error>
{{ "LoginUser_UsernameRequired" | translate }}
</mat-error>
}
@if (formCtrls['username'].hasError('minlength')) {
<mat-error>
{{ 'LoginUser_UsernamePattern | translate }}
</mat-error>
}
</mat-form-field>
</p>
<p>
@@ -31,20 +35,28 @@
matInput
formControlName="password"
[ngClass]="{ 'is-invalid': submitted && formCtrls['password'].errors }"
/>
<mat-error *ngIf="formCtrls['password'].hasError('required')">
{{ "LoginUser_PasswordRequired" | translate }}
</mat-error>
<mat-error *ngIf="formCtrls['password'].hasError('pattern')">
{{ "LoginUser_PasswordPattern" | translate }}
</mat-error>
/>
@if (formCtrls['password'].hasError('required')) {
<mat-error>
{{ "LoginUser_PasswordRequired" | translate }}
</mat-error>
}
@if (formCtrls['password'].hasError('pattern')) {
<mat-error>
{{ "LoginUser_PasswordPattern" | translate }}
</mat-error>
}
</mat-form-field>
</p>
<button [disabled]="loading" mat-raised-button color="accent">
<span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
@if (loading) {
<span class="spinner-border spinner-border-sm mr-1"></span>
}
{{ "LoginUser_BtnLogin" | translate }}
</button>
<div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{ error }}</div>
@if (error) {
<div class="alert alert-danger mt-3 mb-0">{{ error }}</div>
}
</form>

7
Front/skydivelogs-app/src/app/login/login.component.ts
View File

@@ -4,7 +4,7 @@ import {
TranslatePipe,
TranslateService,
} from "@ngx-translate/core";
import { CommonModule } from "@angular/common";
import { MatSelectModule } from "@angular/material/select";
import { MatOptionModule } from "@angular/material/core";
import { MatCardModule } from "@angular/material/card";
@@ -19,15 +19,14 @@ import { CreateUserComponent } from "../create-user/create-user.component";
styleUrls: ["./login.component.css"],
imports: [
TranslateModule,
CommonModule,
MatSelectModule,
MatOptionModule,
MatCardModule,
MatTabsModule,
LoginUserComponent,
CreateUserComponent,
TranslateModule,
],
TranslateModule
],
})
export class LoginComponent implements OnInit {
public selectedLanguageFlag: string;

506
Front/skydivelogs-app/src/app/new-jump/new-jump.component.html
View File

@@ -6,7 +6,7 @@
[routerLink]="['/jumps']"
[routerLinkActive]="['active']"
skipLocationChange
>
>
{{ "NewJump_GoToJump" | translate }}
</button>
<p>
@@ -16,255 +16,263 @@
</p>
</div>
<form
class="formNewJumps"
(ngSubmit)="onFormSubmit()"
*ngIf="notLoadingToDisplay(); else loading"
>
<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"
@if (notLoadingToDisplay()) {
<form
class="formNewJumps"
(ngSubmit)="onFormSubmit()"
>
<mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
{{ jumpType.name }}
</mat-option>
</mat-autocomplete>
<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>{{ "NewJump_ChooseAircraft" | translate }}</mat-label>
<input
type="text"
matInput
[matAutocomplete]="autoAircraft"
[(ngModel)]="selectedAircraft"
name="selectedAircraft"
/>
<mat-autocomplete
#autoAircraft="matAutocomplete"
[displayWith]="displayNameFn"
>
<mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft">
{{ aircraft.name }}
</mat-option>
</mat-autocomplete>
<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>{{ "NewJump_ChooseDz" | translate }}</mat-label>
<input
type="text"
matInput
[matAutocomplete]="autoDropZone"
[(ngModel)]="selectedDz"
(ngModelChange)="onChangeDz($event)"
name="selectedDz"
/>
<mat-autocomplete
#autoDropZone="matAutocomplete"
[displayWith]="displayNameFn"
>
<mat-option
*ngFor="let dropZone of listOfFilteredDropZone"
[value]="dropZone"
>
{{ dropZone.name }}
<mat-icon
aria-hidden="false"
aria-label="Favorite"
*ngIf="dropZone.isFavorite === true"
color="primary"
<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"
>
favorite</mat-icon
@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>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"
>
</mat-option>
</mat-autocomplete>
<button
*ngIf="selectedDz"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="resetDz()"
>
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
@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>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"
>
favorite</mat-icon
>
}
</mat-option>
}
</mat-autocomplete>
@if (selectedDz) {
<button
matSuffix
mat-icon-button
aria-label="Clear"
(click)="resetDz()"
>
<mat-icon>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>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>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>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>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>close</mat-icon>
</button>
}
</mat-form-field>
<br />
@if (isValidatedForm()) {
<button mat-raised-button color="accent">
{{ "NewJump_Submit" | translate }}
</button>
}
</form>
} @else {
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
}
<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"
>
<mat-option *ngFor="let gear of listOfGear" [value]="gear">
{{ gear.name }} ({{ gear.mainCanopy }})
</mat-option>
</mat-autocomplete>
<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">{{
"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"
/>
<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="{{ 'NewJump_DeployAlt' | translate }}"
[(ngModel)]="deployAltitude"
name="deployAltitude"
type="number"
/>
<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="{{ 'NewJump_Count' | translate }}"
[(ngModel)]="countOfJumps"
name="countOfJumps"
type="number"
/>
<button
*ngIf="countOfJumps"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="countOfJumps = undefined"
>
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field>
<textarea
matInput
placeholder="{{ 'NewJump_Comments' | translate }}"
[(ngModel)]="comments"
name="comments"
type="text"
></textarea>
<button
*ngIf="comments"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="comments = undefined"
>
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<br />
<button mat-raised-button color="accent" *ngIf="isValidatedForm()">
{{ "NewJump_Submit" | translate }}
</button>
</form>
<ng-template #loading>
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
</div>
</div>

7
Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts
View File

@@ -7,7 +7,7 @@ import {
NativeDateAdapter,
} from "@angular/material/core";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import { CommonModule } from "@angular/common";
import { MatIconModule } from "@angular/material/icon";
import { MatOptionModule } from "@angular/material/core";
import { MatFormFieldModule } from "@angular/material/form-field";
@@ -58,7 +58,6 @@ class PickDateAdapter extends NativeDateAdapter {
],
imports: [
TranslateModule,
CommonModule,
RouterLink,
FormsModule,
RouterModule,
@@ -72,8 +71,8 @@ class PickDateAdapter extends NativeDateAdapter {
MatFormFieldModule,
ReactiveFormsModule,
MatInputModule,
MatButtonModule,
],
MatButtonModule
],
})
export class NewJumpComponent implements OnInit {
public beginDate: Date;

264
Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.html
View File

@@ -6,140 +6,144 @@
[routerLink]="['/tunnelFlights']"
[routerLinkActive]="['active']"
skipLocationChange
>
>
{{ "NewTunnelFlight_GoToJump" | translate }}
</button>
</div>
<form
class="formNewJumps"
(ngSubmit)="onFormSubmit()"
*ngIf="notLoadingToDisplay(); else loading"
>
<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"
@if (notLoadingToDisplay()) {
<form
class="formNewJumps"
(ngSubmit)="onFormSubmit()"
>
<mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
{{ jumpType.name }}
</mat-option>
</mat-autocomplete>
<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>{{ "NewTunnelFlight_ChooseTunnel" | translate }}</mat-label>
<input
type="text"
matInput
[matAutocomplete]="autoDropZone"
[(ngModel)]="selectedTunnel"
(ngModelChange)="onChangeTunnel($event)"
name="selectedTunnel"
/>
<mat-autocomplete
#autoDropZone="matAutocomplete"
[displayWith]="displayNameFn"
>
<mat-option
*ngFor="let tunnel of listOfFilteredTunnel"
[value]="tunnel"
>
{{ tunnel.name }}
</mat-option>
</mat-autocomplete>
<button
*ngIf="selectedTunnel"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="resetTunnel()"
>
<mat-icon>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"
/>
<button
*ngIf="minutesOfFlight"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="minutesOfFlight = undefined"
>
<mat-icon>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>
<button
*ngIf="comments"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="comments = undefined"
>
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<br />
<button mat-raised-button color="accent" *ngIf="isValidatedForm()">
{{ "NewTunnelFlight_Submit" | translate }}
</button>
</form>
<ng-template #loading>
<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>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>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>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>close</mat-icon>
</button>
}
</mat-form-field>
<br />
@if (isValidatedForm()) {
<button mat-raised-button color="accent">
{{ "NewTunnelFlight_Submit" | translate }}
</button>
}
</form>
} @else {
<mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
</ng-template>
}
</div>

7
Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.ts
View File

@@ -7,7 +7,7 @@ import {
NativeDateAdapter,
} from "@angular/material/core";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import { CommonModule } from "@angular/common";
import { MatIconModule } from "@angular/material/icon";
import { MatOptionModule } from "@angular/material/core";
import { MatAutocompleteModule } from "@angular/material/autocomplete";
@@ -52,7 +52,6 @@ class PickDateAdapter extends NativeDateAdapter {
],
imports: [
TranslateModule,
CommonModule,
RouterModule,
RouterLink,
FormsModule,
@@ -65,8 +64,8 @@ class PickDateAdapter extends NativeDateAdapter {
MatFormFieldModule,
MatOptionModule,
MatDatepickerModule,
MatProgressSpinnerModule,
],
MatProgressSpinnerModule
],
})
export class NewTunnelFlightComponent implements OnInit {
public flightDate: Date;