Idée pour avoir un BaseComponent pour gérer le titre et la gestion des icons pour les mat-icons

Front/skydivelogs-app/angular.json

@@ -35,7 +35,8 @@
             "styles": [
               "src/assets/css/styles-app-loading.scss",
               "src/assets/css/styles.css",
-              "src/assets/css/new-theme.scss"
+              "src/assets/css/new-theme.scss",
+              "@angular/material/prebuilt-themes/pink-bluegrey.css"
             ],
             "scripts": []
           },

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

@@ -0,0 +1,33 @@
+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 {
+  protected title = "???";
+  protected serviceComm: ServiceComm;
+  private translateService: TranslateService;
+
+  constructor(title: 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.title = title;
+  }
+
+  ngOnInit() {
+    this.translateService.get(this.title).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.html

@@ -1,6 +1,6 @@
 <mat-toolbar *ngIf="this.show()">
   <button mat-icon-button (click)="snav.toggle()">
-    <mat-icon>menu</mat-icon>
+    <mat-icon svgIcon="menu"></mat-icon>
   </button>
   <h2>{{ title }}</h2>
 
@@ -30,7 +30,7 @@
       <mat-icon
         aria-hidden="false"
         aria-label="Summary"
-        fontIcon="timeline"
+        svgIcon="summary"
       ></mat-icon>
       <a
         routerLink="/summary"
@@ -45,7 +45,7 @@
       <mat-icon
         aria-hidden="false"
         aria-label="List of jumps"
-        fontIcon="list_alt"
+        svgIcon="list"
       ></mat-icon>
       <a
         routerLink="/jumps"
@@ -59,7 +59,7 @@
       <mat-icon
         aria-hidden="false"
         aria-label="Add jumps"
-        fontIcon="add_circle"
+        svgIcon="add"
       ></mat-icon>
       <a
         routerLink="/newjump"
@@ -74,7 +74,7 @@
       <mat-icon
         aria-hidden="false"
         aria-label="List of tunnel flights"
-        fontIcon="list_alt"
+        svgIcon="list"
       ></mat-icon>
       <a
         routerLink="/tunnelFlights"
@@ -88,7 +88,7 @@
       <mat-icon
         aria-hidden="false"
         aria-label="Add flights in tunnel"
-        fontIcon="add_circle"
+        svgIcon="add"
       ></mat-icon>
       <a
         routerLink="/newTunnelFlight"
@@ -103,7 +103,7 @@
       <mat-icon
         aria-hidden="false"
         aria-label="Dropzones"
-        fontIcon="store"
+        svgIcon="dz"
       ></mat-icon>
       <a
         routerLink="/dzs"
@@ -117,7 +117,7 @@
       <mat-icon
         aria-hidden="false"
         aria-label="Aircrafts"
-        fontIcon="airplanemode_active"
+        svgIcon="aircraft"
       ></mat-icon>
       <a
         routerLink="/aircrafts"
@@ -131,7 +131,7 @@
       <mat-icon
         aria-hidden="false"
         aria-label="List of jump types"
-        fontIcon="flight_land"
+        svgIcon="flight_land"
       ></mat-icon>
       <a
         routerLink="/jumpTypes"
@@ -145,7 +145,7 @@
       <mat-icon
         aria-hidden="false"
         aria-label="List of gears"
-        fontIcon="settings_input_antenna"
+        svgIcon="gear"
       ></mat-icon>
       <a
         routerLink="/gears"
@@ -160,7 +160,7 @@
       <mat-icon
         aria-hidden="false"
         aria-label="User account"
-        fontIcon="account_box"
+        svgIcon="account"
       ></mat-icon>
       <a
         routerLink="/user"
@@ -175,7 +175,7 @@
       <mat-icon
         aria-hidden="false"
         aria-label="To logout"
-        fontIcon="logout"
+        svgIcon="logout"
       ></mat-icon>
       <span (click)="snav.toggle(); logout()" style="cursor: pointer">{{
         "App_Nav_Logout" | translate

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

@@ -7,6 +7,11 @@ import { MatSelectModule } from "@angular/material/select";
 import { MatOptionModule } from "@angular/material/core";
 import { MatSidenavModule } from "@angular/material/sidenav";
 import { MatListModule } from "@angular/material/list";
+import {
+  TranslateService,
+  TranslateModule,
+  TranslatePipe,
+} from "@ngx-translate/core";
 
 import { User } from "../models/user";
 import { CacheApiKey } from "../models/cache-api-key.enum";
@@ -16,11 +21,7 @@ import { ServiceComm } from "../services/service-comm.service";
 import { ConfigurationHelper } from "../services/configuration-helper";
 import { ServiceCacheApi } from "../services/service-cache-api.service";
 
-import {
+import { BaseComponent } from "./app.base.component";
-  TranslateService,
-  TranslateModule,
-  TranslatePipe,
-} from "@ngx-translate/core";
 
 @Component({
   selector: "app-root",
@@ -40,8 +41,8 @@ import {
     TranslatePipe,
   ],
 })
-export class AppComponent implements OnInit {
+export class AppComponent extends BaseComponent {
-  public title = "app";
+  // public title = "app";
   public currentUser: User;
   public version: string;
   public selectedLanguageFlag: string;
@@ -49,15 +50,17 @@ export class AppComponent implements OnInit {
   constructor(
     private router: Router,
     private authenticationService: AuthenticationService,
-    private serviceComm: ServiceComm,
+    // private serviceComm: ServiceComm,
     private serviceCacheApi: ServiceCacheApi,
-    private translateService: TranslateService
+    // private translateService: TranslateService,
   ) {
+    super("Default_Title");
+
     this.authenticationService.currentUser.subscribe((user) => {
       if (user) {
         this.currentUser = user;
-        this.translateService.addLangs(["en", "fr"]);
+        // this.translateService.addLangs(["en", "fr"]);
-        this.translateService.use(user.language);
+        // this.translateService.use(user.language);
         this.selectedLanguageFlag = user.language;
       }
     });
@@ -69,9 +72,9 @@ export class AppComponent implements OnInit {
     });
   }
 
-  ngOnInit() {
+  // ngOnInit() {
-    this.serviceComm.componentTitle.subscribe((title) => (this.title = title));
+  //   this.serviceComm.componentTitle.subscribe((title) => (this.title = title));
-  }
+  // }
 
   public show() {
     return this.authenticationService.currentUserValue != undefined;
@@ -84,7 +87,7 @@ export class AppComponent implements OnInit {
   }
 
   public switchLang(event: any) {
-    this.translateService.use(event.value);
+    // this.translateService.use(event.value);
     this.currentUser.language = event.value;
     this.authenticationService.currentUserValue = this.currentUser;
     this.selectedLanguageFlag = event.value;

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

@@ -10,7 +10,7 @@
         aria-hidden="false"
         aria-label="Summary"
         style="width: 128px; height: 128px; font-size: 128px"
-        fontIcon="timeline"
+        svgIcon="summary"
       ></mat-icon>
     </a>
   </p>
@@ -25,7 +25,7 @@
         aria-hidden="false"
         aria-label="Add jumps"
         style="width: 128px; height: 128px; font-size: 128px"
-        fontIcon="add_circle"
+        svgIcon="add"
       ></mat-icon>
     </a>
   </p>
@@ -40,7 +40,7 @@
         aria-hidden="false"
         aria-label="List of jumps"
         style="width: 128px; height: 128px; font-size: 128px"
-        fontIcon="list_alt"
+        svgIcon="list"
       ></mat-icon>
     </a>
   </p>
@@ -51,11 +51,12 @@
       routerLinkActive="active"
       skipLocationChange
     >
-      <img
+      <mat-icon
-        src="assets/img/tunnel.jpg"
+        aria-hidden="false"
-        alt="Tunnel flights"
+        aria-label="List of tunnel flights"
         style="width: 128px; height: 128px; font-size: 128px"
-      />
+        svgIcon="wind"
+      ></mat-icon>
     </a>
   </p>
 </div>

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

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

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

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

Front/skydivelogs-app/src/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -9,10 +9,6 @@
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-
-    <style>
-      @import url("https://fonts.googleapis.com/css2?family=Roboto&family=Roboto&display=swap");
-    </style>
   </head>
 
   <body class="mat-app-background">