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

@@ -1,6 +1,6 @@
 <mat-toolbar *ngIf="this.show()">
   <mat-icon svgIcon="menu" (click)="snav.toggle()"></mat-icon>
-  <h2>{{ title }}</h2>
+  <h2>{{ translatedTitle }}</h2>
 
   <mat-select
     [(value)]="selectedLanguageFlag"

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

@@ -1,6 +1,7 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, inject, OnInit } from "@angular/core";
 import { Router, RouterLink, RouterOutlet } from "@angular/router";
 import { CommonModule } from "@angular/common";
+import { DomSanitizer } from "@angular/platform-browser";
 import { MatToolbarModule } from "@angular/material/toolbar";
 import {
   IconResolver,
@@ -25,8 +26,6 @@ import { ServiceComm } from "../services/service-comm.service";
 import { ConfigurationHelper } from "../services/configuration-helper";
 import { ServiceCacheApi } from "../services/service-cache-api.service";
 
-import { DomSanitizer } from "@angular/platform-browser";
-
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
@@ -46,7 +45,7 @@ import { DomSanitizer } from "@angular/platform-browser";
   ],
 })
 export class AppComponent implements OnInit {
-  public title = "app";
+  public translatedTitle = "???";
   public currentUser: User;
   public version: string;
   public selectedLanguageFlag: string;
@@ -57,11 +56,11 @@ export class AppComponent implements OnInit {
     private serviceComm: ServiceComm,
     private serviceCacheApi: ServiceCacheApi,
     private translateService: TranslateService,
-    private sanitizer: DomSanitizer,
-    private iconRegistry: MatIconRegistry,
   ) {
+    const sanitizer = inject(DomSanitizer);
     const resolver: IconResolver = (name) =>
       sanitizer.bypassSecurityTrustResourceUrl(`/assets/icon/${name}.svg`);
+    const iconRegistry = inject(MatIconRegistry);
     iconRegistry.addSvgIconResolver(resolver);
 
     this.authenticationService.currentUser.subscribe((user) => {
@@ -81,7 +80,9 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.serviceComm.componentTitle.subscribe((title) => (this.title = title));
+    this.serviceComm.componentTitle.subscribe(
+      (title) => (this.translatedTitle = title),
+    );
   }
 
   public show() {

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

@@ -47,7 +47,7 @@ export class CreateUserComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private authenticationService: AuthenticationService,
-    private translateService: TranslateService
+    private translateService: TranslateService,
   ) {
     // redirect to home if already logged in
     if (this.authenticationService.currentUserValue) {
@@ -67,12 +67,12 @@ export class CreateUserComponent implements OnInit {
           [
             Validators.required,
             Validators.pattern(
-              "^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[@$!%*#?&-_|]).{8,}$"
+              "^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[@$!%*#?&-_|]).{8,}$",
             ),
           ],
         ],
       },
-      { updateOn: "blur" }
+      { updateOn: "blur" },
     );
 
     // get return url from route parameters or default to '/'

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

@@ -10,7 +10,6 @@ import { DropzoneService } from "../../services/dropzone.service";
 import { GearService } from "../../services/gear.service";
 import { JumpTypeService } from "../../services/jump-type.service";
 import { ServiceComm } from "../../services/service-comm.service";
-import { BaseComponent } from "../app.base.component";
 
 @Component({
   selector: "app-default",
@@ -18,21 +17,18 @@ import { BaseComponent } from "../app.base.component";
   styleUrls: ["./default.component.css"],
   imports: [TranslateModule, MatIconModule, RouterLink],
 })
-export class DefaultComponent extends BaseComponent {
-  //implements OnInit {
+export class DefaultComponent implements OnInit {
   constructor(
-    // private serviceComm: ServiceComm,
-    // private translateService: TranslateService,
+    private serviceComm: ServiceComm,
+    private translateService: TranslateService,
     private authenticationService: AuthenticationService,
     private serviceApiAircraft: AircraftService,
     private serviceApiJumpType: JumpTypeService,
     private serviceApiDropzone: DropzoneService,
     private serviceApiGear: GearService,
-  ) {
-    super("Default_Title");
-  }
+  ) {}
 
-  override ngOnInit() {
+  ngOnInit() {
     this.authenticationService.alwaysLogin();
 
     this.putToCacheRefDatas().subscribe(() => {
@@ -56,8 +52,8 @@ export class DefaultComponent extends BaseComponent {
   }
 
   private updateTitle() {
-    // this.translateService.get("Default_Title").subscribe((data) => {
-    //   this.serviceComm.updatedComponentTitle(data);
-    // });
+    this.translateService.get("Default_Title").subscribe((data) => {
+      this.serviceComm.updatedComponentTitle(data);
+    });
   }
 }

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

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

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

@@ -6,15 +6,15 @@
       (click)="openDialogToAdd()"
       *ngIf="isUserAdmin == true"
     >
-      {{ "List_Dz_Add" | translate }}
+      {{ "ListDz_Add" | translate }}
     </button>
 
     <mat-form-field>
-      <mat-label>{{ "List_Dz_Filter" | translate }}</mat-label>
+      <mat-label>{{ "ListDz_Filter" | translate }}</mat-label>
       <input
         matInput
         (keyup)="applyFilter($event)"
-        placeholder="{{ 'List_Dz_Filter_PlaceHolder' | translate }}"
+        placeholder="{{ 'ListDz_Filter_PlaceHolder' | translate }}"
         #input
       />
     </mat-form-field>
@@ -76,14 +76,14 @@
 
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef>
-          {{ "List_Dz_Header_ID" | translate }}
+          {{ "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>
-          {{ "List_Dz_Header_Name" | translate }}
+          {{ "ListDz_Header_Name" | translate }}
         </th>
         <td mat-cell *matCellDef="let element">
           <span class="spanWithBreakWord" [innerHTML]="element.name"></span>
@@ -92,7 +92,7 @@
 
       <ng-container matColumnDef="address">
         <th mat-header-cell *matHeaderCellDef>
-          {{ "List_Dz_Header_Address" | translate }}
+          {{ "ListDz_Header_Address" | translate }}
         </th>
         <td mat-cell *matCellDef="let element">
           <span class="spanWithBreakWord" [innerHTML]="element.address"></span>
@@ -101,7 +101,7 @@
 
       <ng-container matColumnDef="type">
         <th mat-header-cell *matHeaderCellDef>
-          {{ "List_Dz_Header_Type" | translate }}
+          {{ "ListDz_Header_Type" | translate }}
         </th>
         <td mat-cell *matCellDef="let element">{{ element.type }}</td>
       </ng-container>

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

@@ -1,45 +1,63 @@
 <div class="content">
-  <div *ngIf="dataSourceTable != null else loading">
-    <button mat-raised-button color="accent" (click)="openDialogToAdd()">{{ 'List_Gears_Add' | translate }}</button>
+  <div *ngIf="dataSourceTable != null; else loading">
+    <button mat-raised-button color="accent" (click)="openDialogToAdd()">
+      {{ "ListGears_Add" | translate }}
+    </button>
 
     <table mat-table [dataSource]="dataSourceTable">
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef>{{ 'List_Gears_Header_Id' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{element.id}}</td>
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "ListGears_Header_Id" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">{{ element.id }}</td>
       </ng-container>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef style="min-width: 130px;">{{ 'List_Gears_Header_Name' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{element.name}}</td>
+        <th mat-header-cell *matHeaderCellDef style="min-width: 130px">
+          {{ "ListGears_Header_Name" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">{{ element.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="manufacturer">
-        <th mat-header-cell *matHeaderCellDef>{{ 'List_Gears_Header_Manufacturer' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{element.manufacturer}}</td>
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "ListGears_Header_Manufacturer" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">{{ element.manufacturer }}</td>
       </ng-container>
 
       <ng-container matColumnDef="maxSize">
-        <th mat-header-cell *matHeaderCellDef style="min-width: 90px;">{{ 'List_Gears_Header_CanopySize' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{element.minSize}} - {{element.maxSize}}</td>
+        <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>{{ 'List_Gears_Header_Aad' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{element.aad}}</td>
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "ListGears_Header_Aad" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">{{ element.aad }}</td>
       </ng-container>
 
       <ng-container matColumnDef="mainCanopy">
-        <th mat-header-cell *matHeaderCellDef>{{ 'List_Gears_Header_Main' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{element.mainCanopy}}</td>
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "ListGears_Header_Main" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">{{ element.mainCanopy }}</td>
       </ng-container>
 
       <ng-container matColumnDef="reserveCanopy">
-        <th mat-header-cell *matHeaderCellDef>{{ 'List_Gears_Header_Reserve' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{element.reserveCanopy}}</td>
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "ListGears_Header_Reserve" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">{{ element.reserveCanopy }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
   </div>
   <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>

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

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

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

@@ -7,7 +7,7 @@
       [routerLinkActive]="['active']"
       skipLocationChange
     >
-      {{ "List_Jump_Add" | translate }}
+      {{ "ListJump_Add" | translate }}
     </button>
   </div>
 
@@ -55,7 +55,7 @@
 
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef style="min-width: 70px">
-          {{ "List_Jump_Header_Num" | translate }}
+          {{ "ListJump_Header_Num" | translate }}
         </th>
         <td mat-cell *matCellDef="let element; let i = index">
           {{
@@ -66,7 +66,7 @@
 
       <ng-container matColumnDef="jumpDate">
         <th mat-header-cell *matHeaderCellDef>
-          {{ "List_Jump_Header_Date" | translate }}
+          {{ "ListJump_Header_Date" | translate }}
         </th>
         <td mat-cell *matCellDef="let element">
           <span
@@ -82,7 +82,7 @@
           *matHeaderCellDef
           style="min-width: 100px; text-wrap: nowrap"
         >
-          {{ "List_Jump_Header_JumpType" | translate }}
+          {{ "ListJump_Header_JumpType" | translate }}
         </th>
         <td mat-cell *matCellDef="let element" style="text-wrap: nowrap">
           <span
@@ -94,7 +94,7 @@
 
       <ng-container matColumnDef="aircraft">
         <th mat-header-cell *matHeaderCellDef style="min-width: 110px">
-          {{ "List_Jump_Header_Aircraft" | translate }}
+          {{ "ListJump_Header_Aircraft" | translate }}
         </th>
         <td mat-cell *matCellDef="let element">
           <span
@@ -106,7 +106,7 @@
 
       <ng-container matColumnDef="dropZone">
         <th mat-header-cell *matHeaderCellDef>
-          {{ "List_Jump_Header_Dz" | translate }}
+          {{ "ListJump_Header_Dz" | translate }}
         </th>
         <td mat-cell *matCellDef="let element">
           <span
@@ -118,7 +118,7 @@
 
       <ng-container matColumnDef="gear">
         <th mat-header-cell *matHeaderCellDef>
-          {{ "List_Jump_Header_Id" | translate }}
+          {{ "ListJump_Header_Id" | translate }}
         </th>
         <td mat-cell *matCellDef="let element">{{ element.gear.name }}</td>
       </ng-container>

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

@@ -5,7 +5,7 @@ import {
   ReactiveFormsModule,
   Validators,
 } from "@angular/forms";
-import { TranslateModule } from "@ngx-translate/core";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatInputModule } from "@angular/material/input";
 import { MatButtonModule } from "@angular/material/button";
@@ -36,17 +36,26 @@ export class NewAircraftComponent implements OnInit {
 
   constructor(
     private serviceComm: ServiceComm,
-    private serviceApi: AircraftService
+    private serviceApi: AircraftService,
+    private translateService: TranslateService,
   ) {
     this.addForm = new FormGroup(
       {
         aircraftName: new FormControl("", Validators.required),
       },
-      { updateOn: "blur" }
+      { updateOn: "blur" },
     );
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.serviceComm.forceTranslateTitle.subscribe((data) => {
+      if (data === true) {
+        this.updateTitle();
+      }
+    });
+
+    this.updateTitle();
+  }
 
   onSubmit(formData) {
     if (formData.invalid) {
@@ -98,4 +107,10 @@ export class NewAircraftComponent implements OnInit {
       }
     };
   }
+
+  private updateTitle() {
+    this.translateService.get("NewAircraft_Title").subscribe((data) => {
+      this.serviceComm.updatedComponentTitle(data);
+    });
+  }
 }

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

@@ -5,7 +5,7 @@ import {
   ReactiveFormsModule,
   Validators,
 } from "@angular/forms";
-import { TranslateModule } from "@ngx-translate/core";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatInputModule } from "@angular/material/input";
@@ -35,7 +35,8 @@ export class NewDropZoneComponent implements OnInit {
 
   constructor(
     private serviceComm: ServiceComm,
-    private dropzoneService: DropzoneService
+    private dropzoneService: DropzoneService,
+    private translateService: TranslateService,
   ) {
     this.addForm = new FormGroup(
       {
@@ -53,11 +54,19 @@ export class NewDropZoneComponent implements OnInit {
         isDz: new FormControl(true),
         isTunnel: new FormControl(false),
       },
-      { updateOn: "blur" }
+      { updateOn: "blur" },
     );
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.serviceComm.forceTranslateTitle.subscribe((data) => {
+      if (data === true) {
+        this.updateTitle();
+      }
+    });
+
+    this.updateTitle();
+  }
 
   onSubmit(formData) {
     const splitGps: Array<string> = formData.gps.split(",");
@@ -79,10 +88,16 @@ export class NewDropZoneComponent implements OnInit {
         formData.website,
         formData.contactMail,
         dzType,
-        false
+        false,
       )
       .subscribe(() => {
         this.serviceComm.refreshData(AddAction.Dropzone);
       });
   }
+
+  private updateTitle() {
+    this.translateService.get("NewDz_Title").subscribe((data) => {
+      this.serviceComm.updatedComponentTitle(data);
+    });
+  }
 }

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

@@ -6,7 +6,7 @@ import {
   Validators,
 } from "@angular/forms";
 import { MatFormFieldModule } from "@angular/material/form-field";
-import { TranslateModule } from "@ngx-translate/core";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
 import { MatInputModule } from "@angular/material/input";
 import { MatButtonModule } from "@angular/material/button";
 
@@ -32,7 +32,8 @@ export class NewGearComponent implements OnInit {
 
   constructor(
     private serviceComm: ServiceComm,
-    private serviceApi: GearService
+    private serviceApi: GearService,
+    private translateService: TranslateService,
   ) {
     this.addForm = new FormGroup(
       {
@@ -60,11 +61,19 @@ export class NewGearComponent implements OnInit {
           Validators.max(320),
         ]),
       },
-      { updateOn: "blur" }
+      { updateOn: "blur" },
     );
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.serviceComm.forceTranslateTitle.subscribe((data) => {
+      if (data === true) {
+        this.updateTitle();
+      }
+    });
+
+    this.updateTitle();
+  }
 
   onSubmit(formData) {
     this.serviceApi
@@ -75,10 +84,16 @@ export class NewGearComponent implements OnInit {
         +formData.maxSize,
         formData.aad,
         formData.mainCanopy,
-        formData.reserveCanopy
+        formData.reserveCanopy,
       )
       .subscribe(() => {
         this.serviceComm.refreshData(AddAction.Gear);
       });
   }
+
+  private updateTitle() {
+    this.translateService.get("NewGear_Title").subscribe((data) => {
+      this.serviceComm.updatedComponentTitle(data);
+    });
+  }
 }

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

@@ -5,7 +5,7 @@ import {
   ReactiveFormsModule,
   Validators,
 } from "@angular/forms";
-import { TranslateModule } from "@ngx-translate/core";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatInputModule } from "@angular/material/input";
 import { MatButtonModule } from "@angular/material/button";
@@ -31,21 +31,36 @@ export class NewJumpTypeComponent implements OnInit {
 
   constructor(
     private serviceComm: ServiceComm,
-    private jumpTypeService: JumpTypeService
+    private jumpTypeService: JumpTypeService,
+    private translateService: TranslateService,
   ) {
     this.addForm = new FormGroup(
       {
         jumptypeName: new FormControl("", Validators.required),
       },
-      { updateOn: "blur" }
+      { updateOn: "blur" },
     );
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.serviceComm.forceTranslateTitle.subscribe((data) => {
+      if (data === true) {
+        this.updateTitle();
+      }
+    });
+
+    this.updateTitle();
+  }
 
   onSubmit(formData) {
     this.jumpTypeService.addJumpType(formData.jumptypeName).subscribe(() => {
       this.serviceComm.refreshData(AddAction.JumpType);
     });
   }
+
+  private updateTitle() {
+    this.translateService.get("NewJumpType_Title").subscribe((data) => {
+      this.serviceComm.updatedComponentTitle(data);
+    });
+  }
 }

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

@@ -6,12 +6,17 @@ import {
   ReactiveFormsModule,
 } from "@angular/forms";
 import { MatLabel, MatFormFieldModule } from "@angular/material/form-field";
-import { TranslateModule, TranslatePipe } from "@ngx-translate/core";
+import {
+  TranslateModule,
+  TranslatePipe,
+  TranslateService,
+} from "@ngx-translate/core";
 import { MatInputModule } from "@angular/material/input";
 import { MatButtonModule } from "@angular/material/button";
 
 import { AuthenticationService } from "../../services/authentication.service";
 import { ListOfImagesComponent } from "../list-of-images/list-of-images.component";
+import { ServiceComm } from "../../services/service-comm.service";
 
 @Component({
   selector: "app-user-profile",
@@ -30,9 +35,20 @@ import { ListOfImagesComponent } from "../list-of-images/list-of-images.componen
 export class UserProfileComponent implements OnInit {
   public userForm: FormGroup;
 
-  constructor(private authenticationService: AuthenticationService) {}
+  constructor(
+    private authenticationService: AuthenticationService,
+    private translateService: TranslateService,
+    private serviceComm: ServiceComm,
+  ) {}
+
+  ngOnInit() {
+    this.serviceComm.forceTranslateTitle.subscribe((data) => {
+      if (data === true) {
+        this.updateTitle();
+      }
+    });
+    this.updateTitle();
 
-  ngOnInit(): void {
     const currentUser = this.authenticationService.currentUserValue;
 
     this.userForm = new FormGroup(
@@ -52,14 +68,14 @@ export class UserProfileComponent implements OnInit {
         ]),
         currentPassword: new FormControl(
           "",
-          Validators.pattern("^[A-Za-z0-9_-]{8,15}$")
+          Validators.pattern("^[A-Za-z0-9_-]{8,15}$"),
         ),
         newPassword: new FormControl(
           "",
-          Validators.pattern("^[A-Za-z0-9_-]{8,15}$")
+          Validators.pattern("^[A-Za-z0-9_-]{8,15}$"),
         ),
       },
-      { updateOn: "blur" }
+      { updateOn: "blur" },
     );
   }
 
@@ -130,4 +146,10 @@ export class UserProfileComponent implements OnInit {
     tailleVoile.set("109", [298, 274, 247, 219, 199, 179, 161, 138, 120]);
     tailleVoile.set("110", [300, 276, 249, 220, 201, 180, 162, 138, 120]);
   }
+
+  private updateTitle() {
+    this.translateService.get("UserProfile_Title").subscribe((data) => {
+      this.serviceComm.updatedComponentTitle(data);
+    });
+  }
 }

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

@@ -38,6 +38,11 @@
   "ListAircrafts_Title": "List of aircrafts",
   "NewTunnelFlight_Title": "New tunnel flights",
   "ListTunnelFlight_Title": "List of hours of tunnel",
+  "UserProfile_Title": "User profile",
+  "NewJumpType_Title": "New jmp type",
+  "NewGear_Title": "New gear",
+  "NewDz_Title": "New drop zone",
+  "NewAircraft_Title": "New aircraft",
 
   "App_Footer": "Web software to log your skydive jumps - v",
   "App_Nav_Summary": "Summary",
@@ -51,39 +56,39 @@
   "App_Nav_NewTunnelFlight": "Add tunnel time",
   "App_Nav_TunnelFlights": "The tunnel flights",
 
-  "List_Aircrafts_Add": "Add a aircraft",
-  "List_Aircrafts_Header_Id": "ID",
-  "List_Aircrafts_Header_Name": "Name",
-  "List_Aircrafts_Header_Image": "Image",
+  "ListAircrafts_Add": "Add a aircraft",
+  "ListAircrafts_Header_Id": "ID",
+  "ListAircrafts_Header_Name": "Name",
+  "ListAircrafts_Header_Image": "Image",
 
-  "List_Gears_Add": "Add a gear",
-  "List_Gears_Header_Id": "ID",
-  "List_Gears_Header_Name": "Name",
-  "List_Gears_Header_Manufacturer": "Manufacturer",
-  "List_Gears_Header_CanopySize": "Canopy size",
-  "List_Gears_Header_Aad": "AAD system",
-  "List_Gears_Header_Main": "Main canopy",
-  "List_Gears_Header_Reserve": "Reserve canopy",
+  "ListGears_Add": "Add a gear",
+  "ListGears_Header_Id": "ID",
+  "ListGears_Header_Name": "Name",
+  "ListGears_Header_Manufacturer": "Manufacturer",
+  "ListGears_Header_CanopySize": "Canopy size",
+  "ListGears_Header_Aad": "AAD system",
+  "ListGears_Header_Main": "Main canopy",
+  "ListGears_Header_Reserve": "Reserve canopy",
 
-  "List_JumpType_Add": "Add a jump type",
-  "List_JumpType_Header_Id": "ID",
-  "List_JumpType_Header_Name": "Name",
+  "ListJumpType_Add": "Add a jump type",
+  "ListJumpType_Header_Id": "ID",
+  "ListJumpType_Header_Name": "Name",
 
-  "List_Jump_Add": "Add jumps",
-  "List_Jump_Header_Num": "Num",
-  "List_Jump_Header_Date": "Date",
-  "List_Jump_Header_JumpType": "Jump Type",
-  "List_Jump_Header_Aircraft": "Aircraft",
-  "List_Jump_Header_Dz": "Drop Zone",
-  "List_Jump_Header_Gear": "Gear",
+  "ListJump_Add": "Add jumps",
+  "ListJump_Header_Num": "Num",
+  "ListJump_Header_Date": "Date",
+  "ListJump_Header_JumpType": "Jump Type",
+  "ListJump_Header_Aircraft": "Aircraft",
+  "ListJump_Header_Dz": "Drop Zone",
+  "ListJump_Header_Gear": "Gear",
 
-  "List_Dz_Add": "Add a drop zone",
-  "List_Dz_Header_ID": "ID",
-  "List_Dz_Header_Name": "Name",
-  "List_Dz_Header_Address": "Address",
-  "List_Dz_Header_Type": "Type",
-  "List_Dz_Filter": "Filter",
-  "List_Dz_Filter_PlaceHolder": "Filter on the name or address of center",
+  "ListDz_Add": "Add a drop zone",
+  "ListDz_Header_ID": "ID",
+  "ListDz_Header_Name": "Name",
+  "ListDz_Header_Address": "Address",
+  "ListDz_Header_Type": "Type",
+  "ListDz_Filter": "Filter",
+  "ListDz_Filter_PlaceHolder": "Filter on the name or address of center",
 
   "Summary_TotalJumps": "Total jumps",
   "Summary_TotalCutaways": "Total cutaways",

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

@@ -38,6 +38,11 @@
   "ListAircrafts_Title": "Liste des avions",
   "NewTunnelFlight_Title": "Nouveaux créneaux de soufflerie",
   "ListTunnelFlight_Title": "Heures de tunnel",
+  "UserProfile_Title": "Profile utilisateur",
+  "NewJumpType_Title": "Nouveau type de saut",
+  "NewGear_Title": "Nouveau piège",
+  "NewDz_Title": "Nouveau centre",
+  "NewAircraft_Title": "Nouvel avion",
 
   "App_Footer": "Application pour enregistrer ses sauts de parachutisme - v",
   "App_Nav_Summary": "Récapitulatif",
@@ -51,39 +56,39 @@
   "App_Nav_NewTunnelFlight": "Ajouter du temps en tunnel",
   "App_Nav_TunnelFlights": "Les vols en soufflerie",
 
-  "List_Aircrafts_Add": "Ajouter un avion",
-  "List_Aircrafts_Header_Id": "ID",
-  "List_Aircrafts_Header_Name": "Nom",
-  "List_Aircrafts_Header_Image": "Image",
+  "ListAircrafts_Add": "Ajouter un avion",
+  "ListAircrafts_Header_Id": "ID",
+  "ListAircrafts_Header_Name": "Nom",
+  "ListAircrafts_Header_Image": "Image",
 
-  "List_Gears_Add": "Ajouter un piège",
-  "List_Gears_Header_Id": "ID",
-  "List_Gears_Header_Name": "Nom",
-  "List_Gears_Header_Manufacturer": "Fabriquant",
-  "List_Gears_Header_CanopySize": "Taille de voile",
-  "List_Gears_Header_Aad": "Système de sécurité",
-  "List_Gears_Header_Main": "Principale",
-  "List_Gears_Header_Reserve": "Réserve",
+  "ListGears_Add": "Ajouter un piège",
+  "ListGears_Header_Id": "ID",
+  "ListGears_Header_Name": "Nom",
+  "ListGears_Header_Manufacturer": "Fabriquant",
+  "ListGears_Header_CanopySize": "Taille de voile",
+  "ListGears_Header_Aad": "Système de sécurité",
+  "ListGears_Header_Main": "Principale",
+  "ListGears_Header_Reserve": "Réserve",
 
-  "List_JumpType_Add": "Ajouter un type de saut",
-  "List_JumpType_Header_Id": "ID",
-  "List_JumpType_Header_Name": "Nom",
+  "ListJumpType_Add": "Ajouter un type de saut",
+  "ListJumpType_Header_Id": "ID",
+  "ListJumpType_Header_Name": "Nom",
 
-  "List_Jump_Add": "Ajouter des sauts",
-  "List_Jump_Header_Num": "Numéro",
-  "List_Jump_Header_Date": "Date",
-  "List_Jump_Header_JumpType": "Type de saut",
-  "List_Jump_Header_Aircraft": "Avion",
-  "List_Jump_Header_Dz": "Centre",
-  "List_Jump_Header_Gear": "Piège",
+  "ListJump_Add": "Ajouter des sauts",
+  "ListJump_Header_Num": "Numéro",
+  "ListJump_Header_Date": "Date",
+  "ListJump_Header_JumpType": "Type de saut",
+  "ListJump_Header_Aircraft": "Avion",
+  "ListJump_Header_Dz": "Centre",
+  "ListJump_Header_Gear": "Piège",
 
-  "List_Dz_Add": "Ajouter un centre de parachutisme",
-  "List_Dz_Header_ID": "ID",
-  "List_Dz_Header_Name": "Nom",
-  "List_Dz_Header_Address": "Adresse",
-  "List_Dz_Header_Type": "Type",
-  "List_Dz_Filter": "Filtrer",
-  "List_Dz_Filter_PlaceHolder": "Filtrer sur le nom ou l'adresse du centre",
+  "ListDz_Add": "Ajouter un centre de parachutisme",
+  "ListDz_Header_ID": "ID",
+  "ListDz_Header_Name": "Nom",
+  "ListDz_Header_Address": "Adresse",
+  "ListDz_Header_Type": "Type",
+  "ListDz_Filter": "Filtrer",
+  "ListDz_Filter_PlaceHolder": "Filtrer sur le nom ou l'adresse du centre",
 
   "Summary_TotalJumps": "Nombre de sauts",
   "Summary_TotalCutaways": "Nombre de libération",
@@ -100,7 +105,7 @@
   "Summary_ByGear_Title": "Par piège",
   "Summary_ByJumpType_Title": "Par type de saut",
   "Summary_ByYear_Title": "Par an",
-  "Summary_ByYear_Title": "Par an et par type",
+  "Summary_ByYearByJumpType_Title": "Par an et par type",
 
   "NewJump_GoToJump": "Voir les sauts",
   "NewJump_ResetForm": "Reset du formulaire après l'ajout",