Changement avec les mat-icon

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

@@ -1,4 +1,4 @@
-.hamburger__icon {
+/* .hamburger__icon {
   position: relative;
   height: 1rem;
   margin-right: 1rem;
@@ -8,7 +8,7 @@
 
 .hamburger__icon__fill {
   fill: #424242
-}
+} */
 
 .navigation.side-menu-active {
   left: 0px;

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

@@ -1,7 +1,5 @@
 <mat-toolbar *ngIf="this.show()">
-  <button mat-icon-button (click)="snav.toggle()">
-    <mat-icon svgIcon="menu"></mat-icon>
-  </button>
+  <mat-icon svgIcon="menu" (click)="snav.toggle()"></mat-icon>
   <h2>{{ title }}</h2>
 
   <mat-select

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

@@ -2,7 +2,11 @@ import { Component, OnInit } from "@angular/core";
 import { Router, RouterLink, RouterOutlet } from "@angular/router";
 import { CommonModule } from "@angular/common";
 import { MatToolbarModule } from "@angular/material/toolbar";
-import { MatIconModule } from "@angular/material/icon";
+import {
+  IconResolver,
+  MatIconModule,
+  MatIconRegistry,
+} from "@angular/material/icon";
 import { MatSelectModule } from "@angular/material/select";
 import { MatOptionModule } from "@angular/material/core";
 import { MatSidenavModule } from "@angular/material/sidenav";
@@ -21,7 +25,7 @@ import { ServiceComm } from "../services/service-comm.service";
 import { ConfigurationHelper } from "../services/configuration-helper";
 import { ServiceCacheApi } from "../services/service-cache-api.service";
 
-import { BaseComponent } from "./app.base.component";
+import { DomSanitizer } from "@angular/platform-browser";
 
 @Component({
   selector: "app-root",
@@ -41,8 +45,8 @@ import { BaseComponent } from "./app.base.component";
     TranslatePipe,
   ],
 })
-export class AppComponent extends BaseComponent {
-  // public title = "app";
+export class AppComponent implements OnInit {
+  public title = "app";
   public currentUser: User;
   public version: string;
   public selectedLanguageFlag: string;
@@ -50,17 +54,21 @@ export class AppComponent extends BaseComponent {
   constructor(
     private router: Router,
     private authenticationService: AuthenticationService,
-    // private serviceComm: ServiceComm,
+    private serviceComm: ServiceComm,
     private serviceCacheApi: ServiceCacheApi,
-    // private translateService: TranslateService,
+    private translateService: TranslateService,
+    private sanitizer: DomSanitizer,
+    private iconRegistry: MatIconRegistry,
   ) {
-    super("Default_Title");
+    const resolver: IconResolver = (name) =>
+      sanitizer.bypassSecurityTrustResourceUrl(`/assets/icon/${name}.svg`);
+    iconRegistry.addSvgIconResolver(resolver);
 
     this.authenticationService.currentUser.subscribe((user) => {
       if (user) {
         this.currentUser = user;
-        // this.translateService.addLangs(["en", "fr"]);
-        // this.translateService.use(user.language);
+        this.translateService.addLangs(["en", "fr"]);
+        this.translateService.use(user.language);
         this.selectedLanguageFlag = user.language;
       }
     });
@@ -72,9 +80,9 @@ export class AppComponent extends BaseComponent {
     });
   }
 
-  // ngOnInit() {
-  //   this.serviceComm.componentTitle.subscribe((title) => (this.title = title));
-  // }
+  ngOnInit() {
+    this.serviceComm.componentTitle.subscribe((title) => (this.title = title));
+  }
 
   public show() {
     return this.authenticationService.currentUserValue != undefined;
@@ -87,7 +95,7 @@ export class AppComponent extends BaseComponent {
   }
 
   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/list-of-dzs/list-of-dzs.component.html

@@ -1,59 +1,113 @@
 <div class="content">
-  <div *ngIf="dataSourceTable != null else loading">
-    <button mat-raised-button color="accent" (click)="openDialogToAdd()" *ngIf="isUserAdmin == true">{{ 'List_Dz_Add' | translate }}</button>
+  <div *ngIf="dataSourceTable != null; else loading">
+    <button
+      mat-raised-button
+      color="accent"
+      (click)="openDialogToAdd()"
+      *ngIf="isUserAdmin == true"
+    >
+      {{ "List_Dz_Add" | translate }}
+    </button>
 
     <mat-form-field>
-      <mat-label>{{ 'List_Dz_Filter' | translate }}</mat-label>
-      <input matInput (keyup)="applyFilter($event)" placeholder="{{ 'List_Dz_Filter_PlaceHolder' | translate }}" #input>
+      <mat-label>{{ "List_Dz_Filter" | translate }}</mat-label>
+      <input
+        matInput
+        (keyup)="applyFilter($event)"
+        placeholder="{{ 'List_Dz_Filter_PlaceHolder' | translate }}"
+        #input
+      />
     </mat-form-field>
 
     <table mat-table [dataSource]="dataSourceTable">
       <ng-container matColumnDef="isfavorite">
-        <th mat-header-cell *matHeaderCellDef style="min-width: 144px;"></th>
-        <td mat-cell *matCellDef="let element" style="text-align: left;">
-          <mat-icon aria-hidden="false" aria-label="Favorite" *ngIf="element.isFavorite === true"
-            (click)="removeToFavorite(element)" color="primary" style="cursor: pointer;">favorite</mat-icon>
-          <mat-icon aria-hidden="false" aria-label="Not favorite" *ngIf="element.isFavorite === false"
-            (click)="setToFavorite(element)" style="cursor: pointer;">favorite_border</mat-icon>
-          <a href='http://{{element.website}}' target="_blank">
-            <mat-icon aria-hidden="false" aria-label="URL to the DZ website" style="color: white;">link</mat-icon>
+        <th mat-header-cell *matHeaderCellDef style="min-width: 144px"></th>
+        <td mat-cell *matCellDef="let element" style="text-align: left">
+          <mat-icon
+            aria-hidden="false"
+            aria-label="Favorite"
+            *ngIf="element.isFavorite === true"
+            (click)="removeToFavorite(element)"
+            color="primary"
+            style="cursor: pointer"
+            svgIcon="favorite"
+          ></mat-icon>
+          <mat-icon
+            aria-hidden="false"
+            aria-label="Not favorite"
+            *ngIf="element.isFavorite === false"
+            (click)="setToFavorite(element)"
+            style="cursor: pointer"
+            svgIcon="not_favorite"
+          ></mat-icon>
+          <a href="http://{{ element.website }}" target="_blank">
+            <mat-icon
+              aria-hidden="false"
+              aria-label="URL to the DZ website"
+              style="color: white"
+              svgIcon="link"
+            ></mat-icon>
           </a>
-          <a href='https://www.openstreetmap.org/?mlat={{element.latitude}}&mlon={{element.longitude}}#map=14/{{element.latitude}}/{{element.longitude}}'
-            target="_blank">
-            <mat-icon aria-hidden="false" aria-label="Location of the DZ" style="color: white;">map</mat-icon>
+          <a
+            href="https://www.openstreetmap.org/?mlat={{
+              element.latitude
+            }}&mlon={{ element.longitude }}#map=14/{{ element.latitude }}/{{
+              element.longitude
+            }}"
+            target="_blank"
+          >
+            <mat-icon
+              aria-hidden="false"
+              aria-label="Location of the DZ"
+              style="color: white"
+              svgIcon="map"
+            ></mat-icon>
           </a>
