From a3e504e8094bbd2cb7e66a88b6295bed6ec3bfc4 Mon Sep 17 00:00:00 2001
From: sandre <perso@sebastienandre.com>
Date: Fri, 16 Jan 2026 17:03:56 +0100
Subject: [PATCH] Style sur la liste des langues

---
 .../src/app/app.component.html                | 148 ++++++++++++++----
 .../list-of-tunnel-flights.component.ts       |   2 +
 2 files changed, 119 insertions(+), 31 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/app.component.html b/Front/skydivelogs-app/src/app/app.component.html
index 6c61f30..d1a9337 100644
--- a/Front/skydivelogs-app/src/app/app.component.html
+++ b/Front/skydivelogs-app/src/app/app.component.html
@@ -1,76 +1,162 @@
 <mat-toolbar *ngIf="this.show()">
-  <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
+  <button mat-icon-button (click)="snav.toggle()">
+    <mat-icon>menu</mat-icon>
+  </button>
   <h2>{{ title }}</h2>
-  <mat-select (selectionChange)="switchLang($event)" [(value)]="selectedLanguageFlag"
-              style="margin-left:50px; width: 60px;" >
+
+  <mat-select
+    [(value)]="selectedLanguageFlag"
+    (selectionChange)="switchLang($event)"
+    style="margin-left: 50px; width: 100px"
+  >
     <mat-select-trigger>
-      <img src="{{ 'assets/img/' + selectedLanguageFlag + '.svg' }}" style="width: 30px;">
+      <img
+        src="{{ 'assets/img/' + selectedLanguageFlag + '.svg' }}"
+        style="width: 30px"
+      />
     </mat-select-trigger>
     <mat-option value="fr">
-      <img src="assets/img/fr.svg" style="width: 30px;">
+      <img src="assets/img/fr.svg" style="width: 30px" />
     </mat-option>
     <mat-option value="en">
-      <img src="assets/img/en.svg" style="width: 30px;">
+      <img src="assets/img/en.svg" style="width: 30px" />
     </mat-option>
   </mat-select>
 </mat-toolbar>
 
 <mat-sidenav-container>
-  <mat-sidenav #snav mode="over" style="padding: 0 20px 0 10px;">
+  <mat-sidenav #snav mode="over" style="padding: 0 20px 0 10px">
     <mat-nav-list>
       <mat-icon aria-hidden="false" aria-label="Summary">timeline</mat-icon>
-      <a routerLink="/summary" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>{{ 'App_Nav_Summary' | translate }}</a>
-      <hr class="splitter">
+      <a
+        routerLink="/summary"
+        routerLinkActive="active"
+        (click)="snav.toggle()"
+        skipLocationChange
+        >{{ "App_Nav_Summary" | translate }}</a
+      >
+      <hr class="splitter" />
     </mat-nav-list>
     <mat-nav-list>
-      <mat-icon aria-hidden="false" aria-label="List of jumps">list_alt</mat-icon>
-      <a routerLink="/jumps" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>{{ 'App_Nav_Jumps' | translate }}</a>
+      <mat-icon aria-hidden="false" aria-label="List of jumps"
+        >list_alt</mat-icon
+      >
+      <a
+        routerLink="/jumps"
+        routerLinkActive="active"
+        (click)="snav.toggle()"
+        skipLocationChange
+        >{{ "App_Nav_Jumps" | translate }}</a
+      >
     </mat-nav-list>
     <mat-nav-list>
       <mat-icon aria-hidden="false" aria-label="Add jumps">add_circle</mat-icon>
-      <a routerLink="/newjump" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>{{ 'App_Nav_NewJump' | translate }}</a>
-      <hr class="splitter">
+      <a
+        routerLink="/newjump"
+        routerLinkActive="active"
+        (click)="snav.toggle()"
+        skipLocationChange
+        >{{ "App_Nav_NewJump" | translate }}</a
+      >
+      <hr class="splitter" />
     </mat-nav-list>
     <mat-nav-list>
-      <mat-icon aria-hidden="false" aria-label="List of tunnel flights">list_alt</mat-icon>
-      <a routerLink="/tunnelFlights" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>{{ 'App_Nav_TunnelFlights' | translate }}</a>
+      <mat-icon aria-hidden="false" aria-label="List of tunnel flights"
+        >list_alt</mat-icon
+      >
+      <a
+        routerLink="/tunnelFlights"
+        routerLinkActive="active"
+        (click)="snav.toggle()"
+        skipLocationChange
+        >{{ "App_Nav_TunnelFlights" | translate }}</a
+      >
     </mat-nav-list>
     <mat-nav-list>
