update Angular to v20

Reviewed-on: #4
Co-authored-by: sandre <perso@sebastienandre.com>
Co-committed-by: sandre <perso@sebastienandre.com>

Front/skydivelogs-app/.editorconfig

@@ -4,7 +4,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 

Front/skydivelogs-app/angular.json

@@ -1,123 +1,145 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "skydivelogs-app": {
-      "projectType": "application",
-      "schematics": {
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "skydivelogs-app": {
+            "projectType": "application",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "style": "scss"
+                }
+            },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
+            "architect": {
+                "build": {
+                    "builder": "@angular/build:application",
+                    "options": {
+                        "outputPath": "dist",
+                        "index": "src/index.html",
+                        "browser": "src/main.ts",
+                        "polyfills": ["zone.js"],
+                        "tsConfig": "tsconfig.app.json",
+                        "inlineStyleLanguage": "scss",
+                        "assets": [
+                            "src/assets",
+                            "src/config",
+                            "src/favicon.ico"
+                        ],
+                        "styles": [
+                            "src/assets/css/styles-app-loading.scss",
+                            "src/assets/css/styles.css",
+                            "src/assets/css/new-theme.scss",
+                            "@angular/material/prebuilt-themes/pink-bluegrey.css"
+                        ],
+                        "scripts": []
+                    },
+                    "configurations": {
+                        "production": {
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "2mb",
+                                    "maximumError": "5mb"
+                                },
+                                {
+                                    "type": "bundle",
+                                    "name": "main",
+                                    "baseline": "1mb",
+                                    "maximumWarning": "1.5mb",
+                                    "maximumError": "2mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "2kb",
+                                    "maximumError": "4kb"
+                                }
+                            ],
+                            "outputHashing": "all",
+                            "optimization": true,
+                            "extractLicenses": true,
+                            "sourceMap": false,
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ]
+                        },
+                        "development": {
+                            "optimization": false,
+                            "extractLicenses": false,
+                            "sourceMap": true,
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.dev.ts"
+                                }
+                            ]
+                        }
+                    },
+                    "defaultConfiguration": "production"
+                },
+                "serve": {
+                    "builder": "@angular/build:dev-server",
+                    "configurations": {
+                        "production": {
+                            "buildTarget": "skydivelogs-app:build:production"
+                        },
+                        "development": {
+                            "buildTarget": "skydivelogs-app:build:development"
+                        }
+                    },
+                    "defaultConfiguration": "development"
+                },
+                "extract-i18n": {
+                    "builder": "@angular/build:extract-i18n"
+                },
+                "test": {
+                    "builder": "@angular/build:karma",
+                    "options": {
+                        "polyfills": ["zone.js", "zone.js/testing"],
+                        "tsConfig": "tsconfig.spec.json",
+                        "inlineStyleLanguage": "scss",
+                        "assets": [
+                            {
+                                "glob": "**/*",
+                                "input": "public"
+                            }
+                        ],
+                        "styles": ["src/styles.scss"],
+                        "scripts": []
+                    }
+                }
+            }
+        }
+    },
+    "schematics": {
         "@schematics/angular:component": {
-          "style": "scss"
+            "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": "."
         }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:application",
-          "options": {
-            "outputPath": "dist",
-            "index": "src/index.html",
-            "browser": "src/main.ts",
-            "polyfills": ["zone.js"],
-            "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/assets",
-              "src/config",
-              "src/favicon.ico",
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
-            ],
-            "styles": [
-              "src/assets/css/styles-app-loading.scss",
-              "src/assets/css/styles.css",
-              "src/assets/css/new-theme.scss",
-              "@angular/material/prebuilt-themes/pink-bluegrey.css"
-            ],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "bundle",
-                  "name": "main",
-                  "baseline": "1mb",
-                  "maximumWarning": "1.5mb",
-                  "maximumError": "2mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
-                }
-              ],
-              "outputHashing": "all",
-              "optimization": true,
-              "extractLicenses": true,
-              "sourceMap": false,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ]
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.dev.ts"
-                }
-              ]
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "skydivelogs-app:build:production"
-            },
-            "development": {
-              "buildTarget": "skydivelogs-app:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "polyfills": ["zone.js", "zone.js/testing"],
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
-            ],
-            "styles": ["src/styles.scss"],
-            "scripts": []
-          }
-        }
-      }
     }
-  }
 }

Front/skydivelogs-app/package.json

@@ -1,46 +1,46 @@
 {
-  "name": "skydivelogs-app",
-  "version": "0.0.0",
-  "license": "MIT",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^19.2.6",
-    "@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/material": "^19.2.9",
-    "@angular/platform-browser": "^19.2.6",
-    "@angular/platform-browser-dynamic": "^19.2.6",
-    "@angular/router": "^19.2.6",
-    "@ngx-translate/core": "^17.0.0",
-    "@ngx-translate/http-loader": "^17.0.0",
-    "chart.js": "^4.3.0",
-    "ng2-charts": "^8.0.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.15.0"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.7",
-    "@angular/cli": "~19.2.7",
-    "@angular/compiler-cli": "^19.2.6",
-    "@types/jasmine": "~4.3.0",
-    "jasmine-core": "~5.1.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.5.4"
-  }
+    "name": "skydivelogs-app",
+    "version": "0.0.0",
+    "license": "MIT",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build --configuration production",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "^20.3.16",
+        "@angular/cdk": "^20.2.14",
+        "@angular/common": "^20.3.16",
+        "@angular/compiler": "^20.3.16",
+        "@angular/core": "^20.3.16",
+        "@angular/forms": "^20.3.16",
+        "@angular/material": "^20.2.14",
+        "@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",
+        "ng2-charts": "^8.0.0",
+        "rxjs": "~7.8.0",
+        "tslib": "^2.3.0",
+        "zone.js": "~0.15.0"
+    },
+    "devDependencies": {
+        "@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",
+        "karma-chrome-launcher": "~3.2.0",
+        "karma-coverage": "~2.2.0",
+        "karma-jasmine": "~5.1.0",
+        "karma-jasmine-html-reporter": "~2.1.0",
+        "typescript": "~5.9.3"
+    }
 }

Front/skydivelogs-app/src/app/app.base.component.ts

@@ -1,33 +0,0 @@
-import { inject, OnInit } from "@angular/core";
-import { IconResolver, MatIconRegistry } from "@angular/material/icon";
-import { DomSanitizer } from "@angular/platform-browser";
-import { TranslateService } from "@ngx-translate/core";
-import { ServiceComm } from "../services/service-comm.service";
-
-@decorator
-export class BaseComponent implements OnInit {
-  private titleId: string = "???";
-  protected serviceComm: ServiceComm;
-  protected translateService: TranslateService;
-
-  constructor(titleId: string) {
-    let iconRegistry = inject(MatIconRegistry);
-    let sanitizer = inject(DomSanitizer);
-    const resolver: IconResolver = (name) =>
-      sanitizer.bypassSecurityTrustResourceUrl(`/assets/icon/${name}.svg`);
-    iconRegistry.addSvgIconResolver(resolver);
-
-    this.serviceComm = inject(ServiceComm);
-    this.translateService = inject(TranslateService);
-    this.titleId = titleId;
-  }
-
-  ngOnInit() {
-    this.translateService.get(this.titleId).subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-      // this.serviceComm.componentTitle.subscribe((title) => (this.title = data));
-    });
-  }
-}
-
-function decorator(target: typeof BaseComponent): void | typeof BaseComponent {}

Front/skydivelogs-app/src/app/app.component.css

@@ -1,56 +1,44 @@
-/* .hamburger__icon {
-  position: relative;
-  height: 1rem;
-  margin-right: 1rem;
-  cursor: pointer;
-  fill: #ffff;
-}
-
-.hamburger__icon__fill {
-  fill: #424242
-} */
-
 .navigation.side-menu-active {
-  left: 0px;
+    left: 0px;
 }
 
 .navigation {
-  position: absolute;
-  width: 200px;
-  z-index: 101;
-  background-color: grey;
-  padding: 5px;
-  left: -220px;
-  transition: 0.5s linear left;
-  -webkit-transition: 0.5s linear left;
+    position: absolute;
+    width: 200px;
+    z-index: 101;
+    background-color: grey;
+    padding: 5px;
+    left: -220px;
+    transition: 0.5s linear left;
+    -webkit-transition: 0.5s linear left;
 }
 
 .navigation ul {
-  list-style: none;
-  padding: 0;
+    list-style: none;
+    padding: 0;
 }
 
 .navigation ul li {
-  margin: 10px;
+    margin: 10px;
 }
 
 .navigation ul li a {
-  text-decoration: none;
-  cursor: pointer;
-  color: #424242;
-  vertical-align: middle;
+    text-decoration: none;
+    cursor: pointer;
+    color: #424242;
+    vertical-align: middle;
 }
 
 .navigation .mat-icon {
-  vertical-align: middle;
+    vertical-align: middle;
 }
 
 .navigation .splitter {
-  width: 100%;
-  margin-top: 20px;
-  margin-bottom: 20px;
+    width: 100%;
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
 
 .mat-icon {
-  margin-right: 15px;
+    margin-right: 15px;
 }

Front/skydivelogs-app/src/app/app.component.html

@@ -1,190 +1,200 @@
-<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>
+        <h2 (click)="snav.toggle()">
+            <mat-icon svgIcon="menu"></mat-icon>
+            {{ 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">
-    <mat-nav-list>
-      <mat-icon
-        aria-hidden="false"
-        aria-label="Summary"
-        svgIcon="summary"
-      ></mat-icon>
-      <a
-        routerLink="/summary"
-        routerLinkActive="active"
-        (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>
+    <mat-sidenav #snav mode="over" style="padding: 0 20px 0 10px">
+        <mat-nav-list>
+            <mat-icon
+                aria-hidden="false"
+                aria-label="Summary"
+                svgIcon="summary"
+            ></mat-icon>
+            <a
+                routerLink="/summary"
+                routerLinkActive="active"
+                (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>
+        @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-content>
+        <router-outlet></router-outlet>
+        <footer style="text-align: right">
+            {{ "App_Footer" | translate }}{{ version }} - &#64;Séb
+        </footer>
+    </mat-sidenav-content>
 </mat-sidenav-container>

Front/skydivelogs-app/src/app/app.component.ts

@@ -1,21 +1,21 @@
 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 {
-  IconResolver,
-  MatIconModule,
-  MatIconRegistry,
+    IconResolver,
+    MatIconModule,
+    MatIconRegistry,
 } from "@angular/material/icon";
 import { MatSelectModule } from "@angular/material/select";
 import { MatOptionModule } from "@angular/material/core";
 import { MatSidenavModule } from "@angular/material/sidenav";
 import { MatListModule } from "@angular/material/list";
 import {
-  TranslateService,
-  TranslateModule,
-  TranslatePipe,
+    TranslateService,
+    TranslateModule,
+    TranslatePipe,
 } from "@ngx-translate/core";
 
 import { User } from "../models/user";
@@ -27,80 +27,82 @@ import { ConfigurationHelper } from "../services/configuration-helper";
 import { ServiceCacheApi } from "../services/service-cache-api.service";
 
 @Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.css"],
-  imports: [
-    CommonModule,
-    MatToolbarModule,
-    MatIconModule,
-    MatSelectModule,
-    MatOptionModule,
-    MatSidenavModule,
-    MatListModule,
-    RouterOutlet,
-    RouterLink,
-    TranslateModule,
-    TranslatePipe,
-  ],
+    selector: "app-root",
+    templateUrl: "./app.component.html",
+    styleUrls: ["./app.component.css"],
+    imports: [
+        MatToolbarModule,
+        MatIconModule,
+        MatSelectModule,
+        MatOptionModule,
+        MatSidenavModule,
+        MatListModule,
+        RouterOutlet,
+        RouterLink,
+        TranslateModule,
+        TranslatePipe,
+    ],
 })
 export class AppComponent implements OnInit {
-  public translatedTitle = "???";
-  public currentUser: User;
-  public version: string;
-  public selectedLanguageFlag: string;
+    public translatedTitle = "???";
+    public currentUser: User;
+    public version: string;
+    public selectedLanguageFlag: string;
 
-  constructor(
-    private router: Router,
-    private authenticationService: AuthenticationService,
-    private serviceComm: ServiceComm,
-    private serviceCacheApi: ServiceCacheApi,
-    private translateService: TranslateService,
-  ) {
-    const sanitizer = inject(DomSanitizer);
-    const resolver: IconResolver = (name) =>
-      sanitizer.bypassSecurityTrustResourceUrl(`/assets/icon/${name}.svg`);
-    const iconRegistry = inject(MatIconRegistry);
-    iconRegistry.addSvgIconResolver(resolver);
+    constructor(
+        private router: Router,
+        private authenticationService: AuthenticationService,
+        private serviceComm: ServiceComm,
+        private serviceCacheApi: ServiceCacheApi,
+        private translateService: TranslateService,
+    ) {
+        const sanitizer = inject(DomSanitizer);
+        const resolver: IconResolver = (name) =>
+            sanitizer.bypassSecurityTrustResourceUrl(
+                `/assets/icon/${name}.svg`,
+            );
+        const iconRegistry = inject(MatIconRegistry);
+        iconRegistry.addSvgIconResolver(resolver);
 
-    this.authenticationService.currentUser.subscribe((user) => {
-      if (user) {
-        this.currentUser = user;
-        this.translateService.addLangs(["en", "fr"]);
-        this.translateService.use(user.language);
-        this.selectedLanguageFlag = user.language;
-      }
-    });
+        this.authenticationService.currentUser.subscribe((user) => {
+            if (user) {
+                this.currentUser = user;
+                this.translateService.addLangs(["en", "fr"]);
+                this.translateService.use(user.language);
+                this.selectedLanguageFlag = user.language;
+            }
+        });
 
-    ConfigurationHelper.settings.subscribe((settings) => {
-      if (settings != null) {
-        this.version = settings.version;
-      }
-    });
-  }
+        ConfigurationHelper.settings.subscribe((settings) => {
+            if (settings != null) {
+                this.version = settings.version;
+            }
+        });
+    }
 
-  ngOnInit() {
-    this.serviceComm.componentTitle.subscribe(
-      (title) => (this.translatedTitle = title),
-    );
-  }
+    ngOnInit() {}
+    ngAfterViewInit() {
+        this.serviceComm.componentTitle.subscribe(
+            (title) => (this.translatedTitle = title),
+        );
+    }
 
-  public show() {
-    return this.authenticationService.currentUserValue != undefined;
-  }
+    public show() {
+        return this.authenticationService.currentUserValue != undefined;
+    }
 
-  public logout() {
-    this.serviceCacheApi.delete(CacheApiKey.Dropzone);
-    this.authenticationService.logout();
-    this.router.navigate(["/login"], { skipLocationChange: true });
-  }
+    public logout() {
+        this.serviceCacheApi.delete(CacheApiKey.Dropzone);
+        this.authenticationService.logout();
+        this.router.navigate(["/login"], { skipLocationChange: true });
+    }
 
-  public switchLang(event: any) {
-    this.translateService.use(event.value);
-    this.currentUser.language = event.value;
-    this.authenticationService.currentUserValue = this.currentUser;
-    this.selectedLanguageFlag = event.value;
+    public switchLang(event: any) {
+        this.translateService.use(event.value);
+        this.currentUser.language = event.value;
+        this.authenticationService.currentUserValue = this.currentUser;
+        this.selectedLanguageFlag = event.value;
 
-    this.serviceComm.forceTranslate();
-  }
+        this.serviceComm.forceTranslate();
+    }
 }

Front/skydivelogs-app/src/app/app.config.ts

@@ -32,42 +32,44 @@ import { provideTranslateHttpLoader } from "@ngx-translate/http-loader";
 
 // Déclaration de la fonction d'initialisation de la configuration
 export function initConfig(configService: ConfigurationHelper) {
-  return () => configService.load(environment.env);
+    return () => configService.load(environment.env);
 }
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    TunnelService,
-    TunnelFlightService,
-    ImageService,
-    AircraftService,
-    DropzoneService,
-    GearService,
-    JumpService,
-    JumpTypeService,
-    StatsService,
-    ServiceComm,
-    DateService,
-    RequestCache,
-    ConfigurationHelper,
-    DatePipe,
-    ServiceCacheApi,
-    provideAppInitializer(() => {
-      const initializerFn = initConfig(inject(ConfigurationHelper));
-      return initializerFn();
-    }),
-    provideHttpClient(withInterceptors([JwtAuthInterceptor, ErrorInterceptor])),
-    provideCharts(withDefaultRegisterables()),
-    provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes),
-    provideHttpClient(),
-    provideTranslateService({
-      loader: provideTranslateHttpLoader({
-        prefix: "/assets/i18n/",
-        suffix: ".json",
-      }),
-      fallbackLang: "en",
-      lang: "en",
-    }),
-  ],
+    providers: [
+        TunnelService,
+        TunnelFlightService,
+        ImageService,
+        AircraftService,
+        DropzoneService,
+        GearService,
+        JumpService,
+        JumpTypeService,
+        StatsService,
+        ServiceComm,
+        DateService,
+        RequestCache,
+        ConfigurationHelper,
+        DatePipe,
+        ServiceCacheApi,
+        provideAppInitializer(() => {
+            const initializerFn = initConfig(inject(ConfigurationHelper));
+            return initializerFn();
+        }),
+        provideHttpClient(
+            withInterceptors([JwtAuthInterceptor, ErrorInterceptor]),
+        ),
+        provideCharts(withDefaultRegisterables()),
+        provideZoneChangeDetection({ eventCoalescing: true }),
+        provideRouter(routes),
+        provideHttpClient(),
+        provideTranslateService({
+            loader: provideTranslateHttpLoader({
+                prefix: "/assets/i18n/",
+                suffix: ".json",
+            }),
+            fallbackLang: "en",
+            lang: "en",
+        }),
+    ],
 };

Front/skydivelogs-app/src/app/app.routes.ts

@@ -3,91 +3,97 @@ import { Routes } from "@angular/router";
 import { AuthGuardService } from "../services/auth-guard.service";
 
 export const routes: Routes = [
-  {
-    path: "",
-    loadComponent: () =>
-      import("./default/default.component").then((m) => m.DefaultComponent),
-    canActivate: [AuthGuardService],
-  },
-  {
-    path: "summary",
-    loadComponent: () =>
-      import("./summary/summary.component").then((m) => m.SummaryComponent),
-    canActivate: [AuthGuardService],
-  },
-  {
-    path: "jumps",
-    loadComponent: () =>
-      import("./list-of-jumps/list-of-jumps.component").then(
-        (m) => m.ListOfJumpsComponent,
-      ),
-    canActivate: [AuthGuardService],
-  },
-  {
-    path: "dzs",
-    loadComponent: () =>
-      import("./list-of-dzs/list-of-dzs.component").then(
-        (m) => m.ListOfDzsComponent,
-      ),
-    canActivate: [AuthGuardService],
-  },
-  {
-    path: "newjump",
-    loadComponent: () =>
-      import("./new-jump/new-jump.component").then((m) => m.NewJumpComponent),
-    canActivate: [AuthGuardService],
-  },
-  {
-    path: "aircrafts",
-    loadComponent: () =>
-      import("./list-of-aircrafts/list-of-aircrafts.component").then(
-        (m) => m.ListOfAircraftsComponent,
-      ),
-    canActivate: [AuthGuardService],
-  },
-  {
-    path: "jumpTypes",
-    loadComponent: () =>
-      import("./list-of-jump-types/list-of-jump-types.component").then(
-        (m) => m.ListOfJumpTypesComponent,
-      ),
-    canActivate: [AuthGuardService],
-  },
-  {
-    path: "gears",
-    loadComponent: () =>
-      import("./list-of-gears/list-of-gears.component").then(
-        (m) => m.ListOfGearsComponent,
-      ),
-    canActivate: [AuthGuardService],
-  },
-  {
-    path: "user",
-    loadComponent: () =>
-      import("./user-profile/user-profile.component").then(
-        (m) => m.UserProfileComponent,
-      ),
-    canActivate: [AuthGuardService],
-  },
-  {
-    path: "newTunnelFlight",
-    loadComponent: () =>
-      import("./new-tunnel-flight/new-tunnel-flight.component").then(
-        (m) => m.NewTunnelFlightComponent,
-      ),
-    canActivate: [AuthGuardService],
-  },
-  {
-    path: "tunnelFlights",
-    loadComponent: () =>
-      import("./list-of-tunnel-flights/list-of-tunnel-flights.component").then(
-        (m) => m.ListOfTunnelFlightsComponent,
-      ),
-    canActivate: [AuthGuardService],
-  },
-  {
-    path: "login",
-    loadComponent: () =>
-      import("./login/login.component").then((m) => m.LoginComponent),
-  },
+    {
+        path: "",
+        loadComponent: () =>
+            import("./default/default.component").then(
+                (m) => m.DefaultComponent,
+            ),
+        canActivate: [AuthGuardService],
+    },
+    {
+        path: "summary",
+        loadComponent: () =>
+            import("./summary/summary.component").then(
+                (m) => m.SummaryComponent,
+            ),
+        canActivate: [AuthGuardService],
+    },
+    {
+        path: "jumps",
+        loadComponent: () =>
+            import("./list-of-jumps/list-of-jumps.component").then(
+                (m) => m.ListOfJumpsComponent,
+            ),
+        canActivate: [AuthGuardService],
+    },
+    {
+        path: "dzs",
+        loadComponent: () =>
+            import("./list-of-dzs/list-of-dzs.component").then(
+                (m) => m.ListOfDzsComponent,
+            ),
+        canActivate: [AuthGuardService],
+    },
+    {
+        path: "newjump",
+        loadComponent: () =>
+            import("./new-jump/new-jump.component").then(
+                (m) => m.NewJumpComponent,
+            ),
+        canActivate: [AuthGuardService],
+    },
+    {
+        path: "aircrafts",
+        loadComponent: () =>
+            import("./list-of-aircrafts/list-of-aircrafts.component").then(
+                (m) => m.ListOfAircraftsComponent,
+            ),
+        canActivate: [AuthGuardService],
+    },
+    {
+        path: "jumpTypes",
+        loadComponent: () =>
+            import("./list-of-jump-types/list-of-jump-types.component").then(
+                (m) => m.ListOfJumpTypesComponent,
+            ),
+        canActivate: [AuthGuardService],
+    },
+    {
+        path: "gears",
+        loadComponent: () =>
+            import("./list-of-gears/list-of-gears.component").then(
+                (m) => m.ListOfGearsComponent,
+            ),
+        canActivate: [AuthGuardService],
+    },
+    {
+        path: "user",
+        loadComponent: () =>
+            import("./user-profile/user-profile.component").then(
+                (m) => m.UserProfileComponent,
+            ),
+        canActivate: [AuthGuardService],
+    },
+    {
+        path: "newTunnelFlight",
+        loadComponent: () =>
+            import("./new-tunnel-flight/new-tunnel-flight.component").then(
+                (m) => m.NewTunnelFlightComponent,
+            ),
+        canActivate: [AuthGuardService],
+    },
+    {
+        path: "tunnelFlights",
+        loadComponent: () =>
+            import("./list-of-tunnel-flights/list-of-tunnel-flights.component").then(
+                (m) => m.ListOfTunnelFlightsComponent,
+            ),
+        canActivate: [AuthGuardService],
+    },
+    {
+        path: "login",
+        loadComponent: () =>
+            import("./login/login.component").then((m) => m.LoginComponent),
+    },
 ];

Front/skydivelogs-app/src/app/create-user/create-user.component.html

@@ -1,104 +1,136 @@
 <form
-  focusInvalidInput
-  autocomplete="off"
-  style="padding: 10px"
-  (ngSubmit)="onCreateSubmit()"
-  [formGroup]="createForm"
+    focusInvalidInput
+    autocomplete="off"
+    style="padding: 10px"
+    (ngSubmit)="onCreateSubmit()"
+    [formGroup]="createForm"
 >
