2026-01-20 10:56:35 +00:00
8 changed files with 169 additions and 71 deletions
--- a/Front/skydivelogs-app/src/app/app.component.css
+++ b/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;
--- a/Front/skydivelogs-app/src/app/app.component.html
+++ b/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
--- a/Front/skydivelogs-app/src/app/app.component.ts
+++ b/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;
--- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
+++ b/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>
--- a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html
+++ b/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>
--- a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
+++ b/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>

--- a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html
+++ b/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>

--- a/Front/skydivelogs-app/src/app/summary/summary.component.html
+++ b/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