Back/skydiveLogs-api.DomainBusiness/StatsService.cs

@@ -345,6 +345,7 @@ namespace skydiveLogs_api.DomainBusiness
             myStats.ForLastMonthByJumpType = resetStats.ForLastMonthByJumpType;
             myStats.ForLastYearByDz = resetStats.ForLastYearByDz;
             myStats.ForLastYearByJumpType = resetStats.ForLastYearByJumpType;
+            myStats.ByYearByJumpType = resetStats.ByYearByJumpType;
 
             _userStatsRepository.Update(myStats);
         }
@@ -358,8 +359,10 @@ namespace skydiveLogs_api.DomainBusiness
             var allStats = _userStatsRepository.GetAll(_identityService.ConnectedUser);
             if (allStats == null)
             {
-                allStats = new UserStats();
+                allStats = new UserStats
-                allStats.User = _identityService.ConnectedUser;
+                {
+                    User = _identityService.ConnectedUser
+                };
                 _userStatsRepository.Add(allStats);
             }
 

Dockerfile

@@ -2,15 +2,17 @@
 
 # Use the official Microsoft ASP.NET Core image to build the backend
 FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build-backend
-WORKDIR "/src/backend"
+WORKDIR /src/backend
-COPY Back/ .
+COPY Back .
-RUN dotnet restore "skydiveLogs-api/skydiveLogs-api.csproj"
+RUN dotnet restore skydiveLogs-api/skydiveLogs-api.csproj
-RUN dotnet publish "skydiveLogs-api/skydiveLogs-api.csproj" -c Release -o /app/publish
+RUN dotnet publish skydiveLogs-api/skydiveLogs-api.csproj -c Release -o /app/publish
 
 # Use the official node image to build the Angular app
-FROM node:20-alpine AS build-frontend
+FROM node:22-alpine AS build-frontend
 WORKDIR /app
-COPY ["Front/skydivelogs-app/package.json", "Front/skydivelogs-app/package-lock.json*", "./"]
+# COPY ["../Front/skydivelogs-app/package.json", "../Front/skydivelogs-app/package-lock.json*", "./"]
+COPY Front/skydivelogs-app/package.json .
+COPY Front/skydivelogs-app/package-lock.json .
 RUN npm install
 COPY --exclude=Front/skydivelogs-app/node_modules/* Front/skydivelogs-app/ .
 RUN npm run build
@@ -21,13 +23,12 @@ WORKDIR /app
 
 # Install nginx
 RUN apt-get update && apt-get install -y nginx curl && rm -rf /var/lib/apt/lists/*
-
 # Copy custom nginx configuration
 COPY nginx.conf /etc/nginx/sites-available/default
 RUN rm -rf /usr/share/nginx/html/*
-
 # Copy frontend dist folder to nginx html directory
-COPY --from=build-frontend /app/dist/browser /usr/share/nginx/html
+COPY --from=build-frontend --exclude=/app/dist/browser/config/* /app/dist/browser /usr/share/nginx/html
+RUN mkdir -p /usr/share/nginx/html/config
 
 # Copy backend from the correct build stage
 COPY --from=build-backend /app/publish /app

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

@@ -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",
@@ -26,11 +26,7 @@
                         "assets": [
                             "src/assets",
                             "src/config",
-              "src/favicon.ico",
+                            "src/favicon.ico"
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
                         ],
                         "styles": [
                             "src/assets/css/styles-app-loading.scss",
@@ -87,7 +83,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 +95,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 +115,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

@@ -5,23 +5,23 @@
     "scripts": {
         "ng": "ng",
         "start": "ng serve",
-    "build": "ng build",
+        "build": "ng build --configuration production",
         "test": "ng test",
         "lint": "ng lint",
         "e2e": "ng e2e"
     },
     "private": true,
     "dependencies": {
-    "@angular/animations": "^19.2.6",
+        "@angular/animations": "^20.3.16",
-    "@angular/cdk": "^19.2.9",
+        "@angular/cdk": "^20.2.14",
-    "@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/material": "^20.2.14",
-    "@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.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,15 +1,3 @@
-/* .hamburger__icon {
-  position: relative;
-  height: 1rem;
-  margin-right: 1rem;
-  cursor: pointer;
-  fill: #ffff;
-}
-
-.hamburger__icon__fill {
-  fill: #424242
-} */
-
 .navigation.side-menu-active {
     left: 0px;
 }

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

@@ -1,7 +1,9 @@
-<mat-toolbar *ngIf="this.show()">
+@if (this.show()) {
-  <mat-icon svgIcon="menu" (click)="snav.toggle()"></mat-icon>
+    <mat-toolbar>
-  <h2>{{ translatedTitle }}</h2>
+        <h2 (click)="snav.toggle()">
-
+            <mat-icon svgIcon="menu"></mat-icon>
+            {{ translatedTitle }}
+        </h2>
         <mat-select
             [(value)]="selectedLanguageFlag"
             (selectionChange)="switchLang($event)"
@@ -21,6 +23,7 @@
             </mat-option>
         </mat-select>
     </mat-toolbar>
+}
 
 <mat-sidenav-container>
     <mat-sidenav #snav mode="over" style="padding: 0 20px 0 10px">
@@ -153,7 +156,8 @@
                 >{{ "App_Nav_Gears" | translate }}</a
             >
         </mat-nav-list>
-    <mat-nav-list *ngIf="currentUser">
+        @if (currentUser) {
+            <mat-nav-list>
                 <hr class="splitter" />
                 <mat-icon
                     aria-hidden="false"
@@ -166,19 +170,25 @@
                     (click)="snav.toggle()"
                     skipLocationChange
                 >
-        {{ this.currentUser.firstName }} {{ this.currentUser.lastName }}
+                    {{ this.currentUser.firstName }}
+                    {{ this.currentUser.lastName }}
                 </a>
             </mat-nav-list>
-    <mat-nav-list *ngIf="currentUser">
+        }
+        @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">{{
+                <span
-        "App_Nav_Logout" | translate
+                    (click)="snav.toggle(); logout()"
-      }}</span>
+                    style="cursor: pointer"
+                    >{{ "App_Nav_Logout" | translate }}</span
+                >
             </mat-nav-list>
+        }
     </mat-sidenav>
 
     <mat-sidenav-content>

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,
@@ -59,7 +58,9 @@ export class AppComponent implements OnInit {
     ) {
         const sanitizer = inject(DomSanitizer);
         const resolver: IconResolver = (name) =>
-      sanitizer.bypassSecurityTrustResourceUrl(`/assets/icon/${name}.svg`);
+            sanitizer.bypassSecurityTrustResourceUrl(
+                `/assets/icon/${name}.svg`,
+            );
         const iconRegistry = inject(MatIconRegistry);
         iconRegistry.addSvgIconResolver(resolver);
 
@@ -79,7 +80,8 @@ export class AppComponent implements OnInit {
         });
     }
 