-  <p>
-    <mat-form-field>
-      <mat-label>{{ "LoginCreateUser_Firstname" | translate }}</mat-label>
-      <input
-        type="text"
-        matInput
-        #firstname="matInput"
-        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>
-    </mat-form-field>
-  </p>
-  <p>
-    <mat-form-field>
-      <mat-label>{{ "LoginCreateUser_Lastname" | translate }}</mat-label>
-      <input
-        matInput
-        type="text"
-        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>
-    </mat-form-field>
-  </p>
-  <p>
-    <mat-form-field>
-      <mat-label>{{ "LoginCreateUser_Email" | translate }}</mat-label>
-      <input
-        matInput
-        type="email"
-        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>
-    </mat-form-field>
-  </p>
-  <p>
-    <mat-form-field>
-      <mat-label>{{ "LoginCreateUser_Username" | translate }}</mat-label>
-      <input
-        matInput
-        type="text"
-        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>
-    </mat-form-field>
-  </p>
-  <p>
-    <mat-form-field>
-      <mat-label>{{ "LoginCreateUser_Password" | translate }}</mat-label>
-      <input
-        matInput
-        type="password"
-        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>
-    </mat-form-field>
-  </p>
+    <p>
+        <mat-form-field>
+            <mat-label>{{ "CreateUser_Firstname" | translate }}</mat-label>
+            <input
+                type="text"
+                matInput
+                #firstname="matInput"
+                formControlName="firstname"
+                [ngClass]="{
+                    'is-invalid': submitted && formCtrls['firstname'].errors,
+                }"
+                tabindex="0"
+            />
+            @if (formCtrls["firstname"].hasError("required")) {
+                <mat-error>
+                    {{ "CreateUser_FirstnameRequired" | translate }}
+                </mat-error>
+            }
+            @if (formCtrls["firstname"].hasError("minlength")) {
+                <mat-error>
+                    {{ "CreateUser_FirstnamePattern" | translate }}
+                </mat-error>
+            }
+        </mat-form-field>
+    </p>
+    <p>
+        <mat-form-field>
+            <mat-label>{{ "CreateUser_Lastname" | translate }}</mat-label>
+            <input
+                matInput
+                type="text"
+                formControlName="lastname"
+                [ngClass]="{
+                    'is-invalid': submitted && formCtrls['lastname'].errors,
+                }"
+                tabindex="1"
+            />
+            @if (formCtrls["lastname"].hasError("required")) {
+                <mat-error>
+                    {{ "CreateUser_LastnameRequired" | translate }}
+                </mat-error>
+            }
+            @if (formCtrls["lastname"].hasError("minlength")) {
+                <mat-error>
+                    {{ "CreateUser_LastnamePattern" | translate }}
+                </mat-error>
+            }
+        </mat-form-field>
+    </p>
+    <p>
+        <mat-form-field>
+            <mat-label>{{ "CreateUser_Email" | translate }}</mat-label>
+            <input
+                matInput
+                type="email"
+                formControlName="email"
+                [ngClass]="{
+                    'is-invalid': submitted && formCtrls['email'].errors,
+                }"
+                tabindex="3"
+            />
+            @if (formCtrls["email"].hasError("required")) {
+                <mat-error>
+                    {{ "CreateUser_EmailRequired" | translate }}
+                </mat-error>
+            }
+            @if (formCtrls["email"].hasError("email")) {
+                <mat-error>
+                    {{ "CreateUser_EmailPattern" | translate }}
+                </mat-error>
+            }
+        </mat-form-field>
+    </p>
+    <p>
+        <mat-form-field>
+            <mat-label>{{ "CreateUser_Username" | translate }}</mat-label>
+            <input
+                matInput
+                type="text"
+                formControlName="username"
+                [ngClass]="{
+                    'is-invalid': submitted && formCtrls['username'].errors,
+                }"
+                tabindex="4"
+            />
+            @if (formCtrls["username"].hasError("required")) {
+                <mat-error>
+                    {{ "CreateUser_UsernameRequired" | translate }}
+                </mat-error>
+            }
+            @if (formCtrls["username"].hasError("minlength")) {
+                <mat-error>
+                    {{ "CreateUser_UsernamePattern" | translate }}
+                </mat-error>
+            }
+        </mat-form-field>
+    </p>
+    <p>
+        <mat-form-field>
+            <mat-label>{{ "CreateUser_Password" | translate }}</mat-label>
+            <input
+                matInput
+                type="password"
+                formControlName="password"
+                [ngClass]="{
+                    'is-invalid': submitted && formCtrls['password'].errors,
+                }"
+                tabindex="5"
+            />
+            @if (formCtrls["password"].hasError("required")) {
+                <mat-error>
+                    {{ "CreateUser_PasswordRequired" | translate }}
+                </mat-error>
+            }
+            @if (formCtrls["password"].hasError("pattern")) {
+                <mat-error>
+                    {{ "CreateUser_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>
+    <button [disabled]="!createForm.valid" mat-raised-button color="accent">
+        {{ "CreateUser_BtnLogin" | translate }}
+    </button>
+    @if (error) {
+        <div class="alert alert-danger mt-3 mb-0">{{ error }}</div>
+    }
 </form>

Front/skydivelogs-app/src/app/create-user/create-user.component.ts

@@ -1,15 +1,15 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { Router, ActivatedRoute } from "@angular/router";
 import {
-  FormBuilder,
-  FormGroup,
-  ReactiveFormsModule,
-  Validators,
+    FormBuilder,
+    FormGroup,
+    ReactiveFormsModule,
+    Validators,
 } from "@angular/forms";
 import {
-  TranslateModule,
-  TranslatePipe,
-  TranslateService,
+    TranslateModule,
+    TranslatePipe,
+    TranslateService,
 } from "@ngx-translate/core";
 import { CommonModule } from "@angular/common";
 import { MatFormFieldModule } from "@angular/material/form-field";
@@ -22,90 +22,90 @@ import { AuthenticationService } from "../../services/authentication.service";
 import { User } from "../../models/user";
 
 @Component({
-  selector: "app-create-user",
-  templateUrl: "./create-user.component.html",
-  styleUrls: ["./create-user.component.css"],
-  imports: [
-    CommonModule,
-    MatFormFieldModule,
-    ReactiveFormsModule,
-    MatInputModule,
-    MatButtonModule,
-    TranslateModule,
-    TranslatePipe,
-  ],
+    selector: "app-create-user",
+    templateUrl: "./create-user.component.html",
+    styleUrls: ["./create-user.component.css"],
+    imports: [
+        CommonModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatButtonModule,
+        TranslateModule,
+        TranslatePipe,
+    ],
 })
 export class CreateUserComponent implements OnInit {
-  public createForm: FormGroup;
-  public invalidForm = true;
-  public submitted = false;
-  public returnUrl: string;
-  public error: string = "";
+    public createForm: FormGroup;
+    public invalidForm = true;
+    public submitted = false;
+    public returnUrl: string;
+    public error: string = "";
 
-  constructor(
-    private formBuilder: FormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private authenticationService: AuthenticationService,
-    private translateService: TranslateService,
-  ) {
-    // redirect to home if already logged in
-    if (this.authenticationService.currentUserValue) {
-      this.router.navigate(["/"]);
+    constructor(
+        private formBuilder: FormBuilder,
+        private route: ActivatedRoute,
+        private router: Router,
+        private authenticationService: AuthenticationService,
+        private translateService: TranslateService,
+    ) {
+        // redirect to home if already logged in
+        if (this.authenticationService.currentUserValue) {
+            this.router.navigate(["/"]);
+        }
     }
-  }
 
-  ngOnInit() {
-    this.createForm = this.formBuilder.group(
-      {
-        firstname: ["", [Validators.required, Validators.minLength(3)]],
-        lastname: ["", [Validators.required, Validators.minLength(3)]],
-        email: ["", [Validators.required, Validators.email]],
-        username: ["", [Validators.required, Validators.minLength(3)]],
-        password: [
-          "",
-          [
-            Validators.required,
-            Validators.pattern(
-              "^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[@$!%*#?&-_|]).{8,}$",
-            ),
-          ],
-        ],
-      },
-      { updateOn: "blur" },
-    );
+    ngOnInit() {
+        this.createForm = this.formBuilder.group(
+            {
+                firstname: ["", [Validators.required, Validators.minLength(3)]],
+                lastname: ["", [Validators.required, Validators.minLength(3)]],
+                email: ["", [Validators.required, Validators.email]],
+                username: ["", [Validators.required, Validators.minLength(3)]],
+                password: [
+                    "",
+                    [
+                        Validators.required,
+                        Validators.pattern(
+                            "^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[@$!%*#?&-_|]).{8,}$",
+                        ),
+                    ],
+                ],
+            },
+            { updateOn: "blur" },
+        );
 
-    // get return url from route parameters or default to '/'
-    this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/";
-  }
-
-  get formCtrls() {
-    return this.createForm.controls;
-  }
-
-  onCreateSubmit() {
-    this.invalidForm = false;
-    this.submitted = true;
-    if (this.createForm.invalid) {
-      this.invalidForm = true;
-      return;
+        // get return url from route parameters or default to '/'
+        this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/";
+    }
+
+    get formCtrls() {
+        return this.createForm.controls;
+    }
+
+    onCreateSubmit() {
+        this.invalidForm = false;
+        this.submitted = true;
+        if (this.createForm.invalid) {
+            this.invalidForm = true;
+            return;
+        }
+        let createUser = new User();
+        createUser.login = this.formCtrls["username"].value;
+        createUser.password = this.formCtrls["password"].value;
+        createUser.firstName = this.formCtrls["firstname"].value;
+        createUser.lastName = this.formCtrls["lastname"].value;
+        createUser.email = this.formCtrls["email"].value;
+        createUser.language = this.translateService.getCurrentLang();
+        this.authenticationService
+            .create(createUser)
+            .pipe(first())
+            .subscribe({
+                complete: () => this.router.navigate([this.returnUrl]),
+                error: (error) => {
+                    this.error = error.message;
+                    this.invalidForm = false;
+                },
+            });
     }
-    let createUser = new User();
-    createUser.login = this.formCtrls["username"].value;
-    createUser.password = this.formCtrls["password"].value;
-    createUser.firstName = this.formCtrls["firstname"].value;
-    createUser.lastName = this.formCtrls["lastname"].value;
-    createUser.email = this.formCtrls["email"].value;
-    createUser.language = this.translateService.getCurrentLang();
-    this.authenticationService
-      .create(createUser)
-      .pipe(first())
-      .subscribe({
-        complete: () => this.router.navigate([this.returnUrl]),
-        error: (error) => {
-          this.error = error.message;
-          this.invalidForm = false;
-        },
-      });
-  }
 }

Front/skydivelogs-app/src/app/default/default.component.css

@@ -1,11 +1,11 @@
 .content {
-  height: 90vh;
-  display: flex;
-  justify-content: left;
-  flex-direction: column;
-  align-items: initial;
+    height: 90vh;
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    align-items: initial;
 }
 
 p {
-  margin: 0;
+    margin: 0;
 }

Front/skydivelogs-app/src/app/default/default.component.html

@@ -1,62 +1,62 @@
 <div class="content">
-  <p>
-    <a
-      class="nostyle"
-      routerLink="/summary"
-      routerLinkActive="active"
-      skipLocationChange
-    >
-      <mat-icon
-        aria-hidden="false"
-        aria-label="Summary"
-        style="width: 128px; height: 128px; font-size: 128px"
-        svgIcon="summary"
-      ></mat-icon>
-    </a>
-  </p>
-  <p>
-    <a
-      class="nostyle"
-      routerLink="/newjump"
-      routerLinkActive="active"
-      skipLocationChange
-    >
-      <mat-icon
-        aria-hidden="false"
-        aria-label="Add jumps"
-        style="width: 128px; height: 128px; font-size: 128px"
-        svgIcon="add"
-      ></mat-icon>
-    </a>
-  </p>
-  <p>
-    <a
-      class="nostyle"
-      routerLink="/jumps"
-      routerLinkActive="active"
-      skipLocationChange
-    >
-      <mat-icon
-        aria-hidden="false"
-        aria-label="List of jumps"
-        style="width: 128px; height: 128px; font-size: 128px"
-        svgIcon="list"
-      ></mat-icon>
-    </a>
-  </p>
-  <p>
-    <a
-      class="nostyle"
-      routerLink="/tunnelFlights"
-      routerLinkActive="active"
-      skipLocationChange
-    >
-      <mat-icon
-        aria-hidden="false"
-        aria-label="List of tunnel flights"
-        style="width: 128px; height: 128px; font-size: 128px"
-        svgIcon="wind"
-      ></mat-icon>
-    </a>
-  </p>
+    <p>
+        <a
+            class="nostyle"
+            routerLink="/summary"
+            routerLinkActive="active"
+            skipLocationChange
+        >
+            <mat-icon
+                aria-hidden="false"
+                aria-label="Summary"
+                style="width: 128px; height: 128px; font-size: 128px"
+                svgIcon="summary"
+            ></mat-icon>
+        </a>
+    </p>
+    <p>
+        <a
+            class="nostyle"
+            routerLink="/newjump"
+            routerLinkActive="active"
+            skipLocationChange
+        >
+            <mat-icon
+                aria-hidden="false"
+                aria-label="Add jumps"
+                style="width: 128px; height: 128px; font-size: 128px"
+                svgIcon="add"
+            ></mat-icon>
+        </a>
+    </p>
+    <p>
+        <a
+            class="nostyle"
+            routerLink="/jumps"
+            routerLinkActive="active"
+            skipLocationChange
+        >
+            <mat-icon
+                aria-hidden="false"
+                aria-label="List of jumps"
+                style="width: 128px; height: 128px; font-size: 128px"
+                svgIcon="list"
+            ></mat-icon>
+        </a>
+    </p>
+    <p>
+        <a
+            class="nostyle"
+            routerLink="/tunnelFlights"
+            routerLinkActive="active"
+            skipLocationChange
+        >
+            <mat-icon
+                aria-hidden="false"
+                aria-label="List of tunnel flights"
+                style="width: 128px; height: 128px; font-size: 128px"
+                svgIcon="wind"
+            ></mat-icon>
+        </a>
+    </p>
 </div>

Front/skydivelogs-app/src/app/default/default.component.ts

@@ -12,48 +12,48 @@ import { JumpTypeService } from "../../services/jump-type.service";
 import { ServiceComm } from "../../services/service-comm.service";
 
 @Component({
-  selector: "app-default",
-  templateUrl: "./default.component.html",
-  styleUrls: ["./default.component.css"],
-  imports: [TranslateModule, MatIconModule, RouterLink],
+    selector: "app-default",
+    templateUrl: "./default.component.html",
+    styleUrls: ["./default.component.css"],
+    imports: [TranslateModule, MatIconModule, RouterLink],
 })
 export class DefaultComponent implements OnInit {
-  constructor(
-    private serviceComm: ServiceComm,
-    private translateService: TranslateService,
-    private authenticationService: AuthenticationService,
-    private serviceApiAircraft: AircraftService,
-    private serviceApiJumpType: JumpTypeService,
-    private serviceApiDropzone: DropzoneService,
-    private serviceApiGear: GearService,
-  ) {}
+    constructor(
+        private serviceComm: ServiceComm,
+        private translateService: TranslateService,
+        private authenticationService: AuthenticationService,
+        private serviceApiAircraft: AircraftService,
+        private serviceApiJumpType: JumpTypeService,
+        private serviceApiDropzone: DropzoneService,
+        private serviceApiGear: GearService,
+    ) {}
 
-  ngOnInit() {
-    this.authenticationService.alwaysLogin();
+    ngOnInit() {
+        this.authenticationService.alwaysLogin();
 
-    this.putToCacheRefDatas().subscribe(() => {
-      console.log("Push to cache the referentiel datas");
-    });
-    this.updateTitle();
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
+        this.putToCacheRefDatas().subscribe(() => {
+            console.log("Push to cache the referentiel datas");
+        });
         this.updateTitle();
-      }
-    });
-  }
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
+    }
 
-  private putToCacheRefDatas(): Observable<any[]> {
-    var aircraftResp = this.serviceApiAircraft.getListOfAircrafts(false);
-    var jumpTypeResp = this.serviceApiJumpType.getListOfJumpTypes();
-    var dzResp = this.serviceApiDropzone.getListOfDropZones(false);
-    var gearResp = this.serviceApiGear.getListOfGears();
+    private putToCacheRefDatas(): Observable<any[]> {
+        var aircraftResp = this.serviceApiAircraft.getListOfAircrafts(false);
+        var jumpTypeResp = this.serviceApiJumpType.getListOfJumpTypes();
+        var dzResp = this.serviceApiDropzone.getListOfDropZones(false);
+        var gearResp = this.serviceApiGear.getListOfGears();
 
-    return forkJoin([aircraftResp, jumpTypeResp, dzResp, gearResp]);
-  }
+        return forkJoin([aircraftResp, jumpTypeResp, dzResp, gearResp]);
+    }
 
-  private updateTitle() {
-    this.translateService.get("Default_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
+    private updateTitle() {
+        this.translateService.get("Default_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
 }

Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.html

@@ -1,34 +1,36 @@
 <form (ngSubmit)="updateJump()">
-  <p>
-    <span>Gear : {{ jump.gear.name }} ({{ jump.gear.mainCanopy }})</span>
-  </p>
-  <p>
-    <mat-checkbox
-      [(ngModel)]="jump.isSpecial"
-      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>
+        <span>Gear : {{ jump.gear.name }} ({{ jump.gear.mainCanopy }})</span>
+    </p>
+    <p>
+        <mat-checkbox
+            [(ngModel)]="jump.isSpecial"
+            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>
 
-  <br />
-  <button mat-raised-button color="accent" *ngIf="editMode">Update</button>
+    <br />
+    @if (editMode) {
+        <button mat-raised-button color="accent">Update</button>
+    }
 </form>

Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.ts

@@ -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";
@@ -15,45 +15,44 @@ import { JumpService } from "../../services/jump.service";
 import { ServiceComm } from "../../services/service-comm.service";
 
 @Component({
-  selector: "app-jump-infos",
-  templateUrl: "./jump-infos.component.html",
-  styleUrls: ["./jump-infos.component.css"],
-  imports: [
-    TranslateModule,
-    CommonModule,
-    FormsModule,
-    MatCheckboxModule,
-    MatFormFieldModule,
-    ReactiveFormsModule,
-    MatInputModule,
-    MatButtonModule,
-  ],
+    selector: "app-jump-infos",
+    templateUrl: "./jump-infos.component.html",
+    styleUrls: ["./jump-infos.component.css"],
+    imports: [
+        TranslateModule,
+        FormsModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatButtonModule,
+    ],
 })
 export class JumpInfosComponent implements OnInit {
-  public editMode: boolean;
-  public jump: JumpResp;
+    public editMode: boolean;
+    public jump: JumpResp;
 
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: any,
-    private serviceJump: JumpService,
-    private serviceComm: ServiceComm
-  ) {
-    this.jump = new JumpResp(data.jump);
-    this.editMode = data.editMode;
-  }
+    constructor(
+        @Inject(MAT_DIALOG_DATA) public data: any,
+        private serviceJump: JumpService,
+        private serviceComm: ServiceComm,
+    ) {
+        this.jump = new JumpResp(data.jump);
+        this.editMode = data.editMode;
+    }
 
-  ngOnInit(): void {}
+    ngOnInit(): void {}
 
-  public updateJump() {
-    this.serviceJump
-      .updateJump(
-        this.jump.id,
-        this.jump.isSpecial,
-        this.jump.withCutaway,
-        this.jump.notes
-      )
-      .subscribe(() => {
-        this.serviceComm.refreshData(AddAction.Jump);
-      });
-  }
+    public updateJump() {
+        this.serviceJump
+            .updateJump(
+                this.jump.id,
+                this.jump.isSpecial,
+                this.jump.withCutaway,
+                this.jump.notes,
+            )
+            .subscribe(() => {
+                this.serviceComm.refreshData(AddAction.Jump);
+            });
+    }
 }

Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.css

@@ -1,22 +1,22 @@
 table {
-  width: 100%;
+    width: 100%;
 }
 
 .mat-row td {
-  padding: 15px;
+    padding: 15px;
 }
 
 .spanWithBreakWord {
-  display: inline-block;
-  min-width: 200px;
-  word-wrap: break-word;
+    display: inline-block;
+    min-width: 200px;
+    word-wrap: break-word;
 }
 
 .content {
-  min-height: 90vh;
-  display: flex;
-  justify-content: left;
-  flex-direction: column;
-  align-items: initial;
-  padding-top: 25px;
+    min-height: 90vh;
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    align-items: initial;
+    padding-top: 25px;
 }

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

@@ -1,49 +1,54 @@
 <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>
-  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
-
-  <ng-template #loading>
-    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
+    @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>
 </div>

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

@@ -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";
 
@@ -15,71 +15,72 @@ import { AddAction } from "../../models/add-action.enum";
 import { AircraftResp } from "../../models/aircraft";
 
 @Component({
-  selector: "app-list-of-aircrafts",
-  templateUrl: "./list-of-aircrafts.component.html",
-  styleUrls: ["./list-of-aircrafts.component.css"],
-  imports: [
-    TranslateModule,
-    CommonModule,
-    MatPaginatorModule,
-    MatProgressSpinnerModule,
-    MatTableModule,
-    MatButtonModule,
-  ],
+    selector: "app-list-of-aircrafts",
+    templateUrl: "./list-of-aircrafts.component.html",
+    styleUrls: ["./list-of-aircrafts.component.css"],
+    imports: [
+        TranslateModule,
+        MatPaginatorModule,
+        MatProgressSpinnerModule,
+        MatTableModule,
+        MatButtonModule,
+    ],
 })
 export class ListOfAircraftsComponent implements OnInit {
-  public displayedColumns: Array<string> = ["name", "imageData"];
-  public dataSourceTable: MatTableDataSource<AircraftResp>;
-  public resultsLength = 0;
-  public isUserAdmin: boolean;
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+    public displayedColumns: Array<string> = ["name", "imageData"];
+    public dataSourceTable: MatTableDataSource<AircraftResp>;
+    public resultsLength = 0;
+    public isUserAdmin: boolean;
+    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
-  constructor(
-    private serviceApi: AircraftService,
-    private serviceComm: ServiceComm,
-    private authenticationService: AuthenticationService,
-    public dialog: MatDialog,
-    private translateService: TranslateService
-  ) {
-    this.isUserAdmin =
-      this.authenticationService.currentUserValue.roles === "admin";
-  }
+    constructor(
+        private serviceApi: AircraftService,
+        private serviceComm: ServiceComm,
+        private authenticationService: AuthenticationService,
+        public dialog: MatDialog,
+        private translateService: TranslateService,
+    ) {
+        this.isUserAdmin =
+            this.authenticationService.currentUserValue.roles === "admin";
+    }
+
+    ngOnInit() {
+        this.serviceComm.refreshRequest.subscribe((action) => {
+            if (action === AddAction.Aircraft) {
+                this.dialog.closeAll();
+                this.getListOfAircrafts();
+            }
+        });
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
 
-  ngOnInit() {
-    this.serviceComm.refreshRequest.subscribe((action) => {
-      if (action === AddAction.Aircraft) {
-        this.dialog.closeAll();
-        this.getListOfAircrafts();
-      }
-    });
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
         this.updateTitle();
-      }
-    });
+        this.getListOfAircrafts();
+    }
 
-    this.updateTitle();
-    this.getListOfAircrafts();
-  }
+    private getListOfAircrafts() {
+        this.serviceApi.getListOfAircrafts().subscribe((data) => {
+            setTimeout(() => {
+                data.sort((a, b) => a.name.localeCompare(b.name));
+                this.dataSourceTable = new MatTableDataSource<AircraftResp>(
+                    data,
+                );
+                this.dataSourceTable.paginator = this.paginator;
+                this.resultsLength = data.length;
+            }, 500);
+        });
+    }
 
-  private getListOfAircrafts() {
-    this.serviceApi.getListOfAircrafts().subscribe((data) => {
-      setTimeout(() => {
-        data.sort((a, b) => a.name.localeCompare(b.name));
-        this.dataSourceTable = new MatTableDataSource<AircraftResp>(data);
-        this.dataSourceTable.paginator = this.paginator;
-        this.resultsLength = data.length;
-      }, 500);
-    });
-  }
+    openDialogToAdd() {
+        this.dialog.open(NewAircraftComponent);
+    }
 
-  openDialogToAdd() {
-    this.dialog.open(NewAircraftComponent);
-  }
-
-  private updateTitle() {
-    this.translateService.get("ListAircrafts_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
+    private updateTitle() {
+        this.translateService.get("ListAircrafts_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
 }

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.css

@@ -1,22 +1,22 @@
 table {
-  width: 100%;
+    width: 100%;
 }
 
 .mat-row td {
-  padding: 15px;
+    padding: 15px;
 }
 
 .spanWithBreakWord {
-  display: inline-block;
-  min-width: 200px;
-  word-wrap: break-word;
+    display: inline-block;
+    min-width: 200px;
+    word-wrap: break-word;
 }
 
 .content {
-  min-height: 90vh;
-  display: flex;
-  justify-content: left;
-  flex-direction: column;
-  align-items: initial;
-  padding-top: 25px;
-}
+    min-height: 90vh;
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    align-items: initial;
+    padding-top: 25px;
+}

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

@@ -1,118 +1,138 @@
 <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
-            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>
-  <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
-
-  <ng-template #loading>
-    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
+    @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>
+                        @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>
 </div>

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

@@ -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";
@@ -19,112 +19,113 @@ import { AuthenticationService } from "../../services/authentication.service";
 import { NewDropZoneComponent } from "../new-drop-zone/new-drop-zone.component";
 
 @Component({
-  selector: "app-list-of-dzs",
-  templateUrl: "./list-of-dzs.component.html",
-  styleUrls: ["./list-of-dzs.component.css"],
-  imports: [
-    TranslateModule,
-    CommonModule,
-    MatIconModule,
-    MatPaginatorModule,
-    MatProgressSpinnerModule,
-    MatTableModule,
-    MatFormFieldModule,
-    ReactiveFormsModule,
-    MatInputModule,
-    MatButtonModule,
-  ],
+    selector: "app-list-of-dzs",
+    templateUrl: "./list-of-dzs.component.html",
+    styleUrls: ["./list-of-dzs.component.css"],
+    imports: [
+        TranslateModule,
+        MatIconModule,
+        MatPaginatorModule,
+        MatProgressSpinnerModule,
+        MatTableModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatButtonModule,
+    ],
 })
 export class ListOfDzsComponent implements OnInit {
-  public displayedColumns: Array<string> = [
-    "isfavorite",
-    "name",
-    "address",
-    "type",
-  ];
-  public dataSourceTable: MatTableDataSource<DropZoneResp>;
-  public isUserAdmin: boolean;
-  public resultsLength = 0;
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+    public displayedColumns: Array<string> = [
+        "isfavorite",
+        "name",
+        "address",
+        "type",
+    ];
+    public dataSourceTable: MatTableDataSource<DropZoneResp>;
+    public isUserAdmin: boolean;
+    public resultsLength = 0;
+    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
-  constructor(
-    private serviceApi: DropzoneService,
-    private serviceComm: ServiceComm,
-    private authenticationService: AuthenticationService,
-    public dialog: MatDialog,
-    private translateService: TranslateService
-  ) {
-    this.isUserAdmin =
-      this.authenticationService.currentUserValue.roles === "admin";
-  }
+    constructor(
+        private serviceApi: DropzoneService,
+        private serviceComm: ServiceComm,
+        private authenticationService: AuthenticationService,
+        public dialog: MatDialog,
+        private translateService: TranslateService,
+    ) {
+        this.isUserAdmin =
+            this.authenticationService.currentUserValue.roles === "admin";
+    }
+
+    ngOnInit() {
+        this.serviceComm.refreshRequest.subscribe((action) => {
+            if (action === AddAction.Dropzone) {
+                this.dialog.closeAll();
+                this.getListOfDropZones();
+            }
+        });
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
 
-  ngOnInit() {
-    this.serviceComm.refreshRequest.subscribe((action) => {
-      if (action === AddAction.Dropzone) {
-        this.dialog.closeAll();
-        this.getListOfDropZones();
-      }
-    });
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
         this.updateTitle();
-      }
-    });
+        this.getListOfDropZones();
+    }
 
-    this.updateTitle();
-    this.getListOfDropZones();
-  }
+    private getListOfDropZones() {
+        this.serviceApi.getListOfDropZones().subscribe((data) => {
+            setTimeout(() => {
+                data.sort(
+                    (a, b) =>
+                        (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0) ||
+                        a.name.localeCompare(b.name),
+                );
+                this.dataSourceTable = new MatTableDataSource<DropZoneResp>(
+                    data,
+                );
+                this.dataSourceTable.paginator = this.paginator;
+                this.resultsLength = data.length;
+            }, 500);
+        });
+    }
 
-  private getListOfDropZones() {
-    this.serviceApi.getListOfDropZones().subscribe((data) => {
-      setTimeout(() => {
-        data.sort(
-          (a, b) =>
-            (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0) ||
-            a.name.localeCompare(b.name)
-        );
+    public setToFavorite(dropzone: DropZoneResp) {
+        dropzone.isFavorite = true;
+        this.serviceApi.setFavoriteDropZone(dropzone);
+
+        const data = this.dataSourceTable.data;
+        data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0));
         this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data);
         this.dataSourceTable.paginator = this.paginator;
-        this.resultsLength = data.length;
-      }, 500);
-    });
-  }
+    }
 
-  public setToFavorite(dropzone: DropZoneResp) {
-    dropzone.isFavorite = true;
-    this.serviceApi.setFavoriteDropZone(dropzone);
+    public removeToFavorite(dropzone: DropZoneResp) {
+        dropzone.isFavorite = false;
+        this.serviceApi.removeFavoriteDropZone(dropzone);
 
-    const data = this.dataSourceTable.data;
-    data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0));
-    this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data);
-    this.dataSourceTable.paginator = this.paginator;
-  }
+        const data = this.dataSourceTable.data;
+        data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0));
+        this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data);
+        this.dataSourceTable.paginator = this.paginator;
+    }
 
-  public removeToFavorite(dropzone: DropZoneResp) {
-    dropzone.isFavorite = false;
-    this.serviceApi.removeFavoriteDropZone(dropzone);
+    openDialogToAdd() {
+        this.dialog.open(NewDropZoneComponent, {
+            height: "400px",
+            width: "600px",
+        });
+    }
 
-    const data = this.dataSourceTable.data;
-    data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0));
-    this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data);
-    this.dataSourceTable.paginator = this.paginator;
-  }
+    applyFilter(event: Event) {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.dataSourceTable.filter = filterValue.trim().toLowerCase();
+    }
 