-          <a href="mailto:{{element.email}}" *ngIf="element.email">
-            <mat-icon aria-hidden="false" aria-label="Contact mail of the DZ" style="color: white;">mail_outline</mat-icon>
+          <a href="mailto:{{ element.email }}" *ngIf="element.email">
+            <mat-icon
+              aria-hidden="false"
+              aria-label="Contact mail of the DZ"
+              style="color: white"
+              svgIcon="mail"
+            ></mat-icon>
           </a>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef>{{ 'List_Dz_Header_ID' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{element.id}}</td>
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "List_Dz_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 }}</th>
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "List_Dz_Header_Name" | translate }}
+        </th>
         <td mat-cell *matCellDef="let element">
           <span class="spanWithBreakWord" [innerHTML]="element.name"></span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="address">
-        <th mat-header-cell *matHeaderCellDef>{{ 'List_Dz_Header_Address' | translate }}</th>
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "List_Dz_Header_Address" | translate }}
+        </th>
         <td mat-cell *matCellDef="let element">
           <span class="spanWithBreakWord" [innerHTML]="element.address"></span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="type">
-        <th mat-header-cell *matHeaderCellDef>{{ 'List_Dz_Header_Type' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{element.type}}</td>
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "List_Dz_Header_Type" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">{{ element.type }}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <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-images/list-of-images.component.html

@@ -1,8 +1,20 @@
 <div>
-  <form [formGroup]="imgForm" (ngSubmit)="onSubmit(imgForm.value)" autocomplete="off" style="padding: 10px;">
+  <form
+    [formGroup]="imgForm"
+    (ngSubmit)="onSubmit(imgForm.value)"
+    autocomplete="off"
+    style="padding: 10px"
+  >
     <p>
-      <input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" formControlName="image"
-        (change)="onFileChanged($event)" />
+      <input
+        type="file"
+        #fileUpload
+        id="fileUpload"
+        name="fileUpload"
+        accept="image/*"
+        formControlName="image"
+        (change)="onFileChanged($event)"
+      />
     </p>
     <p>
       <mat-form-field>
@@ -12,7 +24,7 @@
     </p>
 
     <button mat-icon-button color="warn" type="submit">
-      <mat-icon>file_upload</mat-icon>
+      <mat-icon svgIcon="file_upload"></mat-icon>
       Upload image
     </button>
     <label>{{ imageError }}</label>
@@ -22,28 +34,54 @@
 <div *ngIf="resultsLength > 0">
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="comment">
-      <th mat-header-cell *matHeaderCellDef style="text-align: center;">Comments</th>
-      <td mat-cell *matCellDef="let element" style="text-align: left;"><span style="white-space:nowrap;">{{element.comment}}</span></td>
+      <th mat-header-cell *matHeaderCellDef style="text-align: center">
+        Comments
+      </th>
+      <td mat-cell *matCellDef="let element" style="text-align: left">
+        <span style="white-space: nowrap">{{ element.comment }}</span>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="data">
-      <th mat-header-cell *matHeaderCellDef style="text-align: center;">Image</th>
-      <td mat-cell *matCellDef="let element" style="text-align: center;">
-        <img src="{{element.data}}" alt="image" style="width:50%;" (click)="openModal(element)" class="cursor">
+      <th mat-header-cell *matHeaderCellDef style="text-align: center">
+        Image
+      </th>
+      <td mat-cell *matCellDef="let element" style="text-align: center">
+        <img
+          src="{{ element.data }}"
+          alt="image"
+          style="width: 50%"
+          (click)="openModal(element)"
+          class="cursor"
+        />
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
 
   <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
 </div>
 
-<div class="imgmodal" [ngStyle]="{'display': (showPopin === true) ? 'block' : 'none'}">
+<div
+  class="imgmodal"
+  [ngStyle]="{ display: showPopin === true ? 'block' : 'none' }"
+>
   <span class="close cursor" (click)="closeModal()">&times;</span>
-  <mat-icon aria-hidden="false" aria-label="Rotation" (click)="rotate()" class="rotate cursor">undo</mat-icon>
+  <mat-icon
+    aria-hidden="false"
+    aria-label="Rotation"
+    (click)="rotate()"
+    class="rotate cursor"
+    svgIcon="undo"
+  ></mat-icon>
   <div class="imgbox">
-    <img class="center-fit cursor" src="{{ popinImage }}" (click)="closeModal()" [@rotatedState]='stateRotation'>
+    <img
+      class="center-fit cursor"
+      src="{{ popinImage }}"
+      (click)="closeModal()"
+      [@rotatedState]="stateRotation"
+    />
   </div>
 </div>

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

@@ -34,22 +34,22 @@
             aria-label="Additional informations of the jump"
             style="cursor: pointer"
             (click)="openDialog(element, false)"
-            >info</mat-icon
-          >
+            svgIcon="info"
+          ></mat-icon>
           <mat-icon
             aria-hidden="false"
             aria-label="Notes"
             [style.visibility]="
               element.notes != undefined ? 'visible' : 'hidden'
             "
-            >sticky_note_2</mat-icon
-          >
+            svgIcon="note"
+          ></mat-icon>
           <mat-icon
             aria-hidden="false"
             aria-label="Special jump"
             [style.visibility]="element.isSpecial ? 'visible' : 'hidden'"
-            >celebration</mat-icon
-          >
+            svgIcon="celebration"
+          ></mat-icon>
         </td>
       </ng-container>
 
@@ -139,15 +139,15 @@
             aria-label="Delete this jump"
             style="cursor: pointer"
             (click)="delete(element)"
-            >delete</mat-icon
-          >
+            svgIcon="delete"
+          ></mat-icon>
           <mat-icon
             aria-hidden="false"
             aria-label="Update some informations of the jump"
             style="cursor: pointer; margin-left: 10px"
             (click)="openDialog(element, true)"
-            >edit</mat-icon
-          >
+            svgIcon="edit"
+          ></mat-icon>
         </td>
       </ng-container>
 

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

@@ -111,7 +111,7 @@
         <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>
@@ -124,8 +124,8 @@
             aria-label="Delete this jump"
             style="cursor: pointer"
             (click)="delete(element)"
-            >delete</mat-icon
-          >
+            svgIcon="delete"
+          ></mat-icon>
         </td>
       </ng-container>
 

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

@@ -21,8 +21,8 @@
       aria-label="Force the refresh of the stats"
       style="cursor: pointer"
       (click)="refreshStats()"
-      >cached</mat-icon
-    >
+      svgIcon="reset"
+    ></mat-icon>
   </div>
 
   <mat-tab-group