sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update to Angular v19 and fixing #3

Merged
sandre merged 41 commits from fix/error-after-update-angular-19 into master 2026-01-20 10:56:35 +00:00
Conversation 0 Commits 41 Files Changed 117 +169 -71
8 changed files with 169 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 68891fe8c6 - Show all commits

4
Front/skydivelogs-app/src/app/app.component.css
View File

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

4
Front/skydivelogs-app/src/app/app.component.html
View File

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

34
Front/skydivelogs-app/src/app/app.component.ts
View File

@@ -2,7 +2,11 @@ import { Component, OnInit } from "@angular/core";
import { Router, RouterLink, RouterOutlet } from "@angular/router"; import { Router, RouterLink, RouterOutlet } from "@angular/router";
import { CommonModule } from "@angular/common"; import { CommonModule } from "@angular/common";
import { MatToolbarModule } from "@angular/material/toolbar"; 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 { MatSelectModule } from "@angular/material/select";
import { MatOptionModule } from "@angular/material/core"; import { MatOptionModule } from "@angular/material/core";
import { MatSidenavModule } from "@angular/material/sidenav"; import { MatSidenavModule } from "@angular/material/sidenav";
@@ -21,7 +25,7 @@ import { ServiceComm } from "../services/service-comm.service";
import { ConfigurationHelper } from "../services/configuration-helper"; import { ConfigurationHelper } from "../services/configuration-helper";
import { ServiceCacheApi } from "../services/service-cache-api.service"; import { ServiceCacheApi } from "../services/service-cache-api.service";
import { BaseComponent } from "./app.base.component"; import { DomSanitizer } from "@angular/platform-browser";
@Component({ @Component({
selector: "app-root", selector: "app-root",
@@ -41,8 +45,8 @@ import { BaseComponent } from "./app.base.component";
TranslatePipe, TranslatePipe,
], ],
}) })
export class AppComponent extends BaseComponent { export class AppComponent implements OnInit {
// public title = "app"; public title = "app";
public currentUser: User; public currentUser: User;
public version: string; public version: string;
public selectedLanguageFlag: string; public selectedLanguageFlag: string;
@@ -50,17 +54,21 @@ export class AppComponent extends BaseComponent {
constructor( constructor(
private router: Router, private router: Router,
private authenticationService: AuthenticationService, private authenticationService: AuthenticationService,
// private serviceComm: ServiceComm, private serviceComm: ServiceComm,
private serviceCacheApi: ServiceCacheApi, 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) => { this.authenticationService.currentUser.subscribe((user) => {
if (user) { if (user) {
this.currentUser = 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; this.selectedLanguageFlag = user.language;
} }
}); });
@@ -72,9 +80,9 @@ export class AppComponent extends BaseComponent {
}); });
} }
// ngOnInit() { ngOnInit() {
// this.serviceComm.componentTitle.subscribe((title) => (this.title = title)); this.serviceComm.componentTitle.subscribe((title) => (this.title = title));
// } }
public show() { public show() {
return this.authenticationService.currentUserValue != undefined; return this.authenticationService.currentUserValue != undefined;
@@ -87,7 +95,7 @@ export class AppComponent extends BaseComponent {
} }
public switchLang(event: any) { public switchLang(event: any) {
// this.translateService.use(event.value); this.translateService.use(event.value);
this.currentUser.language = event.value; this.currentUser.language = event.value;
this.authenticationService.currentUserValue = this.currentUser; this.authenticationService.currentUserValue = this.currentUser;
this.selectedLanguageFlag = event.value; this.selectedLanguageFlag = event.value;

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

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

64
Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html
View File

@@ -1,8 +1,20 @@
<div> <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> <p>
<input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" formControlName="image" <input
(change)="onFileChanged($event)" /> type="file"
#fileUpload
id="fileUpload"
name="fileUpload"
accept="image/*"
formControlName="image"
(change)="onFileChanged($event)"
/>
</p> </p>
<p> <p>
<mat-form-field> <mat-form-field>
@@ -12,7 +24,7 @@
</p> </p>
<button mat-icon-button color="warn" type="submit"> <button mat-icon-button color="warn" type="submit">
<mat-icon>file_upload</mat-icon> <mat-icon svgIcon="file_upload"></mat-icon>
Upload image Upload image
</button> </button>
<label>{{ imageError }}</label> <label>{{ imageError }}</label>
@@ -22,28 +34,54 @@
<div *ngIf="resultsLength > 0"> <div *ngIf="resultsLength > 0">
<table mat-table [dataSource]="dataSourceTable"> <table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="comment"> <ng-container matColumnDef="comment">
<th mat-header-cell *matHeaderCellDef style="text-align: center;">Comments</th> <th mat-header-cell *matHeaderCellDef style="text-align: center">
<td mat-cell *matCellDef="let element" style="text-align: left;"><span style="white-space:nowrap;">{{element.comment}}</span></td> 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>
<ng-container matColumnDef="data"> <ng-container matColumnDef="data">
<th mat-header-cell *matHeaderCellDef style="text-align: center;">Image</th> <th mat-header-cell *matHeaderCellDef style="text-align: center">
<td mat-cell *matCellDef="let element" style="text-align: center;"> Image
<img src="{{element.data}}" alt="image" style="width:50%;" (click)="openModal(element)" class="cursor"> </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> </td>
</ng-container> </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>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator> <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div> </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> <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"> <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>
</div> </div>

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

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

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

@@ -111,7 +111,7 @@
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<span <span
class="smallSpanWithBreakWord" class="smallSpanWithBreakWord"
[innerHTML]="element.flightDate | date : 'yyyy-MM-dd'" [innerHTML]="element.flightDate | date: 'yyyy-MM-dd'"
></span> ></span>
</td> </td>
</ng-container> </ng-container>
@@ -124,8 +124,8 @@
aria-label="Delete this jump" aria-label="Delete this jump"
style="cursor: pointer" style="cursor: pointer"
(click)="delete(element)" (click)="delete(element)"
>delete</mat-icon svgIcon="delete"
> ></mat-icon>
</td> </td>
</ng-container> </ng-container>

4
Front/skydivelogs-app/src/app/summary/summary.component.html
View File

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