-  openDialogToAdd() {
-    this.dialog.open(NewDropZoneComponent, {
-      height: "400px",
-      width: "600px",
-    });
-  }
-
-  applyFilter(event: Event) {
-    const filterValue = (event.target as HTMLInputElement).value;
-    this.dataSourceTable.filter = filterValue.trim().toLowerCase();
-  }
-
-  private updateTitle() {
-    this.translateService.get("ListDz_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
+    private updateTitle() {
+        this.translateService.get("ListDz_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
 }

Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.css

@@ -1,26 +1,26 @@
 table {
-  width: 100%;
+    width: 100%;
 }
 
 .mat-row td {
-  padding: 15px;
+    padding: 15px;
 }
 
 .spanWithBreakWord {
-  display: inline-block;
-  min-width: 200px;
-  word-wrap: break-word;
+    display: inline-block;
+    min-width: 200px;
+    word-wrap: break-word;
 }
 
 .content {
-  min-height: 90vh;
-  display: flex;
-  justify-content: left;
-  flex-direction: column;
-  align-items: initial;
-  padding-top: 25px;
+    min-height: 90vh;
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    align-items: initial;
+    padding-top: 25px;
 }
 
 th.mat-header-cell {
-  text-align: center;
+    text-align: center;
 }

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

@@ -1,68 +1,88 @@
 <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>
-  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
-
-  <ng-template #loading>
-    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
+    @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>
 </div>

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

@@ -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";
 
@@ -14,76 +14,75 @@ import { AddAction } from "../../models/add-action.enum";
 import { NewGearComponent } from "../new-gear/new-gear.component";
 
 @Component({
-  selector: "app-list-of-gears",
-  templateUrl: "./list-of-gears.component.html",
-  styleUrls: ["./list-of-gears.component.css"],
-  imports: [
-    TranslateModule,
-    CommonModule,
-    MatPaginatorModule,
-    MatProgressSpinnerModule,
-    MatTableModule,
-    MatButtonModule,
-  ],
+    selector: "app-list-of-gears",
+    templateUrl: "./list-of-gears.component.html",
+    styleUrls: ["./list-of-gears.component.css"],
+    imports: [
+        TranslateModule,
+        MatPaginatorModule,
+        MatProgressSpinnerModule,
+        MatTableModule,
+        MatButtonModule,
+    ],
 })
 export class ListOfGearsComponent implements OnInit {
-  public displayedColumns: Array<string> = [
-    "name",
-    "manufacturer",
-    "maxSize",
-    "aad",
-    "mainCanopy",
-    "reserveCanopy",
-  ];
-  public dataSourceTable: MatTableDataSource<GearResp>;
-  public resultsLength = 0;
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+    public displayedColumns: Array<string> = [
+        "name",
+        "manufacturer",
+        "maxSize",
+        "aad",
+        "mainCanopy",
+        "reserveCanopy",
+    ];
+    public dataSourceTable: MatTableDataSource<GearResp>;
+    public resultsLength = 0;
+    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
-  constructor(
-    private serviceApi: GearService,
-    private serviceComm: ServiceComm,
-    public dialog: MatDialog,
-    private translateService: TranslateService
-  ) {}
+    constructor(
+        private serviceApi: GearService,
+        private serviceComm: ServiceComm,
+        public dialog: MatDialog,
+        private translateService: TranslateService,
+    ) {}
+
+    ngOnInit() {
+        this.serviceComm.refreshRequest.subscribe((action) => {
+            if (action === AddAction.Gear) {
+                this.dialog.closeAll();
+                this.getListOfGears();
+            }
+        });
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
 
-  ngOnInit() {
-    this.serviceComm.refreshRequest.subscribe((action) => {
-      if (action === AddAction.Gear) {
-        this.dialog.closeAll();
-        this.getListOfGears();
-      }
-    });
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
         this.updateTitle();
-      }
-    });
+        this.getListOfGears();
+    }
 
-    this.updateTitle();
-    this.getListOfGears();
-  }
+    getListOfGears() {
+        this.serviceApi.getListOfGears().subscribe((data) => {
+            setTimeout(() => {
+                data.sort((a, b) => b.id - a.id);
+                this.dataSourceTable = new MatTableDataSource<GearResp>(data);
+                this.dataSourceTable.paginator = this.paginator;
+                this.resultsLength = data.length;
+            }, 500);
+        });
+    }
 
-  getListOfGears() {
-    this.serviceApi.getListOfGears().subscribe((data) => {
-      setTimeout(() => {
-        data.sort((a, b) => b.id - a.id);
-        this.dataSourceTable = new MatTableDataSource<GearResp>(data);
-        this.dataSourceTable.paginator = this.paginator;
-        this.resultsLength = data.length;
-      }, 500);
-    });
-  }
+    openDialogToAdd() {
+        this.dialog.open(NewGearComponent, {
+            height: "400px",
+            width: "600px",
+        });
+    }
 
-  openDialogToAdd() {
-    this.dialog.open(NewGearComponent, {
-      height: "400px",
-      width: "600px",
-    });
-  }
-
-  private updateTitle() {
-    this.translateService.get("ListGears_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
+    private updateTitle() {
+        this.translateService.get("ListGears_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
 }

Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.css

@@ -1,45 +1,45 @@
 .imgmodal {
-  display: none;
-  position: fixed;
-  z-index: 1000;
-  padding-top: 10px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: #000000;
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    padding-top: 10px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: #000000;
 }
 
 .imgbox {
-  display: grid;
-  height: 100%;
+    display: grid;
+    height: 100%;
 }
 
 .center-fit {
-  max-width: 100%;
-  max-height: 100vh;
-  margin: auto;
+    max-width: 100%;
+    max-height: 100vh;
+    margin: auto;
 }
 
 .close {
-  color: white;
-  position: absolute;
-  top: 10px;
-  right: 25px;
-  font-size: 35px;
-  font-weight: bold;
+    color: white;
+    position: absolute;
+    top: 10px;
+    right: 25px;
+    font-size: 35px;
+    font-weight: bold;
 }
 
 .rotate {
-  color: white;
-  position: absolute;
-  top: 10px;
-  right: 65px;
-  font-size: 35px;
-  font-weight: bold;
+    color: white;
+    position: absolute;
+    top: 10px;
+    right: 65px;
+    font-size: 35px;
+    font-weight: bold;
 }
 
 .cursor {
-  cursor: pointer;
-}
+    cursor: pointer;
+}

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

@@ -1,87 +1,103 @@
 <div>
-  <form
-    [formGroup]="imgForm"
-    (ngSubmit)="onSubmit(imgForm.value)"
-    autocomplete="off"
-    style="padding: 10px"
-  >
-    <p>
-      <input
-        type="file"
-        #fileUpload
-        id="fileUpload"
-        name="fileUpload"
-        accept="image/*"
-        formControlName="image"
-        (change)="onFileChanged($event)"
-      />
-    </p>
-    <p>
-      <mat-form-field>
-        <mat-label>Comment about the image</mat-label>
-        <input matInput type="text" formControlName="comment" />
-      </mat-form-field>
-    </p>
+    <form
+        [formGroup]="imgForm"
+        (ngSubmit)="onSubmit(imgForm.value)"
+        autocomplete="off"
+        style="padding: 10px"
+    >
+        <p>
+            <input
+                type="file"
+                #fileUpload
+                id="fileUpload"
+                name="fileUpload"
+                accept="image/*"
+                formControlName="image"
+                (change)="onFileChanged($event)"
+            />
+        </p>
+        <p>
+            <mat-form-field>
+                <mat-label>Comment about the image</mat-label>
+                <input matInput type="text" formControlName="comment" />
+            </mat-form-field>
+        </p>
 
-    <button mat-icon-button color="warn" type="submit">
-      <mat-icon svgIcon="file_upload"></mat-icon>
-      Upload image
-    </button>
-    <label>{{ imageError }}</label>
-  </form>
+        <button mat-icon-button color="warn" type="submit">
+            <mat-icon svgIcon="file_upload"></mat-icon>
+            Upload image
+        </button>
+        <label>{{ imageError }}</label>
+    </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' }"
+    class="imgmodal"
+    [ngStyle]="{ display: showPopin === true ? 'block' : 'none' }"
 >
-  <span class="close cursor" (click)="closeModal()">&times;</span>
-  <mat-icon
-    aria-hidden="false"
-    aria-label="Rotation"
-    (click)="rotate()"
-    class="rotate cursor"
-    svgIcon="rotate"
-  ></mat-icon>
-  <div class="imgbox">
-    <img
-      class="center-fit cursor"
-      src="{{ popinImage }}"
-      (click)="closeModal()"
-      [@rotatedState]="stateRotation"
-    />
-  </div>
+    <span class="close cursor" (click)="closeModal()">&times;</span>
+    <mat-icon
+        aria-hidden="false"
+        aria-label="Rotation"
+        (click)="rotate()"
+        class="rotate cursor"
+        svgIcon="rotate"
+    ></mat-icon>
+    <div class="imgbox">
+        <img
+            class="center-fit cursor"
+            src="{{ popinImage }}"
+            (click)="closeModal()"
+            [@rotatedState]="stateRotation"
+        />
+    </div>
 </div>

Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import {
-  FormGroup,
-  FormControl,
-  Validators,
-  ReactiveFormsModule,
+    FormGroup,
+    FormControl,
+    Validators,
+    ReactiveFormsModule,
 } from "@angular/forms";
 import { MatTableDataSource, MatTableModule } from "@angular/material/table";
 import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
@@ -21,139 +21,144 @@ import { ImageResp } from "../../models/image";
 import { AddAction } from "../../models/add-action.enum";
 
 @Component({
-  selector: "app-list-of-images",
-  templateUrl: "./list-of-images.component.html",
-  styleUrls: ["./list-of-images.component.css"],
-  animations: [
-    trigger("rotatedState", [
-      state("default", style({ transform: "rotate(0)" })),
-      state("rot90", style({ transform: "rotate(-90deg)" })),
-      state("rot180", style({ transform: "rotate(-180deg)" })),
-      state("rot270", style({ transform: "rotate(-270deg)" })),
-    ]),
-  ],
-  imports: [
-    TranslateModule,
-    CommonModule,
-    MatIconModule,
-    MatPaginatorModule,
-    MatFormFieldModule,
-    ReactiveFormsModule,
-    MatTableModule,
-    MatButtonModule,
-    MatInputModule,
-  ],
+    selector: "app-list-of-images",
+    templateUrl: "./list-of-images.component.html",
+    styleUrls: ["./list-of-images.component.css"],
+    animations: [
+        trigger("rotatedState", [
+            state("default", style({ transform: "rotate(0)" })),
+            state("rot90", style({ transform: "rotate(-90deg)" })),
+            state("rot180", style({ transform: "rotate(-180deg)" })),
+            state("rot270", style({ transform: "rotate(-270deg)" })),
+        ]),
+    ],
+    imports: [
+        TranslateModule,
+        CommonModule,
+        MatIconModule,
+        MatPaginatorModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatTableModule,
+        MatButtonModule,
+        MatInputModule,
+    ],
 })
 export class ListOfImagesComponent implements OnInit {
-  public displayedColumns: Array<string> = ["comment", "data"];
-  public imgForm: FormGroup;
-  public imageError: string;
-  private selectedFile: string;
-  public popinImage: string;
-  public showPopin: boolean;
-  public dataSourceTable: MatTableDataSource<ImageResp>;
-  public resultsLength = 0;
-  public stateRotation: string = "default";
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+    public displayedColumns: Array<string> = ["comment", "data"];
+    public imgForm: FormGroup;
+    public imageError: string;
+    private selectedFile: string;
+    public popinImage: string;
+    public showPopin: boolean;
+    public dataSourceTable: MatTableDataSource<ImageResp>;
+    public resultsLength = 0;
+    public stateRotation: string = "default";
+    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
-  constructor(
-    private serviceApi: ImageService,
-    private serviceComm: ServiceComm,
-  ) {}
+    constructor(
+        private serviceApi: ImageService,
+        private serviceComm: ServiceComm,
+    ) {}
 
-  ngOnInit(): void {
-    this.serviceComm.refreshRequest.subscribe((action) => {
-      if (action === AddAction.Gear) {
+    ngOnInit(): void {
+        this.serviceComm.refreshRequest.subscribe((action) => {
+            if (action === AddAction.Gear) {
+                this.getListOfImages();
+            }
+        });
         this.getListOfImages();
-      }
-    });
-    this.getListOfImages();
 
-    this.imgForm = new FormGroup({
-      comment: new FormControl("", Validators.required),
-      image: new FormControl("", Validators.required),
-    });
-  }
-
-  private getListOfImages() {
-    this.serviceApi.getListOfImages().subscribe((data) => {
-      setTimeout(() => {
-        this.dataSourceTable = new MatTableDataSource<ImageResp>(data);
-        this.dataSourceTable.paginator = this.paginator;
-        this.resultsLength = data.length;
-      }, 500);
-    });
-  }
-
-  public onFileChanged(fileInput: any) {
-    const file = fileInput.dataTransfer
-      ? fileInput.dataTransfer.files[0]
-      : fileInput.target.files[0];
-    const allowed_types = ["image/png", "image/jpeg"];
-    const max_size = 20971520;
-
-    if (!allowed_types.includes(file.type)) {
-      this.imageError = "Only Images are allowed ( JPG | PNG )";
-    } else if (file.size > max_size) {
-      this.imageError = "Maximum size allowed is " + max_size / 1000 + "Mb";
-    } else {
-      const reader = new FileReader();
-      reader.onload = this.checkAndExtractDataToBase64.bind(this);
-      reader.readAsDataURL(fileInput.target.files[0]);
-    }
-  }
-
-  private checkAndExtractDataToBase64(e: any) {
-    const max_height = 15200;
-    const max_width = 25600;
-
-    const image = new Image();
-    image.src = e.target.result;
-    image.onload = (rs) => {
-      const img_height = rs.currentTarget["height"];
-      const img_width = rs.currentTarget["width"];
-
-      if (img_height > max_height && img_width > max_width) {
-        this.imageError =
-          "Maximum dimentions allowed " + max_height + "*" + max_width + "px";
-      } else {
-        const imgBase64Path = e.target.result;
-        this.selectedFile = imgBase64Path;
-        this.imageError = "OK";
-      }
-    };
-  }
-
-  onSubmit(formData) {
-    if (formData.invalid) {
-      return;
+        this.imgForm = new FormGroup({
+            comment: new FormControl("", Validators.required),
+            image: new FormControl("", Validators.required),
+        });
     }
 
-    this.serviceApi
-      .addImage(formData.comment, this.selectedFile)
-      .subscribe(() => {
-        this.getListOfImages();
-      });
-  }
-
-  openModal(image: ImageResp) {
-    this.popinImage = image.data;
-    this.showPopin = true;
-  }
-
-  closeModal() {
-    this.showPopin = false;
-  }
-
-  rotate() {
-    if (this.stateRotation === "default") {
-      this.stateRotation = "rot90";
-    } else if (this.stateRotation === "rot90") {
-      this.stateRotation = "rot180";
-    } else if (this.stateRotation === "rot180") {
-      this.stateRotation = "rot270";
-    } else {
-      this.stateRotation = "default";
+    private getListOfImages() {
+        this.serviceApi.getListOfImages().subscribe((data) => {
+            setTimeout(() => {
+                this.dataSourceTable = new MatTableDataSource<ImageResp>(data);
+                this.dataSourceTable.paginator = this.paginator;
+                this.resultsLength = data.length;
+            }, 500);
+        });
+    }
+
+    public onFileChanged(fileInput: any) {
+        const file = fileInput.dataTransfer
+            ? fileInput.dataTransfer.files[0]
+            : fileInput.target.files[0];
+        const allowed_types = ["image/png", "image/jpeg"];
+        const max_size = 20971520;
+
+        if (!allowed_types.includes(file.type)) {
+            this.imageError = "Only Images are allowed ( JPG | PNG )";
+        } else if (file.size > max_size) {
+            this.imageError =
+                "Maximum size allowed is " + max_size / 1000 + "Mb";
+        } else {
+            const reader = new FileReader();
+            reader.onload = this.checkAndExtractDataToBase64.bind(this);
+            reader.readAsDataURL(fileInput.target.files[0]);
+        }
+    }
+
+    private checkAndExtractDataToBase64(e: any) {
+        const max_height = 15200;
+        const max_width = 25600;
+
+        const image = new Image();
+        image.src = e.target.result;
+        image.onload = (rs) => {
+            const img_height = rs.currentTarget["height"];
+            const img_width = rs.currentTarget["width"];
+
+            if (img_height > max_height && img_width > max_width) {
+                this.imageError =
+                    "Maximum dimentions allowed " +
+                    max_height +
+                    "*" +
+                    max_width +
+                    "px";
+            } else {
+                const imgBase64Path = e.target.result;
+                this.selectedFile = imgBase64Path;
+                this.imageError = "OK";
+            }
+        };
+    }
+
+    onSubmit(formData) {
+        if (formData.invalid) {
+            return;
+        }
+
+        this.serviceApi
+            .addImage(formData.comment, this.selectedFile)
+            .subscribe(() => {
+                this.getListOfImages();
+            });
+    }
+
+    openModal(image: ImageResp) {
+        this.popinImage = image.data;
+        this.showPopin = true;
+    }
+
+    closeModal() {
+        this.showPopin = false;
+    }
+
+    rotate() {
+        if (this.stateRotation === "default") {
+            this.stateRotation = "rot90";
+        } else if (this.stateRotation === "rot90") {
+            this.stateRotation = "rot180";
+        } else if (this.stateRotation === "rot180") {
+            this.stateRotation = "rot270";
+        } else {
+            this.stateRotation = "default";
+        }
     }
-  }
 }

Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.css

@@ -1,22 +1,22 @@
 table {
-  width: 100%;
+    width: 100%;
 }
 
 .mat-row td {
-  padding: 15px;
+    padding: 15px;
 }
 
 .spanWithBreakWord {
-  display: inline-block;
-  min-width: 200px;
-  word-wrap: break-word;
+    display: inline-block;
+    min-width: 200px;
+    word-wrap: break-word;
 }
 
 .content {
-  min-height: 90vh;
-  display: flex;
-  justify-content: left;
-  flex-direction: column;
-  align-items: initial;
-  padding-top: 25px;
+    min-height: 90vh;
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    align-items: initial;
+    padding-top: 25px;
 }

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

@@ -1,36 +1,42 @@
 <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>
-  <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
-
-  <ng-template #loading>
-    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
+    @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>
 </div>

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

@@ -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";
 
@@ -15,71 +15,72 @@ import { AuthenticationService } from "../../services/authentication.service";
 import { NewJumpTypeComponent } from "../new-jump-type/new-jump-type.component";
 
 @Component({
-  selector: "app-list-of-jump-types",
-  templateUrl: "./list-of-jump-types.component.html",
-  styleUrls: ["./list-of-jump-types.component.css"],
-  imports: [
-    TranslateModule,
-    CommonModule,
-    MatPaginatorModule,
-    MatProgressSpinnerModule,
-    MatTableModule,
-    MatButtonModule,
-  ],
+    selector: "app-list-of-jump-types",
+    templateUrl: "./list-of-jump-types.component.html",
+    styleUrls: ["./list-of-jump-types.component.css"],
+    imports: [
+        TranslateModule,
+        MatPaginatorModule,
+        MatProgressSpinnerModule,
+        MatTableModule,
+        MatButtonModule,
+    ],
 })
 export class ListOfJumpTypesComponent implements OnInit {
-  public displayedColumns: Array<string> = ["name"];
-  public dataSourceTable: MatTableDataSource<JumpTypeResp>;
-  public isUserAdmin: boolean;
-  public resultsLength = 0;
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+    public displayedColumns: Array<string> = ["name"];
+    public dataSourceTable: MatTableDataSource<JumpTypeResp>;
+    public isUserAdmin: boolean;
+    public resultsLength = 0;
+    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
-  constructor(
-    private serviceApi: JumpTypeService,
-    private serviceComm: ServiceComm,
-    private authenticationService: AuthenticationService,
-    public dialog: MatDialog,
-    private translateService: TranslateService
-  ) {
-    this.isUserAdmin =
-      this.authenticationService.currentUserValue.roles === "admin";
-  }
+    constructor(
+        private serviceApi: JumpTypeService,
+        private serviceComm: ServiceComm,
+        private authenticationService: AuthenticationService,
+        public dialog: MatDialog,
+        private translateService: TranslateService,
+    ) {
+        this.isUserAdmin =
+            this.authenticationService.currentUserValue.roles === "admin";
+    }
+
+    ngOnInit() {
+        this.serviceComm.refreshRequest.subscribe((action) => {
+            if (action === AddAction.JumpType) {
+                this.dialog.closeAll();
+                this.getListOfJumpTypes();
+            }
+        });
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
 
-  ngOnInit() {
-    this.serviceComm.refreshRequest.subscribe((action) => {
-      if (action === AddAction.JumpType) {
-        this.dialog.closeAll();
-        this.getListOfJumpTypes();
-      }
-    });
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
         this.updateTitle();
-      }
-    });
+        this.getListOfJumpTypes();
+    }
 
-    this.updateTitle();
-    this.getListOfJumpTypes();
-  }
+    getListOfJumpTypes() {
+        this.serviceApi.getListOfJumpTypes().subscribe((data) => {
+            setTimeout(() => {
+                data.sort((a, b) => a.name.localeCompare(b.name));
+                this.dataSourceTable = new MatTableDataSource<JumpTypeResp>(
+                    data,
+                );
+                this.dataSourceTable.paginator = this.paginator;
+                this.resultsLength = data.length;
+            }, 500);
+        });
+    }
 
-  getListOfJumpTypes() {
-    this.serviceApi.getListOfJumpTypes().subscribe((data) => {
-      setTimeout(() => {
-        data.sort((a, b) => a.name.localeCompare(b.name));
-        this.dataSourceTable = new MatTableDataSource<JumpTypeResp>(data);
-        this.dataSourceTable.paginator = this.paginator;
-        this.resultsLength = data.length;
-      }, 500);
-    });
-  }
+    openDialogToAdd() {
+        this.dialog.open(NewJumpTypeComponent);
+    }
 
-  openDialogToAdd() {
-    this.dialog.open(NewJumpTypeComponent);
-  }
-
-  private updateTitle() {
-    this.translateService.get("ListJumpTypes_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
+    private updateTitle() {
+        this.translateService.get("ListJumpTypes_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
 }

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css

@@ -1,32 +1,32 @@
 table {
-  width: 100%;
+    width: 100%;
 }
 
 .mat-row td {
-  padding: 15px;
+    padding: 15px;
 }
 
 .spanWithBreakWord {
-  display: inline-block;
-  min-width: 200px;
-  word-wrap: break-word;
+    display: inline-block;
+    min-width: 200px;
+    word-wrap: break-word;
 }
 
 .smallSpanWithBreakWord {
-  display: inline-block;
-  min-width: 50px;
-  word-wrap: break-word;
+    display: inline-block;
+    min-width: 50px;
+    word-wrap: break-word;
 }
 
 .content {
-  min-height: 90vh;
-  display: flex;
-  justify-content: left;
-  flex-direction: column;
-  align-items: initial;
-  padding-top: 25px;
+    min-height: 90vh;
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    align-items: initial;
+    padding-top: 25px;
 }
 
 th.mat-header-cell {
-  text-align: center;
-}
+    text-align: center;
+}

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

@@ -1,165 +1,176 @@
 <div class="content">
-  <div>
-    <button
-      mat-raised-button
-      color="accent"
-      [routerLink]="['/newjump']"
-      [routerLinkActive]="['active']"
-      skipLocationChange
-    >
-      {{ "ListJump_Add" | translate }}
-    </button>
-  </div>
-
-  <mat-progress-bar
-    [mode]="'indeterminate'"
-    *ngIf="isLoading"
-  ></mat-progress-bar>
-
-  <div>
-    <table mat-table [dataSource]="dataSourceTable">
-      <ng-container matColumnDef="infos">
-        <th
-          mat-header-cell
-          *matHeaderCellDef
-          style="min-width: 80px; text-wrap: nowrap"
-        ></th>
-        <td
-          mat-cell
-          *matCellDef="let element"
-          style="text-align: left; text-wrap: nowrap"
+    <div>
+        <button
+            mat-raised-button
+            color="accent"
+            [routerLink]="['/newjump']"
+            [routerLinkActive]="['active']"
+            skipLocationChange
         >
-          <mat-icon
-            aria-hidden="false"
-            aria-label="Additional informations of the jump"
-            style="cursor: pointer"
-            (click)="openDialog(element, false)"
-            svgIcon="info"
-          ></mat-icon>
-          <mat-icon
-            aria-hidden="false"
-            aria-label="Notes"
-            [style.visibility]="
-              element.notes != undefined ? 'visible' : 'hidden'
-            "
-            svgIcon="note"
-          ></mat-icon>
-          <mat-icon
-            aria-hidden="false"
-            aria-label="Special jump"
-            [style.visibility]="element.isSpecial ? 'visible' : 'hidden'"
-            svgIcon="celebration"
-          ></mat-icon>
-        </td>
-      </ng-container>
+            {{ "ListJump_Add" | translate }}
+        </button>
+    </div>
 
-      <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef style="min-width: 70px">
-          {{ "ListJump_Header_Num" | translate }}
-        </th>
-        <td mat-cell *matCellDef="let element; let i = index">
-          {{
-            paginator.length - (paginator.pageIndex * paginator.pageSize + i)
-          }}
-        </td>
-      </ng-container>
+    @if (isLoading) {
+        <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
+    }
 
-      <ng-container matColumnDef="jumpDate">
-        <th mat-header-cell *matHeaderCellDef>
-          {{ "ListJump_Header_Date" | translate }}
-        </th>
-        <td mat-cell *matCellDef="let element">
-          <span
-            class="smallSpanWithBreakWord"
-            [innerHTML]="element.jumpDate | date: 'yyyy-MM-dd'"
-          ></span>
-        </td>
-      </ng-container>
+    <div>
+        <table mat-table [dataSource]="dataSourceTable">
+            <ng-container matColumnDef="infos">
+                <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    style="min-width: 80px; text-wrap: nowrap"
+                ></th>
+                <td
+                    mat-cell
+                    *matCellDef="let element"
+                    style="text-align: left; text-wrap: nowrap"
+                >
+                    <mat-icon
+                        aria-hidden="false"
+                        aria-label="Additional informations of the jump"
+                        style="cursor: pointer"
+                        (click)="openDialog(element, false)"
+                        svgIcon="info"
+                    ></mat-icon>
+                    <mat-icon
+                        aria-hidden="false"
+                        aria-label="Notes"
+                        [style.visibility]="
+                            element.notes != undefined ? 'visible' : 'hidden'
+                        "
+                        svgIcon="note"
+                    ></mat-icon>
+                    <mat-icon
+                        aria-hidden="false"
+                        aria-label="Special jump"
+                        [style.visibility]="
+                            element.isSpecial ? 'visible' : 'hidden'
+                        "
+                        svgIcon="celebration"
+                    ></mat-icon>
+                </td>
+            </ng-container>
 
-      <ng-container matColumnDef="jumpType">
-        <th
-          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">
-          <span
-            class="smallSpanWithBreakWord"
-            [innerHTML]="element.jumpType.name"
-          ></span>
-        </td>
-      </ng-container>
+            <ng-container matColumnDef="id">
+                <th mat-header-cell *matHeaderCellDef style="min-width: 70px">
+                    {{ "ListJump_Header_Num" | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element; let i = index">
+                    {{
+                        paginator.length -
+                            (paginator.pageIndex * paginator.pageSize + i)
+                    }}
+                </td>
+            </ng-container>
 
-      <ng-container matColumnDef="aircraft">
-        <th mat-header-cell *matHeaderCellDef style="min-width: 110px">
-          {{ "ListJump_Header_Aircraft" | translate }}
-        </th>
-        <td mat-cell *matCellDef="let element">
-          <span
-            class="smallSpanWithBreakWord"
-            [innerHTML]="element.aircraft.name"
-          ></span>
-        </td>
-      </ng-container>
+            <ng-container matColumnDef="jumpDate">
+                <th mat-header-cell *matHeaderCellDef>
+                    {{ "ListJump_Header_Date" | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    <span
+                        class="smallSpanWithBreakWord"
+                        [innerHTML]="element.jumpDate | date: 'yyyy-MM-dd'"
+                    ></span>
+                </td>
+            </ng-container>
 
-      <ng-container matColumnDef="dropZone">
-        <th mat-header-cell *matHeaderCellDef>
-          {{ "ListJump_Header_Dz" | translate }}
-        </th>
-        <td mat-cell *matCellDef="let element">
-          <span
-            class="spanWithBreakWord"
-            [innerHTML]="element.dropZone.name"
-          ></span>
-        </td>
-      </ng-container>
+            <ng-container matColumnDef="jumpType">
+                <th
+                    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"
+                >
+                    <span
+                        class="smallSpanWithBreakWord"
+                        [innerHTML]="element.jumpType.name"
+                    ></span>
+                </td>
+            </ng-container>
 
-      <ng-container matColumnDef="gear">
-        <th mat-header-cell *matHeaderCellDef>
-          {{ "ListJump_Header_Id" | translate }}
-        </th>
-        <td mat-cell *matCellDef="let element">{{ element.gear.name }}</td>
-      </ng-container>
+            <ng-container matColumnDef="aircraft">
+                <th mat-header-cell *matHeaderCellDef style="min-width: 110px">
+                    {{ "ListJump_Header_Aircraft" | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    <span
+                        class="smallSpanWithBreakWord"
+                        [innerHTML]="element.aircraft.name"
+                    ></span>
+                </td>
+            </ng-container>
 
-      <ng-container matColumnDef="actions">
-        <th
-          mat-header-cell
-          *matHeaderCellDef
-          style="min-width: 80px; text-wrap: nowrap"
-        ></th>
-        <td
-          mat-cell
-          *matCellDef="let element"
-          style="text-align: left; text-wrap: nowrap"
-        >
-          <mat-icon
-            aria-hidden="false"
-            aria-label="Delete this jump"
-            style="cursor: pointer"
-            (click)="delete(element)"
-            svgIcon="delete"
-          ></mat-icon>
-          <mat-icon
-            aria-hidden="false"
-            aria-label="Update some informations of the jump"
-            style="cursor: pointer; margin-left: 10px"
-            (click)="openDialog(element, true)"
-            svgIcon="edit"
-          ></mat-icon>
-        </td>
-      </ng-container>
+            <ng-container matColumnDef="dropZone">
+                <th mat-header-cell *matHeaderCellDef>
+                    {{ "ListJump_Header_Dz" | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    <span
+                        class="spanWithBreakWord"
+                        [innerHTML]="element.dropZone.name"
+                    ></span>
+                </td>
+            </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-    </table>
-  </div>
+            <ng-container matColumnDef="gear">
+                <th mat-header-cell *matHeaderCellDef>
+                    {{ "ListJump_Header_Id" | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    {{ element.gear.name }}
+                </td>
+            </ng-container>
 
-  <mat-paginator
-    #paginator
-    [pageSize]="20"
-    (page)="pageChanged($event)"
-    showFirstLastButtons
-  ></mat-paginator>
+            <ng-container matColumnDef="actions">
+                <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    style="min-width: 80px; text-wrap: nowrap"
+                ></th>
+                <td
+                    mat-cell
+                    *matCellDef="let element"
+                    style="text-align: left; text-wrap: nowrap"
+                >
+                    <mat-icon
+                        aria-hidden="false"
+                        aria-label="Delete this jump"
+                        style="cursor: pointer"
+                        (click)="delete(element)"
+                        svgIcon="delete"
+                    ></mat-icon>
+                    <mat-icon
+                        aria-hidden="false"
+                        aria-label="Update some informations of the jump"
+                        style="cursor: pointer; margin-left: 10px"
+                        (click)="openDialog(element, true)"
+                        svgIcon="edit"
+                    ></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>
+
+    <mat-paginator
+        #paginator
+        [pageSize]="20"
+        (page)="pageChanged($event)"
+        showFirstLastButtons
+    ></mat-paginator>
 </div>

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { RouterLink, RouterModule } from "@angular/router";
 import {
-  MatPaginator,
-  MatPaginatorModule,
-  PageEvent,
+    MatPaginator,
+    MatPaginatorModule,
+    PageEvent,
 } from "@angular/material/paginator";
 import { MatTableDataSource, MatTableModule } from "@angular/material/table";
 import { MatDialog } from "@angular/material/dialog";
@@ -25,108 +25,108 @@ import { JumpInfosComponent } from "../jump-infos/jump-infos.component";
 import { StatsService } from "../../services/stats.service";
 
 @Component({
-  selector: "app-list-of-jumps",
-  templateUrl: "./list-of-jumps.component.html",
-  styleUrls: ["./list-of-jumps.component.css"],
-  imports: [
-    TranslateModule,
-    CommonModule,
-    RouterLink,
-    RouterModule,
-    MatIconModule,
-    MatPaginatorModule,
-    MatProgressSpinnerModule,
-    MatProgressBarModule,
-    MatTableModule,
-    MatFormFieldModule,
-    ReactiveFormsModule,
-    MatInputModule,
-    MatButtonModule,
-  ],
+    selector: "app-list-of-jumps",
+    templateUrl: "./list-of-jumps.component.html",
+    styleUrls: ["./list-of-jumps.component.css"],
+    imports: [
+        TranslateModule,
+        CommonModule,
+        RouterLink,
+        RouterModule,
+        MatIconModule,
+        MatPaginatorModule,
+        MatProgressSpinnerModule,
+        MatProgressBarModule,
+        MatTableModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatButtonModule,
+    ],
 })
 export class ListOfJumpsComponent implements OnInit {
-  public displayedColumns: Array<string> = [
-    "infos",
-    "id",
-    "jumpDate",
-    "jumpType",
-    "aircraft",
-    "dropZone",
-    "actions",
-  ];
-  public dataSourceTable: MatTableDataSource<Jump> = new MatTableDataSource();
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  public isLoading: boolean = false;
+    public displayedColumns: Array<string> = [
+        "infos",
+        "id",
+        "jumpDate",
+        "jumpType",
+        "aircraft",
+        "dropZone",
+        "actions",
+    ];
+    public dataSourceTable: MatTableDataSource<Jump> = new MatTableDataSource();
+    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+    public isLoading: boolean = false;
 
-  constructor(
-    private serviceApi: JumpService,
-    private serviceComm: ServiceComm,
-    public dialog: MatDialog,
-    private translateService: TranslateService,
-    private statsService: StatsService
-  ) {}
+    constructor(
+        private serviceApi: JumpService,
+        private serviceComm: ServiceComm,
+        public dialog: MatDialog,
+        private translateService: TranslateService,
+        private statsService: StatsService,
+    ) {}
 
-  ngAferViewInit(): void {
-    this.dataSourceTable.paginator = this.paginator;
-  }
+    ngAferViewInit(): void {
+        this.dataSourceTable.paginator = this.paginator;
+    }
+
+    ngOnInit() {
+        this.serviceComm.refreshRequest.subscribe((action) => {
+            if (action === AddAction.Jump) {
+                this.dialog.closeAll();
+                this.getListOfJumps();
+            }
+        });
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
 
-  ngOnInit() {
-    this.serviceComm.refreshRequest.subscribe((action) => {
-      if (action === AddAction.Jump) {
-        this.dialog.closeAll();
-        this.getListOfJumps();
-      }
-    });
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
         this.updateTitle();
-      }
-    });
+        this.getListOfJumps();
+    }
 
-    this.updateTitle();
-    this.getListOfJumps();
-  }
+    getListOfJumps(pageSize: number = 20, pageIndex: number = 0) {
+        this.isLoading = true;
 
-  getListOfJumps(pageSize: number = 20, pageIndex: number = 0) {
-    this.isLoading = true;
+        this.serviceApi
+            .getJumps(pageIndex * pageSize, pageIndex * pageSize + pageSize)
+            .subscribe((data) => {
+                this.dataSourceTable.data = data.rows;
+                setTimeout(() => {
+                    this.paginator.length = data.count;
+                    this.paginator.pageIndex = pageIndex;
+                    this.isLoading = false;
+                }, 500);
+            });
+    }
 
-    this.serviceApi
-      .getJumps(pageIndex * pageSize, pageIndex * pageSize + pageSize)
-      .subscribe((data) => {
-        this.dataSourceTable.data = data.rows;
-        setTimeout(() => {
-          this.paginator.length = data.count;
-          this.paginator.pageIndex = pageIndex;
-          this.isLoading = false;
-        }, 500);
-      });
-  }
+    openDialog(item: Jump, editMode: boolean) {
+        this.dialog.open(JumpInfosComponent, {
+            data: { jump: item, editMode: editMode },
+            maxHeight: "400px",
+            minWidth: "350px",
+        });
+    }
 
-  openDialog(item: Jump, editMode: boolean) {
-    this.dialog.open(JumpInfosComponent, {
-      data: { jump: item, editMode: editMode },
-      maxHeight: "400px",
-      minWidth: "350px",
-    });
-  }
+    delete(item: Jump) {
+        let data: Array<Jump> = this.dataSourceTable.data;
+        data = data.filter((d) => d.id !== item.id);
 
-  delete(item: Jump) {
-    let data: Array<Jump> = this.dataSourceTable.data;
-    data = data.filter((d) => d.id !== item.id);
+        this.dataSourceTable.data = data;
 
-    this.dataSourceTable.data = data;
+        this.serviceApi.deleteJump(item);
+        this.statsService.resetStats();
+    }
 
-    this.serviceApi.deleteJump(item);
-    this.statsService.resetStats();
-  }
+    pageChanged(event: PageEvent) {
+        this.getListOfJumps(event.pageSize, event.pageIndex);
+    }
 
-  pageChanged(event: PageEvent) {
-    this.getListOfJumps(event.pageSize, event.pageIndex);
-  }
-
-  private updateTitle() {
-    this.translateService.get("ListJumps_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
+    private updateTitle() {
+        this.translateService.get("ListJumps_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
 }

Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.css

@@ -1,24 +1,24 @@
 .formListTunnelFlight {
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 
-  min-width: 150px;
-  max-width: 500px;
-  width: 100%;
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
 }
 
 .content {
-  min-height: 90vh;
-  display: flex;
-  justify-content: left;
-  flex-direction: column;
-  align-items: initial;
-  padding-top: 25px;
+    min-height: 90vh;
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    align-items: initial;
+    padding-top: 25px;
 }
 
 .chart-container {
-  position: relative;
-  margin: auto;
-  height: 80vh;
-  width: 80vw;
+    position: relative;
+    margin: auto;
+    height: 80vh;
+    width: 80vw;
 }

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

@@ -1,136 +1,147 @@
 <div class="content">
-  <div>
-    <button
-      mat-raised-button
-      color="accent"
-      [routerLink]="['/newTunnelFlight']"
-      [routerLinkActive]="['active']"
-      skipLocationChange
+    <div>
+        <button
+            mat-raised-button
+            color="accent"
+            [routerLink]="['/newTunnelFlight']"
+            [routerLinkActive]="['active']"
+            skipLocationChange
+        >
+            {{ "ListTunnelFlight_Add" | translate }}
+        </button>
+    </div>
+
+    @if (isLoading) {
+        <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
+    }
+
+    <mat-radio-group
+        [(ngModel)]="selectedPeriod"
+        (ngModelChange)="onPeriodChange()"
     >
-      {{ "ListTunnelFlight_Add" | translate }}
-    </button>
-  </div>
+        <mat-radio-button value="currentYear">{{
+            "ListTunnelFlight_CurrentYear" | translate
+        }}</mat-radio-button>
+        <mat-radio-button value="12Months">{{
+            "ListTunnelFlight_12Months" | translate
+        }}</mat-radio-button>
+        <mat-radio-button value="all">{{
+            "ListTunnelFlight_AllFlights" | translate
+        }}</mat-radio-button>
+    </mat-radio-group>
 
-  <mat-progress-bar
-    [mode]="'indeterminate'"
-    *ngIf="isLoading"
-  ></mat-progress-bar>
+    <mat-nav-list>
+        @for (stat of stats; track stat) {
+            <mat-list-item matListItemLine>
+                <label>{{ stat.id }} : {{ stat.values }}</label>
+            </mat-list-item>
+        }
+    </mat-nav-list>
 
-  <mat-radio-group
-    [(ngModel)]="selectedPeriod"
-    (ngModelChange)="onPeriodChange()"
-  >
-    <mat-radio-button value="currentYear">{{
-      "ListTunnelFlight_CurrentYear" | translate
-    }}</mat-radio-button>
-    <mat-radio-button value="12Months">{{
-      "ListTunnelFlight_12Months" | translate
-    }}</mat-radio-button>
-    <mat-radio-button value="all">{{
-      "ListTunnelFlight_AllFlights" | translate
-    }}</mat-radio-button>
-  </mat-radio-group>
+    <div class="chart-container">
+        <!-- https://www.freecodecamp.org/news/how-to-make-bar-and-line-charts-using-chartjs-in-angular/ -->
+        <canvas
+            baseChart
+            [data]="barChartData"
+            [options]="barChartOptions"
+            [legend]="barChartLegend"
+            [type]="barChartType"
+        >
+        </canvas>
+    </div>
 
-  <mat-nav-list>
-    <mat-list-item matListItemLine *ngFor="let stat of stats">
-      <label>{{ stat.id }} : {{ stat.values }}</label>
-    </mat-list-item>
-  </mat-nav-list>
+    <div>
+        <button mat-raised-button color="accent" (click)="onLoadTable()">
+            {{ "ListTunnelFlight_LoadTable" | translate }}
+        </button>
 
-  <div class="chart-container">
-    <!-- https://www.freecodecamp.org/news/how-to-make-bar-and-line-charts-using-chartjs-in-angular/ -->
-    <canvas
-      baseChart
-      [data]="barChartData"
-      [options]="barChartOptions"
-      [legend]="barChartLegend"
-      [type]="barChartType"
-    >
-    </canvas>
-  </div>
-
-  <div>
-    <button mat-raised-button color="accent" (click)="onLoadTable()">
-      {{ "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>
-  </div>
+        @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>

Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts

@@ -22,257 +22,274 @@ import { DateService } from "../../services/date.service";
 import { TunnelFlight, TunnelFlightByMonth } from "../../models/tunnel-flight";
 
 @Component({
-  selector: "app-list-of-tunnel-flights",
-  templateUrl: "./list-of-tunnel-flights.component.html",
-  styleUrls: ["./list-of-tunnel-flights.component.css"],
-  imports: [
-    TranslateModule,
-    BaseChartDirective,
-    CommonModule,
-    MatIconModule,
-    MatListModule,
-    MatProgressSpinnerModule,
-    RouterLink,
-    MatRadioModule,
-    MatProgressBarModule,
-    FormsModule,
-    RouterModule,
-    MatTableModule,
-    MatButtonModule,
-  ],
+    selector: "app-list-of-tunnel-flights",
+    templateUrl: "./list-of-tunnel-flights.component.html",
+    styleUrls: ["./list-of-tunnel-flights.component.css"],
+    imports: [
+        TranslateModule,
+        BaseChartDirective,
+        CommonModule,
+        MatIconModule,
+        MatListModule,
+        MatProgressSpinnerModule,
+        RouterLink,
+        MatRadioModule,
+        MatProgressBarModule,
+        FormsModule,
+        RouterModule,
+        MatTableModule,
+        MatButtonModule,
+    ],
 })
 export class ListOfTunnelFlightsComponent implements OnInit {
-  public barChartLegend = true;
-  public barChartData: ChartData<"bar">;
-  public barChartOptions: ChartConfiguration["options"];
-  public barChartType: ChartType;
-  public isLoading: boolean = false;
-  public selectedPeriod: string;
-  public dataSourceTable: MatTableDataSource<TunnelFlight> =
-    new MatTableDataSource();
-  public displayedColumns: Array<string> = [
-    "id",
-    "tunnel",
-    "jumpType",
-    "nbMinutes",
-    "notes",
-    "flightDate",
-    "actions",
-  ];
-  public stats: Array<{ id: String | Number; values: String | Number }> = [];
+    public barChartLegend = true;
+    public barChartData: ChartData<"bar">;
+    public barChartOptions: ChartConfiguration["options"];
+    public barChartType: ChartType;
+    public isLoading: boolean = false;
+    public selectedPeriod: string;
+    public dataSourceTable: MatTableDataSource<TunnelFlight> =
+        new MatTableDataSource();
+    public displayedColumns: Array<string> = [
+        "id",
+        "tunnel",
+        "jumpType",
+        "nbMinutes",
+        "notes",
+        "flightDate",
+        "actions",
+    ];
+    public stats: Array<{ id: String | Number; values: String | Number }> = [];
 
-  constructor(
-    private serviceComm: ServiceComm,
-    private serviceTunnelFlight: TunnelFlightService,
-    private translateService: TranslateService,
-    private dateService: DateService
-  ) {}
+    constructor(
+        private serviceComm: ServiceComm,
+        private serviceTunnelFlight: TunnelFlightService,
+        private translateService: TranslateService,
+        private dateService: DateService,
+    ) {}
 
-  ngOnInit() {
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
-        this.updateTitle();
-      }
-    });
-    this.updateTitle();
-
-    this.chartConfig();
-    this.selectedPeriod = "currentYear";
-    this.getDataForGraph();
-  }
-
-  public onPeriodChange() {
-    this.getDataForGraph();
-    if (this.dataSourceTable?.data.length > 0) {
-      this.getDataForTable();
-    }
-  }
-
-  public onLoadTable() {
-    this.getDataForTable();
-  }
-
-  private chartConfig() {
-    this.barChartType = "bar";
-    this.barChartOptions = {
-      responsive: true,
-      maintainAspectRatio: true,
-      plugins: {
-        legend: {
-          display: true,
-        },
-        tooltip: {
-          callbacks: {
-            footer: this.footer,
-          },
-        },
-      },
-      interaction: {
-        intersect: false,
-        mode: "nearest",
-        axis: "x",
-      },
-      scales: {
-        x: {
-          stacked: true,
-        },
-        y: {
-          stacked: true,
-        },
-      },
-    };
-  }
-
-  private updateTitle() {
-    this.translateService.get("ListTunnelFlight_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
-
-  private getDataForTable(): void {
-    this.isLoading = true;
-
-    // Get data to show in a table
-    let endDate = new Date();
-    endDate.setHours(0, 0, 0, 0);
-    let beginDate = this.computeBeginDateByPeriod(this.selectedPeriod, endDate);
-
-    this.serviceTunnelFlight
-      .getTunnelFlights(beginDate, endDate)
-      .subscribe((data) => {
-        this.dataSourceTable.data = data;
-        this.isLoading = false;
-      });
-  }
-
-  private getDataForGraph(): void {
-    this.isLoading = true;
-
-    // Get data to show in a table
-    let endDate = new Date();
-    endDate.setHours(0, 0, 0, 0);
-    let beginDate = this.computeBeginDateByPeriod(this.selectedPeriod, endDate);
-
-    this.serviceTunnelFlight
-      .getTunnelFlightsByMonth(beginDate, endDate)
-      .subscribe((data) => {
-        const allMonths = this.getMontsBetweenDates(beginDate, endDate);
-        const cumulatedTime = this.getCumulatedTimeByTypeByMonth(
-          data,
-          allMonths
-        );
-        this.computeTimeByType(data);
-        this.barChartData = {
-          labels: allMonths,
-          datasets: cumulatedTime,
-        };
-
-        this.isLoading = false;
-      });
-  }
-
-  private computeTimeByType(stats: TunnelFlightByMonth[]) {
-    this.stats = [];
-    from(stats)
-      .pipe(
-        groupBy((type) => type.type, { element: (p) => p.nb }),
-        mergeMap((group$) =>
-          group$.pipe(reduce((acc, cur) => [...acc, cur], [`${group$.key}`]))
-        ),
-        map((arr) => ({
-          id: arr[0],
-          values: arr.slice(1).reduce((a, b) => Number(a) + Number(b), 0),
-        }))
-      )
-      .subscribe((p) => {
-        console.log(p);
-        this.stats.push(p);
-      });
-  }
-
-  private getMontsBetweenDates(beginDate: Date, endDate: Date): Array<string> {
-    let results: Array<string> = [];
-    let tmpBeginDate = new Date(beginDate.getTime());
-    const tmpEndDate = new Date(endDate.getTime());
-
-    while (tmpBeginDate < tmpEndDate) {
-      results.push(formatDate(tmpBeginDate, "yy-MM", "en"));
-      tmpBeginDate.setMonth(tmpBeginDate.getMonth() + 1);
-    }
-
-    return results;
-  }
-
-  private getCumulatedTimeByTypeByMonth(
-    stats: TunnelFlightByMonth[],
-    allMonths: string[]
-  ): Array<any> {
-    let tmpResults = new Map<string, number[]>();
-
-    const disctintType = Array.from(new Set(stats.map((item) => item.type)));
-    disctintType.forEach((type) => {
-      tmpResults.set(
-        type,
-        Array.from({ length: allMonths.length }, (v, k) => 0)
-      );
-    });
-
-    for (let i = 0; i < allMonths.length; i++) {
-      const month = allMonths[i];
-      let filteredStats = stats.filter((d) => d.month == month);
-
-      if (filteredStats.length > 0) {
-        filteredStats.forEach((fs) => {
-          tmpResults.get(fs.type)[i] += fs.nb;
+    ngOnInit() {
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
         });
-      }
+        this.updateTitle();
+
+        this.chartConfig();
+        this.selectedPeriod = "currentYear";
+        this.getDataForGraph();
     }
 
-    const results = Array.from(tmpResults, function (item) {
-      return { label: item[0], data: item[1] };
-    });
-
-    return results;
-  }
-
-  private footer = (tooltipItems: any) => {
-    let sum = 0;
-
-    tooltipItems.forEach(function (tooltipItem: any) {
-      sum += tooltipItem.parsed.y;
-    });
-
-    return "Sum: " + sum;
-  };
-
-  private computeBeginDateByPeriod(
-    selectedPeriod: String,
-    endDate: Date
-  ): Date {
-    let beginDate = new Date();
-
-    switch (selectedPeriod) {
-      case "currentYear":
-        beginDate = new Date(endDate.getFullYear(), 0, 1);
-        break;
-      case "12Months":
-        beginDate = this.dateService.addMonths(endDate, -12);
-        beginDate.setDate(1);
-        break;
-      case "all":
-        beginDate = this.dateService.addMonths(endDate, -120);
-        beginDate.setDate(1);
-        break;
+    public onPeriodChange() {
+        this.getDataForGraph();
+        if (this.dataSourceTable?.data.length > 0) {
+            this.getDataForTable();
+        }
     }
 
-    return beginDate;
-  }
+    public onLoadTable() {
+        this.getDataForTable();
+    }
 
-  public delete(item: TunnelFlight) {
-    let data: Array<TunnelFlight> = this.dataSourceTable.data;
-    data = data.filter((d) => d.id !== item.id);
+    private chartConfig() {
+        this.barChartType = "bar";
+        this.barChartOptions = {
+            responsive: true,
+            maintainAspectRatio: true,
+            plugins: {
+                legend: {
+                    display: true,
+                },
+                tooltip: {
+                    callbacks: {
+                        footer: this.footer,
+                    },
+                },
+            },
+            interaction: {
+                intersect: false,
+                mode: "nearest",
+                axis: "x",
+            },
+            scales: {
+                x: {
+                    stacked: true,
+                },
+                y: {
+                    stacked: true,
+                },
+            },
+        };
+    }
 
-    this.dataSourceTable.data = data;
-    this.serviceTunnelFlight.deleteTunnelFlight(item);
-  }
+    private updateTitle() {
+        this.translateService
+            .get("ListTunnelFlight_Title")
+            .subscribe((data) => {
+                this.serviceComm.updatedComponentTitle(data);
+            });
+    }
+
+    private getDataForTable(): void {
+        this.isLoading = true;
+
+        // Get data to show in a table
+        let endDate = new Date();
+        endDate.setHours(0, 0, 0, 0);
+        let beginDate = this.computeBeginDateByPeriod(
+            this.selectedPeriod,
+            endDate,
+        );
+
+        this.serviceTunnelFlight
+            .getTunnelFlights(beginDate, endDate)
+            .subscribe((data) => {
+                this.dataSourceTable.data = data;
+                this.isLoading = false;
+            });
+    }
+
+    private getDataForGraph(): void {
+        this.isLoading = true;
+
+        // Get data to show in a table
+        let endDate = new Date();
+        endDate.setHours(0, 0, 0, 0);
+        let beginDate = this.computeBeginDateByPeriod(
+            this.selectedPeriod,
+            endDate,
+        );
+
+        this.serviceTunnelFlight
+            .getTunnelFlightsByMonth(beginDate, endDate)
+            .subscribe((data) => {
+                const allMonths = this.getMontsBetweenDates(beginDate, endDate);
+                const cumulatedTime = this.getCumulatedTimeByTypeByMonth(
+                    data,
+                    allMonths,
+                );
+                this.computeTimeByType(data);
+                this.barChartData = {
+                    labels: allMonths,
+                    datasets: cumulatedTime,
+                };
+
+                this.isLoading = false;
+            });
+    }
+
+    private computeTimeByType(stats: TunnelFlightByMonth[]) {
+        this.stats = [];
+        from(stats)
+            .pipe(
+                groupBy((type) => type.type, { element: (p) => p.nb }),
+                mergeMap((group$) =>
+                    group$.pipe(
+                        reduce((acc, cur) => [...acc, cur], [`${group$.key}`]),
+                    ),
+                ),
+                map((arr) => ({
+                    id: arr[0],
+                    values: arr
+                        .slice(1)
+                        .reduce((a, b) => Number(a) + Number(b), 0),
+                })),
+            )
+            .subscribe((p) => {
+                console.log(p);
+                this.stats.push(p);
+            });
+    }
+
+    private getMontsBetweenDates(
+        beginDate: Date,
+        endDate: Date,
+    ): Array<string> {
+        let results: Array<string> = [];
+        let tmpBeginDate = new Date(beginDate.getTime());
+        const tmpEndDate = new Date(endDate.getTime());
+
+        while (tmpBeginDate < tmpEndDate) {
+            results.push(formatDate(tmpBeginDate, "yy-MM", "en"));
+            tmpBeginDate.setMonth(tmpBeginDate.getMonth() + 1);
+        }
+
+        return results;
+    }
+
+    private getCumulatedTimeByTypeByMonth(
+        stats: TunnelFlightByMonth[],
+        allMonths: string[],
+    ): Array<any> {
+        let tmpResults = new Map<string, number[]>();
+
+        const disctintType = Array.from(
+            new Set(stats.map((item) => item.type)),
+        );
+        disctintType.forEach((type) => {
+            tmpResults.set(
+                type,
+                Array.from({ length: allMonths.length }, (v, k) => 0),
+            );
+        });
+
+        for (let i = 0; i < allMonths.length; i++) {
+            const month = allMonths[i];
+            let filteredStats = stats.filter((d) => d.month == month);
+
+            if (filteredStats.length > 0) {
+                filteredStats.forEach((fs) => {
+                    tmpResults.get(fs.type)[i] += fs.nb;
+                });
+            }
+        }
+
+        const results = Array.from(tmpResults, function (item) {
+            return { label: item[0], data: item[1] };
+        });
+
+        return results;
+    }
+
+    private footer = (tooltipItems: any) => {
+        let sum = 0;
+
+        tooltipItems.forEach(function (tooltipItem: any) {
+            sum += tooltipItem.parsed.y;
+        });
+
+        return "Sum: " + sum;
+    };
+
+    private computeBeginDateByPeriod(
+        selectedPeriod: String,
+        endDate: Date,
+    ): Date {
+        let beginDate = new Date();
+
+        switch (selectedPeriod) {
+            case "currentYear":
+                beginDate = new Date(endDate.getFullYear(), 0, 1);
+                break;
+            case "12Months":
+                beginDate = this.dateService.addMonths(endDate, -12);
+                beginDate.setDate(1);
+                break;
+            case "all":
+                beginDate = this.dateService.addMonths(endDate, -120);
+                beginDate.setDate(1);
+                break;
+        }
+
+        return beginDate;
+    }
+
+    public delete(item: TunnelFlight) {
+        let data: Array<TunnelFlight> = this.dataSourceTable.data;
+        data = data.filter((d) => d.id !== item.id);
+
+        this.dataSourceTable.data = data;
+        this.serviceTunnelFlight.deleteTunnelFlight(item);
+    }
 }

Front/skydivelogs-app/src/app/login-user/login-user.component.html

@@ -1,50 +1,66 @@
 <form
-  focusInvalidInput
-  autocomplete="off"
-  style="padding: 10px"
-  [formGroup]="loginForm"
-  (ngSubmit)="onLoginSubmit()"
+    focusInvalidInput
+    autocomplete="off"
+    style="padding: 10px"
+    [formGroup]="loginForm"
+    (ngSubmit)="onLoginSubmit()"
 >
-  <p>
-    <mat-form-field>
-      <mat-label>{{ "LoginUser_Username" | translate }}</mat-label>
-      <input
-        type="text"
-        matInput
-        #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>
-    </mat-form-field>
-  </p>
-  <p>
-    <mat-form-field>
-      <mat-label>{{ "LoginUser_Password" | translate }}</mat-label>
-      <input
-        type="password"
-        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>
-    </mat-form-field>
-  </p>
+    <p>
+        <mat-form-field>
+            <mat-label>{{ "LoginUser_Username" | translate }}</mat-label>
+            <input
+                type="text"
+                matInput
+                #username="matInput"
+                formControlName="username"
+                [ngClass]="{
+                    'is-invalid': submitted && formCtrls['username'].errors,
+                }"
+            />
+            @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>
+        <mat-form-field>
+            <mat-label>{{ "LoginUser_Password" | translate }}</mat-label>
+            <input
+                type="password"
+                matInput
+                formControlName="password"
+                [ngClass]="{
+                    'is-invalid': submitted && formCtrls['password'].errors,
+                }"
+            />
+            @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>
-    {{ "LoginUser_BtnLogin" | translate }}
-  </button>
+    <button [disabled]="loading" mat-raised-button color="accent">
+        @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>

Front/skydivelogs-app/src/app/login-user/login-user.component.ts

@@ -2,10 +2,10 @@ import { Component, OnInit, ViewChild, AfterViewInit } from "@angular/core";
 import { Router, ActivatedRoute } from "@angular/router";
 import { CommonModule } from "@angular/common";
 import {
-  FormBuilder,
-  FormGroup,
-  ReactiveFormsModule,
-  Validators,
+    FormBuilder,
+    FormGroup,
+    ReactiveFormsModule,
+    Validators,
 } from "@angular/forms";
 import { TranslateModule, TranslatePipe } from "@ngx-translate/core";
 import { MatInput, MatInputModule } from "@angular/material/input";
@@ -17,72 +17,72 @@ import { first } from "rxjs/operators";
 import { AuthenticationService } from "../../services/authentication.service";
 
 @Component({
-  selector: "app-login-user",
-  templateUrl: "./login-user.component.html",
-  styleUrls: ["./login-user.component.css"],
-  imports: [
-    CommonModule,
-    MatFormFieldModule,
-    ReactiveFormsModule,
-    MatInputModule,
-    TranslateModule,
-    TranslatePipe,
-    MatButtonModule,
-  ],
+    selector: "app-login-user",
+    templateUrl: "./login-user.component.html",
+    styleUrls: ["./login-user.component.css"],
+    imports: [
+        CommonModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        TranslateModule,
+        TranslatePipe,
+        MatButtonModule,
+    ],
 })
 export class LoginUserComponent implements OnInit {
-  public loginForm: FormGroup;
-  public loading = false;
-  public submitted = false;
-  public returnUrl: string;
-  public error: string = "";
+    public loginForm: FormGroup;
+    public loading = false;
+    public submitted = false;
+    public returnUrl: string;
+    public error: string = "";
 
-  constructor(
-    private formBuilder: FormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private authenticationService: AuthenticationService
-  ) {
-    if (this.authenticationService.currentUserValue) {
-      this.router.navigate(["/"]);
+    constructor(
+        private formBuilder: FormBuilder,
+        private route: ActivatedRoute,
+        private router: Router,
+        private authenticationService: AuthenticationService,
+    ) {
+        if (this.authenticationService.currentUserValue) {
+            this.router.navigate(["/"]);
+        }
     }
-  }
 
-  ngOnInit() {
-    this.loginForm = this.formBuilder.group(
-      {
-        username: ["", [Validators.required, Validators.minLength(3)]],
-        password: ["", [Validators.required]],
-      },
-      { updateOn: "submit" }
-    );
+    ngOnInit() {
+        this.loginForm = this.formBuilder.group(
+            {
+                username: ["", [Validators.required, Validators.minLength(3)]],
+                password: ["", [Validators.required]],
+            },
+            { updateOn: "submit" },
+        );
 
-    // get return url from route parameters or default to '/'
-    this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/";
-  }
-
-  get formCtrls() {
-    return this.loginForm.controls;
-  }
-
-  public onLoginSubmit() {
-    this.submitted = true;
-
-    if (this.loginForm.valid) {
-      this.loading = true;
-      this.authenticationService
-        .login(
-          this.formCtrls["username"].value,
-          this.formCtrls["password"].value
-        )
-        .pipe(first())
-        .subscribe({
-          complete: () => this.router.navigate([this.returnUrl]),
-          error: (error) => {
-            this.error = error.message;
-            this.loading = false;
-          },
-        });
+        // get return url from route parameters or default to '/'
+        this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/";
+    }
+
+    get formCtrls() {
+        return this.loginForm.controls;
+    }
+
+    public onLoginSubmit() {
+        this.submitted = true;
+
+        if (this.loginForm.valid) {
+            this.loading = true;
+            this.authenticationService
+                .login(
+                    this.formCtrls["username"].value,
+                    this.formCtrls["password"].value,
+                )
+                .pipe(first())
+                .subscribe({
+                    complete: () => this.router.navigate([this.returnUrl]),
+                    error: (error) => {
+                        this.error = error.message;
+                        this.loading = false;
+                    },
+                });
+        }
     }
-  }
 }

Front/skydivelogs-app/src/app/login/login.component.css

@@ -1,10 +1,10 @@
 .content {
-  height: 90vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    height: 90vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .mat-card-title {
-  margin: 0 !important;
+    margin: 0 !important;
 }

Front/skydivelogs-app/src/app/login/login.component.html

@@ -1,43 +1,51 @@
 <div class="content">
-  <mat-card style="max-width: 500px" flex="50">
-    <mat-card-header
-      style="
-        align-items: center;
-        justify-content: center;
-        background-color: rgba(0, 0, 0, 0.03);
-      "
-    >
-      <mat-card-title>{{ "Login_Title" | translate }}</mat-card-title>
+    <mat-card style="max-width: 500px" flex="50">
+        <mat-card-header
+            style="
+                align-items: center;
+                justify-content: center;
+                background-color: rgba(0, 0, 0, 0.03);
+            "
+        >
+            <mat-card-title>{{ "Login_Title" | translate }}</mat-card-title>
 
-      <mat-select
-        (selectionChange)="switchLang($event)"
-        [(value)]="selectedLanguageFlag"
-        style="width: 60px; padding-left: 30px"
-      >
-        <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-card-header>
+            <mat-select
+                (selectionChange)="switchLang($event)"
+                [(value)]="selectedLanguageFlag"
+                style="width: 60px; padding-left: 30px"
+            >
+                <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-card-header>
 
-    <mat-card-content>
-      <mat-tab-group mat-align-tabs="center" animationDuration="0ms">
-        <mat-tab label="{{ 'Login_Tab_WithUser' | translate }}" tabIndex="-1">
-          <app-login-user></app-login-user>
-        </mat-tab>
-        <mat-tab label="{{ 'Login_Tab_CreateUser' | translate }}" tabIndex="-1">
-          <app-create-user></app-create-user>
-        </mat-tab>
-      </mat-tab-group>
-    </mat-card-content>
-  </mat-card>
+        <mat-card-content>
+            <mat-tab-group mat-align-tabs="center" animationDuration="0ms">
+                <mat-tab
+                    label="{{ 'Login_Tab_WithUser' | translate }}"
+                    tabIndex="-1"
+                >
+                    <app-login-user></app-login-user>
+                </mat-tab>
+                <mat-tab
+                    label="{{ 'Login_Tab_CreateUser' | translate }}"
+                    tabIndex="-1"
+                >
+                    <app-create-user></app-create-user>
+                </mat-tab>
+            </mat-tab-group>
+        </mat-card-content>
+    </mat-card>
 </div>

Front/skydivelogs-app/src/app/login/login.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit } from "@angular/core";
 import {
-  TranslateModule,
-  TranslatePipe,
-  TranslateService,
+    TranslateModule,
+    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";
@@ -14,32 +14,31 @@ import { LoginUserComponent } from "../login-user/login-user.component";
 import { CreateUserComponent } from "../create-user/create-user.component";
 
 @Component({
-  selector: "app-login",
-  templateUrl: "./login.component.html",
-  styleUrls: ["./login.component.css"],
-  imports: [
-    TranslateModule,
-    CommonModule,
-    MatSelectModule,
-    MatOptionModule,
-    MatCardModule,
-    MatTabsModule,
-    LoginUserComponent,
-    CreateUserComponent,
-    TranslateModule,
-  ],
+    selector: "app-login",
+    templateUrl: "./login.component.html",
+    styleUrls: ["./login.component.css"],
+    imports: [
+        TranslateModule,
+        MatSelectModule,
+        MatOptionModule,
+        MatCardModule,
+        MatTabsModule,
+        LoginUserComponent,
+        CreateUserComponent,
+        TranslateModule,
+    ],
 })
 export class LoginComponent implements OnInit {
-  public selectedLanguageFlag: string;
+    public selectedLanguageFlag: string;
 
-  constructor(private translate: TranslateService) {
-    this.selectedLanguageFlag = "en";
-  }
+    constructor(private translate: TranslateService) {
+        this.selectedLanguageFlag = "en";
+    }
 
-  ngOnInit() {}
+    ngOnInit() {}
 
-  public switchLang(event: any) {
-    this.translate.use(event.value);
-    this.selectedLanguageFlag = event.value;
-  }
+    public switchLang(event: any) {
+        this.translate.use(event.value);
+        this.selectedLanguageFlag = event.value;
+    }
 }

Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.css

@@ -1,7 +1,7 @@
 .content {
-  height: 90vh;
-  display: flex;
-  justify-content: left;
-  flex-direction: column;
-  align-items: initial;
+    height: 90vh;
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    align-items: initial;
 }

Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html

@@ -1,16 +1,23 @@
 <div class="content">
-  <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
-    <p>
-      <mat-form-field>
-        <mat-label>Aircraft name</mat-label>
-        <input matInput type="text" formControlName="aircraftName">
-      </mat-form-field>
-    </p>
-    <p>
-      <input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" formControlName="image"
-        (change)="onFileChanged($event)" />
-    </p>
+    <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
+        <p>
+            <mat-form-field>
+                <mat-label>Aircraft name</mat-label>
+                <input matInput type="text" formControlName="aircraftName" />
+            </mat-form-field>
+        </p>
+        <p>
+            <input
+                type="file"
+                #fileUpload
+                id="fileUpload"
+                name="fileUpload"
+                accept="image/*"
+                formControlName="image"
+                (change)="onFileChanged($event)"
+            />
+        </p>
 
-    <button type="submit" mat-raised-button color="accent">Add</button>
-  </form>
+        <button type="submit" mat-raised-button color="accent">Add</button>
+    </form>
 </div>

Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit } from "@angular/core";
 import {
-  FormControl,
-  FormGroup,
-  ReactiveFormsModule,
-  Validators,
+    FormControl,
+    FormGroup,
+    ReactiveFormsModule,
+    Validators,
 } from "@angular/forms";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
 import { MatFormFieldModule } from "@angular/material/form-field";
@@ -16,101 +16,106 @@ import { AircraftService } from "../../services/aircraft.service";
 import { ServiceComm } from "../../services/service-comm.service";
 
 @Component({
-  selector: "app-new-aircraft",
-  templateUrl: "./new-aircraft.component.html",
-  styleUrls: ["./new-aircraft.component.css"],
-  imports: [
-    TranslateModule,
-    MatFormFieldModule,
-    ReactiveFormsModule,
-    MatFormFieldModule,
-    ReactiveFormsModule,
-    MatInputModule,
-    MatButtonModule,
-  ],
+    selector: "app-new-aircraft",
+    templateUrl: "./new-aircraft.component.html",
+    styleUrls: ["./new-aircraft.component.css"],
+    imports: [
+        TranslateModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatButtonModule,
+    ],
 })
 export class NewAircraftComponent implements OnInit {
-  public addForm: FormGroup;
-  public imageError: string;
-  private selectedFile: string;
+    public addForm: FormGroup;
+    public imageError: string;
+    private selectedFile: string;
 
-  constructor(
-    private serviceComm: ServiceComm,
-    private serviceApi: AircraftService,
-    private translateService: TranslateService,
-  ) {
-    this.addForm = new FormGroup(
-      {
-        aircraftName: new FormControl("", Validators.required),
-      },
-      { updateOn: "blur" },
-    );
-  }
+    constructor(
+        private serviceComm: ServiceComm,
+        private serviceApi: AircraftService,
+        private translateService: TranslateService,
+    ) {
+        this.addForm = new FormGroup(
+            {
+                aircraftName: new FormControl("", Validators.required),
+            },
+            { updateOn: "blur" },
+        );
+    }
+
+    ngOnInit() {
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
 
-  ngOnInit() {
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
         this.updateTitle();
-      }
-    });
-
-    this.updateTitle();
-  }
-
-  onSubmit(formData) {
-    if (formData.invalid) {
-      return;
     }
 
-    this.serviceApi
-      .addAircraft(formData.aircraftName, this.selectedFile)
-      .subscribe(() => {
-        this.serviceComm.refreshData(AddAction.Aircraft);
-      });
-  }
+    onSubmit(formData) {
+        if (formData.invalid) {
+            return;
+        }
 
-  public onFileChanged(fileInput: any) {
-    const file = fileInput.dataTransfer
-      ? fileInput.dataTransfer.files[0]
-      : fileInput.target.files[0];
-    const allowed_types = ["image/png", "image/jpeg"];
-    const max_size = 20971520;
-
-    if (!allowed_types.includes(file.type)) {
-      this.imageError = "Only Images are allowed ( JPG | PNG )";
-    } else if (file.size > max_size) {
-      this.imageError = "Maximum size allowed is " + max_size / 1000 + "Mb";
-    } else {
-      const reader = new FileReader();
-      reader.onload = this.checkAndExtractDataToBase64.bind(this);
-      reader.readAsDataURL(fileInput.target.files[0]);
+        this.serviceApi
+            .addAircraft(formData.aircraftName, this.selectedFile)
+            .subscribe(() => {
+                this.serviceComm.refreshData(AddAction.Aircraft);
+            });
     }
-  }
 
-  private checkAndExtractDataToBase64(e: any) {
-    const max_height = 15200;
-    const max_width = 25600;
+    public onFileChanged(fileInput: any) {
+        const file = fileInput.dataTransfer
+            ? fileInput.dataTransfer.files[0]
+            : fileInput.target.files[0];
+        const allowed_types = ["image/png", "image/jpeg"];
+        const max_size = 20971520;
 
-    const image = new Image();
-    image.src = e.target.result;
-    image.onload = (rs) => {
-      const img_height = rs.currentTarget["height"];
-      const img_width = rs.currentTarget["width"];
+        if (!allowed_types.includes(file.type)) {
+            this.imageError = "Only Images are allowed ( JPG | PNG )";
+        } else if (file.size > max_size) {
+            this.imageError =
+                "Maximum size allowed is " + max_size / 1000 + "Mb";
+        } else {
+            const reader = new FileReader();
+            reader.onload = this.checkAndExtractDataToBase64.bind(this);
+            reader.readAsDataURL(fileInput.target.files[0]);
+        }
+    }
 
-      if (img_height > max_height && img_width > max_width) {
-        this.imageError =
-          "Maximum dimentions allowed " + max_height + "*" + max_width + "px";
-      } else {
-        const imgBase64Path = e.target.result;
-        this.selectedFile = imgBase64Path;
-        this.imageError = "OK";
-      }
-    };
-  }
+    private checkAndExtractDataToBase64(e: any) {
+        const max_height = 15200;
+        const max_width = 25600;
 
-  private updateTitle() {
-    this.translateService.get("NewAircraft_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
+        const image = new Image();
+        image.src = e.target.result;
+        image.onload = (rs) => {
+            const img_height = rs.currentTarget["height"];
+            const img_width = rs.currentTarget["width"];
+
+            if (img_height > max_height && img_width > max_width) {
+                this.imageError =
+                    "Maximum dimentions allowed " +
+                    max_height +
+                    "*" +
+                    max_width +
+                    "px";
+            } else {
+                const imgBase64Path = e.target.result;
+                this.selectedFile = imgBase64Path;
+                this.imageError = "OK";
+            }
+        };
+    }
+
+    private updateTitle() {
+        this.translateService.get("NewAircraft_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
 }

Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.css

@@ -1,7 +1,7 @@
 .content {
-  height: 90vh;
-  display: flex;
-  justify-content: left;
-  flex-direction: column;
-  align-items: initial;
+    height: 90vh;
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    align-items: initial;
 }

Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html

@@ -1,42 +1,42 @@
 <div class="content">
-  <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
-    <p>
-      <mat-form-field>
-        <mat-label>Dropzone name</mat-label>
-        <input matInput type="text" formControlName="dzName" />
-      </mat-form-field>
-    </p>
-    <p>
-      <mat-form-field>
-        <mat-label>GPS</mat-label>
-        <input matInput type="text" formControlName="gps" />
-      </mat-form-field>
-    </p>
-    <p>
-      <mat-form-field>
-        <mat-label>Address of the DZ</mat-label>
-        <textarea matInput formControlName="address"></textarea>
-      </mat-form-field>
-    </p>
-    <p>
-      <mat-form-field>
-        <mat-label>Web site</mat-label>
-        <input matInput type="text" formControlName="website" />
-      </mat-form-field>
-    </p>
-    <p>
-      <mat-form-field>
-        <mat-label>Mail of contact</mat-label>
-        <input matInput type="text" formControlName="contactMail" />
-      </mat-form-field>
-    </p>
-    <p>
-      <mat-checkbox formControlName="isDz">Is a dropzone</mat-checkbox>
-    </p>
-    <p>
-      <mat-checkbox formControlName="isTunnel">Is a tunnel</mat-checkbox>
-    </p>
+    <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
+        <p>
+            <mat-form-field>
+                <mat-label>Dropzone name</mat-label>
+                <input matInput type="text" formControlName="dzName" />
+            </mat-form-field>
+        </p>
+        <p>
+            <mat-form-field>
+                <mat-label>GPS</mat-label>
+                <input matInput type="text" formControlName="gps" />
+            </mat-form-field>
+        </p>
+        <p>
+            <mat-form-field>
+                <mat-label>Address of the DZ</mat-label>
+                <textarea matInput formControlName="address"></textarea>
+            </mat-form-field>
+        </p>
+        <p>
+            <mat-form-field>
+                <mat-label>Web site</mat-label>
+                <input matInput type="text" formControlName="website" />
+            </mat-form-field>
+        </p>
+        <p>
+            <mat-form-field>
+                <mat-label>Mail of contact</mat-label>
+                <input matInput type="text" formControlName="contactMail" />
+            </mat-form-field>
+        </p>
+        <p>
+            <mat-checkbox formControlName="isDz">Is a dropzone</mat-checkbox>
+        </p>
+        <p>
+            <mat-checkbox formControlName="isTunnel">Is a tunnel</mat-checkbox>
+        </p>
 
-    <button type="submit" mat-raised-button color="accent">Add</button>
-  </form>
+        <button type="submit" mat-raised-button color="accent">Add</button>
+    </form>
 </div>

Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit } from "@angular/core";
 import {
-  FormControl,
-  FormGroup,
-  ReactiveFormsModule,
-  Validators,
+    FormControl,
+    FormGroup,
+    ReactiveFormsModule,
+    Validators,
 } from "@angular/forms";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
 import { MatFormFieldModule } from "@angular/material/form-field";
@@ -17,87 +17,87 @@ import { ServiceComm } from "../../services/service-comm.service";
 import { DropzoneService } from "../../services/dropzone.service";
 
 @Component({
-  selector: "app-new-drop-zone",
-  templateUrl: "./new-drop-zone.component.html",
-  styleUrls: ["./new-drop-zone.component.css"],
-  imports: [
-    TranslateModule,
-    MatFormFieldModule,
-    MatCheckboxModule,
-    ReactiveFormsModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatButtonModule,
-  ],
+    selector: "app-new-drop-zone",
+    templateUrl: "./new-drop-zone.component.html",
+    styleUrls: ["./new-drop-zone.component.css"],
+    imports: [
+        TranslateModule,
+        MatFormFieldModule,
+        MatCheckboxModule,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatButtonModule,
+    ],
 })
 export class NewDropZoneComponent implements OnInit {
-  public addForm: FormGroup;
+    public addForm: FormGroup;
 
-  constructor(
-    private serviceComm: ServiceComm,
-    private dropzoneService: DropzoneService,
-    private translateService: TranslateService,
-  ) {
-    this.addForm = new FormGroup(
-      {
-        dzName: new FormControl("", Validators.required),
-        gps: new FormControl("x.x,y.y", [
-          Validators.required,
-          Validators.pattern("d+.d+,d+.d+"),
-        ]),
-        address: new FormControl("", Validators.required),
-        website: new FormControl("", Validators.required),
-        contactMail: new FormControl("", [
-          Validators.required,
-          Validators.email,
-        ]),
-        isDz: new FormControl(true),
-        isTunnel: new FormControl(false),
-      },
-      { updateOn: "blur" },
-    );
-  }
+    constructor(
+        private serviceComm: ServiceComm,
+        private dropzoneService: DropzoneService,
+        private translateService: TranslateService,
+    ) {
+        this.addForm = new FormGroup(
+            {
+                dzName: new FormControl("", Validators.required),
+                gps: new FormControl("x.x,y.y", [
+                    Validators.required,
+                    Validators.pattern("d+.d+,d+.d+"),
+                ]),
+                address: new FormControl("", Validators.required),
+                website: new FormControl("", Validators.required),
+                contactMail: new FormControl("", [
+                    Validators.required,
+                    Validators.email,
+                ]),
+                isDz: new FormControl(true),
+                isTunnel: new FormControl(false),
+            },
+            { updateOn: "blur" },
+        );
+    }
+
+    ngOnInit() {
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
 
-  ngOnInit() {
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
         this.updateTitle();
-      }
-    });
-
-    this.updateTitle();
-  }
-
-  onSubmit(formData) {
-    const splitGps: Array<string> = formData.gps.split(",");
-    let dzType: Array<string> = new Array<string>();
-
-    if (formData.isDz === true) {
-      dzType.push("dz");
-    }
-    if (formData.isTunnel === true) {
-      dzType.push("tunnel");
     }
 
-    this.dropzoneService
-      .addDropZone(
-        splitGps[0],
-        splitGps[1],
-        formData.dzName,
-        formData.address,
-        formData.website,
-        formData.contactMail,
-        dzType,
-        false,
-      )
-      .subscribe(() => {
-        this.serviceComm.refreshData(AddAction.Dropzone);
-      });
-  }
+    onSubmit(formData) {
+        const splitGps: Array<string> = formData.gps.split(",");
+        let dzType: Array<string> = new Array<string>();
 
-  private updateTitle() {
-    this.translateService.get("NewDz_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
+        if (formData.isDz === true) {
+            dzType.push("dz");
+        }
+        if (formData.isTunnel === true) {
+            dzType.push("tunnel");
+        }
+
+        this.dropzoneService
+            .addDropZone(
+                splitGps[0],
+                splitGps[1],
+                formData.dzName,
+                formData.address,
+                formData.website,
+                formData.contactMail,
+                dzType,
+                false,
+            )
+            .subscribe(() => {
+                this.serviceComm.refreshData(AddAction.Dropzone);
+            });
+    }
+
+    private updateTitle() {
+        this.translateService.get("NewDz_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
 }

Front/skydivelogs-app/src/app/new-gear/new-gear.component.css

@@ -1,7 +1,7 @@
 .content {
-  height: 90vh;
-  display: flex;
-  justify-content: left;
-  flex-direction: column;
-  align-items: initial;
+    height: 90vh;
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    align-items: initial;
 }

Front/skydivelogs-app/src/app/new-gear/new-gear.component.html

@@ -1,48 +1,48 @@
 <div class="content">
-  <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
-    <p>
-      <mat-form-field>
-        <mat-label>Name of gear</mat-label>
-        <input matInput type="text" formControlName="name">
-      </mat-form-field>
-    </p>
-    <p>
-      <mat-form-field>
-        <mat-label>Manufacturer</mat-label>
-        <input matInput type="text" formControlName="manufacturer">
-      </mat-form-field>
-    </p>
-    <p>
-      <mat-form-field>
-        <mat-label>Min size of canopy</mat-label>
-        <input matInput type="text" formControlName="minSize">
-      </mat-form-field>
-    </p>
-    <p>
-      <mat-form-field>
-        <mat-label>Max size of canopy</mat-label>
-        <input matInput type="text" formControlName="maxSize">
-      </mat-form-field>
-    </p>
-    <p>
-      <mat-form-field>
-        <mat-label>AAD system</mat-label>
-        <input matInput type="text" formControlName="aad">
-      </mat-form-field>
-    </p>
-    <p>
-      <mat-form-field>
-        <mat-label>Main Canopy</mat-label>
-        <input matInput type="text" formControlName="mainCanopy">
-      </mat-form-field>
-    </p>
-    <p>
-      <mat-form-field>
-        <mat-label>Reserve canopy</mat-label>
-        <input matInput type="text" formControlName="reserveCanopy">
-      </mat-form-field>
-    </p>
+    <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
+        <p>
+            <mat-form-field>
+                <mat-label>Name of gear</mat-label>
+                <input matInput type="text" formControlName="name" />
+            </mat-form-field>
+        </p>
+        <p>
+            <mat-form-field>
+                <mat-label>Manufacturer</mat-label>
+                <input matInput type="text" formControlName="manufacturer" />
+            </mat-form-field>
+        </p>
+        <p>
+            <mat-form-field>
+                <mat-label>Min size of canopy</mat-label>
+                <input matInput type="text" formControlName="minSize" />
+            </mat-form-field>
+        </p>
+        <p>
+            <mat-form-field>
+                <mat-label>Max size of canopy</mat-label>
+                <input matInput type="text" formControlName="maxSize" />
+            </mat-form-field>
+        </p>
+        <p>
+            <mat-form-field>
+                <mat-label>AAD system</mat-label>
+                <input matInput type="text" formControlName="aad" />
+            </mat-form-field>
+        </p>
+        <p>
+            <mat-form-field>
+                <mat-label>Main Canopy</mat-label>
+                <input matInput type="text" formControlName="mainCanopy" />
+            </mat-form-field>
+        </p>
+        <p>
+            <mat-form-field>
+                <mat-label>Reserve canopy</mat-label>
+                <input matInput type="text" formControlName="reserveCanopy" />
+            </mat-form-field>
+        </p>
 
-    <button mat-raised-button color="accent" type="submit">Add</button>
-  </form>
+        <button mat-raised-button color="accent" type="submit">Add</button>
+    </form>
 </div>

Front/skydivelogs-app/src/app/new-gear/new-gear.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit } from "@angular/core";
 import {
-  FormControl,
-  FormGroup,
-  ReactiveFormsModule,
-  Validators,
+    FormControl,
+    FormGroup,
+    ReactiveFormsModule,
+    Validators,
 } from "@angular/forms";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
@@ -15,85 +15,85 @@ import { GearService } from "../../services/gear.service";
 import { AddAction } from "../../models/add-action.enum";
 
 @Component({
-  selector: "app-new-gear",
-  templateUrl: "./new-gear.component.html",
-  styleUrls: ["./new-gear.component.css"],
-  imports: [
-    TranslateModule,
-    MatFormFieldModule,
-    ReactiveFormsModule,
-    ReactiveFormsModule,
-    MatInputModule,
-    MatButtonModule,
-  ],
+    selector: "app-new-gear",
+    templateUrl: "./new-gear.component.html",
+    styleUrls: ["./new-gear.component.css"],
+    imports: [
+        TranslateModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatButtonModule,
+    ],
 })
 export class NewGearComponent implements OnInit {
-  public addForm: FormGroup;
+    public addForm: FormGroup;
 
-  constructor(
-    private serviceComm: ServiceComm,
-    private serviceApi: GearService,
-    private translateService: TranslateService,
-  ) {
-    this.addForm = new FormGroup(
-      {
-        name: new FormControl("", Validators.required),
-        manufacturer: new FormControl("", Validators.required),
-        minSize: new FormControl("", [
-          Validators.required,
-          Validators.min(60),
-          Validators.max(320),
-        ]),
-        maxSize: new FormControl("", [
-          Validators.required,
-          Validators.min(60),
-          Validators.max(320),
-        ]),
-        aad: new FormControl("", Validators.required),
-        mainCanopy: new FormControl("", [
-          Validators.required,
-          Validators.min(60),
-          Validators.max(320),
-        ]),
-        reserveCanopy: new FormControl("", [
-          Validators.required,
-          Validators.min(60),
-          Validators.max(320),
-        ]),
-      },
-      { updateOn: "blur" },
-    );
-  }
+    constructor(
+        private serviceComm: ServiceComm,
+        private serviceApi: GearService,
+        private translateService: TranslateService,
+    ) {
+        this.addForm = new FormGroup(
+            {
+                name: new FormControl("", Validators.required),
+                manufacturer: new FormControl("", Validators.required),
+                minSize: new FormControl("", [
+                    Validators.required,
+                    Validators.min(60),
+                    Validators.max(320),
+                ]),
+                maxSize: new FormControl("", [
+                    Validators.required,
+                    Validators.min(60),
+                    Validators.max(320),
+                ]),
+                aad: new FormControl("", Validators.required),
+                mainCanopy: new FormControl("", [
+                    Validators.required,
+                    Validators.min(60),
+                    Validators.max(320),
+                ]),
+                reserveCanopy: new FormControl("", [
+                    Validators.required,
+                    Validators.min(60),
+                    Validators.max(320),
+                ]),
+            },
+            { updateOn: "blur" },
+        );
+    }
+
+    ngOnInit() {
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
 
-  ngOnInit() {
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
         this.updateTitle();
-      }
-    });
+    }
 
-    this.updateTitle();
-  }
+    onSubmit(formData) {
+        this.serviceApi
+            .addGear(
+                formData.name,
+                formData.manufacturer,
+                +formData.minSize,
+                +formData.maxSize,
+                formData.aad,
+                formData.mainCanopy,
+                formData.reserveCanopy,
+            )
+            .subscribe(() => {
+                this.serviceComm.refreshData(AddAction.Gear);
+            });
+    }
 
-  onSubmit(formData) {
-    this.serviceApi
-      .addGear(
-        formData.name,
-        formData.manufacturer,
-        +formData.minSize,
-        +formData.maxSize,
-        formData.aad,
-        formData.mainCanopy,
-        formData.reserveCanopy,
-      )
-      .subscribe(() => {
-        this.serviceComm.refreshData(AddAction.Gear);
-      });
-  }
-
-  private updateTitle() {
-    this.translateService.get("NewGear_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
+    private updateTitle() {
+        this.translateService.get("NewGear_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
 }

Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.css

@@ -1,7 +1,7 @@
 .content {
-  height: 90vh;
-  display: flex;
-  justify-content: left;
-  flex-direction: column;
-  align-items: initial;
+    height: 90vh;
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    align-items: initial;
 }

Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html

@@ -1,12 +1,12 @@
 <div class="content">
-  <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
-    <p>
-      <mat-form-field>
-        <mat-label>Jump type name</mat-label>
-        <input matInput type="text" formControlName="jumptypeName">
-      </mat-form-field>
-    </p>
+    <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
+        <p>
+            <mat-form-field>
+                <mat-label>Jump type name</mat-label>
+                <input matInput type="text" formControlName="jumptypeName" />
+            </mat-form-field>
+        </p>
 
-    <button type="submit" mat-raised-button color="accent">Add</button>
-  </form>
+        <button type="submit" mat-raised-button color="accent">Add</button>
+    </form>
 </div>

Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit } from "@angular/core";
 import {
-  FormControl,
-  FormGroup,
-  ReactiveFormsModule,
-  Validators,
+    FormControl,
+    FormGroup,
+    ReactiveFormsModule,
+    Validators,
 } from "@angular/forms";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
 import { MatFormFieldModule } from "@angular/material/form-field";
@@ -15,52 +15,54 @@ import { ServiceComm } from "../../services/service-comm.service";
 import { JumpTypeService } from "../../services/jump-type.service";
 
 @Component({
-  selector: "app-new-jump-type",
-  templateUrl: "./new-jump-type.component.html",
-  styleUrls: ["./new-jump-type.component.css"],
-  imports: [
-    TranslateModule,
-    MatFormFieldModule,
-    ReactiveFormsModule,
-    MatInputModule,
-    MatButtonModule,
-  ],
+    selector: "app-new-jump-type",
+    templateUrl: "./new-jump-type.component.html",
+    styleUrls: ["./new-jump-type.component.css"],
+    imports: [
+        TranslateModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatButtonModule,
+    ],
 })
 export class NewJumpTypeComponent implements OnInit {
-  public addForm: FormGroup;
+    public addForm: FormGroup;
 
-  constructor(
-    private serviceComm: ServiceComm,
-    private jumpTypeService: JumpTypeService,
-    private translateService: TranslateService,
-  ) {
-    this.addForm = new FormGroup(
-      {
-        jumptypeName: new FormControl("", Validators.required),
-      },
-      { updateOn: "blur" },
-    );
-  }
+    constructor(
+        private serviceComm: ServiceComm,
+        private jumpTypeService: JumpTypeService,
+        private translateService: TranslateService,
+    ) {
+        this.addForm = new FormGroup(
+            {
+                jumptypeName: new FormControl("", Validators.required),
+            },
+            { updateOn: "blur" },
+        );
+    }
+
+    ngOnInit() {
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
 
-  ngOnInit() {
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
         this.updateTitle();
-      }
-    });
+    }
 
-    this.updateTitle();
-  }
+    onSubmit(formData) {
+        this.jumpTypeService
+            .addJumpType(formData.jumptypeName)
+            .subscribe(() => {
+                this.serviceComm.refreshData(AddAction.JumpType);
+            });
+    }
 
-  onSubmit(formData) {
-    this.jumpTypeService.addJumpType(formData.jumptypeName).subscribe(() => {
-      this.serviceComm.refreshData(AddAction.JumpType);
-    });
-  }
-
-  private updateTitle() {
-    this.translateService.get("NewJumpType_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
+    private updateTitle() {
+        this.translateService.get("NewJumpType_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
 }

Front/skydivelogs-app/src/app/new-jump/new-jump.component.css

@@ -1,17 +1,17 @@
 .formNewJumps {
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 
-  min-width: 150px;
-  max-width: 500px;
-  width: 100%;
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
 }
 
 .content {
-  min-height: 90vh;
-  display: flex;
-  justify-content: left;
-  flex-direction: column;
-  align-items: initial;
-  padding-top: 25px;
+    min-height: 90vh;
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    align-items: initial;
+    padding-top: 25px;
 }

Front/skydivelogs-app/src/app/new-jump/new-jump.component.html

@@ -1,270 +1,276 @@
 <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>
-
-  <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"
-      >
-        <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"
+    <div>
+        <button
+            mat-raised-button
+            color="accent"
+            [routerLink]="['/jumps']"
+            [routerLinkActive]="['active']"
+            skipLocationChange
         >
-          {{ dropZone.name }}
-          <mat-icon
-            aria-hidden="false"
-            aria-label="Favorite"
-            *ngIf="dropZone.isFavorite === true"
-            color="primary"
-          >
-            favorite</mat-icon
-          >
-        </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>
+            {{ "NewJump_GoToJump" | translate }}
+        </button>
+        <p>
+            <mat-checkbox [(ngModel)]="resetForm" labelPosition="before">{{
+                "NewJump_ResetForm" | translate
+            }}</mat-checkbox>
+        </p>
+    </div>
 
-    <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>
+    @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>

Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts

@@ -2,12 +2,12 @@ import { Component, OnInit } from "@angular/core";
 import { RouterLink, RouterModule } from "@angular/router";
 import { formatDate } from "@angular/common";
 import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  NativeDateAdapter,
+    DateAdapter,
+    MAT_DATE_FORMATS,
+    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";
@@ -34,245 +34,246 @@ import { GearService } from "../../services/gear.service";
 import { StatsService } from "../../services/stats.service";
 
 export const PICK_FORMATS = {
-  parse: { dateInput: "yy MM dd" },
-  display: {
-    dateInput: "yyyy-MM-dd",
-    monthYearLabel: "yyyy MMM",
-    dateA11yLabel: "yyyy MM dd",
-    monthYearA11yLabel: "yyyy MMMM",
-  },
+    parse: { dateInput: "yy MM dd" },
+    display: {
+        dateInput: "yyyy-MM-dd",
+        monthYearLabel: "yyyy MMM",
+        dateA11yLabel: "yyyy MM dd",
+        monthYearA11yLabel: "yyyy MMMM",
+    },
 };
 class PickDateAdapter extends NativeDateAdapter {
-  override format(date: Date, displayFormat: Object): string {
-    return formatDate(date, displayFormat.toString(), "en");
-  }
+    override format(date: Date, displayFormat: Object): string {
+        return formatDate(date, displayFormat.toString(), "en");
+    }
 }
 
 @Component({
-  selector: "app-new-jump",
-  templateUrl: "./new-jump.component.html",
-  styleUrls: ["./new-jump.component.css"],
-  providers: [
-    { provide: DateAdapter, useClass: PickDateAdapter },
-    { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS },
-  ],
-  imports: [
-    TranslateModule,
-    CommonModule,
-    RouterLink,
-    FormsModule,
-    RouterModule,
-    MatIconModule,
-    MatOptionModule,
-    MatFormFieldModule,
-    MatCheckboxModule,
-    MatAutocompleteModule,
-    MatDatepickerModule,
-    MatProgressSpinnerModule,
-    MatFormFieldModule,
-    ReactiveFormsModule,
-    MatInputModule,
-    MatButtonModule,
-  ],
+    selector: "app-new-jump",
+    templateUrl: "./new-jump.component.html",
+    styleUrls: ["./new-jump.component.css"],
+    providers: [
+        { provide: DateAdapter, useClass: PickDateAdapter },
+        { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS },
+    ],
+    imports: [
+        TranslateModule,
+        RouterLink,
+        FormsModule,
+        RouterModule,
+        MatIconModule,
+        MatOptionModule,
+        MatFormFieldModule,
+        MatCheckboxModule,
+        MatAutocompleteModule,
+        MatDatepickerModule,
+        MatProgressSpinnerModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatButtonModule,
+    ],
 })
 export class NewJumpComponent implements OnInit {
-  public beginDate: Date;
-  public endDate: Date;
-  public exitAltitude: number;
-  public deployAltitude: number;
-  public countOfJumps: number;
-  public selectedDz: DropZoneResp;
-  public selectedGear: GearResp;
-  public selectedAircraft: AircraftResp;
-  public selectedJumpType: JumpTypeResp;
-  public withCutaway: boolean;
-  public isSpecial: boolean;
-  public listOfJumpType: Array<JumpTypeResp>;
-  public listOfAircraft: Array<AircraftResp>;
-  public listOfFilteredDropZone: Array<DropZoneResp>;
-  public listOfGear: Array<GearResp>;
-  public comments: string;
-  public resetForm: boolean;
-  private countDatasLoaded: number;
-  private pendingAddRequest: boolean;
-  private listOfDropZone: Array<DropZoneResp>;
-  public maxDate: Date;
+    public beginDate: Date;
+    public endDate: Date;
+    public exitAltitude: number;
+    public deployAltitude: number;
+    public countOfJumps: number;
+    public selectedDz: DropZoneResp;
+    public selectedGear: GearResp;
+    public selectedAircraft: AircraftResp;
+    public selectedJumpType: JumpTypeResp;
+    public withCutaway: boolean;
+    public isSpecial: boolean;
+    public listOfJumpType: Array<JumpTypeResp>;
+    public listOfAircraft: Array<AircraftResp>;
+    public listOfFilteredDropZone: Array<DropZoneResp>;
+    public listOfGear: Array<GearResp>;
+    public comments: string;
+    public resetForm: boolean;
+    private countDatasLoaded: number;
+    private pendingAddRequest: boolean;
+    private listOfDropZone: Array<DropZoneResp>;
+    public maxDate: Date;
 
-  constructor(
-    private serviceComm: ServiceComm,
-    private serviceJump: JumpService,
-    private serviceJumpType: JumpTypeService,
-    private serviceAircraft: AircraftService,
-    private serviceDropzone: DropzoneService,
-    private serviceGear: GearService,
-    private dateService: DateService,
-    private translateService: TranslateService,
-    private statsService: StatsService
-  ) {}
+    constructor(
+        private serviceComm: ServiceComm,
+        private serviceJump: JumpService,
+        private serviceJumpType: JumpTypeService,
+        private serviceAircraft: AircraftService,
+        private serviceDropzone: DropzoneService,
+        private serviceGear: GearService,
+        private dateService: DateService,
+        private translateService: TranslateService,
+        private statsService: StatsService,
+    ) {}
 
-  ngOnInit() {
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
+    ngOnInit() {
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
         this.updateTitle();
-      }
-    });
-    this.updateTitle();
 
-    this.maxDate = this.dateService.addDays(new Date(), 1);
+        this.maxDate = this.dateService.addDays(new Date(), 1);
 
-    this.pendingAddRequest = false;
-    this.initForm();
-    this.getListOfJumpTypes();
-  }
+        this.pendingAddRequest = false;
+        this.initForm();
+        this.getListOfJumpTypes();
+    }
 
-  onFormSubmit() {
-    this.pendingAddRequest = true;
+    onFormSubmit() {
+        if (this.isValidatedForm()) {
+            this.pendingAddRequest = true;
 
-    this.serviceJump
-      .addListOfJump(
-        this.selectedJumpType.id,
-        this.selectedAircraft.id,
-        this.selectedDz.id,
-        this.selectedGear.id,
-        this.withCutaway === undefined ? false : this.withCutaway,
-        this.beginDate,
-        this.endDate,
-        this.exitAltitude,
-        this.deployAltitude,
-        this.countOfJumps,
-        this.comments,
-        this.isSpecial === undefined ? false : this.isSpecial
-      )
-      .subscribe(() => {
-        this.statsService.resetStats();
+            this.serviceJump
+                .addListOfJump(
+                    this.selectedJumpType.id,
+                    this.selectedAircraft.id,
+                    this.selectedDz.id,
+                    this.selectedGear.id,
+                    this.withCutaway === undefined ? false : this.withCutaway,
+                    this.beginDate,
+                    this.endDate,
+                    this.exitAltitude,
+                    this.deployAltitude,
+                    this.countOfJumps,
+                    this.comments,
+                    this.isSpecial === undefined ? false : this.isSpecial,
+                )
+                .subscribe(() => {
+                    this.statsService.resetStats();
+                    this.comments = undefined;
+                    this.withCutaway = false;
+                    this.isSpecial = false;
+
+                    if (this.resetForm === true) {
+                        this.initForm();
+                    }
+                    this.pendingAddRequest = false;
+                });
+        }
+    }
+
+    public isValidatedForm(): boolean {
+        return (
+            this.selectedDz !== undefined &&
+            this.selectedDz.id !== undefined &&
+            this.selectedGear !== undefined &&
+            this.selectedGear.id !== undefined &&
+            this.selectedAircraft !== undefined &&
+            this.selectedAircraft.id !== undefined &&
+            this.selectedJumpType !== undefined &&
+            this.selectedJumpType.id !== undefined &&
+            this.exitAltitude !== undefined &&
+            typeof this.exitAltitude === "number" &&
+            this.deployAltitude !== undefined &&
+            typeof this.deployAltitude === "number" &&
+            this.countOfJumps !== undefined &&
+            typeof this.countOfJumps === "number"
+        );
+    }
+
+    private getListOfJumpTypes() {
+        this.serviceJumpType.getListOfJumpTypes().subscribe((data) => {
+            data.sort((a, b) => a.name.localeCompare(b.name));
+            this.listOfJumpType = data;
+            this.countDatasLoaded = 1;
+
+            this.getListOfAircrafts();
+            this.getListOfDropZones();
+            this.getListOfGears();
+        });
+    }
+
+    private getListOfAircrafts() {
+        this.serviceAircraft.getListOfAircrafts(true).subscribe((data) => {
+            data.sort((a, b) => a.name.localeCompare(b.name));
+            this.listOfAircraft = data;
+            this.countDatasLoaded++;
+        });
+    }
+
+    private getListOfDropZones() {
+        this.serviceDropzone.getListOfDropZones(true).subscribe((data) => {
+            data.sort(
+                (a, b) =>
+                    (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0) ||
+                    a.name.localeCompare(b.name),
+            );
+            this.listOfDropZone = data;
+            this.listOfFilteredDropZone = data;
+            this.countDatasLoaded++;
+        });
+    }
+
+    private getListOfGears() {
+        this.serviceGear.getListOfGears().subscribe((data) => {
+            data.sort((a, b) => b.id - a.id);
+            this.listOfGear = data;
+            this.countDatasLoaded++;
+        });
+    }
+
+    private initForm() {
+        this.endDate = new Date();
+        this.endDate.setHours(0, 0, 0, 0);
+        this.beginDate = this.dateService.addDays(this.endDate, -1);
+
+        this.exitAltitude = 4000;
+        this.deployAltitude = 1000;
+        this.countOfJumps = 1;
+
+        this.selectedDz = undefined;
+        this.selectedGear = undefined;
+        this.selectedAircraft = undefined;
+        this.selectedJumpType = undefined;
+
+        this.listOfFilteredDropZone = this.listOfDropZone;
         this.comments = undefined;
+
         this.withCutaway = false;
         this.isSpecial = false;
-
-        if (this.resetForm === true) {
-          this.initForm();
-        }
-        this.pendingAddRequest = false;
-      });
-  }
-
-  public isValidatedForm(): boolean {
-    return (
-      this.selectedDz !== undefined &&
-      this.selectedDz.id !== undefined &&
-      this.selectedGear !== undefined &&
-      this.selectedGear.id !== undefined &&
-      this.selectedAircraft !== undefined &&
-      this.selectedAircraft.id !== undefined &&
-      this.selectedJumpType !== undefined &&
-      this.selectedJumpType.id !== undefined &&
-      this.exitAltitude !== undefined &&
-      typeof this.exitAltitude === "number" &&
-      this.deployAltitude !== undefined &&
-      typeof this.deployAltitude === "number" &&
-      this.countOfJumps !== undefined &&
-      typeof this.countOfJumps === "number"
-    );
-  }
-
-  private getListOfJumpTypes() {
-    this.serviceJumpType.getListOfJumpTypes().subscribe((data) => {
-      data.sort((a, b) => a.name.localeCompare(b.name));
-      this.listOfJumpType = data;
-      this.countDatasLoaded = 1;
-
-      this.getListOfAircrafts();
-      this.getListOfDropZones();
-      this.getListOfGears();
-    });
-  }
-
-  private getListOfAircrafts() {
-    this.serviceAircraft.getListOfAircrafts(true).subscribe((data) => {
-      data.sort((a, b) => a.name.localeCompare(b.name));
-      this.listOfAircraft = data;
-      this.countDatasLoaded++;
-    });
-  }
-
-  private getListOfDropZones() {
-    this.serviceDropzone.getListOfDropZones(true).subscribe((data) => {
-      data.sort(
-        (a, b) =>
-          (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0) ||
-          a.name.localeCompare(b.name)
-      );
-      this.listOfDropZone = data;
-      this.listOfFilteredDropZone = data;
-      this.countDatasLoaded++;
-    });
-  }
-
-  private getListOfGears() {
-    this.serviceGear.getListOfGears().subscribe((data) => {
-      data.sort((a, b) => b.id - a.id);
-      this.listOfGear = data;
-      this.countDatasLoaded++;
-    });
-  }
-
-  private initForm() {
-    this.endDate = new Date();
-    this.endDate.setHours(0, 0, 0, 0);
-    this.beginDate = this.dateService.addDays(this.endDate, -1);
-
-    this.exitAltitude = 4000;
-    this.deployAltitude = 1000;
-    this.countOfJumps = 1;
-
-    this.selectedDz = undefined;
-    this.selectedGear = undefined;
-    this.selectedAircraft = undefined;
-    this.selectedJumpType = undefined;
-
-    this.listOfFilteredDropZone = this.listOfDropZone;
-    this.comments = undefined;
-
-    this.withCutaway = false;
-    this.isSpecial = false;
-  }
-
-  public displayNameFn(data?: any): string | undefined {
-    return data ? data.name : undefined;
-  }
-  public displayGearFn(data?: GearResp): string | undefined {
-    return data ? `${data.name} (${data.mainCanopy})` : undefined;
-  }
-
-  public onChangeDz(event: any) {
-    let filterValue: string;
-
-    if (event.id === undefined) {
-      filterValue = event.toLowerCase();
-
-      this.listOfFilteredDropZone = this.listOfDropZone;
-      this.listOfFilteredDropZone = this.listOfFilteredDropZone.filter(
-        (option) => option.name.toLowerCase().includes(filterValue)
-      );
     }
-  }
 
-  public onChangeBeginDate(event: any) {
-    this.endDate = event;
-  }
+    public displayNameFn(data?: any): string | undefined {
+        return data ? data.name : undefined;
+    }
+    public displayGearFn(data?: GearResp): string | undefined {
+        return data ? `${data.name} (${data.mainCanopy})` : undefined;
+    }
 
-  public notLoadingToDisplay(): boolean {
-    return !(this.pendingAddRequest || this.countDatasLoaded !== 4);
-  }
+    public onChangeDz(event: any) {
+        let filterValue: string;
 
-  public resetDz() {
-    this.selectedDz = undefined;
-    this.onChangeDz("");
-  }
+        if (event.id === undefined) {
+            filterValue = event.toLowerCase();
 
-  private updateTitle() {
-    this.translateService.get("NewJump_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
+            this.listOfFilteredDropZone = this.listOfDropZone;
+            this.listOfFilteredDropZone = this.listOfFilteredDropZone.filter(
+                (option) => option.name.toLowerCase().includes(filterValue),
+            );
+        }
+    }
+
+    public onChangeBeginDate(event: any) {
+        this.endDate = event;
+    }
+
+    public notLoadingToDisplay(): boolean {
+        return !(this.pendingAddRequest || this.countDatasLoaded !== 4);
+    }
+
+    public resetDz() {
+        this.selectedDz = undefined;
+        this.onChangeDz("");
+    }
+
+    private updateTitle() {
+        this.translateService.get("NewJump_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
 }

Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.css

@@ -1,18 +1,17 @@
 .formNewJumps {
     display: flex;
     flex-direction: column;
-  
+
     min-width: 150px;
     max-width: 500px;
     width: 100%;
-  }
-  
-  .content {
+}
+
+.content {
     min-height: 90vh;
     display: flex;
     justify-content: left;
     flex-direction: column;
     align-items: initial;
     padding-top: 25px;
-  }
-  
+}

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

@@ -1,145 +1,153 @@
 <div class="content">
-  <div>
-    <button
-      mat-raised-button
-      color="accent"
-      [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"
-      >
-        <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"
+    <div>
+        <button
+            mat-raised-button
+            color="accent"
+            [routerLink]="['/tunnelFlights']"
+            [routerLinkActive]="['active']"
+            skipLocationChange
         >
-          {{ 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>
+            {{ "NewTunnelFlight_GoToJump" | translate }}
+        </button>
+    </div>
 
-    <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-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
+    @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>

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

@@ -2,12 +2,12 @@ import { Component, OnInit } from "@angular/core";
 import { RouterLink, RouterModule } from "@angular/router";
 import { formatDate } from "@angular/common";
 import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  NativeDateAdapter,
+    DateAdapter,
+    MAT_DATE_FORMATS,
+    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";
@@ -28,170 +28,171 @@ import { JumpTypeService } from "../../services/jump-type.service";
 import { DateService } from "../../services/date.service";
 
 export const PICK_FORMATS = {
-  parse: { dateInput: "yy MM dd" },
-  display: {
-    dateInput: "yyyy-MM-dd",
-    monthYearLabel: "yyyy MMM",
-    dateA11yLabel: "yyyy MM dd",
-    monthYearA11yLabel: "yyyy MMMM",
-  },
+    parse: { dateInput: "yy MM dd" },
+    display: {
+        dateInput: "yyyy-MM-dd",
+        monthYearLabel: "yyyy MMM",
+        dateA11yLabel: "yyyy MM dd",
+        monthYearA11yLabel: "yyyy MMMM",
+    },
 };
 class PickDateAdapter extends NativeDateAdapter {
-  override format(date: Date, displayFormat: Object): string {
-    return formatDate(date, displayFormat.toString(), "en");
-  }
+    override format(date: Date, displayFormat: Object): string {
+        return formatDate(date, displayFormat.toString(), "en");
+    }
 }
 
 @Component({
-  selector: "app-new-tunnel-flight",
-  templateUrl: "./new-tunnel-flight.component.html",
-  styleUrls: ["./new-tunnel-flight.component.css"],
-  providers: [
-    { provide: DateAdapter, useClass: PickDateAdapter },
-    { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS },
-  ],
-  imports: [
-    TranslateModule,
-    CommonModule,
-    RouterModule,
-    RouterLink,
-    FormsModule,
-    MatFormFieldModule,
-    ReactiveFormsModule,
-    MatAutocompleteModule,
-    MatInputModule,
-    MatButtonModule,
-    MatIconModule,
-    MatFormFieldModule,
-    MatOptionModule,
-    MatDatepickerModule,
-    MatProgressSpinnerModule,
-  ],
+    selector: "app-new-tunnel-flight",
+    templateUrl: "./new-tunnel-flight.component.html",
+    styleUrls: ["./new-tunnel-flight.component.css"],
+    providers: [
+        { provide: DateAdapter, useClass: PickDateAdapter },
+        { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS },
+    ],
+    imports: [
+        TranslateModule,
+        RouterModule,
+        RouterLink,
+        FormsModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatAutocompleteModule,
+        MatInputModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatOptionModule,
+        MatDatepickerModule,
+        MatProgressSpinnerModule,
+    ],
 })
 export class NewTunnelFlightComponent implements OnInit {
-  public flightDate: Date;
-  public minutesOfFlight: number;
-  public selectedTunnel: TunnelResp;
-  public selectedJumpType: JumpTypeResp;
-  public listOfTunnel: Array<TunnelResp>;
-  public listOfFilteredTunnel: Array<TunnelResp>;
-  public resetForm: boolean;
-  public comments: string;
-  private countDatasLoaded: number;
-  private pendingAddRequest: boolean;
-  public listOfJumpType: Array<JumpTypeResp>;
-  public maxDate: Date;
+    public flightDate: Date;
+    public minutesOfFlight: number;
+    public selectedTunnel: TunnelResp;
+    public selectedJumpType: JumpTypeResp;
+    public listOfTunnel: Array<TunnelResp>;
+    public listOfFilteredTunnel: Array<TunnelResp>;
+    public resetForm: boolean;
+    public comments: string;
+    private countDatasLoaded: number;
+    private pendingAddRequest: boolean;
+    public listOfJumpType: Array<JumpTypeResp>;
+    public maxDate: Date;
 
-  constructor(
-    private serviceComm: ServiceComm,
-    private serviceTunnel: TunnelService,
-    private serviceTunnelFlight: TunnelFlightService,
-    private serviceJumpType: JumpTypeService,
-    private translateService: TranslateService,
-    private dateService: DateService
-  ) {}
+    constructor(
+        private serviceComm: ServiceComm,
+        private serviceTunnel: TunnelService,
+        private serviceTunnelFlight: TunnelFlightService,
+        private serviceJumpType: JumpTypeService,
+        private translateService: TranslateService,
+        private dateService: DateService,
+    ) {}
 
-  ngOnInit() {
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
+    ngOnInit() {
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
         this.updateTitle();
-      }
-    });
-    this.updateTitle();
 
-    this.maxDate = this.dateService.addDays(new Date(), 1);
-    this.countDatasLoaded = 0;
-    this.pendingAddRequest = false;
-    this.initForm();
-    this.getListOfTunnels();
-    this.getListOfJumpTypes();
-  }
-
-  public onFormSubmit() {
-    this.pendingAddRequest = true;
-
-    this.serviceTunnelFlight
-      .addFlight(
-        this.selectedTunnel.id,
-        this.selectedJumpType.id,
-        this.flightDate,
-        this.minutesOfFlight,
-        this.comments
-      )
-      .subscribe(() => {
-        this.comments = undefined;
-
-        if (this.resetForm === true) {
-          this.initForm();
-        }
+        this.maxDate = this.dateService.addDays(new Date(), 1);
+        this.countDatasLoaded = 0;
         this.pendingAddRequest = false;
-      });
-  }
-
-  public isValidatedForm(): boolean {
-    return (
-      this.selectedTunnel !== undefined &&
-      this.selectedTunnel.id !== undefined &&
-      this.minutesOfFlight !== undefined &&
-      typeof this.minutesOfFlight === "number"
-    );
-  }
-
-  private getListOfTunnels() {
-    this.serviceTunnel.getListOfTunnels().subscribe((data) => {
-      data.sort((a, b) => a.name.localeCompare(b.name));
-      this.listOfTunnel = data;
-      this.listOfFilteredTunnel = data;
-      this.countDatasLoaded++;
-    });
-  }
-
-  private getListOfJumpTypes() {
-    this.serviceJumpType.getListOfJumpTypesForTunnel().subscribe((data) => {
-      data.sort((a, b) => a.name.localeCompare(b.name));
-      this.listOfJumpType = data;
-      this.countDatasLoaded++;
-    });
-  }
-
-  public notLoadingToDisplay(): boolean {
-    return !(this.pendingAddRequest || this.countDatasLoaded !== 2);
-  }
-
-  private updateTitle() {
-    this.translateService.get("NewTunnelFlight_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
-
-  private initForm() {
-    this.flightDate = new Date();
-    this.flightDate.setHours(0, 0, 0, 0);
-
-    this.minutesOfFlight = 1;
-    this.selectedTunnel = undefined;
-    this.comments = undefined;
-  }
-
-  public resetTunnel() {
-    this.selectedTunnel = undefined;
-    this.onChangeTunnel("");
-  }
-
-  public onChangeTunnel(event: any) {
-    let filterValue: string;
-
-    if (event.id === undefined) {
-      filterValue = event.toLowerCase();
-
-      this.listOfFilteredTunnel = this.listOfTunnel;
-      this.listOfFilteredTunnel = this.listOfFilteredTunnel.filter((option) =>
-        option.name.toLowerCase().includes(filterValue)
-      );
+        this.initForm();
+        this.getListOfTunnels();
+        this.getListOfJumpTypes();
     }
-  }
 
-  public displayNameFn(data?: any): string | undefined {
-    return data ? data.name : undefined;
-  }
+    public onFormSubmit() {
+        if (this.isValidatedForm()) {
+            this.pendingAddRequest = true;
+
+            this.serviceTunnelFlight
+                .addFlight(
+                    this.selectedTunnel.id,
+                    this.selectedJumpType.id,
+                    this.flightDate,
+                    this.minutesOfFlight,
+                    this.comments,
+                )
+                .subscribe(() => {
+                    this.comments = undefined;
+
+                    if (this.resetForm === true) {
+                        this.initForm();
+                    }
+                    this.pendingAddRequest = false;
+                });
+        }
+    }
+
+    public isValidatedForm(): boolean {
+        return (
+            this.selectedTunnel !== undefined &&
+            this.selectedTunnel.id !== undefined &&
+            this.minutesOfFlight !== undefined &&
+            typeof this.minutesOfFlight === "number"
+        );
+    }
+
+    private getListOfTunnels() {
+        this.serviceTunnel.getListOfTunnels().subscribe((data) => {
+            data.sort((a, b) => a.name.localeCompare(b.name));
+            this.listOfTunnel = data;
+            this.listOfFilteredTunnel = data;
+            this.countDatasLoaded++;
+        });
+    }
+
+    private getListOfJumpTypes() {
+        this.serviceJumpType.getListOfJumpTypesForTunnel().subscribe((data) => {
+            data.sort((a, b) => a.name.localeCompare(b.name));
+            this.listOfJumpType = data;
+            this.countDatasLoaded++;
+        });
+    }
+
+    public notLoadingToDisplay(): boolean {
+        return !(this.pendingAddRequest || this.countDatasLoaded !== 2);
+    }
+
+    private updateTitle() {
+        this.translateService.get("NewTunnelFlight_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
+
+    private initForm() {
+        this.flightDate = new Date();
+        this.flightDate.setHours(0, 0, 0, 0);
+
+        this.minutesOfFlight = 1;
+        this.selectedTunnel = undefined;
+        this.comments = undefined;
+    }
+
+    public resetTunnel() {
+        this.selectedTunnel = undefined;
+        this.onChangeTunnel("");
+    }
+
+    public onChangeTunnel(event: any) {
+        let filterValue: string;
+
+        if (event.id === undefined) {
+            filterValue = event.toLowerCase();
+
+            this.listOfFilteredTunnel = this.listOfTunnel;
+            this.listOfFilteredTunnel = this.listOfFilteredTunnel.filter(
+                (option) => option.name.toLowerCase().includes(filterValue),
+            );
+        }
+    }
+
+    public displayNameFn(data?: any): string | undefined {
+        return data ? data.name : undefined;
+    }
 }

Front/skydivelogs-app/src/app/summary/summary.component.css

@@ -1,49 +1,49 @@
 .mat-row td {
-  padding-right: 15px;
+    padding-right: 15px;
 }
 
 .labelTab {
-  padding: 5px;
-  cursor: pointer;
-  text-decoration: underline;
-  font-weight: bold;
-  background-color: lightgray;
+    padding: 5px;
+    cursor: pointer;
+    text-decoration: underline;
+    font-weight: bold;
+    background-color: lightgray;
 }
 
 .labelTab.selected {
-  background-color: gray !important;
+    background-color: gray !important;
 }
 
 .content {
-  min-height: 90vh;
-  display: flex;
-  justify-content: left;
-  flex-direction: column;
-  align-items: initial;
-  padding-top: 25px;
+    min-height: 90vh;
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    align-items: initial;
+    padding-top: 25px;
 }
 
 .left160 {
-  clear: both;
-  float: left;
-  width: 160px;
+    clear: both;
+    float: left;
+    width: 160px;
 }
 
 .paragraph {
-  margin-bottom: 10px;
+    margin-bottom: 10px;
 }
 
 .containerFlex {
-  display: flex;
-  flex-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
 }
 .contentFlex {
-  flex: 45%;
+    flex: 45%;
 }
 
 .chart-container {
-  position: relative;
-  margin: auto;
-  height: 80vh;
-  width: 80vw;
+    position: relative;
+    margin: auto;
+    height: 80vh;
+    width: 80vw;
 }

Front/skydivelogs-app/src/app/summary/summary.component.html

@@ -1,182 +1,259 @@
 <div class="content">
-  <div class="paragraph">
-    <label class="left160">{{ "Summary_TotalJumps" | translate }}</label>
-    <span>: {{ totalJumps }}</span>
-  </div>
+    <div class="paragraph">
+        <label class="left160">{{ "Summary_TotalJumps" | translate }}</label>
+        <span>: {{ totalJumps }}</span>
+    </div>
 
-  <div class="paragraph">
-    <label class="left160">{{ "Summary_TotalCutaways" | translate }}</label>
-    <span>: {{ totalCutaways }}</span>
-  </div>
+    <div class="paragraph">
+        <label class="left160">{{ "Summary_TotalCutaways" | translate }}</label>
+        <span>: {{ totalCutaways }}</span>
+    </div>
 
-  <div class="paragraph">
-    <label class="left160">{{ "Summary_LastJump" | translate }}</label>
-    <span>: {{ lastJump }}</span>
-  </div>
+    <div class="paragraph">
+        <label class="left160">{{ "Summary_LastJump" | translate }}</label>
+        <span>: {{ lastJump }}</span>
+    </div>
 
-  <div class="paragraph" style="margin-top: 20px">
-    <label class="left160">{{ "Summary_Refresh" | translate }}</label>
-    <mat-icon
-      aria-hidden="false"
-      aria-label="Force the refresh of the stats"
-      style="cursor: pointer"
-      (click)="refreshStats()"
-      svgIcon="reset"
-    ></mat-icon>
-  </div>
+    <div class="paragraph" style="margin-top: 20px">
+        <label class="left160">{{ "Summary_Refresh" | translate }}</label>
+        <mat-icon
+            aria-hidden="false"
+            aria-label="Force the refresh of the stats"
+            style="cursor: pointer"
+            (click)="refreshStats()"
+            svgIcon="reset"
+        ></mat-icon>
+    </div>
 
-  <mat-tab-group
-    mat-align-tabs="left"
-    animationDuration="0ms"
-    (selectedIndex)="(0)"
-    (selectedTabChange)="onTabChanged($event)"
-  >
-    <mat-tab label="{{ 'Summary_LastMonth_Title' | translate }}">
-      <ng-template matTabContent>
-        <div class="containerFlex">
-          <fieldset class="contentFlex">
-            <legend>{{ "Summary_LastMonth_ByDz" | translate }}</legend>
-            <table mat-table [dataSource]="dsJumpForLastMonthByDz">
-              <ng-container matColumnDef="label">
-                <td mat-cell *matCellDef="let element">{{ element.label }}</td>
-              </ng-container>
-              <ng-container matColumnDef="nb">
-                <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
-              </ng-container>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-            </table>
-          </fieldset>
-          <fieldset class="contentFlex">
-            <legend>{{ "Summary_LastMonth_ByJumpType" | translate }}</legend>
-            <table mat-table [dataSource]="dsJumpForLastMonthByJumpType">
-              <ng-container matColumnDef="label">
-                <td mat-cell *matCellDef="let element">{{ element.label }}</td>
-              </ng-container>
-              <ng-container matColumnDef="nb">
-                <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
-              </ng-container>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-            </table>
-          </fieldset>
-        </div>
-      </ng-template>
-    </mat-tab>
+    <mat-tab-group
+        mat-align-tabs="left"
+        animationDuration="0ms"
+        (selectedIndex)="(0)"
+        (selectedTabChange)="onTabChanged($event)"
+    >
+        <mat-tab label="{{ 'Summary_LastMonth_Title' | translate }}">
+            <ng-template matTabContent>
+                <div class="containerFlex">
+                    <fieldset class="contentFlex">
+                        <legend>
+                            {{ "Summary_LastMonth_ByDz" | translate }}
+                        </legend>
+                        <table mat-table [dataSource]="dsJumpForLastMonthByDz">
+                            <ng-container matColumnDef="label">
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.label }}
+                                </td>
+                            </ng-container>
+                            <ng-container matColumnDef="nb">
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.nb }}
+                                </td>
+                            </ng-container>
+                            <tr
+                                mat-row
+                                *matRowDef="let row; columns: displayedColumns"
+                            ></tr>
+                        </table>
+                    </fieldset>
+                    <fieldset class="contentFlex">
+                        <legend>
+                            {{ "Summary_LastMonth_ByJumpType" | translate }}
+                        </legend>
+                        <table
+                            mat-table
+                            [dataSource]="dsJumpForLastMonthByJumpType"
+                        >
+                            <ng-container matColumnDef="label">
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.label }}
+                                </td>
+                            </ng-container>
+                            <ng-container matColumnDef="nb">
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.nb }}
+                                </td>
+                            </ng-container>
+                            <tr
+                                mat-row
+                                *matRowDef="let row; columns: displayedColumns"
+                            ></tr>
+                        </table>
+                    </fieldset>
+                </div>
+            </ng-template>
+        </mat-tab>
 
-    <mat-tab label="{{ 'Summary_LastYear_Title' | translate }}">
-      <ng-template matTabContent>
-        <div class="containerFlex">
-          <fieldset class="contentFlex">
-            <legend>{{ "Summary_LastYear_ByDz" | translate }}</legend>
-            <table mat-table [dataSource]="dsJumpForLastYearByDz">
-              <ng-container matColumnDef="label">
-                <td mat-cell *matCellDef="let element">{{ element.label }}</td>
-              </ng-container>
-              <ng-container matColumnDef="nb">
-                <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
-              </ng-container>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-            </table>
-          </fieldset>
-          <fieldset class="contentFlex">
-            <legend>{{ "Summary_LastYear_ByJumpType" | translate }}</legend>
-            <table mat-table [dataSource]="dsJumpForLastYearByJumpType">
-              <ng-container matColumnDef="label">
-                <td mat-cell *matCellDef="let element">{{ element.label }}</td>
-              </ng-container>
-              <ng-container matColumnDef="nb">
-                <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
-              </ng-container>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-            </table>
-          </fieldset>
-        </div>
-      </ng-template>
-    </mat-tab>
+        <mat-tab label="{{ 'Summary_LastYear_Title' | translate }}">
+            <ng-template matTabContent>
+                <div class="containerFlex">
+                    <fieldset class="contentFlex">
+                        <legend>
+                            {{ "Summary_LastYear_ByDz" | translate }}
+                        </legend>
+                        <table mat-table [dataSource]="dsJumpForLastYearByDz">
+                            <ng-container matColumnDef="label">
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.label }}
+                                </td>
+                            </ng-container>
+                            <ng-container matColumnDef="nb">
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.nb }}
+                                </td>
+                            </ng-container>
+                            <tr
+                                mat-row
+                                *matRowDef="let row; columns: displayedColumns"
+                            ></tr>
+                        </table>
+                    </fieldset>
+                    <fieldset class="contentFlex">
+                        <legend>
+                            {{ "Summary_LastYear_ByJumpType" | translate }}
+                        </legend>
+                        <table
+                            mat-table
+                            [dataSource]="dsJumpForLastYearByJumpType"
+                        >
+                            <ng-container matColumnDef="label">
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.label }}
+                                </td>
+                            </ng-container>
+                            <ng-container matColumnDef="nb">
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.nb }}
+                                </td>
+                            </ng-container>
+                            <tr
+                                mat-row
+                                *matRowDef="let row; columns: displayedColumns"
+                            ></tr>
+                        </table>
+                    </fieldset>
+                </div>
+            </ng-template>
+        </mat-tab>
 
-    <mat-tab label="{{ 'Summary_ByDz_Title' | translate }}">
-      <ng-template matTabContent>
-        <table mat-table [dataSource]="dsNbJumpByDz">
-          <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
-          </ng-container>
-          <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
-          </ng-container>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-        </table>
-      </ng-template>
-    </mat-tab>
+        <mat-tab label="{{ 'Summary_ByDz_Title' | translate }}">
+            <ng-template matTabContent>
+                <table mat-table [dataSource]="dsNbJumpByDz">
+                    <ng-container matColumnDef="label">
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.label }}
+                        </td>
+                    </ng-container>
+                    <ng-container matColumnDef="nb">
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.nb }}
+                        </td>
+                    </ng-container>
+                    <tr
+                        mat-row
+                        *matRowDef="let row; columns: displayedColumns"
+                    ></tr>
+                </table>
+            </ng-template>
+        </mat-tab>
 
-    <mat-tab label="{{ 'Summary_ByAircraft_Title' | translate }}">
-      <ng-template matTabContent>
-        <table mat-table [dataSource]="dsNbJumpByAircraft">
-          <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
-          </ng-container>
-          <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
-          </ng-container>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-        </table>
-      </ng-template>
-    </mat-tab>
+        <mat-tab label="{{ 'Summary_ByAircraft_Title' | translate }}">
+            <ng-template matTabContent>
+                <table mat-table [dataSource]="dsNbJumpByAircraft">
+                    <ng-container matColumnDef="label">
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.label }}
+                        </td>
+                    </ng-container>
+                    <ng-container matColumnDef="nb">
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.nb }}
+                        </td>
+                    </ng-container>
+                    <tr
+                        mat-row
+                        *matRowDef="let row; columns: displayedColumns"
+                    ></tr>
+                </table>
+            </ng-template>
+        </mat-tab>
 
-    <mat-tab label="{{ 'Summary_ByGear_Title' | translate }}">
-      <ng-template matTabContent>
-        <table mat-table [dataSource]="dsNbJumpByGear">
-          <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
-          </ng-container>
-          <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
-          </ng-container>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-        </table>
-      </ng-template>
-    </mat-tab>
+        <mat-tab label="{{ 'Summary_ByGear_Title' | translate }}">
+            <ng-template matTabContent>
+                <table mat-table [dataSource]="dsNbJumpByGear">
+                    <ng-container matColumnDef="label">
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.label }}
+                        </td>
+                    </ng-container>
+                    <ng-container matColumnDef="nb">
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.nb }}
+                        </td>
+                    </ng-container>
+                    <tr
+                        mat-row
+                        *matRowDef="let row; columns: displayedColumns"
+                    ></tr>
+                </table>
+            </ng-template>
+        </mat-tab>
 
-    <mat-tab label="{{ 'Summary_ByJumpType_Title' | translate }}">
-      <ng-template matTabContent>
-        <table mat-table [dataSource]="dsNbJumpByType">
-          <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
-          </ng-container>
-          <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
-          </ng-container>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-        </table>
-      </ng-template>
-    </mat-tab>
+        <mat-tab label="{{ 'Summary_ByJumpType_Title' | translate }}">
+            <ng-template matTabContent>
+                <table mat-table [dataSource]="dsNbJumpByType">
+                    <ng-container matColumnDef="label">
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.label }}
+                        </td>
+                    </ng-container>
+                    <ng-container matColumnDef="nb">
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.nb }}
+                        </td>
+                    </ng-container>
+                    <tr
+                        mat-row
+                        *matRowDef="let row; columns: displayedColumns"
+                    ></tr>
+                </table>
+            </ng-template>
+        </mat-tab>
 