-  ngOnInit() {
+    ngOnInit() {}
+    ngAfterViewInit() {
         this.serviceComm.componentTitle.subscribe(
             (title) => (this.translatedTitle = title),
         );

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

@@ -56,7 +56,9 @@ export const appConfig: ApplicationConfig = {
             const initializerFn = initConfig(inject(ConfigurationHelper));
             return initializerFn();
         }),
-    provideHttpClient(withInterceptors([JwtAuthInterceptor, ErrorInterceptor])),
+        provideHttpClient(
+            withInterceptors([JwtAuthInterceptor, ErrorInterceptor]),
+        ),
         provideCharts(withDefaultRegisterables()),
         provideZoneChangeDetection({ eventCoalescing: true }),
         provideRouter(routes),

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

@@ -6,13 +6,17 @@ export const routes: Routes = [
     {
         path: "",
         loadComponent: () =>
-      import("./default/default.component").then((m) => m.DefaultComponent),
+            import("./default/default.component").then(
+                (m) => m.DefaultComponent,
+            ),
         canActivate: [AuthGuardService],
     },
     {
         path: "summary",
         loadComponent: () =>
-      import("./summary/summary.component").then((m) => m.SummaryComponent),
+            import("./summary/summary.component").then(
+                (m) => m.SummaryComponent,
+            ),
         canActivate: [AuthGuardService],
     },
     {
@@ -34,7 +38,9 @@ export const routes: Routes = [
     {
         path: "newjump",
         loadComponent: () =>
-      import("./new-jump/new-jump.component").then((m) => m.NewJumpComponent),
+            import("./new-jump/new-jump.component").then(
+                (m) => m.NewJumpComponent,
+            ),
         canActivate: [AuthGuardService],
     },
     {

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

@@ -7,98 +7,130 @@
 >
     <p>
         <mat-form-field>
-      <mat-label>{{ "LoginCreateUser_Firstname" | translate }}</mat-label>
+            <mat-label>{{ "CreateUser_Firstname" | translate }}</mat-label>
             <input
                 type="text"
                 matInput
                 #firstname="matInput"
                 formControlName="firstname"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls['firstname'].errors }"
+                [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>
+                    {{ "CreateUser_FirstnameRequired" | translate }}
                 </mat-error>
-      <mat-error *ngIf="formCtrls['firstname'].hasError('minlength')">
+            }
-        {{ "LoginCreateUser_FirstnamePattern" | translate }}
+            @if (formCtrls["firstname"].hasError("minlength")) {
+                <mat-error>
+                    {{ "CreateUser_FirstnamePattern" | translate }}
                 </mat-error>
+            }
         </mat-form-field>
     </p>
     <p>
         <mat-form-field>
-      <mat-label>{{ "LoginCreateUser_Lastname" | translate }}</mat-label>
+            <mat-label>{{ "CreateUser_Lastname" | translate }}</mat-label>
             <input
                 matInput
                 type="text"
                 formControlName="lastname"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls['lastname'].errors }"
+                [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>
+                    {{ "CreateUser_LastnameRequired" | translate }}
                 </mat-error>
-      <mat-error *ngIf="formCtrls['lastname'].hasError('minlength')">
+            }
-        {{ "LoginCreateUser_LastnamePattern" | translate }}
+            @if (formCtrls["lastname"].hasError("minlength")) {
+                <mat-error>
+                    {{ "CreateUser_LastnamePattern" | translate }}
                 </mat-error>
+            }
         </mat-form-field>
     </p>
     <p>
         <mat-form-field>
-      <mat-label>{{ "LoginCreateUser_Email" | translate }}</mat-label>
+            <mat-label>{{ "CreateUser_Email" | translate }}</mat-label>
             <input
                 matInput
                 type="email"
                 formControlName="email"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls['email'].errors }"
+                [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>
+                    {{ "CreateUser_EmailRequired" | translate }}
                 </mat-error>
-      <mat-error *ngIf="formCtrls['email'].hasError('email')">
+            }
-        {{ "LoginCreateUser_EmailPattern" | translate }}
+            @if (formCtrls["email"].hasError("email")) {
+                <mat-error>
+                    {{ "CreateUser_EmailPattern" | translate }}
                 </mat-error>
+            }
         </mat-form-field>
     </p>
     <p>
         <mat-form-field>
-      <mat-label>{{ "LoginCreateUser_Username" | translate }}</mat-label>
+            <mat-label>{{ "CreateUser_Username" | translate }}</mat-label>
             <input
                 matInput
                 type="text"
                 formControlName="username"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls['username'].errors }"
+                [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>
+                    {{ "CreateUser_UsernameRequired" | translate }}
                 </mat-error>
-      <mat-error *ngIf="formCtrls['username'].hasError('minlength')">
+            }
-        {{ "LoginCreateUser_UsernamePattern" | translate }}
+            @if (formCtrls["username"].hasError("minlength")) {
+                <mat-error>
+                    {{ "CreateUser_UsernamePattern" | translate }}
                 </mat-error>
+            }
         </mat-form-field>
     </p>
     <p>
         <mat-form-field>
-      <mat-label>{{ "LoginCreateUser_Password" | translate }}</mat-label>
+            <mat-label>{{ "CreateUser_Password" | translate }}</mat-label>
             <input
                 matInput
                 type="password"
                 formControlName="password"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls['password'].errors }"
