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

update Angular to v20

Browse Source 
Reviewed-on: #4
Co-authored-by: sandre <perso@sebastienandre.com>
Co-committed-by: sandre <perso@sebastienandre.com>
This commit was merged in pull request #4.
This commit is contained in:
sandre
2026-01-22 13:21:51 +00:00
committed by sandre
parent 137b2ab1fc
commit 701a684911
73 changed files with 6648 additions and 11197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css
+16 -16
View File
@@ -1,32 +1,32 @@
table {
width: 100%;
width: 100%;
}
.mat-row td {
padding: 15px;
padding: 15px;
}
.spanWithBreakWord {
display: inline-block;
min-width: 200px;
word-wrap: break-word;
display: inline-block;
min-width: 200px;
word-wrap: break-word;
}
.smallSpanWithBreakWord {
display: inline-block;
min-width: 50px;
word-wrap: break-word;
display: inline-block;
min-width: 50px;
word-wrap: break-word;
}
.content {
min-height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
padding-top: 25px;
min-height: 90vh;
display: flex;
justify-content: left;
flex-direction: column;
align-items: initial;
padding-top: 25px;
}
th.mat-header-cell {
text-align: center;
}
text-align: center;
}
Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
+164 -153
View File
@@ -1,165 +1,176 @@
<div class="content">
<div>
<button
mat-raised-button
color="accent"
[routerLink]="['/newjump']"
[routerLinkActive]="['active']"
skipLocationChange
>
{{ "ListJump_Add" | translate }}
</button>
</div>
<mat-progress-bar
[mode]="'indeterminate'"
*ngIf="isLoading"
></mat-progress-bar>
<div>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="infos">
<th
mat-header-cell
*matHeaderCellDef
style="min-width: 80px; text-wrap: nowrap"
></th>
<td
mat-cell
*matCellDef="let element"
style="text-align: left; text-wrap: nowrap"
<div>
<button
mat-raised-button
color="accent"
[routerLink]="['/newjump']"
[routerLinkActive]="['active']"
skipLocationChange
>
<mat-icon
aria-hidden="false"
aria-label="Additional informations of the jump"
style="cursor: pointer"
(click)="openDialog(element, false)"
svgIcon="info"
></mat-icon>
<mat-icon
aria-hidden="false"
aria-label="Notes"
[style.visibility]="
element.notes != undefined ? 'visible' : 'hidden'
"
svgIcon="note"
></mat-icon>
<mat-icon
aria-hidden="false"
aria-label="Special jump"
[style.visibility]="element.isSpecial ? 'visible' : 'hidden'"
svgIcon="celebration"
></mat-icon>
</td>
</ng-container>
{{ "ListJump_Add" | translate }}
</button>
</div>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef style="min-width: 70px">
{{ "ListJump_Header_Num" | translate }}
</th>
<td mat-cell *matCellDef="let element; let i = index">
{{
paginator.length - (paginator.pageIndex * paginator.pageSize + i)
}}
</td>
</ng-container>
@if (isLoading) {
<mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
}
<ng-container matColumnDef="jumpDate">
<th mat-header-cell *matHeaderCellDef>
{{ "ListJump_Header_Date" | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.jumpDate | date: 'yyyy-MM-dd'"
></span>
</td>
</ng-container>
<div>
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="infos">
<th
mat-header-cell
*matHeaderCellDef
style="min-width: 80px; text-wrap: nowrap"
></th>
<td
mat-cell
*matCellDef="let element"
style="text-align: left; text-wrap: nowrap"
>
<mat-icon
aria-hidden="false"
aria-label="Additional informations of the jump"
style="cursor: pointer"
(click)="openDialog(element, false)"
svgIcon="info"
></mat-icon>
<mat-icon
aria-hidden="false"
aria-label="Notes"
[style.visibility]="
element.notes != undefined ? 'visible' : 'hidden'
"
svgIcon="note"
></mat-icon>
<mat-icon
aria-hidden="false"
aria-label="Special jump"
[style.visibility]="
element.isSpecial ? 'visible' : 'hidden'
"
svgIcon="celebration"
></mat-icon>
</td>
</ng-container>
<ng-container matColumnDef="jumpType">
<th
mat-header-cell
*matHeaderCellDef
style="min-width: 100px; text-wrap: nowrap"
>
{{ "ListJump_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="id">
<th mat-header-cell *matHeaderCellDef style="min-width: 70px">
{{ "ListJump_Header_Num" | translate }}
</th>
<td mat-cell *matCellDef="let element; let i = index">
{{
paginator.length -
(paginator.pageIndex * paginator.pageSize + i)
}}
</td>
</ng-container>
<ng-container matColumnDef="aircraft">
<th mat-header-cell *matHeaderCellDef style="min-width: 110px">
{{ "ListJump_Header_Aircraft" | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.aircraft.name"
></span>
</td>
</ng-container>
<ng-container matColumnDef="jumpDate">
<th mat-header-cell *matHeaderCellDef>
{{ "ListJump_Header_Date" | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.jumpDate | date: 'yyyy-MM-dd'"
></span>
</td>
</ng-container>
<ng-container matColumnDef="dropZone">
<th mat-header-cell *matHeaderCellDef>
{{ "ListJump_Header_Dz" | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span
class="spanWithBreakWord"
[innerHTML]="element.dropZone.name"
></span>
</td>
</ng-container>
<ng-container matColumnDef="jumpType">
<th
mat-header-cell
*matHeaderCellDef
style="min-width: 100px; text-wrap: nowrap"
>
{{ "ListJump_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="gear">
<th mat-header-cell *matHeaderCellDef>
{{ "ListJump_Header_Id" | translate }}
</th>
<td mat-cell *matCellDef="let element">{{ element.gear.name }}</td>
</ng-container>
<ng-container matColumnDef="aircraft">
<th mat-header-cell *matHeaderCellDef style="min-width: 110px">
{{ "ListJump_Header_Aircraft" | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span
class="smallSpanWithBreakWord"
[innerHTML]="element.aircraft.name"
></span>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th
mat-header-cell
*matHeaderCellDef
style="min-width: 80px; text-wrap: nowrap"
></th>
<td
mat-cell
*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)"
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)"
svgIcon="edit"
></mat-icon>
</td>
</ng-container>
<ng-container matColumnDef="dropZone">
<th mat-header-cell *matHeaderCellDef>
{{ "ListJump_Header_Dz" | translate }}
</th>
<td mat-cell *matCellDef="let element">
<span
class="spanWithBreakWord"
[innerHTML]="element.dropZone.name"
></span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
<ng-container matColumnDef="gear">
<th mat-header-cell *matHeaderCellDef>
{{ "ListJump_Header_Id" | translate }}
</th>
<td mat-cell *matCellDef="let element">
{{ element.gear.name }}
</td>
</ng-container>
<mat-paginator
#paginator
[pageSize]="20"
(page)="pageChanged($event)"
showFirstLastButtons
></mat-paginator>
<ng-container matColumnDef="actions">
<th
mat-header-cell
*matHeaderCellDef
style="min-width: 80px; text-wrap: nowrap"
></th>
<td
mat-cell
*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)"
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)"
svgIcon="edit"
></mat-icon>
</td>
</ng-container>
<tr
mat-header-row
*matHeaderRowDef="displayedColumns; sticky: true"
></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
<mat-paginator
#paginator
[pageSize]="20"
(page)="pageChanged($event)"
showFirstLastButtons
></mat-paginator>
</div>
Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts
+93 -93
View File
@@ -1,9 +1,9 @@
import { Component, OnInit, ViewChild } from "@angular/core";
import { RouterLink, RouterModule } from "@angular/router";
import {
MatPaginator,
MatPaginatorModule,
PageEvent,
MatPaginator,
MatPaginatorModule,
PageEvent,
} from "@angular/material/paginator";
import { MatTableDataSource, MatTableModule } from "@angular/material/table";
import { MatDialog } from "@angular/material/dialog";
@@ -25,108 +25,108 @@ import { JumpInfosComponent } from "../jump-infos/jump-infos.component";
import { StatsService } from "../../services/stats.service";
@Component({
selector: "app-list-of-jumps",
templateUrl: "./list-of-jumps.component.html",
styleUrls: ["./list-of-jumps.component.css"],
imports: [
TranslateModule,
CommonModule,
RouterLink,
RouterModule,
MatIconModule,
MatPaginatorModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatTableModule,
MatFormFieldModule,
ReactiveFormsModule,
MatInputModule,
MatButtonModule,
],
selector: "app-list-of-jumps",
templateUrl: "./list-of-jumps.component.html",
styleUrls: ["./list-of-jumps.component.css"],
imports: [
TranslateModule,
CommonModule,
RouterLink,
RouterModule,
MatIconModule,
MatPaginatorModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatTableModule,
MatFormFieldModule,
ReactiveFormsModule,
MatInputModule,
MatButtonModule,
],
})
export class ListOfJumpsComponent implements OnInit {
public displayedColumns: Array<string> = [
"infos",
"id",
"jumpDate",
"jumpType",
"aircraft",
"dropZone",
"actions",
];
public dataSourceTable: MatTableDataSource<Jump> = new MatTableDataSource();
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
public isLoading: boolean = false;
public displayedColumns: Array<string> = [
"infos",
"id",
"jumpDate",
"jumpType",
"aircraft",
"dropZone",
"actions",
];
public dataSourceTable: MatTableDataSource<Jump> = new MatTableDataSource();
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
public isLoading: boolean = false;
constructor(
private serviceApi: JumpService,
private serviceComm: ServiceComm,
public dialog: MatDialog,
private translateService: TranslateService,
private statsService: StatsService
) {}
constructor(
private serviceApi: JumpService,
private serviceComm: ServiceComm,
public dialog: MatDialog,
private translateService: TranslateService,
private statsService: StatsService,
) {}
ngAferViewInit(): void {
this.dataSourceTable.paginator = this.paginator;
}
ngAferViewInit(): void {
this.dataSourceTable.paginator = this.paginator;
}
ngOnInit() {
this.serviceComm.refreshRequest.subscribe((action) => {
if (action === AddAction.Jump) {
this.dialog.closeAll();
this.getListOfJumps();
}
});
this.serviceComm.forceTranslateTitle.subscribe((data) => {
if (data === true) {
this.updateTitle();
}
});
ngOnInit() {
this.serviceComm.refreshRequest.subscribe((action) => {
if (action === AddAction.Jump) {
this.dialog.closeAll();
this.getListOfJumps();
}
});
this.serviceComm.forceTranslateTitle.subscribe((data) => {
if (data === true) {
this.updateTitle();
}
});
this.getListOfJumps();
}
this.updateTitle();
this.getListOfJumps();
}
getListOfJumps(pageSize: number = 20, pageIndex: number = 0) {
this.isLoading = true;
getListOfJumps(pageSize: number = 20, pageIndex: number = 0) {
this.isLoading = true;
this.serviceApi
.getJumps(pageIndex * pageSize, pageIndex * pageSize + pageSize)
.subscribe((data) => {
this.dataSourceTable.data = data.rows;
setTimeout(() => {
this.paginator.length = data.count;
this.paginator.pageIndex = pageIndex;
this.isLoading = false;
}, 500);
});
}
this.serviceApi
.getJumps(pageIndex * pageSize, pageIndex * pageSize + pageSize)
.subscribe((data) => {
this.dataSourceTable.data = data.rows;
setTimeout(() => {
this.paginator.length = data.count;
this.paginator.pageIndex = pageIndex;
this.isLoading = false;
}, 500);
});
}
openDialog(item: Jump, editMode: boolean) {
this.dialog.open(JumpInfosComponent, {
data: { jump: item, editMode: editMode },
maxHeight: "400px",
minWidth: "350px",
});
}
openDialog(item: Jump, editMode: boolean) {
this.dialog.open(JumpInfosComponent, {
data: { jump: item, editMode: editMode },
maxHeight: "400px",
minWidth: "350px",
});
}
delete(item: Jump) {
let data: Array<Jump> = this.dataSourceTable.data;
data = data.filter((d) => d.id !== item.id);
delete(item: Jump) {
let data: Array<Jump> = this.dataSourceTable.data;
data = data.filter((d) => d.id !== item.id);
this.dataSourceTable.data = data;
this.dataSourceTable.data = data;
this.serviceApi.deleteJump(item);
this.statsService.resetStats();
}
this.serviceApi.deleteJump(item);
this.statsService.resetStats();
}
pageChanged(event: PageEvent) {
this.getListOfJumps(event.pageSize, event.pageIndex);
}
pageChanged(event: PageEvent) {
this.getListOfJumps(event.pageSize, event.pageIndex);
}
private updateTitle() {
this.translateService.get("ListJumps_Title").subscribe((data) => {
this.serviceComm.updatedComponentTitle(data);
});
}
private updateTitle() {
this.translateService.get("ListJumps_Title").subscribe((data) => {
this.serviceComm.updatedComponentTitle(data);
});
}
}