-    <mat-tab label="{{ 'Summary_ByYear_Title' | translate }}">
-      <ng-template matTabContent>
-        <table mat-table [dataSource]="dsNbJumpByYear">
-          <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
-          </ng-container>
-          <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
-          </ng-container>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-        </table>
-      </ng-template>
-    </mat-tab>
+        <mat-tab label="{{ 'Summary_ByYear_Title' | translate }}">
+            <ng-template matTabContent>
+                <table mat-table [dataSource]="dsNbJumpByYear">
+                    <ng-container matColumnDef="label">
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.label }}
+                        </td>
+                    </ng-container>
+                    <ng-container matColumnDef="nb">
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.nb }}
+                        </td>
+                    </ng-container>
+                    <tr
+                        mat-row
+                        *matRowDef="let row; columns: displayedColumns"
+                    ></tr>
+                </table>
+            </ng-template>
+        </mat-tab>
 
-    <mat-tab label="{{ 'Summary_ByYearByJumpType_Title' | translate }}">
-      <ng-template matTabContent>
-        <div class="chart-container">
-          <canvas
-            baseChart
-            [data]="barChartData"
-            [options]="barChartOptions"
-            [plugins]="barChartPlugins"
-            [legend]="barChartLegend"
-            [type]="barChartType"
-          >
-          </canvas>
-        </div>
-      </ng-template>
-    </mat-tab>
-  </mat-tab-group>
+        <mat-tab label="{{ 'Summary_ByYearByJumpType_Title' | translate }}">
+            <ng-template matTabContent>
+                <div class="chart-container">
+                    <canvas
+                        baseChart
+                        [data]="barChartData"
+                        [options]="barChartOptions"
+                        [plugins]="barChartPlugins"
+                        [legend]="barChartLegend"
+                        [type]="barChartType"
+                    >
+                    </canvas>
+                </div>
+            </ng-template>
+        </mat-tab>
+    </mat-tab-group>
 </div>

