Front/skydivelogs-app/angular.json

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

Front/skydivelogs-app/package.json

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

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

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

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

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

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

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

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

@@ -8,27 +8,29 @@
       name="isSpecial"
       labelPosition="before"
       >Special jump</mat-checkbox
-    >
+      >
-  </p>
+    </p>
-  <p>
+    <p>
-    <mat-checkbox
+      <mat-checkbox
-      [(ngModel)]="jump.withCutaway"
+        [(ngModel)]="jump.withCutaway"
-      name="withCutaway"
+        name="withCutaway"
-      labelPosition="before"
+        labelPosition="before"
-      >Cutaway</mat-checkbox
+        >Cutaway</mat-checkbox
-    >
+        >
-  </p>
+      </p>
-  <mat-form-field>
+      <mat-form-field>
-    <textarea
+        <textarea
-      matInput
+          matInput
-      placeholder="Comments"
+          placeholder="Comments"
-      name="comments"
+          name="comments"
-      [(ngModel)]="jump.notes"
+          [(ngModel)]="jump.notes"
-      name="comments"
+          name="comments"
-      type="text"
+          type="text"
-    ></textarea>
+        ></textarea>
-  </mat-form-field>
+      </mat-form-field>
 
-  <br />
+      <br />
-  <button mat-raised-button color="accent" *ngIf="editMode">Update</button>
+      @if (editMode) {
-</form>
+        <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";
@@ -20,14 +20,13 @@ import { ServiceComm } from "../../services/service-comm.service";
   styleUrls: ["./jump-infos.component.css"],
   imports: [
     TranslateModule,
-    CommonModule,
     FormsModule,
     MatCheckboxModule,
     MatFormFieldModule,
     ReactiveFormsModule,
     MatInputModule,
-    MatButtonModule,
+    MatButtonModule
-  ],
+],
 })
 export class JumpInfosComponent implements OnInit {
   public editMode: boolean;

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

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

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";
 
@@ -20,12 +20,11 @@ import { AircraftResp } from "../../models/aircraft";
   styleUrls: ["./list-of-aircrafts.component.css"],
   imports: [
     TranslateModule,
-    CommonModule,
     MatPaginatorModule,
     MatProgressSpinnerModule,
     MatTableModule,
-    MatButtonModule,
+    MatButtonModule
-  ],
+],
 })
 export class ListOfAircraftsComponent implements OnInit {
   public displayedColumns: Array<string> = ["name", "imageData"];

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

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

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

@@ -1,68 +1,61 @@
 <div class="content">
-  <div *ngIf="dataSourceTable != null; else loading">
+  @if (dataSourceTable != null) {
-    <button mat-raised-button color="accent" (click)="openDialogToAdd()">
+    <div>
-      {{ "ListGears_Add" | translate }}
+      <button mat-raised-button color="accent" (click)="openDialogToAdd()">
-    </button>
+        {{ "ListGears_Add" | translate }}
-
+      </button>
-    <table mat-table [dataSource]="dataSourceTable">
+      <table mat-table [dataSource]="dataSourceTable">
-      <ng-container matColumnDef="id">
+        <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef>
+          <th mat-header-cell *matHeaderCellDef>
-          {{ "ListGears_Header_Id" | translate }}
+            {{ "ListGears_Header_Id" | translate }}
-        </th>
+          </th>
-        <td mat-cell *matCellDef="let element">{{ element.id }}</td>
+          <td mat-cell *matCellDef="let element">{{ element.id }}</td>
-      </ng-container>
+        </ng-container>
-
+        <ng-container matColumnDef="name">
-      <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef style="min-width: 130px">
-        <th mat-header-cell *matHeaderCellDef style="min-width: 130px">
+            {{ "ListGears_Header_Name" | translate }}
-          {{ "ListGears_Header_Name" | translate }}
+          </th>
-        </th>
+          <td mat-cell *matCellDef="let element">{{ element.name }}</td>
-        <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+        </ng-container>
-      </ng-container>
+        <ng-container matColumnDef="manufacturer">
-
+          <th mat-header-cell *matHeaderCellDef>
-      <ng-container matColumnDef="manufacturer">
+            {{ "ListGears_Header_Manufacturer" | translate }}
-        <th mat-header-cell *matHeaderCellDef>
+          </th>
-          {{ "ListGears_Header_Manufacturer" | translate }}
+          <td mat-cell *matCellDef="let element">{{ element.manufacturer }}</td>
-        </th>
+        </ng-container>
-        <td mat-cell *matCellDef="let element">{{ element.manufacturer }}</td>
+        <ng-container matColumnDef="maxSize">
-      </ng-container>
+          <th mat-header-cell *matHeaderCellDef style="min-width: 90px">
-
+            {{ "ListGears_Header_CanopySize" | translate }}
-      <ng-container matColumnDef="maxSize">
+          </th>
-        <th mat-header-cell *matHeaderCellDef style="min-width: 90px">
+          <td mat-cell *matCellDef="let element">
-          {{ "ListGears_Header_CanopySize" | translate }}
+            {{ element.minSize }} - {{ element.maxSize }}
-        </th>
+          </td>
-        <td mat-cell *matCellDef="let element">
+        </ng-container>
-          {{ element.minSize }} - {{ element.maxSize }}
+        <ng-container matColumnDef="aad">
-        </td>
+          <th mat-header-cell *matHeaderCellDef>
-      </ng-container>
+            {{ "ListGears_Header_Aad" | translate }}
-
+          </th>
-      <ng-container matColumnDef="aad">
+          <td mat-cell *matCellDef="let element">{{ element.aad }}</td>
-        <th mat-header-cell *matHeaderCellDef>
+        </ng-container>
-          {{ "ListGears_Header_Aad" | translate }}
+        <ng-container matColumnDef="mainCanopy">
-        </th>
+          <th mat-header-cell *matHeaderCellDef>
-        <td mat-cell *matCellDef="let element">{{ element.aad }}</td>
+            {{ "ListGears_Header_Main" | translate }}
-      </ng-container>
+          </th>
-
+          <td mat-cell *matCellDef="let element">{{ element.mainCanopy }}</td>
-      <ng-container matColumnDef="mainCanopy">
+        </ng-container>
-        <th mat-header-cell *matHeaderCellDef>
+        <ng-container matColumnDef="reserveCanopy">
-          {{ "ListGears_Header_Main" | translate }}
+          <th mat-header-cell *matHeaderCellDef>
-        </th>
+            {{ "ListGears_Header_Reserve" | translate }}
-        <td mat-cell *matCellDef="let element">{{ element.mainCanopy }}</td>
+          </th>
-      </ng-container>
+          <td mat-cell *matCellDef="let element">{{ element.reserveCanopy }}</td>
-
+        </ng-container>
-      <ng-container matColumnDef="reserveCanopy">
+        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-        <th mat-header-cell *matHeaderCellDef>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-          {{ "ListGears_Header_Reserve" | translate }}
+      </table>
-        </th>
+    </div>
-        <td mat-cell *matCellDef="let element">{{ element.reserveCanopy }}</td>
+  } @else {
-      </ng-container>
+    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-
+  }
-      <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>
 </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";
 
@@ -19,12 +19,11 @@ import { NewGearComponent } from "../new-gear/new-gear.component";
   styleUrls: ["./list-of-gears.component.css"],
   imports: [
     TranslateModule,
-    CommonModule,
     MatPaginatorModule,
     MatProgressSpinnerModule,
     MatTableModule,
-    MatButtonModule,
+    MatButtonModule
-  ],
+],
 })
 export class ListOfGearsComponent implements OnInit {
   public displayedColumns: Array<string> = [

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

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

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

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

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";
 
@@ -20,12 +20,11 @@ import { NewJumpTypeComponent } from "../new-jump-type/new-jump-type.component";
   styleUrls: ["./list-of-jump-types.component.css"],
   imports: [
     TranslateModule,
-    CommonModule,
     MatPaginatorModule,
     MatProgressSpinnerModule,
     MatTableModule,
-    MatButtonModule,
+    MatButtonModule
-  ],
+],
 })
 export class ListOfJumpTypesComponent implements OnInit {
   public displayedColumns: Array<string> = ["name"];

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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