-      <mat-icon aria-hidden="false" aria-label="Add flights in tunnel">add_circle</mat-icon>
-      <a routerLink="/newTunnelFlight" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>{{ 'App_Nav_NewTunnelFlight' | translate }}</a>
-      <hr class="splitter">
+      <mat-icon aria-hidden="false" aria-label="Add flights in tunnel"
+        >add_circle</mat-icon
+      >
+      <a
+        routerLink="/newTunnelFlight"
+        routerLinkActive="active"
+        (click)="snav.toggle()"
+        skipLocationChange
+        >{{ "App_Nav_NewTunnelFlight" | translate }}</a
+      >
+      <hr class="splitter" />
     </mat-nav-list>
     <mat-nav-list>
       <mat-icon aria-hidden="false" aria-label="Dropzones">store</mat-icon>
-      <a routerLink="/dzs" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>{{ 'App_Nav_Dzs' | translate }}</a>
+      <a
+        routerLink="/dzs"
+        routerLinkActive="active"
+        (click)="snav.toggle()"
+        skipLocationChange
+        >{{ "App_Nav_Dzs" | translate }}</a
+      >
     </mat-nav-list>
     <mat-nav-list>
-      <mat-icon aria-hidden="false" aria-label="Aircrafts">airplanemode_active</mat-icon>
-      <a routerLink="/aircrafts" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>{{ 'App_Nav_Aircrafts' | translate }}</a>
+      <mat-icon aria-hidden="false" aria-label="Aircrafts"
+        >airplanemode_active</mat-icon
+      >
+      <a
+        routerLink="/aircrafts"
+        routerLinkActive="active"
+        (click)="snav.toggle()"
+        skipLocationChange
+        >{{ "App_Nav_Aircrafts" | translate }}</a
+      >
     </mat-nav-list>
     <mat-nav-list>
-      <mat-icon aria-hidden="false" aria-label="List of jump types">flight_land</mat-icon>
-      <a routerLink="/jumpTypes" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>{{ 'App_Nav_JumpTypes' | translate }}</a>
+      <mat-icon aria-hidden="false" aria-label="List of jump types"
+        >flight_land</mat-icon
+      >
+      <a
+        routerLink="/jumpTypes"
+        routerLinkActive="active"
+        (click)="snav.toggle()"
+        skipLocationChange
+        >{{ "App_Nav_JumpTypes" | translate }}</a
+      >
     </mat-nav-list>
     <mat-nav-list>
-      <mat-icon aria-hidden="false" aria-label="List of gears">settings_input_antenna</mat-icon>
-      <a routerLink="/gears" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>{{ 'App_Nav_Gears' | translate }}</a>
+      <mat-icon aria-hidden="false" aria-label="List of gears"
+        >settings_input_antenna</mat-icon
+      >
+      <a
+        routerLink="/gears"
+        routerLinkActive="active"
+        (click)="snav.toggle()"
+        skipLocationChange
+        >{{ "App_Nav_Gears" | translate }}</a
+      >
     </mat-nav-list>
     <mat-nav-list *ngIf="currentUser">
-      <hr class="splitter">
-      <mat-icon aria-hidden="false" aria-label="User account">account_box</mat-icon>
-      <a routerLink="/user" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>
+      <hr class="splitter" />
+      <mat-icon aria-hidden="false" aria-label="User account"
+        >account_box</mat-icon
+      >
+      <a
+        routerLink="/user"
+        routerLinkActive="active"
+        (click)="snav.toggle()"
+        skipLocationChange
+      >
         {{ this.currentUser.firstName }} {{ this.currentUser.lastName }}
       </a>
     </mat-nav-list>
     <mat-nav-list *ngIf="currentUser">
       <mat-icon aria-hidden="false" aria-label="To logout">logout</mat-icon>
-      <span (click)="snav.toggle(); logout()" style="cursor: pointer;">{{ 'App_Nav_Logout' | translate }}</span>
+      <span (click)="snav.toggle(); logout()" style="cursor: pointer">{{
+        "App_Nav_Logout" | translate
+      }}</span>
     </mat-nav-list>
   </mat-sidenav>
 
   <mat-sidenav-content>
     <router-outlet></router-outlet>
-    <footer style="text-align: right;">{{ 'App_Footer' | translate }}{{ version }} - &#64;Séb</footer>
+    <footer style="text-align: right">
+      {{ "App_Footer" | translate }}{{ version }} - &#64;Séb
+    </footer>
   </mat-sidenav-content>
-</mat-sidenav-container>
\ No newline at end of file
+</mat-sidenav-container>
diff --git a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts b/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts
index a0276a2..a2e820e 100644
--- a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts
+++ b/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts
@@ -10,6 +10,7 @@ import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { MatRadioModule } from "@angular/material/radio";
 import { MatProgressBarModule } from "@angular/material/progress-bar";
 import { FormsModule } from "@angular/forms";
+import { MatButtonModule } from "@angular/material/button";
 
 import { ChartConfiguration, ChartData, ChartType } from "chart.js";
 import { from, groupBy, mergeMap, reduce, map } from "rxjs";
@@ -37,6 +38,7 @@ import { TunnelFlight, TunnelFlightByMonth } from "../../models/tunnel-flight";
     FormsModule,
     RouterModule,
     MatTableModule,
+    MatButtonModule,
   ],
 })
 export class ListOfTunnelFlightsComponent implements OnInit {