Front/skydivelogs-app/src/app/summary/summary.component.ts

@@ -11,294 +11,297 @@ import { MatIconModule } from "@angular/material/icon";
 import { ServiceComm } from "../../services/service-comm.service";
 import { StatsService } from "../../services/stats.service";
 import {
-  StatsByDzResp,
-  StatsByAircraftResp,
-  StatsByGearResp,
-  StatsByJumpTypeResp,
-  StatsByYearResp,
+    StatsByDzResp,
+    StatsByAircraftResp,
+    StatsByGearResp,
+    StatsByJumpTypeResp,
+    StatsByYearResp,
 } from "../../models/stats";
 
 @Component({
-  selector: "app-summary",
-  templateUrl: "./summary.component.html",
-  styleUrls: ["./summary.component.css"],
-  imports: [
-    MatTabsModule,
-    TranslateModule,
-    BaseChartDirective,
-    MatIconModule,
-    MatTableModule,
-  ],
+    selector: "app-summary",
+    templateUrl: "./summary.component.html",
+    styleUrls: ["./summary.component.css"],
+    imports: [
+        MatTabsModule,
+        TranslateModule,
+        BaseChartDirective,
+        MatIconModule,
+        MatTableModule,
+    ],
 })
 export class SummaryComponent implements OnInit {
-  public dsNbJumpByDz: MatTableDataSource<StatsByDzResp>;
-  public dsNbJumpByAircraft: MatTableDataSource<StatsByAircraftResp>;
-  public dsNbJumpByGear: MatTableDataSource<StatsByGearResp>;
-  public dsNbJumpByType: MatTableDataSource<StatsByJumpTypeResp>;
-  public dsNbJumpByYear: MatTableDataSource<StatsByYearResp>;
-  public dsJumpForLastYearByDz: MatTableDataSource<StatsByDzResp>;
-  public dsJumpForLastYearByJumpType: MatTableDataSource<StatsByJumpTypeResp>;
-  public dsJumpForLastMonthByDz: MatTableDataSource<StatsByDzResp>;
-  public dsJumpForLastMonthByJumpType: MatTableDataSource<StatsByJumpTypeResp>;
-  public displayedColumns: Array<string> = ["label", "nb"];
-  public displayedColumnsByYearByJumpType: Array<string> = [
-    "label",
-    "label2",
-    "nb",
-  ];
+    public dsNbJumpByDz: MatTableDataSource<StatsByDzResp>;
+    public dsNbJumpByAircraft: MatTableDataSource<StatsByAircraftResp>;
+    public dsNbJumpByGear: MatTableDataSource<StatsByGearResp>;
+    public dsNbJumpByType: MatTableDataSource<StatsByJumpTypeResp>;
+    public dsNbJumpByYear: MatTableDataSource<StatsByYearResp>;
+    public dsJumpForLastYearByDz: MatTableDataSource<StatsByDzResp>;
+    public dsJumpForLastYearByJumpType: MatTableDataSource<StatsByJumpTypeResp>;
+    public dsJumpForLastMonthByDz: MatTableDataSource<StatsByDzResp>;
+    public dsJumpForLastMonthByJumpType: MatTableDataSource<StatsByJumpTypeResp>;
+    public displayedColumns: Array<string> = ["label", "nb"];
+    public displayedColumnsByYearByJumpType: Array<string> = [
+        "label",
+        "label2",
+        "nb",
+    ];
 
-  public barChartLegend = true;
-  public barChartPlugins: any = [];
-  public barChartData: ChartData<"line">;
-  public barChartOptions: ChartConfiguration["options"];
-  public barChartType: ChartType;
-  private jumpTypeToColor: Map<string, string>;
+    public barChartLegend = true;
+    public barChartPlugins: any = [];
+    public barChartData: ChartData<"line">;
+    public barChartOptions: ChartConfiguration["options"];
+    public barChartType: ChartType;
+    private jumpTypeToColor: Map<string, string>;
 
-  public totalJumps: number;
-  public totalCutaways: number;
-  public lastJump: string;
-  @ViewChild(MatTabGroup) tabGroup: MatTabGroup;
+    public totalJumps: number;
+    public totalCutaways: number;
+    public lastJump: string;
+    @ViewChild(MatTabGroup) tabGroup: MatTabGroup;
 
-  constructor(
-    private serviceApi: StatsService,
-    private serviceComm: ServiceComm,
-    private translateService: TranslateService,
-  ) {}
+    constructor(
+        private serviceApi: StatsService,
+        private serviceComm: ServiceComm,
+        private translateService: TranslateService,
+    ) {}
 
-  ngOnInit() {
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
+    ngOnInit() {
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
         this.updateTitle();
-      }
-    });
-    this.updateTitle();
 