+                [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>
+                    {{ "CreateUser_PasswordRequired" | translate }}
                 </mat-error>
-      <mat-error *ngIf="formCtrls['password'].hasError('pattern')">
+            }
-        {{ "LoginCreateUser_PasswordPattern" | translate }}
+            @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 }}
+        {{ "CreateUser_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

@@ -30,5 +30,7 @@
     </mat-form-field>
 
     <br />
-  <button mat-raised-button color="accent" *ngIf="editMode">Update</button>
+    @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";
@@ -20,7 +20,6 @@ import { ServiceComm } from "../../services/service-comm.service";
     styleUrls: ["./jump-infos.component.css"],
     imports: [
         TranslateModule,
-    CommonModule,
         FormsModule,
         MatCheckboxModule,
         MatFormFieldModule,
@@ -36,7 +35,7 @@ export class JumpInfosComponent implements OnInit {
     constructor(
         @Inject(MAT_DIALOG_DATA) public data: any,
         private serviceJump: JumpService,
-    private serviceComm: ServiceComm
+        private serviceComm: ServiceComm,
     ) {
         this.jump = new JumpResp(data.jump);
         this.editMode = data.editMode;
@@ -50,7 +49,7 @@ export class JumpInfosComponent implements OnInit {
                 this.jump.id,
                 this.jump.isSpecial,
                 this.jump.withCutaway,
-        this.jump.notes
+                this.jump.notes,
             )
             .subscribe(() => {
                 this.serviceComm.refreshData(AddAction.Jump);

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

@@ -1,14 +1,15 @@
 <div class="content">
-  <div *ngIf="dataSourceTable != null; else loading">
+    @if (dataSourceTable != null) {
+        <div>
+            @if (isUserAdmin == true) {
                 <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>
@@ -16,14 +17,14 @@
                     </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>
+                    <td mat-cell *matCellDef="let element">
+                        {{ element.name }}
+                    </td>
                 </ng-container>
-
                 <ng-container matColumnDef="imageData">
                     <th mat-header-cell *matHeaderCellDef>
                         {{ "ListAircrafts_Header_Image" | translate }}
@@ -36,14 +37,18 @@
                         />
                     </td>
                 </ng-container>
-
+                <tr
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                    mat-header-row
-      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                    *matHeaderRowDef="displayedColumns; sticky: true"
+                ></tr>
+                <tr
+                    mat-row
+                    *matRowDef="let row; columns: displayedColumns"
+                ></tr>
             </table>
         </div>
-  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
+    } @else {
-
-  <ng-template #loading>
         <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
+    }
+    <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";
 
@@ -20,7 +20,6 @@ import { AircraftResp } from "../../models/aircraft";
     styleUrls: ["./list-of-aircrafts.component.css"],
     imports: [
         TranslateModule,
-    CommonModule,
         MatPaginatorModule,
         MatProgressSpinnerModule,
         MatTableModule,
@@ -39,7 +38,7 @@ export class ListOfAircraftsComponent implements OnInit {
         private serviceComm: ServiceComm,
         private authenticationService: AuthenticationService,
         public dialog: MatDialog,
-    private translateService: TranslateService
+        private translateService: TranslateService,
     ) {
         this.isUserAdmin =
             this.authenticationService.currentUserValue.roles === "admin";
@@ -66,7 +65,9 @@ export class ListOfAircraftsComponent implements OnInit {
         this.serviceApi.getListOfAircrafts().subscribe((data) => {
             setTimeout(() => {
                 data.sort((a, b) => a.name.localeCompare(b.name));
-        this.dataSourceTable = new MatTableDataSource<AircraftResp>(data);
+                this.dataSourceTable = new MatTableDataSource<AircraftResp>(
+                    data,
+                );
                 this.dataSourceTable.paginator = this.paginator;
                 this.resultsLength = data.length;
             }, 500);

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

@@ -1,14 +1,15 @@
 <div class="content">
-  <div *ngIf="dataSourceTable != null; else loading">
+    @if (dataSourceTable != null) {
+        <div>
+            @if (isUserAdmin == true) {
                 <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
@@ -18,28 +19,37 @@
                     #input
                 />
             </mat-form-field>
-
             <table mat-table [dataSource]="dataSourceTable">
                 <ng-container matColumnDef="isfavorite">
-        <th mat-header-cell *matHeaderCellDef style="min-width: 144px"></th>
+                    <th
-        <td mat-cell *matCellDef="let element" style="text-align: left">
+                        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"
-            *ngIf="element.isFavorite === true"
                                 (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"
-            *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"
@@ -51,9 +61,9 @@
                         <a
                             href="https://www.openstreetmap.org/?mlat={{
                                 element.latitude
-            }}&mlon={{ element.longitude }}#map=14/{{ element.latitude }}/{{
+                            }}&mlon={{ element.longitude }}#map=14/{{
-              element.longitude
+                                element.latitude
-            }}"
+                            }}/{{ element.longitude }}"
                             target="_blank"
                         >
                             <mat-icon
@@ -63,7 +73,8 @@
                                 svgIcon="map"
                             ></mat-icon>
                         </a>
-          <a href="mailto:{{ element.email }}" *ngIf="element.email">
+                        @if (element.email) {
+                            <a href="mailto:{{ element.email }}">
                                 <mat-icon
                                     aria-hidden="false"
                                     aria-label="Contact mail of the DZ"
@@ -71,48 +82,57 @@
                                     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>
+                        <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>
+                        <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>
+                    <td mat-cell *matCellDef="let element">
+                        {{ element.type }}
+                    </td>
                 </ng-container>
-
+                <tr
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                    mat-header-row
-      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                    *matHeaderRowDef="displayedColumns; sticky: true"
+                ></tr>
+                <tr
+                    mat-row
+                    *matRowDef="let row; columns: displayedColumns"
+                ></tr>
             </table>
         </div>
-  <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
+    } @else {
-
-  <ng-template #loading>
         <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
+    }
+    <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";
@@ -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,
@@ -52,7 +51,7 @@ export class ListOfDzsComponent implements OnInit {
         private serviceComm: ServiceComm,
         private authenticationService: AuthenticationService,
         public dialog: MatDialog,
-    private translateService: TranslateService
+        private translateService: TranslateService,
     ) {
         this.isUserAdmin =
             this.authenticationService.currentUserValue.roles === "admin";
@@ -81,9 +80,11 @@ export class ListOfDzsComponent implements OnInit {
                 data.sort(
                     (a, b) =>
                         (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0) ||
-            a.name.localeCompare(b.name)
+                        a.name.localeCompare(b.name),
+                );
+                this.dataSourceTable = new MatTableDataSource<DropZoneResp>(
+                    data,
                 );
-        this.dataSourceTable = new MatTableDataSource<DropZoneResp>(data);
                 this.dataSourceTable.paginator = this.paginator;
                 this.resultsLength = data.length;
             }, 500);

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

@@ -1,9 +1,13 @@
 <div class="content">
-  <div *ngIf="dataSourceTable != null; else loading">
+    @if (dataSourceTable != null) {
-    <button mat-raised-button color="accent" (click)="openDialogToAdd()">
+        <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>
@@ -11,58 +15,74 @@
                     </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">
+                    <th
+                        mat-header-cell
+                        *matHeaderCellDef
+                        style="min-width: 130px"
+                    >
                         {{ "ListGears_Header_Name" | translate }}
                     </th>
-        <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+                    <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>
+                    <td mat-cell *matCellDef="let element">
+                        {{ element.manufacturer }}
+                    </td>
                 </ng-container>
-
                 <ng-container matColumnDef="maxSize">
-        <th mat-header-cell *matHeaderCellDef style="min-width: 90px">
+                    <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>
+                    <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>
+                    <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>
+                    <td mat-cell *matCellDef="let element">
+                        {{ element.reserveCanopy }}
+                    </td>
                 </ng-container>
-
+                <tr
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                    mat-header-row
-      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                    *matHeaderRowDef="displayedColumns; sticky: true"
+                ></tr>
+                <tr
+                    mat-row
+                    *matRowDef="let row; columns: displayedColumns"
+                ></tr>
             </table>
         </div>
-  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
+    } @else {
-
-  <ng-template #loading>
         <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
+    }
+    <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";
 
@@ -19,7 +19,6 @@ import { NewGearComponent } from "../new-gear/new-gear.component";
     styleUrls: ["./list-of-gears.component.css"],
     imports: [
         TranslateModule,
-    CommonModule,
         MatPaginatorModule,
         MatProgressSpinnerModule,
         MatTableModule,
@@ -43,7 +42,7 @@ export class ListOfGearsComponent implements OnInit {
         private serviceApi: GearService,
         private serviceComm: ServiceComm,
         public dialog: MatDialog,
-    private translateService: TranslateService
+        private translateService: TranslateService,
     ) {}
 
     ngOnInit() {

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

@@ -31,22 +31,36 @@
     </form>
 </div>
 
-<div *ngIf="resultsLength > 0">
+@if (resultsLength > 0) {
+    <div>
         <table mat-table [dataSource]="dataSourceTable">
             <ng-container matColumnDef="comment">
-      <th mat-header-cell *matHeaderCellDef style="text-align: center">
+                <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>
+                    <span style="white-space: nowrap">{{
+                        element.comment
+                    }}</span>
                 </td>
             </ng-container>
-
             <ng-container matColumnDef="data">
-      <th mat-header-cell *matHeaderCellDef style="text-align: center">
+                <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    style="text-align: center"
+                >
                     Image
                 </th>
-      <td mat-cell *matCellDef="let element" style="text-align: center">
+                <td
+                    mat-cell
+                    *matCellDef="let element"
+                    style="text-align: center"
+                >
                     <img
                         src="{{ element.data }}"
                         alt="image"
@@ -56,13 +70,15 @@
                     />
                 </td>
             </ng-container>
-
+            <tr
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></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"

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

@@ -95,7 +95,8 @@ export class ListOfImagesComponent implements OnInit {
         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";
+            this.imageError =
+                "Maximum size allowed is " + max_size / 1000 + "Mb";
         } else {
             const reader = new FileReader();
             reader.onload = this.checkAndExtractDataToBase64.bind(this);
@@ -115,7 +116,11 @@ export class ListOfImagesComponent implements OnInit {
 
             if (img_height > max_height && img_width > max_width) {
                 this.imageError =
-          "Maximum dimentions allowed " + max_height + "*" + max_width + "px";
+                    "Maximum dimentions allowed " +
+                    max_height +
+                    "*" +
+                    max_width +
+                    "px";
             } else {
                 const imgBase64Path = e.target.result;
                 this.selectedFile = imgBase64Path;

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

@@ -1,14 +1,15 @@
 <div class="content">
-  <div *ngIf="dataSourceTable != null; else loading">
+    @if (dataSourceTable != null) {
+        <div>
+            @if (isUserAdmin == true) {
                 <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>
@@ -16,21 +17,26 @@
                     </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>
+                    <td mat-cell *matCellDef="let element">
+                        {{ element.name }}
+                    </td>
                 </ng-container>
-
+                <tr
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                    mat-header-row
-      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                    *matHeaderRowDef="displayedColumns; sticky: true"
+                ></tr>
+                <tr
+                    mat-row
+                    *matRowDef="let row; columns: displayedColumns"
+                ></tr>
             </table>
         </div>
-  <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
+    } @else {
-
-  <ng-template #loading>
         <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
+    }
+    <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";
 
@@ -20,7 +20,6 @@ import { NewJumpTypeComponent } from "../new-jump-type/new-jump-type.component";
     styleUrls: ["./list-of-jump-types.component.css"],
     imports: [
         TranslateModule,
-    CommonModule,
         MatPaginatorModule,
         MatProgressSpinnerModule,
         MatTableModule,
@@ -39,7 +38,7 @@ export class ListOfJumpTypesComponent implements OnInit {
         private serviceComm: ServiceComm,
         private authenticationService: AuthenticationService,
         public dialog: MatDialog,
-    private translateService: TranslateService
+        private translateService: TranslateService,
     ) {
         this.isUserAdmin =
             this.authenticationService.currentUserValue.roles === "admin";
@@ -66,7 +65,9 @@ export class ListOfJumpTypesComponent implements OnInit {
         this.serviceApi.getListOfJumpTypes().subscribe((data) => {
             setTimeout(() => {
                 data.sort((a, b) => a.name.localeCompare(b.name));
-        this.dataSourceTable = new MatTableDataSource<JumpTypeResp>(data);
+                this.dataSourceTable = new MatTableDataSource<JumpTypeResp>(
+                    data,
+                );
                 this.dataSourceTable.paginator = this.paginator;
                 this.resultsLength = data.length;
             }, 500);

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

@@ -11,10 +11,9 @@
         </button>
     </div>
 
-  <mat-progress-bar
+    @if (isLoading) {
-    [mode]="'indeterminate'"
+        <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
-    *ngIf="isLoading"
+    }
-  ></mat-progress-bar>
 
     <div>
         <table mat-table [dataSource]="dataSourceTable">
@@ -47,7 +46,9 @@
                     <mat-icon
                         aria-hidden="false"
                         aria-label="Special jump"
-            [style.visibility]="element.isSpecial ? 'visible' : 'hidden'"
+                        [style.visibility]="
+                            element.isSpecial ? 'visible' : 'hidden'
+                        "
                         svgIcon="celebration"
                     ></mat-icon>
                 </td>
@@ -59,7 +60,8 @@
                 </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>
@@ -84,7 +86,11 @@
                 >
                     {{ "ListJump_Header_JumpType" | translate }}
                 </th>
-        <td mat-cell *matCellDef="let element" style="text-wrap: nowrap">
+                <td
+                    mat-cell
+                    *matCellDef="let element"
+                    style="text-wrap: nowrap"
+                >
                     <span
                         class="smallSpanWithBreakWord"
                         [innerHTML]="element.jumpType.name"
@@ -120,7 +126,9 @@
                 <th mat-header-cell *matHeaderCellDef>
                     {{ "ListJump_Header_Id" | translate }}
                 </th>
-        <td mat-cell *matCellDef="let element">{{ element.gear.name }}</td>
+                <td mat-cell *matCellDef="let element">
+                    {{ element.gear.name }}
+                </td>
             </ng-container>
 
             <ng-container matColumnDef="actions">
@@ -151,7 +159,10 @@
                 </td>
             </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>
         </table>
     </div>

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

@@ -63,7 +63,7 @@ export class ListOfJumpsComponent implements OnInit {
         private serviceComm: ServiceComm,
         public dialog: MatDialog,
         private translateService: TranslateService,
-    private statsService: StatsService
+        private statsService: StatsService,
     ) {}
 
     ngAferViewInit(): void {

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

@@ -11,10 +11,9 @@
         </button>
     </div>
 
-  <mat-progress-bar
+    @if (isLoading) {
-    [mode]="'indeterminate'"
+        <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
-    *ngIf="isLoading"
+    }
-  ></mat-progress-bar>
 
     <mat-radio-group
         [(ngModel)]="selectedPeriod"
@@ -32,9 +31,11 @@
     </mat-radio-group>
 
     <mat-nav-list>
-    <mat-list-item matListItemLine *ngFor="let stat of stats">
+        @for (stat of stats; track stat) {
+            <mat-list-item matListItemLine>
                 <label>{{ stat.id }} : {{ stat.values }}</label>
             </mat-list-item>
+        }
     </mat-nav-list>
 
     <div class="chart-container">
@@ -54,18 +55,17 @@
             {{ "ListTunnelFlight_LoadTable" | translate }}
         </button>
 
-    <table
+        @if (dataSourceTable?.data.length) {
-      mat-table
+            <table mat-table [dataSource]="dataSourceTable">
-      [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>
+                        <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">
@@ -75,7 +75,6 @@
                         ></span>
                     </td>
                 </ng-container>
-
                 <ng-container matColumnDef="jumpType">
                     <th mat-header-cell *matHeaderCellDef>Jump Type</th>
                     <td mat-cell *matCellDef="let element">
@@ -85,7 +84,6 @@
                         ></span>
                     </td>
                 </ng-container>
-
                 <ng-container matColumnDef="nbMinutes">
                     <th mat-header-cell *matHeaderCellDef>Minutes</th>
                     <td mat-cell *matCellDef="let element">
@@ -95,7 +93,6 @@
                         ></span>
                     </td>
                 </ng-container>
-
                 <ng-container matColumnDef="notes">
                     <th mat-header-cell *matHeaderCellDef>Notes</th>
                     <td mat-cell *matCellDef="let element">
@@ -105,20 +102,28 @@
                         ></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'"
+                            [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>
+                    <th
-        <td mat-cell *matCellDef="let element" style="text-align: left">
+                        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"
@@ -128,9 +133,15 @@
                         ></mat-icon>
                     </td>
                 </ng-container>
-
+                <tr
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                    mat-header-row
-      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                    *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

@@ -65,7 +65,7 @@ export class ListOfTunnelFlightsComponent implements OnInit {
         private serviceComm: ServiceComm,
         private serviceTunnelFlight: TunnelFlightService,
         private translateService: TranslateService,
-    private dateService: DateService
+        private dateService: DateService,
     ) {}
 
     ngOnInit() {
@@ -124,7 +124,9 @@ export class ListOfTunnelFlightsComponent implements OnInit {
     }
 
     private updateTitle() {
-    this.translateService.get("ListTunnelFlight_Title").subscribe((data) => {
+        this.translateService
+            .get("ListTunnelFlight_Title")
+            .subscribe((data) => {
                 this.serviceComm.updatedComponentTitle(data);
             });
     }
@@ -135,7 +137,10 @@ export class ListOfTunnelFlightsComponent implements OnInit {
         // Get data to show in a table
         let endDate = new Date();
         endDate.setHours(0, 0, 0, 0);
-    let beginDate = this.computeBeginDateByPeriod(this.selectedPeriod, endDate);
+        let beginDate = this.computeBeginDateByPeriod(
+            this.selectedPeriod,
+            endDate,
+        );
 
         this.serviceTunnelFlight
             .getTunnelFlights(beginDate, endDate)
@@ -151,7 +156,10 @@ export class ListOfTunnelFlightsComponent implements OnInit {
         // Get data to show in a table
         let endDate = new Date();
         endDate.setHours(0, 0, 0, 0);
-    let beginDate = this.computeBeginDateByPeriod(this.selectedPeriod, endDate);
+        let beginDate = this.computeBeginDateByPeriod(
+            this.selectedPeriod,
+            endDate,
+        );
 
         this.serviceTunnelFlight
             .getTunnelFlightsByMonth(beginDate, endDate)
@@ -159,7 +167,7 @@ export class ListOfTunnelFlightsComponent implements OnInit {
                 const allMonths = this.getMontsBetweenDates(beginDate, endDate);
                 const cumulatedTime = this.getCumulatedTimeByTypeByMonth(
                     data,
-          allMonths
+                    allMonths,
                 );
                 this.computeTimeByType(data);
                 this.barChartData = {
@@ -177,12 +185,16 @@ export class ListOfTunnelFlightsComponent implements OnInit {
             .pipe(
                 groupBy((type) => type.type, { element: (p) => p.nb }),
                 mergeMap((group$) =>
-          group$.pipe(reduce((acc, cur) => [...acc, cur], [`${group$.key}`]))
+                    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),
+                    values: arr
-        }))
+                        .slice(1)
+                        .reduce((a, b) => Number(a) + Number(b), 0),
+                })),
             )
             .subscribe((p) => {
                 console.log(p);
@@ -190,7 +202,10 @@ export class ListOfTunnelFlightsComponent implements OnInit {
             });
     }
 
-  private getMontsBetweenDates(beginDate: Date, endDate: Date): Array<string> {
+    private getMontsBetweenDates(
+        beginDate: Date,
+        endDate: Date,
+    ): Array<string> {
         let results: Array<string> = [];
         let tmpBeginDate = new Date(beginDate.getTime());
         const tmpEndDate = new Date(endDate.getTime());
@@ -205,15 +220,17 @@ export class ListOfTunnelFlightsComponent implements OnInit {
 
     private getCumulatedTimeByTypeByMonth(
         stats: TunnelFlightByMonth[],
-    allMonths: string[]
+        allMonths: string[],
     ): Array<any> {
         let tmpResults = new Map<string, number[]>();
 
-    const disctintType = Array.from(new Set(stats.map((item) => item.type)));
+        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)
+                Array.from({ length: allMonths.length }, (v, k) => 0),
             );
         });
 
@@ -247,7 +264,7 @@ export class ListOfTunnelFlightsComponent implements OnInit {
 
     private computeBeginDateByPeriod(
         selectedPeriod: String,
-    endDate: Date
+        endDate: Date,
     ): Date {
         let beginDate = new Date();
 

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

@@ -13,14 +13,20 @@
                 matInput
                 #username="matInput"
                 formControlName="username"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls['username'].errors }"
+                [ngClass]="{
+                    'is-invalid': submitted && formCtrls['username'].errors,
+                }"
             />
-      <mat-error *ngIf="formCtrls['username'].hasError('required')">
+            @if (formCtrls["username"].hasError("required")) {
+                <mat-error>
                     {{ "LoginUser_UsernameRequired" | translate }}
                 </mat-error>
-      <mat-error *ngIf="formCtrls['username'].hasError('minlength')">
+            }
+            @if (formCtrls["username"].hasError("minlength")) {
+                <mat-error>
                     {{ 'LoginUser_UsernamePattern | translate }}
                 </mat-error>
+            }
         </mat-form-field>
     </p>
     <p>
@@ -30,21 +36,31 @@
                 type="password"
                 matInput
                 formControlName="password"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls['password'].errors }"
+                [ngClass]="{
+                    'is-invalid': submitted && formCtrls['password'].errors,
+                }"
             />
-      <mat-error *ngIf="formCtrls['password'].hasError('required')">
+            @if (formCtrls["password"].hasError("required")) {
+                <mat-error>
                     {{ "LoginUser_PasswordRequired" | translate }}
                 </mat-error>
-      <mat-error *ngIf="formCtrls['password'].hasError('pattern')">
+            }
+            @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-user/login-user.component.ts

@@ -41,7 +41,7 @@ export class LoginUserComponent implements OnInit {
         private formBuilder: FormBuilder,
         private route: ActivatedRoute,
         private router: Router,
-    private authenticationService: AuthenticationService
+        private authenticationService: AuthenticationService,
     ) {
         if (this.authenticationService.currentUserValue) {
             this.router.navigate(["/"]);
@@ -54,7 +54,7 @@ export class LoginUserComponent implements OnInit {
                 username: ["", [Validators.required, Validators.minLength(3)]],
                 password: ["", [Validators.required]],
             },
-      { updateOn: "submit" }
+            { updateOn: "submit" },
         );
 
         // get return url from route parameters or default to '/'
@@ -73,7 +73,7 @@ export class LoginUserComponent implements OnInit {
             this.authenticationService
                 .login(
                     this.formCtrls["username"].value,
-          this.formCtrls["password"].value
+                    this.formCtrls["password"].value,
                 )
                 .pipe(first())
                 .subscribe({

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

@@ -16,7 +16,9 @@
             >
                 <mat-select-trigger>
                     <img
-            src="{{ 'assets/img/' + selectedLanguageFlag + '.svg' }}"
+                        src="{{
+                            'assets/img/' + selectedLanguageFlag + '.svg'
+                        }}"
                         style="width: 30px"
                     />
                 </mat-select-trigger>
@@ -31,10 +33,16 @@
 
         <mat-card-content>
             <mat-tab-group mat-align-tabs="center" animationDuration="0ms">
-        <mat-tab label="{{ 'Login_Tab_WithUser' | translate }}" tabIndex="-1">
+                <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">
+                <mat-tab
+                    label="{{ 'Login_Tab_CreateUser' | translate }}"
+                    tabIndex="-1"
+                >
                     <app-create-user></app-create-user>
                 </mat-tab>
             </mat-tab-group>

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,7 +19,6 @@ import { CreateUserComponent } from "../create-user/create-user.component";
     styleUrls: ["./login.component.css"],
     imports: [
         TranslateModule,
-    CommonModule,
         MatSelectModule,
         MatOptionModule,
         MatCardModule,

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

@@ -3,12 +3,19 @@
         <p>
             <mat-form-field>
                 <mat-label>Aircraft name</mat-label>
-        <input matInput type="text" formControlName="aircraftName">
+                <input matInput type="text" formControlName="aircraftName" />
             </mat-form-field>
         </p>
         <p>
-      <input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" formControlName="image"
+            <input
-        (change)="onFileChanged($event)" />
+                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>

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

@@ -79,7 +79,8 @@ export class NewAircraftComponent implements OnInit {
         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";
+            this.imageError =
+                "Maximum size allowed is " + max_size / 1000 + "Mb";
         } else {
             const reader = new FileReader();
             reader.onload = this.checkAndExtractDataToBase64.bind(this);
@@ -99,7 +100,11 @@ export class NewAircraftComponent implements OnInit {
 
             if (img_height > max_height && img_width > max_width) {
                 this.imageError =
-          "Maximum dimentions allowed " + max_height + "*" + max_width + "px";
+                    "Maximum dimentions allowed " +
+                    max_height +
+                    "*" +
+                    max_width +
+                    "px";
             } else {
                 const imgBase64Path = e.target.result;
                 this.selectedFile = imgBase64Path;

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

@@ -3,43 +3,43 @@
         <p>
             <mat-form-field>
                 <mat-label>Name of gear</mat-label>
-        <input matInput type="text" formControlName="name">
+                <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">
+                <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">
+                <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">
+                <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">
+                <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">
+                <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">
+                <input matInput type="text" formControlName="reserveCanopy" />
             </mat-form-field>
         </p>
 

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

@@ -3,7 +3,7 @@
         <p>
             <mat-form-field>
                 <mat-label>Jump type name</mat-label>
-        <input matInput type="text" formControlName="jumptypeName">
+                <input matInput type="text" formControlName="jumptypeName" />
             </mat-form-field>
         </p>
 

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

@@ -53,7 +53,9 @@ export class NewJumpTypeComponent implements OnInit {
     }
 
     onSubmit(formData) {
-    this.jumpTypeService.addJumpType(formData.jumptypeName).subscribe(() => {
+        this.jumpTypeService
+            .addJumpType(formData.jumptypeName)
+            .subscribe(() => {
                 this.serviceComm.refreshData(AddAction.JumpType);
             });
     }

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

@@ -16,13 +16,12 @@
         </p>
     </div>
 
-  <form
+    @if (notLoadingToDisplay()) {
-    class="formNewJumps"
+        <form class="formNewJumps" (ngSubmit)="onFormSubmit()">
-    (ngSubmit)="onFormSubmit()"
-    *ngIf="notLoadingToDisplay(); else loading"
-  >
             <mat-form-field>
-      <mat-label>{{ "NewJump_ChooseJumpType" | translate }}</mat-label>
+                <mat-label>{{
+                    "NewJump_ChooseJumpType" | translate
+                }}</mat-label>
                 <input
                     type="text"
                     matInput
@@ -34,23 +33,27 @@
                     #autoJumpType="matAutocomplete"
                     [displayWith]="displayNameFn"
                 >
-        <mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
+                    @for (jumpType of listOfJumpType; track jumpType) {
+                        <mat-option [value]="jumpType">
                             {{ jumpType.name }}
                         </mat-option>
+                    }
                 </mat-autocomplete>
+                @if (selectedJumpType) {
                     <button
-        *ngIf="selectedJumpType"
                         matSuffix
                         mat-icon-button
                         aria-label="Clear"
                         (click)="selectedJumpType = undefined"
                     >
-        <mat-icon>close</mat-icon>
+                        <mat-icon svgIcon="close"></mat-icon>
                     </button>
+                }
             </mat-form-field>
-
             <mat-form-field>
-      <mat-label>{{ "NewJump_ChooseAircraft" | translate }}</mat-label>
+                <mat-label>{{
+                    "NewJump_ChooseAircraft" | translate
+                }}</mat-label>
                 <input
                     type="text"
                     matInput
@@ -62,21 +65,23 @@
                     #autoAircraft="matAutocomplete"
                     [displayWith]="displayNameFn"
                 >
-        <mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft">
+                    @for (aircraft of listOfAircraft; track aircraft) {
+                        <mat-option [value]="aircraft">
                             {{ aircraft.name }}
                         </mat-option>
+                    }
                 </mat-autocomplete>
+                @if (selectedAircraft) {
                     <button
-        *ngIf="selectedAircraft"
                         matSuffix
                         mat-icon-button
                         aria-label="Clear"
                         (click)="selectedAircraft = undefined"
                     >
-        <mat-icon>close</mat-icon>
+                        <mat-icon svgIcon="close"></mat-icon>
                     </button>
+                }
             </mat-form-field>
-
             <mat-form-field>
                 <mat-label>{{ "NewJump_ChooseDz" | translate }}</mat-label>
                 <input
@@ -91,32 +96,32 @@
                     #autoDropZone="matAutocomplete"
                     [displayWith]="displayNameFn"
                 >
-        <mat-option
+                    @for (dropZone of listOfFilteredDropZone; track dropZone) {
-          *ngFor="let dropZone of listOfFilteredDropZone"
+                        <mat-option [value]="dropZone">
-          [value]="dropZone"
-        >
                             {{ dropZone.name }}
+                            @if (dropZone.isFavorite === true) {
                                 <mat-icon
                                     aria-hidden="false"
                                     aria-label="Favorite"
-            *ngIf="dropZone.isFavorite === true"
                                     color="primary"
+                                    svgIcon="favorite"
                                 >
-            favorite</mat-icon
+                                </mat-icon>
-          >
+                            }
                         </mat-option>
+                    }
                 </mat-autocomplete>
+                @if (selectedDz) {
                     <button
-        *ngIf="selectedDz"
                         matSuffix
                         mat-icon-button
                         aria-label="Clear"
                         (click)="resetDz()"
                     >
-        <mat-icon>close</mat-icon>
+                        <mat-icon svgIcon="close"></mat-icon>
                     </button>
+                }
             </mat-form-field>
-
             <mat-form-field>
                 <mat-label>{{ "NewJump_ChooseGear" | translate }}</mat-label>
                 <input
@@ -130,28 +135,29 @@
                     #autoGear="matAutocomplete"
                     [displayWith]="displayGearFn"
                 >
-        <mat-option *ngFor="let gear of listOfGear" [value]="gear">
+                    @for (gear of listOfGear; track gear) {
+                        <mat-option [value]="gear">
                             {{ gear.name }} ({{ gear.mainCanopy }})
                         </mat-option>
+                    }
                 </mat-autocomplete>
+                @if (selectedGear) {
                     <button
-        *ngIf="selectedGear"
                         matSuffix
                         mat-icon-button
                         aria-label="Clear"
                         (click)="selectedGear = undefined"
                     >
-        <mat-icon>close</mat-icon>
+                        <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
@@ -167,7 +173,6 @@
                 ></mat-datepicker-toggle>
                 <mat-datepicker #beginDateDp disabled="false"></mat-datepicker>
             </mat-form-field>
-
             <mat-form-field>
                 <input
                     matInput
@@ -182,7 +187,6 @@
                 ></mat-datepicker-toggle>
                 <mat-datepicker #endDateDp disabled="false"></mat-datepicker>
             </mat-form-field>
-
             <mat-form-field>
                 <input
                     matInput
@@ -191,15 +195,16 @@
                     name="exitAltitude"
                     type="number"
                 />
+                @if (exitAltitude) {
                     <button
-        *ngIf="exitAltitude"
                         matSuffix
                         mat-icon-button
                         aria-label="Clear"
                         (click)="exitAltitude = undefined"
                     >
-        <mat-icon>close</mat-icon>
+                        <mat-icon svgIcon="close"></mat-icon>
                     </button>
+                }
             </mat-form-field>
             <mat-form-field>
                 <input
@@ -209,17 +214,17 @@
                     name="deployAltitude"
                     type="number"
                 />
+                @if (deployAltitude) {
                     <button
-        *ngIf="deployAltitude"
                         matSuffix
                         mat-icon-button
                         aria-label="Clear"
                         (click)="deployAltitude = undefined"
                     >
-        <mat-icon>close</mat-icon>
+                        <mat-icon svgIcon="close"></mat-icon>
                     </button>
+                }
             </mat-form-field>
-
             <mat-form-field>
                 <input
                     matInput
@@ -228,17 +233,17 @@
                     name="countOfJumps"
                     type="number"
                 />
+                @if (countOfJumps) {
                     <button
-        *ngIf="countOfJumps"
                         matSuffix
                         mat-icon-button
                         aria-label="Clear"
                         (click)="countOfJumps = undefined"
                     >
-        <mat-icon>close</mat-icon>
+                        <mat-icon svgIcon="close"></mat-icon>
                     </button>
+                }
             </mat-form-field>
-
             <mat-form-field>
                 <textarea
                     matInput
@@ -247,24 +252,25 @@
                     name="comments"
                     type="text"
                 ></textarea>
+                @if (comments) {
                     <button
-        *ngIf="comments"
                         matSuffix
                         mat-icon-button
                         aria-label="Clear"
                         (click)="comments = undefined"
                     >
-        <mat-icon>close</mat-icon>
+                        <mat-icon svgIcon="close"></mat-icon>
                     </button>
+                }
             </mat-form-field>
-
             <br />
-    <button mat-raised-button color="accent" *ngIf="isValidatedForm()">
+            @if (this.isValidatedForm()) {
+                <button mat-raised-button color="accent">
                     {{ "NewJump_Submit" | translate }}
                 </button>
+            }
         </form>
-
+    } @else {
-  <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,
@@ -107,7 +106,7 @@ export class NewJumpComponent implements OnInit {
         private serviceGear: GearService,
         private dateService: DateService,
         private translateService: TranslateService,
-    private statsService: StatsService
+        private statsService: StatsService,
     ) {}
 
     ngOnInit() {
@@ -126,6 +125,7 @@ export class NewJumpComponent implements OnInit {
     }
 
     onFormSubmit() {
+        if (this.isValidatedForm()) {
             this.pendingAddRequest = true;
 
             this.serviceJump
@@ -141,7 +141,7 @@ export class NewJumpComponent implements OnInit {
                     this.deployAltitude,
                     this.countOfJumps,
                     this.comments,
-        this.isSpecial === undefined ? false : this.isSpecial
+                    this.isSpecial === undefined ? false : this.isSpecial,
                 )
                 .subscribe(() => {
                     this.statsService.resetStats();
@@ -155,6 +155,7 @@ export class NewJumpComponent implements OnInit {
                     this.pendingAddRequest = false;
                 });
         }
+    }
 
     public isValidatedForm(): boolean {
         return (
@@ -200,7 +201,7 @@ export class NewJumpComponent implements OnInit {
             data.sort(
                 (a, b) =>
                     (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0) ||
-          a.name.localeCompare(b.name)
+                    a.name.localeCompare(b.name),
             );
             this.listOfDropZone = data;
             this.listOfFilteredDropZone = data;
@@ -252,7 +253,7 @@ export class NewJumpComponent implements OnInit {
 
             this.listOfFilteredDropZone = this.listOfDropZone;
             this.listOfFilteredDropZone = this.listOfFilteredDropZone.filter(
-        (option) => option.name.toLowerCase().includes(filterValue)
+                (option) => option.name.toLowerCase().includes(filterValue),
             );
         }
     }

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

@@ -15,4 +15,3 @@
     align-items: initial;
     padding-top: 25px;
 }
-  

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

@@ -11,13 +11,12 @@
         </button>
     </div>
 
-  <form
+    @if (notLoadingToDisplay()) {
-    class="formNewJumps"
+        <form class="formNewJumps" (ngSubmit)="onFormSubmit()">
-    (ngSubmit)="onFormSubmit()"
-    *ngIf="notLoadingToDisplay(); else loading"
-  >
             <mat-form-field>
-      <mat-label>{{ "NewTunnelFlight_ChooseJumpType" | translate }}</mat-label>
+                <mat-label>{{
+                    "NewTunnelFlight_ChooseJumpType" | translate
+                }}</mat-label>
                 <input
                     type="text"
                     matInput
@@ -29,23 +28,27 @@
                     #autoJumpType="matAutocomplete"
                     [displayWith]="displayNameFn"
                 >
-        <mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
+                    @for (jumpType of listOfJumpType; track jumpType) {
+                        <mat-option [value]="jumpType">
                             {{ jumpType.name }}
                         </mat-option>
+                    }
                 </mat-autocomplete>
+                @if (selectedJumpType) {
                     <button
-        *ngIf="selectedJumpType"
                         matSuffix
                         mat-icon-button
                         aria-label="Clear"
                         (click)="selectedJumpType = undefined"
                     >
-        <mat-icon>close</mat-icon>
+                        <mat-icon svgIcon="close"></mat-icon>
                     </button>
+                }
             </mat-form-field>
-
             <mat-form-field>
-      <mat-label>{{ "NewTunnelFlight_ChooseTunnel" | translate }}</mat-label>
+                <mat-label>{{
+                    "NewTunnelFlight_ChooseTunnel" | translate
+                }}</mat-label>
                 <input
                     type="text"
                     matInput
@@ -58,26 +61,27 @@
                     #autoDropZone="matAutocomplete"
                     [displayWith]="displayNameFn"
                 >
-        <mat-option
+                    @for (tunnel of listOfFilteredTunnel; track tunnel) {
-          *ngFor="let tunnel of listOfFilteredTunnel"
+                        <mat-option [value]="tunnel">
-          [value]="tunnel"
-        >
                             {{ tunnel.name }}
                         </mat-option>
+                    }
                 </mat-autocomplete>
+                @if (selectedTunnel) {
                     <button
-        *ngIf="selectedTunnel"
                         matSuffix
                         mat-icon-button
                         aria-label="Clear"
                         (click)="resetTunnel()"
                     >
-        <mat-icon>close</mat-icon>
+                        <mat-icon svgIcon="close"></mat-icon>
                     </button>
+                }
             </mat-form-field>
-
             <mat-form-field>
-      <mat-label>{{ "NewTunnelFlight_Date_Lbl" | translate }}</mat-label>
+                <mat-label>{{
+                    "NewTunnelFlight_Date_Lbl" | translate
+                }}</mat-label>
                 <input
                     matInput
                     [max]="maxDate"
@@ -92,9 +96,10 @@
                 ></mat-datepicker-toggle>
                 <mat-datepicker #flightDateDp disabled="false"></mat-datepicker>
             </mat-form-field>
-
             <mat-form-field>
-      <mat-label>{{ "NewTunnelFlight_Minutes_Lbl" | translate }}</mat-label>
+                <mat-label>{{
+                    "NewTunnelFlight_Minutes_Lbl" | translate
+                }}</mat-label>
                 <input
                     matInput
                     placeholder="{{ 'NewTunnelFlight_Minutes' | translate }}"
@@ -102,19 +107,21 @@
                     name="minutesOfFlight"
                     type="number"
                 />
+                @if (minutesOfFlight) {
                     <button
-        *ngIf="minutesOfFlight"
                         matSuffix
                         mat-icon-button
                         aria-label="Clear"
                         (click)="minutesOfFlight = undefined"
                     >
-        <mat-icon>close</mat-icon>
+                        <mat-icon svgIcon="close"></mat-icon>
                     </button>
+                }
             </mat-form-field>
-
             <mat-form-field>
-      <mat-label>{{ "NewTunnelFlight_Comments_Lbl" | translate }}</mat-label>
+                <mat-label>{{
+                    "NewTunnelFlight_Comments_Lbl" | translate
+                }}</mat-label>
                 <textarea
                     matInput
                     placeholder="{{ 'NewTunnelFlight_Comments' | translate }}"
@@ -122,24 +129,25 @@
                     name="comments"
                     type="text"
                 ></textarea>
+                @if (comments) {
                     <button
-        *ngIf="comments"
                         matSuffix
                         mat-icon-button
                         aria-label="Clear"
                         (click)="comments = undefined"
                     >
-        <mat-icon>close</mat-icon>
+                        <mat-icon svgIcon="close"></mat-icon>
                     </button>
+                }
             </mat-form-field>
-
             <br />
-    <button mat-raised-button color="accent" *ngIf="isValidatedForm()">
+            @if (this.isValidatedForm()) {
+                <button mat-raised-button color="accent">
                     {{ "NewTunnelFlight_Submit" | translate }}
                 </button>
+            }
         </form>
-
+    } @else {
-  <ng-template #loading>
         <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,
@@ -88,7 +87,7 @@ export class NewTunnelFlightComponent implements OnInit {
         private serviceTunnelFlight: TunnelFlightService,
         private serviceJumpType: JumpTypeService,
         private translateService: TranslateService,
-    private dateService: DateService
+        private dateService: DateService,
     ) {}
 
     ngOnInit() {
@@ -108,6 +107,7 @@ export class NewTunnelFlightComponent implements OnInit {
     }
 
     public onFormSubmit() {
+        if (this.isValidatedForm()) {
             this.pendingAddRequest = true;
 
             this.serviceTunnelFlight
@@ -116,7 +116,7 @@ export class NewTunnelFlightComponent implements OnInit {
                     this.selectedJumpType.id,
                     this.flightDate,
                     this.minutesOfFlight,
-        this.comments
+                    this.comments,
                 )
                 .subscribe(() => {
                     this.comments = undefined;
@@ -127,6 +127,7 @@ export class NewTunnelFlightComponent implements OnInit {
                     this.pendingAddRequest = false;
                 });
         }
+    }
 
     public isValidatedForm(): boolean {
         return (
@@ -185,8 +186,8 @@ export class NewTunnelFlightComponent implements OnInit {
             filterValue = event.toLowerCase();
 
             this.listOfFilteredTunnel = this.listOfTunnel;
-      this.listOfFilteredTunnel = this.listOfFilteredTunnel.filter((option) =>
+            this.listOfFilteredTunnel = this.listOfFilteredTunnel.filter(
-        option.name.toLowerCase().includes(filterValue)
+                (option) => option.name.toLowerCase().includes(filterValue),
             );
         }
     }

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

@@ -35,27 +35,48 @@
             <ng-template matTabContent>
                 <div class="containerFlex">
                     <fieldset class="contentFlex">
-            <legend>{{ "Summary_LastMonth_ByDz" | translate }}</legend>
+                        <legend>
+                            {{ "Summary_LastMonth_ByDz" | translate }}
+                        </legend>
                         <table mat-table [dataSource]="dsJumpForLastMonthByDz">
                             <ng-container matColumnDef="label">
-                <td mat-cell *matCellDef="let element">{{ element.label }}</td>
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.label }}
+                                </td>
                             </ng-container>
                             <ng-container matColumnDef="nb">
-                <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.nb }}
+                                </td>
                             </ng-container>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                            <tr
+                                mat-row
+                                *matRowDef="let row; columns: displayedColumns"
+                            ></tr>
                         </table>
                     </fieldset>
                     <fieldset class="contentFlex">
-            <legend>{{ "Summary_LastMonth_ByJumpType" | translate }}</legend>
+                        <legend>
-            <table mat-table [dataSource]="dsJumpForLastMonthByJumpType">
+                            {{ "Summary_LastMonth_ByJumpType" | translate }}
+                        </legend>
+                        <table
+                            mat-table
+                            [dataSource]="dsJumpForLastMonthByJumpType"
+                        >
                             <ng-container matColumnDef="label">
-                <td mat-cell *matCellDef="let element">{{ element.label }}</td>
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.label }}
+                                </td>
                             </ng-container>
                             <ng-container matColumnDef="nb">
-                <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.nb }}
+                                </td>
                             </ng-container>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                            <tr
+                                mat-row
+                                *matRowDef="let row; columns: displayedColumns"
+                            ></tr>
                         </table>
                     </fieldset>
                 </div>
@@ -66,27 +87,48 @@
             <ng-template matTabContent>
                 <div class="containerFlex">
                     <fieldset class="contentFlex">
-            <legend>{{ "Summary_LastYear_ByDz" | translate }}</legend>
+                        <legend>
+                            {{ "Summary_LastYear_ByDz" | translate }}
+                        </legend>
                         <table mat-table [dataSource]="dsJumpForLastYearByDz">
                             <ng-container matColumnDef="label">
-                <td mat-cell *matCellDef="let element">{{ element.label }}</td>
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.label }}
+                                </td>
                             </ng-container>
                             <ng-container matColumnDef="nb">
-                <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.nb }}
+                                </td>
                             </ng-container>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                            <tr
+                                mat-row
+                                *matRowDef="let row; columns: displayedColumns"
+                            ></tr>
                         </table>
                     </fieldset>
                     <fieldset class="contentFlex">
-            <legend>{{ "Summary_LastYear_ByJumpType" | translate }}</legend>
+                        <legend>
-            <table mat-table [dataSource]="dsJumpForLastYearByJumpType">
+                            {{ "Summary_LastYear_ByJumpType" | translate }}
+                        </legend>
+                        <table
+                            mat-table
+                            [dataSource]="dsJumpForLastYearByJumpType"
+                        >
                             <ng-container matColumnDef="label">
-                <td mat-cell *matCellDef="let element">{{ element.label }}</td>
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.label }}
+                                </td>
                             </ng-container>
                             <ng-container matColumnDef="nb">
-                <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
+                                <td mat-cell *matCellDef="let element">
+                                    {{ element.nb }}
+                                </td>
                             </ng-container>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                            <tr
+                                mat-row
+                                *matRowDef="let row; columns: displayedColumns"
+                            ></tr>
                         </table>
                     </fieldset>
                 </div>
@@ -97,12 +139,19 @@
             <ng-template matTabContent>
                 <table mat-table [dataSource]="dsNbJumpByDz">
                     <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.label }}
+                        </td>
                     </ng-container>
                     <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.nb }}
+                        </td>
                     </ng-container>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                    <tr
+                        mat-row
+                        *matRowDef="let row; columns: displayedColumns"
+                    ></tr>
                 </table>
             </ng-template>
         </mat-tab>
@@ -111,12 +160,19 @@
             <ng-template matTabContent>
                 <table mat-table [dataSource]="dsNbJumpByAircraft">
                     <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.label }}
+                        </td>
                     </ng-container>
                     <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.nb }}
+                        </td>
                     </ng-container>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                    <tr
+                        mat-row
+                        *matRowDef="let row; columns: displayedColumns"
+                    ></tr>
                 </table>
             </ng-template>
         </mat-tab>
@@ -125,12 +181,19 @@
             <ng-template matTabContent>
                 <table mat-table [dataSource]="dsNbJumpByGear">
                     <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.label }}
+                        </td>
                     </ng-container>
                     <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.nb }}
+                        </td>
                     </ng-container>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                    <tr
+                        mat-row
+                        *matRowDef="let row; columns: displayedColumns"
+                    ></tr>
                 </table>
             </ng-template>
         </mat-tab>
@@ -139,12 +202,19 @@
             <ng-template matTabContent>
                 <table mat-table [dataSource]="dsNbJumpByType">
                     <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.label }}
+                        </td>
                     </ng-container>
                     <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.nb }}
+                        </td>
                     </ng-container>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                    <tr
+                        mat-row
+                        *matRowDef="let row; columns: displayedColumns"
+                    ></tr>
                 </table>
             </ng-template>
         </mat-tab>
@@ -153,12 +223,19 @@
             <ng-template matTabContent>
                 <table mat-table [dataSource]="dsNbJumpByYear">
                     <ng-container matColumnDef="label">
-            <td mat-cell *matCellDef="let element">{{ element.label }}</td>
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.label }}
+                        </td>
                     </ng-container>
                     <ng-container matColumnDef="nb">
-            <td mat-cell *matCellDef="let element">{{ element.nb }}</td>
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.nb }}
+                        </td>
                     </ng-container>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                    <tr
+                        mat-row
+                        *matRowDef="let row; columns: displayedColumns"
+                    ></tr>
                 </table>
             </ng-template>
         </mat-tab>

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

@@ -80,9 +80,10 @@ export class SummaryComponent implements OnInit {
             const datepipe: DatePipe = new DatePipe("en-US");
             let formattedDate = datepipe.transform(
                 data.lastJump.jumpDate,
-        "EEEE dd MMMM YYYY",
+                "EEEE dd MMMM yyyy",
             );
-      this.lastJump = formattedDate + " (" + data.lastJump.dropZone.name + ")";
+            this.lastJump =
+                formattedDate + " (" + data.lastJump.dropZone.name + ")";
         });
 
         this.serviceApi.getStatsOfLastMonth().subscribe((data) => {
@@ -193,7 +194,9 @@ export class SummaryComponent implements OnInit {
             const now = new Date();
             const currentYear = now.getFullYear();
             const nbYears = currentYear - firstYear;
-      let listOfYears = new Array(nbYears).fill(null).map(() => 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[]>();

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

@@ -4,44 +4,61 @@
         <form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
             <p>
                 <mat-form-field>
-          <mat-label>Login</mat-label>
+                    <mat-label>{{ "UserProfile_Login" | translate }}</mat-label>
-          <input matInput type="text" formControlName="login" readonly />
+                    <input
+                        matInput
+                        type="text"
+                        formControlName="login"
+                        readonly
+                    />
                 </mat-form-field>
             </p>
             <p>
                 <mat-form-field>
-          <mat-label>Firstname</mat-label>
+                    <mat-label>{{
+                        "UserProfile_Firstname" | translate
+                    }}</mat-label>
                     <input matInput type="text" formControlName="firstName" />
                 </mat-form-field>
             </p>
             <p>
                 <mat-form-field>
-          <mat-label>Lastname</mat-label>
+                    <mat-label>{{
+                        "UserProfile_Lastname" | translate
+                    }}</mat-label>
                     <input matInput type="text" formControlName="lastName" />
                 </mat-form-field>
             </p>
             <p>
                 <mat-form-field>
-          <mat-label>E-mail</mat-label>
+                    <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>
+                    <mat-label>{{
-          <input matInput type="text" formControlName="currentPassword" />
+                        "UserProfile_CurrentPassword" | translate
+                    }}</mat-label>
+                    <input
+                        matInput
+                        type="text"
+                        formControlName="currentPassword"
+                    />
                 </mat-form-field>
             </p>
             <p>
                 <mat-form-field>
-          <mat-label>New password</mat-label>
+                    <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
+                {{ "UserProfile_Update" | translate }}
             </button>
         </form>
     </fieldset>

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

@@ -30,6 +30,7 @@ import { ServiceComm } from "../../services/service-comm.service";
         MatInputModule,
         MatButtonModule,
         TranslateModule,
+        TranslatePipe,
     ],
 })
 export class UserProfileComponent implements OnInit {

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

@@ -11,22 +11,22 @@
     "LoginUser_UsernamePattern": "Username must have min 3 characters",
     "LoginUser_UsernameRequired": "Username is required",
 
-  "LoginCreateUser_Firstname": "Firstname",
+    "CreateUser_Firstname": "Firstname",
-  "LoginCreateUser_FirstnameRequired": "Firstname is required",
+    "CreateUser_FirstnameRequired": "Firstname is required",
-  "LoginCreateUser_FirstnamePattern": "Firstname must have min 3 characters",
+    "CreateUser_FirstnamePattern": "Firstname must have min 3 characters",
-  "LoginCreateUser_Lastname": "Lastname",
+    "CreateUser_Lastname": "Lastname",
-  "LoginCreateUser_LastnameRequired": "Lastname is required",
+    "CreateUser_LastnameRequired": "Lastname is required",
-  "LoginCreateUser_LastnamePattern": "Lastname must have min 3 characters",
+    "CreateUser_LastnamePattern": "Lastname must have min 3 characters",
-  "LoginCreateUser_Email": "E-mail",
+    "CreateUser_Email": "E-mail",
-  "LoginCreateUser_EmailRequired": "E-mail is required",
+    "CreateUser_EmailRequired": "E-mail is required",
-  "LoginCreateUser_EmailPattern": "It's not a e-mail",
+    "CreateUser_EmailPattern": "It's not a e-mail",
-  "LoginCreateUser_Username": "Username",
+    "CreateUser_Username": "Username",
-  "LoginCreateUser_UsernameRequired": "Username is required",
+    "CreateUser_UsernameRequired": "Username is required",
-  "LoginCreateUser_UsernamePattern": "Username must have min 3 characters",
+    "CreateUser_UsernamePattern": "Username must have min 3 characters",
-  "LoginCreateUser_Password": "Password",
+    "CreateUser_Password": "Password",
-  "LoginCreateUser_PasswordRequired": "Password is required",
+    "CreateUser_PasswordRequired": "Password is required",
-  "LoginCreateUser_PasswordPattern": "The pattern of the password ([A-Za-z0-9_-|/]{{ '{' }}8,15{{ '}' }})",
+    "CreateUser_PasswordPattern": "The pattern of the password ([A-Za-z0-9_-|/]{{ '{' }}8,15{{ '}' }})",
-  "LoginCreateUser_BtnLogin": "Create user and login",
+    "CreateUser_BtnLogin": "Create user and login",
 
     "Default_Title": "Home",
     "ListDz_Title": "List of DZs",
@@ -135,5 +135,13 @@
     "ListTunnelFlight_12Months": "On 12 last months",
     "ListTunnelFlight_Add": "Add tunnel flights",
     "ListTunnelFlight_LoadTable": "Load the tunnel flights",
-  "ListTunnelFlight_AllFlights": "All"
+    "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

@@ -11,22 +11,22 @@
     "LoginUser_UsernamePattern": "L'identifiant doit être minimum de 3 caractères",
     "LoginUser_UsernameRequired": "L'identifiant est obligatoire",
 
-  "LoginCreateUser_Firstname": "Prénom",
+    "CreateUser_Firstname": "Prénom",
-  "LoginCreateUser_FirstnameRequired": "Le prénom est obligatoire",
+    "CreateUser_FirstnameRequired": "Le prénom est obligatoire",
-  "LoginCreateUser_FirstnamePattern": "Le prénom doit être minimum de 3 caractères",
+    "CreateUser_FirstnamePattern": "Le prénom doit être minimum de 3 caractères",
-  "LoginCreateUser_Lastname": "Nom",
+    "CreateUser_Lastname": "Nom",
-  "LoginCreateUser_LastnameRequired": "Le nom est obligatoire",
+    "CreateUser_LastnameRequired": "Le nom est obligatoire",
-  "LoginCreateUser_LastnamePattern": "Le nom doit être minimum de 3 caractères",
+    "CreateUser_LastnamePattern": "Le nom doit être minimum de 3 caractères",
-  "LoginCreateUser_Email": "E-mail",
+    "CreateUser_Email": "E-mail",
-  "LoginCreateUser_EmailRequired": "E-mail est obligatoire",
+    "CreateUser_EmailRequired": "E-mail est obligatoire",
-  "LoginCreateUser_EmailPattern": "Ceci n'est pas un adresse mail",
+    "CreateUser_EmailPattern": "Ceci n'est pas un adresse mail",
-  "LoginCreateUser_Username": "Identifiant",
+    "CreateUser_Username": "Identifiant",
-  "LoginCreateUser_UsernameRequired": "L'identifiant est obligatoire",
+    "CreateUser_UsernameRequired": "L'identifiant est obligatoire",
-  "LoginCreateUser_UsernamePattern": "L'identifiant doit être minimum de 3 caractères",
+    "CreateUser_UsernamePattern": "L'identifiant doit être minimum de 3 caractères",
-  "LoginCreateUser_Password": "Mot de passe",
+    "CreateUser_Password": "Mot de passe",
-  "LoginCreateUser_PasswordRequired": "Le mot de passe est obligatoire",
+    "CreateUser_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.",
+    "CreateUser_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_BtnLogin": "Créer et se connecter",
 
     "Default_Title": "Accueil",
     "ListDz_Title": "Liste des centres de parachutisme",
@@ -135,5 +135,13 @@
     "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_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"
 }

doc.txt

@@ -1,7 +1,11 @@
-To build an image "toto" with the version "0.1": podman build . -t skydivelogs:1.5.0
+To build an image "skydivelogs" with the version "1.5.5": 
+   podman build . -t skydivelogs:1.5.5
+
 To run ab image to container with volume : 
-   podman run -v C:\toto\config:/app/Front/config -v C:\toto\db:/app/API/Data -d -p 5080:80/tcp --name Test -it skydivelogs:1.5.0
+   podman run -v ./Front/skydivelogs-app/src/config:/usr/share/nginx/html/config:z -v ./Back/skydiveLogs-api/Data:/app/Data:z -d -p 5080:80/tcp --name Skydivelogs-1.5.5 -it skydivelogs:1.5.5
 
-podman save --output skydivelogs-1.5.0.tar skydivelogs:1.5.0
+To save the image before to updload to the server :
+   podman save --output skydivelogs-1.5.5.tar skydivelogs:1.5.5
 
-scp -P 5022 skydivelogs-1.5.0.tar administrator@51.75.68.58:~
+Updload to the server :
+   scp -P 5022 skydivelogs-1.5.5.tar administrator@51.75.68.58:~

startup.sh

@@ -1,6 +0,0 @@
-#!/bin/sh
-
-service nginx start
-
-cd /app/API/
-dotnet skydiveLogs-api.dll