-    this.serviceApi.getSimpleSummary().subscribe((data) => {
-      this.totalJumps = data.totalJumps;
-      this.totalCutaways = data.totalCutaways;
+        this.serviceApi.getSimpleSummary().subscribe((data) => {
+            this.totalJumps = data.totalJumps;
+            this.totalCutaways = data.totalCutaways;
 
-      const datepipe: DatePipe = new DatePipe("en-US");
-      let formattedDate = datepipe.transform(
-        data.lastJump.jumpDate,
-        "EEEE dd MMMM YYYY",
-      );
-      this.lastJump = formattedDate + " (" + data.lastJump.dropZone.name + ")";
-    });
+            const datepipe: DatePipe = new DatePipe("en-US");
+            let formattedDate = datepipe.transform(
+                data.lastJump.jumpDate,
+                "EEEE dd MMMM yyyy",
+            );
+            this.lastJump =
+                formattedDate + " (" + data.lastJump.dropZone.name + ")";
+        });
 
-    this.serviceApi.getStatsOfLastMonth().subscribe((data) => {
-      data.byDz.sort((a, b) => b.nb - a.nb);
-      this.dsJumpForLastMonthByDz = new MatTableDataSource(data.byDz);
-      data.byJumpType.sort((a, b) => b.nb - a.nb);
-      this.dsJumpForLastMonthByJumpType = new MatTableDataSource(
-        data.byJumpType,
-      );
-    });
+        this.serviceApi.getStatsOfLastMonth().subscribe((data) => {
+            data.byDz.sort((a, b) => b.nb - a.nb);
+            this.dsJumpForLastMonthByDz = new MatTableDataSource(data.byDz);
+            data.byJumpType.sort((a, b) => b.nb - a.nb);
+            this.dsJumpForLastMonthByJumpType = new MatTableDataSource(
+                data.byJumpType,
+            );
+        });
 
-    this.chartConfig();
-  }
-
-  public refreshStats() {
-    this.serviceApi.deleteAllCache();
-    this.tabGroup.selectedIndex = 0;
-  }
-
-  public onTabChanged(event: MatTabChangeEvent) {
-    switch (event.index) {
-      case 0:
-        this.statsLastMonth();
-        break;
-      case 1:
-        this.statsLastYear();
-        break;
-      case 2:
-        this.statsByDz();
-        break;
-      case 3:
-        this.statsByAircraft();
-        break;
-      case 4:
-        this.statsByGear();
-        break;
-      case 5:
-        this.statsByJumpType();
-        break;
-      case 6:
-        this.statsByYear();
-        break;
-      case 7:
-        this.statsByYearByJumpType();
-        break;
+        this.chartConfig();
     }
-  }
 
-  private updateTitle() {
-    this.translateService.get("Summary_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
+    public refreshStats() {
+        this.serviceApi.deleteAllCache();
+        this.tabGroup.selectedIndex = 0;
+    }
 
-  private chartConfig() {
-    this.barChartType = "line";
-    this.barChartOptions = {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          display: true,
-        },
-        colors: {
-          forceOverride: false,
-        },
-      },
-      interaction: {
-        intersect: false,
-        mode: "nearest",
-        axis: "x",
-      },
-      scales: {
-        x: {
-          stacked: false,
-        },
-        y: {
-          stacked: false,
-          beginAtZero: true,
-        },
-      },
-    };
-
-    this.jumpTypeToColor = new Map<string, string>([
-      ["PAC", "#FFD700"],
-      ["Solo", "#FFA500"],
-      ["RW 3", "#40E0D0"],
-      ["RW 4", "#008080"],
-      ["RW 8", "#7FFFD4"],
-      ["RW X", "#114556"],
-      ["FreeFly", "#FFC0CB"],
-      ["FreeStyle", "#FF91A4"],
-      ["Track/Trace", "#87CEEB"],
-      ["Canopy", "#228B22"],
-      ["Landing accuracy", "#FF6347"],
-      ["Wingsuit 1", "#E6E6FA"],
-      ["Wingsuit 2", "#E0B0FF"],
-      ["Wingsuit 3", "#9400D3"],
-    ]);
-  }
-
-  // #region Private methods to get stats
-  private statsByYearByJumpType() {
-    this.serviceApi.getStatsByYearByJumpType().subscribe((data) => {
-      data.sort((a, b) => a.label.localeCompare(b.label));
-
-      let firstYear: number = Number(data[0].label);
-      const now = new Date();
-      const currentYear = now.getFullYear();
-      const nbYears = currentYear - firstYear;
-      let listOfYears = new Array(nbYears).fill(null).map(() => firstYear++);
-
-      // Prepare the list of jump type with am empty array
-      let tmpResults = new Map<string, number[]>();
-      const listOfJumpType = [...new Set(data.map((obj) => obj.label2))];
-      listOfJumpType.forEach((type) => {
-        tmpResults.set(type, new Array(nbYears).fill(NaN));
-      });
-
-      for (let i = 0; i < listOfYears.length; i++) {
-        const year = listOfYears[i].toString();
-
-        let filteredStats = data.filter((d) => d.label == year);
-
-        if (filteredStats.length > 0) {
-          filteredStats.forEach((fs) => {
-            tmpResults.get(fs.label2)[i] = fs.nb;
-          });
+    public onTabChanged(event: MatTabChangeEvent) {
+        switch (event.index) {
+            case 0:
+                this.statsLastMonth();
+                break;
+            case 1:
+                this.statsLastYear();
+                break;
+            case 2:
+                this.statsByDz();
+                break;
+            case 3:
+                this.statsByAircraft();
+                break;
+            case 4:
+                this.statsByGear();
+                break;
+            case 5:
+                this.statsByJumpType();
+                break;
+            case 6:
+                this.statsByYear();
+                break;
+            case 7:
+                this.statsByYearByJumpType();
+                break;
         }
-      }
+    }
 
-      const results: {
-        label: string;
-        data: number[];
-        backgroundColor: string;
-        borderColor: string;
-        pointBackgroundColor: string;
-        fill: boolean;
-        pointRadius: number;
-      }[] = [];
-      tmpResults.forEach((value, key) => {
-        const color = this.jumpTypeToColor.get(key);
-        let tmp = {
-          label: key,
-          data: value,
-          backgroundColor: color,
-          borderColor: color,
-          pointBackgroundColor: color,
-          fill: false,
-          pointRadius: 6,
+    private updateTitle() {
+        this.translateService.get("Summary_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
+
+    private chartConfig() {
+        this.barChartType = "line";
+        this.barChartOptions = {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: true,
+                },
+                colors: {
+                    forceOverride: false,
+                },
+            },
+            interaction: {
+                intersect: false,
+                mode: "nearest",
+                axis: "x",
+            },
+            scales: {
+                x: {
+                    stacked: false,
+                },
+                y: {
+                    stacked: false,
+                    beginAtZero: true,
+                },
+            },
         };
-        results.push(tmp);
-      });
 
-      this.barChartData = {
-        labels: listOfYears,
-        datasets: results,
-      };
-    });
-  }
+        this.jumpTypeToColor = new Map<string, string>([
+            ["PAC", "#FFD700"],
+            ["Solo", "#FFA500"],
+            ["RW 3", "#40E0D0"],
+            ["RW 4", "#008080"],
+            ["RW 8", "#7FFFD4"],
+            ["RW X", "#114556"],
+            ["FreeFly", "#FFC0CB"],
+            ["FreeStyle", "#FF91A4"],
+            ["Track/Trace", "#87CEEB"],
+            ["Canopy", "#228B22"],
+            ["Landing accuracy", "#FF6347"],
+            ["Wingsuit 1", "#E6E6FA"],
+            ["Wingsuit 2", "#E0B0FF"],
+            ["Wingsuit 3", "#9400D3"],
+        ]);
+    }
 
-  private statsByYear() {
-    this.serviceApi.getStatsByYear().subscribe((data) => {
-      data.sort((a, b) => b.label.localeCompare(a.label));
-      this.dsNbJumpByYear = new MatTableDataSource(data);
-    });
-  }
+    // #region Private methods to get stats
+    private statsByYearByJumpType() {
+        this.serviceApi.getStatsByYearByJumpType().subscribe((data) => {
+            data.sort((a, b) => a.label.localeCompare(b.label));
 
-  private statsByJumpType() {
-    this.serviceApi.getStatsByJumpType().subscribe((data) => {
-      data.sort((a, b) => b.nb - a.nb);
-      this.dsNbJumpByType = new MatTableDataSource(data);
-    });
-  }
+            let firstYear: number = Number(data[0].label);
+            const now = new Date();
+            const currentYear = now.getFullYear();
+            const nbYears = currentYear - firstYear;
+            let listOfYears = new Array(nbYears)
+                .fill(null)
+                .map(() => firstYear++);
 
-  private statsByGear() {
-    this.serviceApi.getStatsByGear().subscribe((data) => {
-      data.sort((a, b) => b.nb - a.nb);
-      this.dsNbJumpByGear = new MatTableDataSource(data);
-    });
-  }
+            // Prepare the list of jump type with am empty array
+            let tmpResults = new Map<string, number[]>();
+            const listOfJumpType = [...new Set(data.map((obj) => obj.label2))];
+            listOfJumpType.forEach((type) => {
+                tmpResults.set(type, new Array(nbYears).fill(NaN));
+            });
 
-  private statsByAircraft() {
-    this.serviceApi.getStatsByAircraft().subscribe((data) => {
-      data.sort((a, b) => b.nb - a.nb);
-      this.dsNbJumpByAircraft = new MatTableDataSource(data);
-    });
-  }
+            for (let i = 0; i < listOfYears.length; i++) {
+                const year = listOfYears[i].toString();
 
-  private statsByDz() {
-    this.serviceApi.getStatsByDz().subscribe((data) => {
-      data.sort((a, b) => b.nb - a.nb);
-      this.dsNbJumpByDz = new MatTableDataSource(data);
-    });
-  }
+                let filteredStats = data.filter((d) => d.label == year);
 
-  private statsLastYear() {
-    this.serviceApi.getStatsOfLastYear().subscribe((data) => {
-      data.byDz.sort((a, b) => b.nb - a.nb);
-      this.dsJumpForLastYearByDz = new MatTableDataSource(data.byDz);
-      data.byJumpType.sort((a, b) => b.nb - a.nb);
-      this.dsJumpForLastYearByJumpType = new MatTableDataSource(
-        data.byJumpType,
-      );
-    });
-  }
+                if (filteredStats.length > 0) {
+                    filteredStats.forEach((fs) => {
+                        tmpResults.get(fs.label2)[i] = fs.nb;
+                    });
+                }
+            }
 
-  private statsLastMonth() {
-    this.serviceApi.getStatsOfLastMonth().subscribe((data) => {
-      data.byDz.sort((a, b) => b.nb - a.nb);
-      this.dsJumpForLastMonthByDz = new MatTableDataSource(data.byDz);
-      data.byJumpType.sort((a, b) => b.nb - a.nb);
-      this.dsJumpForLastMonthByJumpType = new MatTableDataSource(
-        data.byJumpType,
-      );
-    });
-  }
-  //#endregion
+            const results: {
+                label: string;
+                data: number[];
+                backgroundColor: string;
+                borderColor: string;
+                pointBackgroundColor: string;
+                fill: boolean;
+                pointRadius: number;
+            }[] = [];
+            tmpResults.forEach((value, key) => {
+                const color = this.jumpTypeToColor.get(key);
+                let tmp = {
+                    label: key,
+                    data: value,
+                    backgroundColor: color,
+                    borderColor: color,
+                    pointBackgroundColor: color,
+                    fill: false,
+                    pointRadius: 6,
+                };
+                results.push(tmp);
+            });
+
+            this.barChartData = {
+                labels: listOfYears,
+                datasets: results,
+            };
+        });
+    }
+
+    private statsByYear() {
+        this.serviceApi.getStatsByYear().subscribe((data) => {
+            data.sort((a, b) => b.label.localeCompare(a.label));
+            this.dsNbJumpByYear = new MatTableDataSource(data);
+        });
+    }
+
+    private statsByJumpType() {
+        this.serviceApi.getStatsByJumpType().subscribe((data) => {
+            data.sort((a, b) => b.nb - a.nb);
+            this.dsNbJumpByType = new MatTableDataSource(data);
+        });
+    }
+
+    private statsByGear() {
+        this.serviceApi.getStatsByGear().subscribe((data) => {
+            data.sort((a, b) => b.nb - a.nb);
+            this.dsNbJumpByGear = new MatTableDataSource(data);
+        });
+    }
+
+    private statsByAircraft() {
+        this.serviceApi.getStatsByAircraft().subscribe((data) => {
+            data.sort((a, b) => b.nb - a.nb);
+            this.dsNbJumpByAircraft = new MatTableDataSource(data);
+        });
+    }
+
+    private statsByDz() {
+        this.serviceApi.getStatsByDz().subscribe((data) => {
+            data.sort((a, b) => b.nb - a.nb);
+            this.dsNbJumpByDz = new MatTableDataSource(data);
+        });
+    }
+
+    private statsLastYear() {
+        this.serviceApi.getStatsOfLastYear().subscribe((data) => {
+            data.byDz.sort((a, b) => b.nb - a.nb);
+            this.dsJumpForLastYearByDz = new MatTableDataSource(data.byDz);
+            data.byJumpType.sort((a, b) => b.nb - a.nb);
+            this.dsJumpForLastYearByJumpType = new MatTableDataSource(
+                data.byJumpType,
+            );
+        });
+    }
+
+    private statsLastMonth() {
+        this.serviceApi.getStatsOfLastMonth().subscribe((data) => {
+            data.byDz.sort((a, b) => b.nb - a.nb);
+            this.dsJumpForLastMonthByDz = new MatTableDataSource(data.byDz);
+            data.byJumpType.sort((a, b) => b.nb - a.nb);
+            this.dsJumpForLastMonthByJumpType = new MatTableDataSource(
+                data.byJumpType,
+            );
+        });
+    }
+    //#endregion
 }

Front/skydivelogs-app/src/app/user-profile/user-profile.component.css

@@ -1,14 +1,14 @@
 .content {
-  min-height: 90vh;
-  justify-content: left;
-  align-items: initial;
-  padding-top: 25px;
+    min-height: 90vh;
+    justify-content: left;
+    align-items: initial;
+    padding-top: 25px;
 }
 
 .containerFlex {
-  display: flex;
-  flex-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
 }
 .contentFlex {
-  flex: 45%;
-}
+    flex: 45%;
+}

Front/skydivelogs-app/src/app/user-profile/user-profile.component.html

@@ -1,53 +1,70 @@
 <div class="content containerFlex">
-  <fieldset class="contentFlex">
-    <legend>Profile</legend>
-    <form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
-      <p>
-        <mat-form-field>
-          <mat-label>Login</mat-label>
-          <input matInput type="text" formControlName="login" readonly />
-        </mat-form-field>
-      </p>
-      <p>
-        <mat-form-field>
-          <mat-label>Firstname</mat-label>
-          <input matInput type="text" formControlName="firstName" />
-        </mat-form-field>
-      </p>
-      <p>
-        <mat-form-field>
-          <mat-label>Lastname</mat-label>
-          <input matInput type="text" formControlName="lastName" />
-        </mat-form-field>
-      </p>
-      <p>
-        <mat-form-field>
-          <mat-label>E-mail</mat-label>
-          <input matInput type="text" formControlName="email" />
-        </mat-form-field>
-      </p>
+    <fieldset class="contentFlex">
+        <legend>Profile</legend>
+        <form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
+            <p>
+                <mat-form-field>
+                    <mat-label>{{ "UserProfile_Login" | translate }}</mat-label>
+                    <input
+                        matInput
+                        type="text"
+                        formControlName="login"
+                        readonly
+                    />
+                </mat-form-field>
+            </p>
+            <p>
+                <mat-form-field>
+                    <mat-label>{{
+                        "UserProfile_Firstname" | translate
+                    }}</mat-label>
+                    <input matInput type="text" formControlName="firstName" />
+                </mat-form-field>
+            </p>
+            <p>
+                <mat-form-field>
+                    <mat-label>{{
+                        "UserProfile_Lastname" | translate
+                    }}</mat-label>
+                    <input matInput type="text" formControlName="lastName" />
+                </mat-form-field>
+            </p>
+            <p>
+                <mat-form-field>
+                    <mat-label>{{ "UserProfile_Mail" | translate }}</mat-label>
+                    <input matInput type="text" formControlName="email" />
+                </mat-form-field>
+            </p>
 
-      <p>
-        <mat-form-field>
-          <mat-label>Current password</mat-label>
-          <input matInput type="text" formControlName="currentPassword" />
-        </mat-form-field>
-      </p>
-      <p>
-        <mat-form-field>
-          <mat-label>New password</mat-label>
-          <input matInput type="text" formControlName="newPassword" />
-        </mat-form-field>
-      </p>
+            <p>
+                <mat-form-field>
+                    <mat-label>{{
+                        "UserProfile_CurrentPassword" | translate
+                    }}</mat-label>
+                    <input
+                        matInput
+                        type="text"
+                        formControlName="currentPassword"
+                    />
+                </mat-form-field>
+            </p>
+            <p>
+                <mat-form-field>
+                    <mat-label>{{
+                        "UserProfile_NewPassword" | translate
+                    }}</mat-label>
+                    <input matInput type="text" formControlName="newPassword" />
+                </mat-form-field>
+            </p>
 
-      <button type="submit" mat-raised-button color="accent">
-        Update my profile
-      </button>
-    </form>
-  </fieldset>
+            <button type="submit" mat-raised-button color="accent">
+                {{ "UserProfile_Update" | translate }}
+            </button>
+        </form>
+    </fieldset>
 
-  <fieldset class="contentFlex">
-    <legend>Images</legend>
-    <app-list-of-images></app-list-of-images>
-  </fieldset>
+    <fieldset class="contentFlex">
+        <legend>Images</legend>
+        <app-list-of-images></app-list-of-images>
+    </fieldset>
 </div>

Front/skydivelogs-app/src/app/user-profile/user-profile.component.ts

@@ -1,15 +1,15 @@
 import { Component, OnInit } from "@angular/core";
 import {
-  FormGroup,
-  FormControl,
-  Validators,
-  ReactiveFormsModule,
+    FormGroup,
+    FormControl,
+    Validators,
+    ReactiveFormsModule,
 } from "@angular/forms";
 import { MatLabel, MatFormFieldModule } from "@angular/material/form-field";
 import {
-  TranslateModule,
-  TranslatePipe,
-  TranslateService,
+    TranslateModule,
+    TranslatePipe,
+    TranslateService,
 } from "@ngx-translate/core";
 import { MatInputModule } from "@angular/material/input";
 import { MatButtonModule } from "@angular/material/button";
@@ -19,137 +19,138 @@ import { ListOfImagesComponent } from "../list-of-images/list-of-images.componen
 import { ServiceComm } from "../../services/service-comm.service";
 
 @Component({
-  selector: "app-user-profile",
-  templateUrl: "./user-profile.component.html",
-  styleUrls: ["./user-profile.component.css"],
-  imports: [
-    ListOfImagesComponent,
-    ReactiveFormsModule,
-    MatLabel,
-    MatFormFieldModule,
-    MatInputModule,
-    MatButtonModule,
-    TranslateModule,
-  ],
+    selector: "app-user-profile",
+    templateUrl: "./user-profile.component.html",
+    styleUrls: ["./user-profile.component.css"],
+    imports: [
+        ListOfImagesComponent,
+        ReactiveFormsModule,
+        MatLabel,
+        MatFormFieldModule,
+        MatInputModule,
+        MatButtonModule,
+        TranslateModule,
+        TranslatePipe,
+    ],
 })
 export class UserProfileComponent implements OnInit {
-  public userForm: FormGroup;
+    public userForm: FormGroup;
 
-  constructor(
-    private authenticationService: AuthenticationService,
-    private translateService: TranslateService,
-    private serviceComm: ServiceComm,
-  ) {}
+    constructor(
+        private authenticationService: AuthenticationService,
+        private translateService: TranslateService,
+        private serviceComm: ServiceComm,
+    ) {}
 
-  ngOnInit() {
-    this.serviceComm.forceTranslateTitle.subscribe((data) => {
-      if (data === true) {
+    ngOnInit() {
+        this.serviceComm.forceTranslateTitle.subscribe((data) => {
+            if (data === true) {
+                this.updateTitle();
+            }
+        });
         this.updateTitle();
-      }
-    });
-    this.updateTitle();
 
-    const currentUser = this.authenticationService.currentUserValue;
+        const currentUser = this.authenticationService.currentUserValue;
 
-    this.userForm = new FormGroup(
-      {
-        login: new FormControl(currentUser.login, Validators.required),
-        firstName: new FormControl(currentUser.firstName, [
-          Validators.required,
-          Validators.minLength(3),
-        ]),
-        lastName: new FormControl(currentUser.lastName, [
-          Validators.required,
-          Validators.minLength(3),
-        ]),
-        email: new FormControl(currentUser.email, [
-          Validators.required,
-          Validators.email,
-        ]),
-        currentPassword: new FormControl(
-          "",
-          Validators.pattern("^[A-Za-z0-9_-]{8,15}$"),
-        ),
-        newPassword: new FormControl(
-          "",
-          Validators.pattern("^[A-Za-z0-9_-]{8,15}$"),
-        ),
-      },
-      { updateOn: "blur" },
-    );
-  }
-
-  onSubmit(formData) {
-    if (this.userForm.invalid) {
-      return;
+        this.userForm = new FormGroup(
+            {
+                login: new FormControl(currentUser.login, Validators.required),
+                firstName: new FormControl(currentUser.firstName, [
+                    Validators.required,
+                    Validators.minLength(3),
+                ]),
+                lastName: new FormControl(currentUser.lastName, [
+                    Validators.required,
+                    Validators.minLength(3),
+                ]),
+                email: new FormControl(currentUser.email, [
+                    Validators.required,
+                    Validators.email,
+                ]),
+                currentPassword: new FormControl(
+                    "",
+                    Validators.pattern("^[A-Za-z0-9_-]{8,15}$"),
+                ),
+                newPassword: new FormControl(
+                    "",
+                    Validators.pattern("^[A-Za-z0-9_-]{8,15}$"),
+                ),
+            },
+            { updateOn: "blur" },
+        );
     }
 
-    // const updatedUser = new User();
-    // updatedUser.firstName = formData.firstName;
-    // updatedUser.lastName = formData.lastName;
-    // updatedUser.email = formData.email;
+    onSubmit(formData) {
+        if (this.userForm.invalid) {
+            return;
+        }
 
-    // this.authenticationService.update(updatedUser);
-  }
+        // const updatedUser = new User();
+        // updatedUser.firstName = formData.firstName;
+        // updatedUser.lastName = formData.lastName;
+        // updatedUser.email = formData.email;
 
-  private calculTailleVoile() {
-    let tailleVoile = new Map<string, Array<number>>();
-    tailleVoile.set("60", [175, 161, 147, 133, 124, 115, 107, 97, 89]);
-    tailleVoile.set("61", [178, 163, 149, 135, 126, 116, 108, 98, 90]);
-    tailleVoile.set("62", [180, 166, 151, 137, 127, 118, 109, 99, 91]);
-    tailleVoile.set("63", [183, 168, 153, 138, 129, 119, 111, 100, 91]);
-    tailleVoile.set("64", [185, 170, 155, 140, 130, 121, 112, 101, 92]);
-    tailleVoile.set("65", [188, 173, 157, 142, 132, 122, 113, 102, 93]);
-    tailleVoile.set("66", [190, 175, 159, 144, 134, 123, 114, 103, 94]);
-    tailleVoile.set("67", [193, 177, 161, 146, 135, 125, 116, 104, 94]);
-    tailleVoile.set("68", [195, 179, 164, 147, 137, 126, 117, 105, 95]);
-    tailleVoile.set("69", [198, 182, 166, 149, 138, 128, 118, 106, 96]);
-    tailleVoile.set("70", [200, 184, 168, 151, 140, 129, 119, 107, 96]);
-    tailleVoile.set("71", [203, 186, 170, 153, 142, 130, 120, 107, 97]);
-    tailleVoile.set("72", [205, 189, 172, 155, 143, 132, 121, 108, 98]);
-    tailleVoile.set("73", [208, 191, 174, 156, 145, 133, 123, 109, 99]);
-    tailleVoile.set("74", [210, 193, 176, 158, 146, 134, 124, 110, 99]);
-    tailleVoile.set("75", [213, 196, 178, 160, 148, 136, 125, 111, 100]);
-    tailleVoile.set("76", [215, 198, 180, 162, 150, 137, 126, 112, 101]);
-    tailleVoile.set("77", [218, 200, 182, 163, 151, 139, 127, 113, 101]);
-    tailleVoile.set("78", [220, 202, 184, 165, 153, 140, 128, 114, 102]);
-    tailleVoile.set("79", [223, 205, 186, 167, 154, 141, 129, 115, 103]);
-    tailleVoile.set("80", [225, 207, 188, 169, 156, 143, 131, 115, 103]);
-    tailleVoile.set("81", [228, 209, 190, 170, 157, 144, 132, 116, 104]);
-    tailleVoile.set("82", [230, 212, 192, 172, 159, 145, 133, 117, 104]);
-    tailleVoile.set("83", [233, 214, 194, 174, 160, 146, 134, 118, 105]);
-    tailleVoile.set("84", [235, 216, 196, 176, 162, 148, 135, 119, 106]);
-    tailleVoile.set("85", [238, 219, 198, 177, 163, 149, 136, 120, 106]);
-    tailleVoile.set("86", [240, 221, 201, 179, 165, 150, 137, 120, 107]);
-    tailleVoile.set("87", [243, 223, 203, 181, 166, 152, 138, 121, 108]);
-    tailleVoile.set("88", [245, 225, 205, 183, 168, 153, 139, 122, 108]);
-    tailleVoile.set("89", [248, 228, 207, 184, 170, 154, 140, 123, 109]);
-    tailleVoile.set("90", [250, 230, 209, 186, 171, 156, 141, 124, 109]);
-    tailleVoile.set("91", [253, 232, 211, 188, 173, 157, 143, 124, 110]);
-    tailleVoile.set("92", [255, 235, 213, 190, 174, 158, 144, 125, 110]);
-    tailleVoile.set("93", [258, 237, 215, 191, 176, 159, 145, 126, 111]);
-    tailleVoile.set("94", [260, 239, 217, 193, 177, 161, 146, 127, 112]);
-    tailleVoile.set("95", [263, 242, 219, 195, 179, 162, 147, 128, 112]);
-    tailleVoile.set("96", [265, 244, 221, 197, 180, 163, 148, 128, 113]);
-    tailleVoile.set("97", [268, 246, 223, 198, 182, 164, 149, 129, 113]);
-    tailleVoile.set("98", [270, 248, 225, 200, 183, 166, 150, 130, 114]);
-    tailleVoile.set("99", [273, 251, 227, 202, 185, 167, 151, 131, 114]);
-    tailleVoile.set("100", [275, 253, 229, 203, 186, 168, 152, 131, 115]);
-    tailleVoile.set("101", [278, 255, 231, 205, 188, 169, 153, 132, 115]);
-    tailleVoile.set("102", [280, 258, 233, 207, 189, 171, 154, 133, 116]);
-    tailleVoile.set("103", [283, 260, 235, 209, 190, 172, 155, 134, 116]);
-    tailleVoile.set("104", [285, 262, 237, 210, 192, 173, 156, 134, 117]);
-    tailleVoile.set("105", [288, 265, 239, 212, 193, 174, 157, 135, 118]);
-    tailleVoile.set("106", [290, 267, 241, 214, 195, 175, 158, 136, 118]);
-    tailleVoile.set("107", [293, 269, 243, 215, 196, 177, 159, 136, 119]);
-    tailleVoile.set("108", [295, 271, 245, 217, 198, 178, 160, 137, 119]);
-    tailleVoile.set("109", [298, 274, 247, 219, 199, 179, 161, 138, 120]);
-    tailleVoile.set("110", [300, 276, 249, 220, 201, 180, 162, 138, 120]);
-  }
+        // this.authenticationService.update(updatedUser);
+    }
 
-  private updateTitle() {
-    this.translateService.get("UserProfile_Title").subscribe((data) => {
-      this.serviceComm.updatedComponentTitle(data);
-    });
-  }
+    private calculTailleVoile() {
+        let tailleVoile = new Map<string, Array<number>>();
+        tailleVoile.set("60", [175, 161, 147, 133, 124, 115, 107, 97, 89]);
+        tailleVoile.set("61", [178, 163, 149, 135, 126, 116, 108, 98, 90]);
+        tailleVoile.set("62", [180, 166, 151, 137, 127, 118, 109, 99, 91]);
+        tailleVoile.set("63", [183, 168, 153, 138, 129, 119, 111, 100, 91]);
+        tailleVoile.set("64", [185, 170, 155, 140, 130, 121, 112, 101, 92]);
+        tailleVoile.set("65", [188, 173, 157, 142, 132, 122, 113, 102, 93]);
+        tailleVoile.set("66", [190, 175, 159, 144, 134, 123, 114, 103, 94]);
+        tailleVoile.set("67", [193, 177, 161, 146, 135, 125, 116, 104, 94]);
+        tailleVoile.set("68", [195, 179, 164, 147, 137, 126, 117, 105, 95]);
+        tailleVoile.set("69", [198, 182, 166, 149, 138, 128, 118, 106, 96]);
+        tailleVoile.set("70", [200, 184, 168, 151, 140, 129, 119, 107, 96]);
+        tailleVoile.set("71", [203, 186, 170, 153, 142, 130, 120, 107, 97]);
+        tailleVoile.set("72", [205, 189, 172, 155, 143, 132, 121, 108, 98]);
+        tailleVoile.set("73", [208, 191, 174, 156, 145, 133, 123, 109, 99]);
+        tailleVoile.set("74", [210, 193, 176, 158, 146, 134, 124, 110, 99]);
+        tailleVoile.set("75", [213, 196, 178, 160, 148, 136, 125, 111, 100]);
+        tailleVoile.set("76", [215, 198, 180, 162, 150, 137, 126, 112, 101]);
+        tailleVoile.set("77", [218, 200, 182, 163, 151, 139, 127, 113, 101]);
+        tailleVoile.set("78", [220, 202, 184, 165, 153, 140, 128, 114, 102]);
+        tailleVoile.set("79", [223, 205, 186, 167, 154, 141, 129, 115, 103]);
+        tailleVoile.set("80", [225, 207, 188, 169, 156, 143, 131, 115, 103]);
+        tailleVoile.set("81", [228, 209, 190, 170, 157, 144, 132, 116, 104]);
+        tailleVoile.set("82", [230, 212, 192, 172, 159, 145, 133, 117, 104]);
+        tailleVoile.set("83", [233, 214, 194, 174, 160, 146, 134, 118, 105]);
+        tailleVoile.set("84", [235, 216, 196, 176, 162, 148, 135, 119, 106]);
+        tailleVoile.set("85", [238, 219, 198, 177, 163, 149, 136, 120, 106]);
+        tailleVoile.set("86", [240, 221, 201, 179, 165, 150, 137, 120, 107]);
+        tailleVoile.set("87", [243, 223, 203, 181, 166, 152, 138, 121, 108]);
+        tailleVoile.set("88", [245, 225, 205, 183, 168, 153, 139, 122, 108]);
+        tailleVoile.set("89", [248, 228, 207, 184, 170, 154, 140, 123, 109]);
+        tailleVoile.set("90", [250, 230, 209, 186, 171, 156, 141, 124, 109]);
+        tailleVoile.set("91", [253, 232, 211, 188, 173, 157, 143, 124, 110]);
+        tailleVoile.set("92", [255, 235, 213, 190, 174, 158, 144, 125, 110]);
+        tailleVoile.set("93", [258, 237, 215, 191, 176, 159, 145, 126, 111]);
+        tailleVoile.set("94", [260, 239, 217, 193, 177, 161, 146, 127, 112]);
+        tailleVoile.set("95", [263, 242, 219, 195, 179, 162, 147, 128, 112]);
+        tailleVoile.set("96", [265, 244, 221, 197, 180, 163, 148, 128, 113]);
+        tailleVoile.set("97", [268, 246, 223, 198, 182, 164, 149, 129, 113]);
+        tailleVoile.set("98", [270, 248, 225, 200, 183, 166, 150, 130, 114]);
+        tailleVoile.set("99", [273, 251, 227, 202, 185, 167, 151, 131, 114]);
+        tailleVoile.set("100", [275, 253, 229, 203, 186, 168, 152, 131, 115]);
+        tailleVoile.set("101", [278, 255, 231, 205, 188, 169, 153, 132, 115]);
+        tailleVoile.set("102", [280, 258, 233, 207, 189, 171, 154, 133, 116]);
+        tailleVoile.set("103", [283, 260, 235, 209, 190, 172, 155, 134, 116]);
+        tailleVoile.set("104", [285, 262, 237, 210, 192, 173, 156, 134, 117]);
+        tailleVoile.set("105", [288, 265, 239, 212, 193, 174, 157, 135, 118]);
+        tailleVoile.set("106", [290, 267, 241, 214, 195, 175, 158, 136, 118]);
+        tailleVoile.set("107", [293, 269, 243, 215, 196, 177, 159, 136, 119]);
+        tailleVoile.set("108", [295, 271, 245, 217, 198, 178, 160, 137, 119]);
+        tailleVoile.set("109", [298, 274, 247, 219, 199, 179, 161, 138, 120]);
+        tailleVoile.set("110", [300, 276, 249, 220, 201, 180, 162, 138, 120]);
+    }
+
+    private updateTitle() {
+        this.translateService.get("UserProfile_Title").subscribe((data) => {
+            this.serviceComm.updatedComponentTitle(data);
+        });
+    }
 }

Front/skydivelogs-app/src/assets/i18n/en.json

@@ -1,139 +1,147 @@
 {
-  "Login_Title": "Login to the Skydive log",
-  "Login_Tab_CreateUser": "Create and login a user",
-  "Login_Tab_WithUser": "Login with a user",
+    "Login_Title": "Login to the Skydive log",
+    "Login_Tab_CreateUser": "Create and login a user",
+    "Login_Tab_WithUser": "Login with a user",
 
-  "LoginUser_BtnLogin": "Login",
-  "LoginUser_PasswordPattern": "The pattern of the password ([A-Za-z0-9_-] {{ '{' }}8,15{{ '}' }})",
-  "LoginUser_PasswordRequired": "Password is required",
-  "LoginUser_Password": "Password",
-  "LoginUser_Username": "Username",
-  "LoginUser_UsernamePattern": "Username must have min 3 characters",
-  "LoginUser_UsernameRequired": "Username is required",
+    "LoginUser_BtnLogin": "Login",
+    "LoginUser_PasswordPattern": "The pattern of the password ([A-Za-z0-9_-] {{ '{' }}8,15{{ '}' }})",
+    "LoginUser_PasswordRequired": "Password is required",
+    "LoginUser_Password": "Password",
+    "LoginUser_Username": "Username",
+    "LoginUser_UsernamePattern": "Username must have min 3 characters",
+    "LoginUser_UsernameRequired": "Username is required",
 
-  "LoginCreateUser_Firstname": "Firstname",
-  "LoginCreateUser_FirstnameRequired": "Firstname is required",
-  "LoginCreateUser_FirstnamePattern": "Firstname must have min 3 characters",
-  "LoginCreateUser_Lastname": "Lastname",
-  "LoginCreateUser_LastnameRequired": "Lastname is required",
-  "LoginCreateUser_LastnamePattern": "Lastname must have min 3 characters",
-  "LoginCreateUser_Email": "E-mail",
-  "LoginCreateUser_EmailRequired": "E-mail is required",
-  "LoginCreateUser_EmailPattern": "It's not a e-mail",
-  "LoginCreateUser_Username": "Username",
-  "LoginCreateUser_UsernameRequired": "Username is required",
-  "LoginCreateUser_UsernamePattern": "Username must have min 3 characters",
-  "LoginCreateUser_Password": "Password",
-  "LoginCreateUser_PasswordRequired": "Password is required",
-  "LoginCreateUser_PasswordPattern": "The pattern of the password ([A-Za-z0-9_-|/]{{ '{' }}8,15{{ '}' }})",
-  "LoginCreateUser_BtnLogin": "Create user and login",
+    "CreateUser_Firstname": "Firstname",
+    "CreateUser_FirstnameRequired": "Firstname is required",
+    "CreateUser_FirstnamePattern": "Firstname must have min 3 characters",
+    "CreateUser_Lastname": "Lastname",
+    "CreateUser_LastnameRequired": "Lastname is required",
+    "CreateUser_LastnamePattern": "Lastname must have min 3 characters",
+    "CreateUser_Email": "E-mail",
+    "CreateUser_EmailRequired": "E-mail is required",
+    "CreateUser_EmailPattern": "It's not a e-mail",
+    "CreateUser_Username": "Username",
+    "CreateUser_UsernameRequired": "Username is required",
+    "CreateUser_UsernamePattern": "Username must have min 3 characters",
+    "CreateUser_Password": "Password",
+    "CreateUser_PasswordRequired": "Password is required",
+    "CreateUser_PasswordPattern": "The pattern of the password ([A-Za-z0-9_-|/]{{ '{' }}8,15{{ '}' }})",
+    "CreateUser_BtnLogin": "Create user and login",
 
-  "Default_Title": "Home",
-  "ListDz_Title": "List of DZs",
-  "Summary_Title": "Summary",
-  "NewJump_Title": "New jumps",
-  "ListJumps_Title": "List of jumps",
-  "ListJumpTypes_Title": "List of jump types",
-  "ListGears_Title": "List of gears",
-  "ListAircrafts_Title": "List of aircrafts",
-  "NewTunnelFlight_Title": "New tunnel flights",
-  "ListTunnelFlight_Title": "List of hours of tunnel",
-  "UserProfile_Title": "User profile",
-  "NewJumpType_Title": "New jmp type",
-  "NewGear_Title": "New gear",
-  "NewDz_Title": "New drop zone",
-  "NewAircraft_Title": "New aircraft",
+    "Default_Title": "Home",
+    "ListDz_Title": "List of DZs",
+    "Summary_Title": "Summary",
+    "NewJump_Title": "New jumps",
+    "ListJumps_Title": "List of jumps",
+    "ListJumpTypes_Title": "List of jump types",
+    "ListGears_Title": "List of gears",
+    "ListAircrafts_Title": "List of aircrafts",
+    "NewTunnelFlight_Title": "New tunnel flights",
+    "ListTunnelFlight_Title": "List of hours of tunnel",
+    "UserProfile_Title": "User profile",
+    "NewJumpType_Title": "New jmp type",
+    "NewGear_Title": "New gear",
+    "NewDz_Title": "New drop zone",
+    "NewAircraft_Title": "New aircraft",
 
-  "App_Footer": "Web software to log your skydive jumps - v",
-  "App_Nav_Summary": "Summary",
-  "App_Nav_Jumps": "List of jumps",
-  "App_Nav_NewJump": "Add a new jump",
-  "App_Nav_Dzs": "List of DZs",
-  "App_Nav_Aircrafts": "List of aircrafts",
-  "App_Nav_JumpTypes": "List of jump types",
-  "App_Nav_Gears": "List of gears",
-  "App_Nav_Logout": "Logout",
-  "App_Nav_NewTunnelFlight": "Add tunnel time",
-  "App_Nav_TunnelFlights": "The tunnel flights",
+    "App_Footer": "Web software to log your skydive jumps - v",
+    "App_Nav_Summary": "Summary",
+    "App_Nav_Jumps": "List of jumps",
+    "App_Nav_NewJump": "Add a new jump",
+    "App_Nav_Dzs": "List of DZs",
+    "App_Nav_Aircrafts": "List of aircrafts",
+    "App_Nav_JumpTypes": "List of jump types",
+    "App_Nav_Gears": "List of gears",
+    "App_Nav_Logout": "Logout",
+    "App_Nav_NewTunnelFlight": "Add tunnel time",
+    "App_Nav_TunnelFlights": "The tunnel flights",
 
-  "ListAircrafts_Add": "Add a aircraft",
-  "ListAircrafts_Header_Id": "ID",
-  "ListAircrafts_Header_Name": "Name",
-  "ListAircrafts_Header_Image": "Image",
+    "ListAircrafts_Add": "Add a aircraft",
+    "ListAircrafts_Header_Id": "ID",
+    "ListAircrafts_Header_Name": "Name",
+    "ListAircrafts_Header_Image": "Image",
 
-  "ListGears_Add": "Add a gear",
-  "ListGears_Header_Id": "ID",
-  "ListGears_Header_Name": "Name",
-  "ListGears_Header_Manufacturer": "Manufacturer",
-  "ListGears_Header_CanopySize": "Canopy size",
-  "ListGears_Header_Aad": "AAD system",
-  "ListGears_Header_Main": "Main canopy",
-  "ListGears_Header_Reserve": "Reserve canopy",
+    "ListGears_Add": "Add a gear",
+    "ListGears_Header_Id": "ID",
+    "ListGears_Header_Name": "Name",
+    "ListGears_Header_Manufacturer": "Manufacturer",
+    "ListGears_Header_CanopySize": "Canopy size",
+    "ListGears_Header_Aad": "AAD system",
+    "ListGears_Header_Main": "Main canopy",
+    "ListGears_Header_Reserve": "Reserve canopy",
 
-  "ListJumpType_Add": "Add a jump type",
-  "ListJumpType_Header_Id": "ID",
-  "ListJumpType_Header_Name": "Name",
+    "ListJumpType_Add": "Add a jump type",
+    "ListJumpType_Header_Id": "ID",
+    "ListJumpType_Header_Name": "Name",
 
-  "ListJump_Add": "Add jumps",
-  "ListJump_Header_Num": "Num",
-  "ListJump_Header_Date": "Date",
-  "ListJump_Header_JumpType": "Jump Type",
-  "ListJump_Header_Aircraft": "Aircraft",
-  "ListJump_Header_Dz": "Drop Zone",
-  "ListJump_Header_Gear": "Gear",
+    "ListJump_Add": "Add jumps",
+    "ListJump_Header_Num": "Num",
+    "ListJump_Header_Date": "Date",
+    "ListJump_Header_JumpType": "Jump Type",
+    "ListJump_Header_Aircraft": "Aircraft",
+    "ListJump_Header_Dz": "Drop Zone",
+    "ListJump_Header_Gear": "Gear",
 
-  "ListDz_Add": "Add a drop zone",
-  "ListDz_Header_ID": "ID",
-  "ListDz_Header_Name": "Name",
-  "ListDz_Header_Address": "Address",
-  "ListDz_Header_Type": "Type",
-  "ListDz_Filter": "Filter",
-  "ListDz_Filter_PlaceHolder": "Filter on the name or address of center",
+    "ListDz_Add": "Add a drop zone",
+    "ListDz_Header_ID": "ID",
+    "ListDz_Header_Name": "Name",
+    "ListDz_Header_Address": "Address",
+    "ListDz_Header_Type": "Type",
+    "ListDz_Filter": "Filter",
+    "ListDz_Filter_PlaceHolder": "Filter on the name or address of center",
 
-  "Summary_TotalJumps": "Total jumps",
-  "Summary_TotalCutaways": "Total cutaways",
-  "Summary_LastJump": "Last jump",
-  "Summary_Refresh": "Refresh",
-  "Summary_LastMonth_Title": "Jumps in the last month",
-  "Summary_LastMonth_ByDz": "By DZ",
-  "Summary_LastMonth_ByJumpType": "By jump type",
-  "Summary_LastYear_Title": "Jumps in the last year",
-  "Summary_LastYear_ByDz": "By DZ",
-  "Summary_LastYear_ByJumpType": "By jump type",
-  "Summary_ByDz_Title": "By DZ",
-  "Summary_ByAircraft_Title": "By aircraft",
-  "Summary_ByGear_Title": "By gear",
-  "Summary_ByJumpType_Title": "By jump type",
-  "Summary_ByYear_Title": "By year",
-  "Summary_ByYearByJumpType_Title": "By year and by type",
+    "Summary_TotalJumps": "Total jumps",
+    "Summary_TotalCutaways": "Total cutaways",
+    "Summary_LastJump": "Last jump",
+    "Summary_Refresh": "Refresh",
+    "Summary_LastMonth_Title": "Jumps in the last month",
+    "Summary_LastMonth_ByDz": "By DZ",
+    "Summary_LastMonth_ByJumpType": "By jump type",
+    "Summary_LastYear_Title": "Jumps in the last year",
+    "Summary_LastYear_ByDz": "By DZ",
+    "Summary_LastYear_ByJumpType": "By jump type",
+    "Summary_ByDz_Title": "By DZ",
+    "Summary_ByAircraft_Title": "By aircraft",
+    "Summary_ByGear_Title": "By gear",
+    "Summary_ByJumpType_Title": "By jump type",
+    "Summary_ByYear_Title": "By year",
+    "Summary_ByYearByJumpType_Title": "By year and by type",
 
-  "NewJump_GoToJump": "View the jumps",
-  "NewJump_ResetForm": "Reset form after adding",
-  "NewJump_ChooseJumpType": "Choose the jump type",
-  "NewJump_ChooseAircraft": "Choose the aircraft",
-  "NewJump_ChooseDz": "Choose the DZ",
-  "NewJump_ChooseGear": "Choose the used gear",
-  "NewJump_Cutaway": "With a cutaway ?",
-  "NewJump_Special": "Is a special jump ?",
-  "NewJump_ExitAlt": "Exit altitude",
-  "NewJump_DeployAlt": "Deploy altitude",
-  "NewJump_Count": "Count of jumps",
-  "NewJump_Comments": "Comments",
-  "NewJump_Submit": "Submit",
+    "NewJump_GoToJump": "View the jumps",
+    "NewJump_ResetForm": "Reset form after adding",
+    "NewJump_ChooseJumpType": "Choose the jump type",
+    "NewJump_ChooseAircraft": "Choose the aircraft",
+    "NewJump_ChooseDz": "Choose the DZ",
+    "NewJump_ChooseGear": "Choose the used gear",
+    "NewJump_Cutaway": "With a cutaway ?",
+    "NewJump_Special": "Is a special jump ?",
+    "NewJump_ExitAlt": "Exit altitude",
+    "NewJump_DeployAlt": "Deploy altitude",
+    "NewJump_Count": "Count of jumps",
+    "NewJump_Comments": "Comments",
+    "NewJump_Submit": "Submit",
 
-  "NewTunnelFlight_ChooseTunnel": "Choose the tunnel",
-  "NewTunnelFlight_Minutes": "Minutes of the flight",
-  "NewTunnelFlight_Comments": "Comments",
-  "NewTunnelFlight_Submit": "Submit",
-  "NewTunnelFlight_Comments_Lbl": "Comments",
-  "NewTunnelFlight_Minutes_Lbl": "Time of flight (minutes)",
-  "NewTunnelFlight_Date_Lbl": "Date of flight",
-  "NewTunnelFlight_GoToJump": "View the tunnel flights",
-  "NewTunnelFlight_ChooseJumpType": "Choose the jump type",
+    "NewTunnelFlight_ChooseTunnel": "Choose the tunnel",
+    "NewTunnelFlight_Minutes": "Minutes of the flight",
+    "NewTunnelFlight_Comments": "Comments",
+    "NewTunnelFlight_Submit": "Submit",
+    "NewTunnelFlight_Comments_Lbl": "Comments",
+    "NewTunnelFlight_Minutes_Lbl": "Time of flight (minutes)",
+    "NewTunnelFlight_Date_Lbl": "Date of flight",
+    "NewTunnelFlight_GoToJump": "View the tunnel flights",
+    "NewTunnelFlight_ChooseJumpType": "Choose the jump type",
 
-  "ListTunnelFlight_CurrentYear": "On the current year",
-  "ListTunnelFlight_12Months": "On 12 last months",
-  "ListTunnelFlight_Add": "Add tunnel flights",
-  "ListTunnelFlight_LoadTable": "Load the tunnel flights",
-  "ListTunnelFlight_AllFlights": "All"
+    "ListTunnelFlight_CurrentYear": "On the current year",
+    "ListTunnelFlight_12Months": "On 12 last months",
+    "ListTunnelFlight_Add": "Add tunnel flights",
+    "ListTunnelFlight_LoadTable": "Load the tunnel flights",
+    "ListTunnelFlight_AllFlights": "All",
+
+    "UserProfile_Update": "Update my profile",
+    "UserProfile_NewPassword": "New password",
+    "UserProfile_CurrentPassword": "Current password",
+    "UserProfile_Mail": "E-mail",
+    "UserProfile_Lastname": "Lastname",
+    "UserProfile_Firstname": "Firstname",
+    "UserProfile_Login": "Login"
 }

Front/skydivelogs-app/src/assets/i18n/fr.json

@@ -1,139 +1,147 @@
 {
-  "Login_Title": "Connexion à Skydive log",
-  "Login_Tab_CreateUser": "Créer et se connecter",
-  "Login_Tab_WithUser": "Se connecter",
+    "Login_Title": "Connexion à Skydive log",
+    "Login_Tab_CreateUser": "Créer et se connecter",
+    "Login_Tab_WithUser": "Se connecter",
 
-  "LoginUser_BtnLogin": "Connecter",
-  "LoginUser_PasswordPattern": "Le mot de passe doit contenir lettres minuscule/majuscule et entre 8 et 15 caractères.",
-  "LoginUser_PasswordRequired": "Le mot de passe est obligatoire",
-  "LoginUser_Password": "Mot de passe",
-  "LoginUser_Username": "Identifiant",
-  "LoginUser_UsernamePattern": "L'identifiant doit être minimum de 3 caractères",
-  "LoginUser_UsernameRequired": "L'identifiant est obligatoire",
+    "LoginUser_BtnLogin": "Connecter",
+    "LoginUser_PasswordPattern": "Le mot de passe doit contenir lettres minuscule/majuscule et entre 8 et 15 caractères.",
+    "LoginUser_PasswordRequired": "Le mot de passe est obligatoire",
+    "LoginUser_Password": "Mot de passe",
+    "LoginUser_Username": "Identifiant",
+    "LoginUser_UsernamePattern": "L'identifiant doit être minimum de 3 caractères",
+    "LoginUser_UsernameRequired": "L'identifiant est obligatoire",
 
-  "LoginCreateUser_Firstname": "Prénom",
-  "LoginCreateUser_FirstnameRequired": "Le prénom est obligatoire",
-  "LoginCreateUser_FirstnamePattern": "Le prénom doit être minimum de 3 caractères",
-  "LoginCreateUser_Lastname": "Nom",
-  "LoginCreateUser_LastnameRequired": "Le nom est obligatoire",
-  "LoginCreateUser_LastnamePattern": "Le nom doit être minimum de 3 caractères",
-  "LoginCreateUser_Email": "E-mail",
-  "LoginCreateUser_EmailRequired": "E-mail est obligatoire",
-  "LoginCreateUser_EmailPattern": "Ceci n'est pas un adresse mail",
-  "LoginCreateUser_Username": "Identifiant",
-  "LoginCreateUser_UsernameRequired": "L'identifiant est obligatoire",
-  "LoginCreateUser_UsernamePattern": "L'identifiant doit être minimum de 3 caractères",
-  "LoginCreateUser_Password": "Mot de passe",
-  "LoginCreateUser_PasswordRequired": "Le mot de passe est obligatoire",
-  "LoginCreateUser_PasswordPattern": "Le mot de passe doit contenir lettres minuscule/majuscule et entre 8 et 15 caractères.",
-  "LoginCreateUser_BtnLogin": "Créer et se connecter",
+    "CreateUser_Firstname": "Prénom",
+    "CreateUser_FirstnameRequired": "Le prénom est obligatoire",
+    "CreateUser_FirstnamePattern": "Le prénom doit être minimum de 3 caractères",
+    "CreateUser_Lastname": "Nom",
+    "CreateUser_LastnameRequired": "Le nom est obligatoire",
+    "CreateUser_LastnamePattern": "Le nom doit être minimum de 3 caractères",
+    "CreateUser_Email": "E-mail",
+    "CreateUser_EmailRequired": "E-mail est obligatoire",
+    "CreateUser_EmailPattern": "Ceci n'est pas un adresse mail",
+    "CreateUser_Username": "Identifiant",
+    "CreateUser_UsernameRequired": "L'identifiant est obligatoire",
+    "CreateUser_UsernamePattern": "L'identifiant doit être minimum de 3 caractères",
+    "CreateUser_Password": "Mot de passe",
+    "CreateUser_PasswordRequired": "Le mot de passe est obligatoire",
+    "CreateUser_PasswordPattern": "Le mot de passe doit contenir lettres minuscule/majuscule et entre 8 et 15 caractères.",
+    "CreateUser_BtnLogin": "Créer et se connecter",
 
-  "Default_Title": "Accueil",
-  "ListDz_Title": "Liste des centres de parachutisme",
-  "Summary_Title": "Récapitulatif",
-  "NewJump_Title": "Nouveaux sauts",
-  "ListJumps_Title": "Liste des sauts",
-  "ListJumpTypes_Title": "Liste des types de saut",
-  "ListGears_Title": "Liste des pièges",
-  "ListAircrafts_Title": "Liste des avions",
-  "NewTunnelFlight_Title": "Nouveaux créneaux de soufflerie",
-  "ListTunnelFlight_Title": "Heures de tunnel",
-  "UserProfile_Title": "Profile utilisateur",
-  "NewJumpType_Title": "Nouveau type de saut",
-  "NewGear_Title": "Nouveau piège",
-  "NewDz_Title": "Nouveau centre",
-  "NewAircraft_Title": "Nouvel avion",
+    "Default_Title": "Accueil",
+    "ListDz_Title": "Liste des centres de parachutisme",
+    "Summary_Title": "Récapitulatif",
+    "NewJump_Title": "Nouveaux sauts",
+    "ListJumps_Title": "Liste des sauts",
+    "ListJumpTypes_Title": "Liste des types de saut",
+    "ListGears_Title": "Liste des pièges",
+    "ListAircrafts_Title": "Liste des avions",
+    "NewTunnelFlight_Title": "Nouveaux créneaux de soufflerie",
+    "ListTunnelFlight_Title": "Heures de tunnel",
+    "UserProfile_Title": "Profile utilisateur",
+    "NewJumpType_Title": "Nouveau type de saut",
+    "NewGear_Title": "Nouveau piège",
+    "NewDz_Title": "Nouveau centre",
+    "NewAircraft_Title": "Nouvel avion",
 
-  "App_Footer": "Application pour enregistrer ses sauts de parachutisme - v",
-  "App_Nav_Summary": "Récapitulatif",
-  "App_Nav_Jumps": "Les sauts",
-  "App_Nav_NewJump": "Ajouter un saut",
-  "App_Nav_Dzs": "Centre de parachutisme",
-  "App_Nav_Aircrafts": "Avions",
-  "App_Nav_JumpTypes": "Type de saut",
-  "App_Nav_Gears": "Pièges",
-  "App_Nav_Logout": "Se déconnecter",
-  "App_Nav_NewTunnelFlight": "Ajouter du temps en tunnel",
-  "App_Nav_TunnelFlights": "Les vols en soufflerie",
+    "App_Footer": "Application pour enregistrer ses sauts de parachutisme - v",
+    "App_Nav_Summary": "Récapitulatif",
+    "App_Nav_Jumps": "Les sauts",
+    "App_Nav_NewJump": "Ajouter un saut",
+    "App_Nav_Dzs": "Centre de parachutisme",
+    "App_Nav_Aircrafts": "Avions",
+    "App_Nav_JumpTypes": "Type de saut",
+    "App_Nav_Gears": "Pièges",
+    "App_Nav_Logout": "Se déconnecter",
+    "App_Nav_NewTunnelFlight": "Ajouter du temps en tunnel",
+    "App_Nav_TunnelFlights": "Les vols en soufflerie",
 
-  "ListAircrafts_Add": "Ajouter un avion",
-  "ListAircrafts_Header_Id": "ID",
-  "ListAircrafts_Header_Name": "Nom",
-  "ListAircrafts_Header_Image": "Image",
+    "ListAircrafts_Add": "Ajouter un avion",
+    "ListAircrafts_Header_Id": "ID",
+    "ListAircrafts_Header_Name": "Nom",
+    "ListAircrafts_Header_Image": "Image",
 
-  "ListGears_Add": "Ajouter un piège",
-  "ListGears_Header_Id": "ID",
-  "ListGears_Header_Name": "Nom",
-  "ListGears_Header_Manufacturer": "Fabriquant",
-  "ListGears_Header_CanopySize": "Taille de voile",
-  "ListGears_Header_Aad": "Système de sécurité",
-  "ListGears_Header_Main": "Principale",
-  "ListGears_Header_Reserve": "Réserve",
+    "ListGears_Add": "Ajouter un piège",
+    "ListGears_Header_Id": "ID",
+    "ListGears_Header_Name": "Nom",
+    "ListGears_Header_Manufacturer": "Fabriquant",
+    "ListGears_Header_CanopySize": "Taille de voile",
+    "ListGears_Header_Aad": "Système de sécurité",
+    "ListGears_Header_Main": "Principale",
+    "ListGears_Header_Reserve": "Réserve",
 
-  "ListJumpType_Add": "Ajouter un type de saut",
-  "ListJumpType_Header_Id": "ID",
-  "ListJumpType_Header_Name": "Nom",
+    "ListJumpType_Add": "Ajouter un type de saut",
+    "ListJumpType_Header_Id": "ID",
+    "ListJumpType_Header_Name": "Nom",
 
-  "ListJump_Add": "Ajouter des sauts",
-  "ListJump_Header_Num": "Numéro",
-  "ListJump_Header_Date": "Date",
-  "ListJump_Header_JumpType": "Type de saut",
-  "ListJump_Header_Aircraft": "Avion",
-  "ListJump_Header_Dz": "Centre",
-  "ListJump_Header_Gear": "Piège",
+    "ListJump_Add": "Ajouter des sauts",
+    "ListJump_Header_Num": "Numéro",
+    "ListJump_Header_Date": "Date",
+    "ListJump_Header_JumpType": "Type de saut",
+    "ListJump_Header_Aircraft": "Avion",
+    "ListJump_Header_Dz": "Centre",
+    "ListJump_Header_Gear": "Piège",
 
-  "ListDz_Add": "Ajouter un centre de parachutisme",
-  "ListDz_Header_ID": "ID",
-  "ListDz_Header_Name": "Nom",
-  "ListDz_Header_Address": "Adresse",
-  "ListDz_Header_Type": "Type",
-  "ListDz_Filter": "Filtrer",
-  "ListDz_Filter_PlaceHolder": "Filtrer sur le nom ou l'adresse du centre",
+    "ListDz_Add": "Ajouter un centre de parachutisme",
+    "ListDz_Header_ID": "ID",
+    "ListDz_Header_Name": "Nom",
+    "ListDz_Header_Address": "Adresse",
+    "ListDz_Header_Type": "Type",
+    "ListDz_Filter": "Filtrer",
+    "ListDz_Filter_PlaceHolder": "Filtrer sur le nom ou l'adresse du centre",
 
-  "Summary_TotalJumps": "Nombre de sauts",
-  "Summary_TotalCutaways": "Nombre de libération",
-  "Summary_LastJump": "Le dernier saut",
-  "Summary_Refresh": "Refresh",
-  "Summary_LastMonth_Title": "Les sauts du dernier mois",
-  "Summary_LastMonth_ByDz": "Par centre",
-  "Summary_LastMonth_ByJumpType": "Par type de saut",
-  "Summary_LastYear_Title": "Les sauts de la dernière année",
-  "Summary_LastYear_ByDz": "Par centre",
-  "Summary_LastYear_ByJumpType": "Par type de saut",
-  "Summary_ByDz_Title": "Par centre",
-  "Summary_ByAircraft_Title": "Par avion",
-  "Summary_ByGear_Title": "Par piège",
-  "Summary_ByJumpType_Title": "Par type de saut",
-  "Summary_ByYear_Title": "Par an",
-  "Summary_ByYearByJumpType_Title": "Par an et par type",
+    "Summary_TotalJumps": "Nombre de sauts",
+    "Summary_TotalCutaways": "Nombre de libération",
+    "Summary_LastJump": "Le dernier saut",
+    "Summary_Refresh": "Refresh",
+    "Summary_LastMonth_Title": "Les sauts du dernier mois",
+    "Summary_LastMonth_ByDz": "Par centre",
+    "Summary_LastMonth_ByJumpType": "Par type de saut",
+    "Summary_LastYear_Title": "Les sauts de la dernière année",
+    "Summary_LastYear_ByDz": "Par centre",
+    "Summary_LastYear_ByJumpType": "Par type de saut",
+    "Summary_ByDz_Title": "Par centre",
+    "Summary_ByAircraft_Title": "Par avion",
+    "Summary_ByGear_Title": "Par piège",
+    "Summary_ByJumpType_Title": "Par type de saut",
+    "Summary_ByYear_Title": "Par an",
+    "Summary_ByYearByJumpType_Title": "Par an et par type",
 
-  "NewJump_GoToJump": "Voir les sauts",
-  "NewJump_ResetForm": "Reset du formulaire après l'ajout",
-  "NewJump_ChooseJumpType": "Choisir le type de saut",
-  "NewJump_ChooseAircraft": "Choisir l'avion largueur",
-  "NewJump_ChooseDz": "Choisir le centre",
-  "NewJump_ChooseGear": "Choisir le piège",
-  "NewJump_Cutaway": "Libération ?",
-  "NewJump_Special": "Saut spécial ?",
-  "NewJump_ExitAlt": "Altitude de sortie",
-  "NewJump_DeployAlt": "Altitude d'ouverture",
-  "NewJump_Count": "Nombre de sauts",
-  "NewJump_Comments": "Commentaires",
-  "NewJump_Submit": "Ajouter",
+    "NewJump_GoToJump": "Voir les sauts",
+    "NewJump_ResetForm": "Reset du formulaire après l'ajout",
+    "NewJump_ChooseJumpType": "Choisir le type de saut",
+    "NewJump_ChooseAircraft": "Choisir l'avion largueur",
+    "NewJump_ChooseDz": "Choisir le centre",
+    "NewJump_ChooseGear": "Choisir le piège",
+    "NewJump_Cutaway": "Libération ?",
+    "NewJump_Special": "Saut spécial ?",
+    "NewJump_ExitAlt": "Altitude de sortie",
+    "NewJump_DeployAlt": "Altitude d'ouverture",
+    "NewJump_Count": "Nombre de sauts",
+    "NewJump_Comments": "Commentaires",
+    "NewJump_Submit": "Ajouter",
 
-  "NewTunnelFlight_ChooseTunnel": "Choisir le tunnel",
-  "NewTunnelFlight_Minutes": "Temps de vol(minutes)",
-  "NewTunnelFlight_Comments": "Commentaires",
-  "NewTunnelFlight_Submit": "Ajouter",
-  "NewTunnelFlight_Comments_Lbl": "Commentaires",
-  "NewTunnelFlight_Minutes_Lbl": "Temps de vol(minutes)",
-  "NewTunnelFlight_Date_Lbl": "Date des vols",
-  "NewTunnelFlight_GoToJump": "Voir les temps de vol en soufflerie",
-  "NewTunnelFlight_ChooseJumpType": "Choisir le type de saut",
+    "NewTunnelFlight_ChooseTunnel": "Choisir le tunnel",
+    "NewTunnelFlight_Minutes": "Temps de vol(minutes)",
+    "NewTunnelFlight_Comments": "Commentaires",
+    "NewTunnelFlight_Submit": "Ajouter",
+    "NewTunnelFlight_Comments_Lbl": "Commentaires",
+    "NewTunnelFlight_Minutes_Lbl": "Temps de vol(minutes)",
+    "NewTunnelFlight_Date_Lbl": "Date des vols",
+    "NewTunnelFlight_GoToJump": "Voir les temps de vol en soufflerie",
+    "NewTunnelFlight_ChooseJumpType": "Choisir le type de saut",
 
-  "ListTunnelFlight_CurrentYear": "Dans l'année en cours",
-  "ListTunnelFlight_12Months": "Sur 12 derniers mois",
-  "ListTunnelFlight_Add": "Ajouter du temps en soufflerie",
-  "ListTunnelFlight_LoadTable": "Charger les vols en tunnel",
-  "ListTunnelFlight_AllFlights": "Tous les vols"
+    "ListTunnelFlight_CurrentYear": "Dans l'année en cours",
+    "ListTunnelFlight_12Months": "Sur 12 derniers mois",
+    "ListTunnelFlight_Add": "Ajouter du temps en soufflerie",
+    "ListTunnelFlight_LoadTable": "Charger les vols en tunnel",
+    "ListTunnelFlight_AllFlights": "Tous les vols",
+
+    "UserProfile_Update": "Mise à jour",
+    "UserProfile_NewPassword": "Nouveau mot de passe",
+    "UserProfile_CurrentPassword": "Actuel mot de passe",
+    "UserProfile_Mail": "E-mail",
+    "UserProfile_Lastname": "Nom",
+    "UserProfile_Firstname": "Prénom",
+    "UserProfile_Login": "Identifiant"
 }