chore(deps): upgrade Angular 20 → 21

Migrates to Angular 21.0.0: updates tsconfig lib to es2022, migrates
bootstrap options in main.ts, and completes control flow migration
(*ngFor/*ngIf → @for/@if) in jumps and jumps-by-month templates to
resolve duplicate ng-template name conflicts skipped by the schematic.
Also fixes pre-commit hook to load nvm before running tests.
This commit is contained in:
2026-04-26 06:49:50 +02:00
parent be5f5775ef
commit 8c898cd652
13 changed files with 2098 additions and 1982 deletions
+117 -58
View File
@@ -1,9 +1,12 @@
<div @flyInOut>
<div class="d-flex">
<div class="flex-fill">
<h1 class="mb-1">{{title}}</h1>
<h1 class="mb-1">{{ title }}</h1>
<span [hidden]="!lastJump.numero" class="me-2 fs-6">
Dernier saut enregistré : <span class="fs-5 mx-1 text-primary">{{ lastJump.numero }}<sup>ème</sup></span> à <span class="fs-5 mx-1 text-primary">{{ lastJump.lieu }}</span> le <span class="fs-5 mx-1 text-primary">{{ lastJump.date | date: 'dd/MM/yyyy' }}</span>
Dernier saut enregistré :
<span class="fs-5 mx-1 text-primary">{{ lastJump.numero }}<sup>ème</sup></span> à
<span class="fs-5 mx-1 text-primary">{{ lastJump.lieu }}</span> le
<span class="fs-5 mx-1 text-primary">{{ lastJump.date | date: "dd/MM/yyyy" }}</span>
</span>
</div>
<span class="flex-spacer"></span>
@@ -13,10 +16,10 @@
</button>
<mat-menu #menuJumps="matMenu">
@for (menuitem of menuItems.getMenuPanel(); track menuitem) {
<button mat-menu-item>
<mat-icon [fontIcon]="menuitem.icon"></mat-icon>
<span>{{ menuitem.name }}</span>
</button>
<button mat-menu-item>
<mat-icon [fontIcon]="menuitem.icon"></mat-icon>
<span>{{ menuitem.name }}</span>
</button>
}
</mat-menu>
</div>
@@ -27,15 +30,26 @@
<mat-card-title>{{ subtitle }}</mat-card-title>
</mat-card-header>
<mat-card-content class="mt-2">
@if(displayCharts) {
<div class="row">
<div class="col-xxl-6 col-xs-12">
<app-linearea-chart [headers]="seriesHeader" [names]="seriesName" [values]="seriesRow" [colors]="seriesColor"></app-linearea-chart>
@if (displayCharts) {
<div class="row">
<div class="col-xxl-6 col-xs-12">
<app-linearea-chart
[headers]="seriesHeader"
[names]="seriesName"
[values]="seriesRow"
[colors]="seriesColor"
></app-linearea-chart>
</div>
<div class="col-xxl-6 col-xs-12">
<app-bars-chart
[headers]="seriesHeader"
[names]="seriesName"
[values]="seriesRow"
[colors]="seriesColor"
[legend]="true"
></app-bars-chart>
</div>
</div>
<div class="col-xxl-6 col-xs-12">
<app-bars-chart [headers]="seriesHeader" [names]="seriesName" [values]="seriesRow" [colors]="seriesColor" [legend]="true"></app-bars-chart>
</div>
</div>
}
<div class="row">
<div class="col-xs-12">
@@ -44,44 +58,70 @@
<thead>
<tr>
<th></th>
<th *ngFor='let name of seriesHeader; let i=index' class="text-end"> {{ name }} </th>
@for (name of seriesHeader; track name) {
<th class="text-end">{{ name }}</th>
}
<th class="text-end">Total</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let values of seriesRow; let i=index'>
<th class="{{seriesColorClass[i]}} text-end"> ● {{ seriesName[i] }} </th>
<td *ngFor='let value of values; let i=index' class="font-monospace text-end">
<span *ngIf="value; else elseBlock" class="pr-1">{{ value }}</span>
<ng-template #elseBlock><span class="text-empty pr-1">{{ value }}</span></ng-template>
</td>
<th class="{{seriesColorClass[i]}} font-monospace text-end">{{ seriesRowTotal[i] }}</th>
</tr>
@for (values of seriesRow; track $index; let i = $index) {
<tr>
<th class="{{ seriesColorClass[i] }} text-end">● {{ seriesName[i] }}</th>
@for (value of values; track $index) {
<td class="font-monospace text-end">
@if (value) {
<span class="pr-1">{{ value }}</span>
} @else {
<span class="text-empty pr-1">{{ value }}</span>
}
</td>
}
<th class="{{ seriesColorClass[i] }} font-monospace text-end">
{{ seriesRowTotal[i] }}
</th>
</tr>
}
</tbody>
<tfoot>
<tr>
<th class="text-end">Total</th>
<th *ngFor='let value of seriesColTotal; let i=index' class="font-monospace text-end">
<span *ngIf="value; else elseBlock" class="pr-1">{{ value }}</span>
<ng-template #elseBlock><span class="text-empty pr-1">{{ value }}</span></ng-template>
</th>
@for (value of seriesColTotal; track $index) {
<th class="font-monospace text-end">
@if (value) {
<span class="pr-1">{{ value }}</span>
} @else {
<span class="text-empty pr-1">{{ value }}</span>
}
</th>
}
<th class="font-monospace text-end">{{ grandTotal }}</th>
</tr>
<tr>
<th class="text-end">Moyenne</th>
<th *ngFor='let value of seriesRowAvg; let i=index' class="font-monospace text-end">
<span *ngIf="value; else elseBlock" class="pr-1">{{ value | number : '1.0-1' }}</span>
<ng-template #elseBlock><span class="text-empty pr-1">{{ value | number : '1.0-1' }}</span></ng-template>
</th>
<th class="font-monospace text-end">{{ grandAvg | number : '1.0-1' }}</th>
@for (value of seriesRowAvg; track $index) {
<th class="font-monospace text-end">
@if (value) {
<span class="pr-1">{{ value | number: "1.0-1" }}</span>
} @else {
<span class="text-empty pr-1">{{ value | number: "1.0-1" }}</span>
}
</th>
}
<th class="font-monospace text-end">{{ grandAvg | number: "1.0-1" }}</th>
</tr>
<tr>
<th class="text-end">Moyenne <small>3 dernières années</small></th>
<th *ngFor='let value of seriesRowAvgLastYears; let i=index' class="font-monospace text-end">
<span *ngIf="value; else elseBlock" class="pr-1">{{ value | number : '1.0-1' }}</span>
<ng-template #elseBlock><span class="text-empty pr-1">{{ value | number : '1.0-1' }}</span></ng-template>
</th>
<th class="font-monospace text-end">{{ grandAvgLastYears | number : '1.0-1' }}</th>
@for (value of seriesRowAvgLastYears; track $index) {
<th class="font-monospace text-end">
@if (value) {
<span class="pr-1">{{ value | number: "1.0-1" }}</span>
} @else {
<span class="text-empty pr-1">{{ value | number: "1.0-1" }}</span>
}
</th>
}
<th class="font-monospace text-end">{{ grandAvgLastYears | number: "1.0-1" }}</th>
</tr>
</tfoot>
</table>
@@ -94,27 +134,46 @@
<mat-card-title>Types de sauts</mat-card-title>
</mat-card-header>
<mat-card-content class="mt-2">
@if(displayCharts) {
<div class="row">
<div class="col-xs-12">
<app-line-chart [headers]="seriesTypesHeader" [names]="seriesTypesName" [values]="seriesTypesRowCumulated" [colors]="seriesTypesColor" [legend]="true" [hideZero]="true"></app-line-chart>
@if (displayCharts) {
<div class="row">
<div class="col-xs-12">
<app-line-chart
[headers]="seriesTypesHeader"
[names]="seriesTypesName"
[values]="seriesTypesRowCumulated"
[colors]="seriesTypesColor"
[legend]="true"
[hideZero]="true"
></app-line-chart>
</div>
</div>
</div>
<mat-divider class="mt-2 mb-3"></mat-divider>
<div class="row">
@for (item of getCategories(); track $index) {
<div class="col-lg-2 col-sm-4 col-xs-6">
<app-circle-chart [headers]="seriesHeader" [names]="seriesName" [values]="[item.count, (lastJump.numero-item.count)]" [color]="$index" [label]="item.categorie"></app-circle-chart>
</div>
}
@for (item of getModules(); track $index) {
<div class="col-lg-2 col-sm-4 col-xs-6">
<app-circle-chart [headers]="seriesHeader" [names]="seriesName" [values]="[item.count, (lastJump.numero-item.count)]" [color]="getModuleColor($index)" [label]="item.module"></app-circle-chart>
</div>
}
</div>
<mat-divider class="my-3"></mat-divider>
<!--
<mat-divider class="mt-2 mb-3"></mat-divider>
<div class="row">
@for (item of getCategories(); track $index) {
<div class="col-lg-2 col-sm-4 col-xs-6">
<app-circle-chart
[headers]="seriesHeader"
[names]="seriesName"
[values]="[item.count, lastJump.numero - item.count]"
[color]="$index"
[label]="item.categorie"
></app-circle-chart>
</div>
}
@for (item of getModules(); track $index) {
<div class="col-lg-2 col-sm-4 col-xs-6">
<app-circle-chart
[headers]="seriesHeader"
[names]="seriesName"
[values]="[item.count, lastJump.numero - item.count]"
[color]="getModuleColor($index)"
[label]="item.module"
></app-circle-chart>
</div>
}
</div>
<mat-divider class="my-3"></mat-divider>
<!--
<div class="row">
<div class="col-xxl-6 col-xs-12">
<app-line-chart [headers]="seriesTypesHeader" [names]="seriesTypesName" [values]="seriesTypesRow" [colors]="seriesTypesColor" [legend]="true"></app-line-chart>
@@ -127,4 +186,4 @@
}
</mat-card-content>
</mat-card>
</div>
</div>
+3 -2
View File
@@ -2,7 +2,7 @@ import { trigger, state, style, animate, transition } from '@angular/animations'
import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ActivatedRoute } from '@angular/router';
import { CommonModule } from '@angular/common';
import { DatePipe, DecimalPipe } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
@@ -25,7 +25,8 @@ import { Jump, JumpByCategorie, JumpByDate, JumpByDateByModule, JumpByModule, Ju
@Component({
selector: 'app-jumps',
imports: [
CommonModule,
DatePipe,
DecimalPipe,
MatButtonModule,
MatCardModule,
MatDividerModule,
@@ -1,5 +1,5 @@
import { Component, Input } from '@angular/core';
import { NgForOf, NgIf } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { CardColors } from 'src/app/core';
@@ -7,7 +7,7 @@ import { CardColors } from 'src/app/core';
@Component({
selector: 'app-card-container',
templateUrl: './card-container.component.html',
imports: [NgIf, NgForOf, MatCardModule],
imports: [MatCardModule],
})
export class CardContainerComponent {
errorList: string[] = [];
@@ -7,10 +7,12 @@
<mat-icon fontIcon="more_vert"></mat-icon>
</button>
<mat-menu #menuJumpBar="matMenu">
<button mat-menu-item *ngFor="let menuitem of menuItems.getMenuPanel()">
<mat-icon [fontIcon]="menuitem.icon"></mat-icon>
<span>{{ menuitem.name }}</span>
</button>
@for (menuitem of menuItems.getMenuPanel(); track menuitem) {
<button mat-menu-item>
<mat-icon [fontIcon]="menuitem.icon"></mat-icon>
<span>{{ menuitem.name }}</span>
</button>
}
</mat-menu>
</mat-card-header>
<mat-divider class="my-3"></mat-divider>
@@ -34,51 +36,67 @@
<thead>
<tr>
<th></th>
<th *ngFor="let name of seriesHeader; let i = index" class="text-end">{{ name }}</th>
@for (name of seriesHeader; track name) {
<th class="text-end">{{ name }}</th>
}
<th class="text-end">Total</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let values of seriesRow; let i = index">
<th class="{{ seriesColorClass[i] }} text-end">● {{ seriesName[i] }}</th>
<td *ngFor="let value of values; let i = index" class="font-monospace text-end">
<span *ngIf="value; else elseBlock" class="pr-1">{{ value }}</span>
<ng-template #elseBlock
><span class="text-empty pr-1">{{ value }}</span></ng-template
>
</td>
<th class="{{ seriesColorClass[i] }} font-monospace text-end">{{ seriesRowTotal[i] }}</th>
</tr>
@for (values of seriesRow; track $index; let i = $index) {
<tr>
<th class="{{ seriesColorClass[i] }} text-end">● {{ seriesName[i] }}</th>
@for (value of values; track $index) {
<td class="font-monospace text-end">
@if (value) {
<span class="pr-1">{{ value }}</span>
} @else {
<span class="text-empty pr-1">{{ value }}</span>
}
</td>
}
<th class="{{ seriesColorClass[i] }} font-monospace text-end">{{ seriesRowTotal[i] }}</th>
</tr>
}
</tbody>
<tfoot>
<tr>
<th class="text-end">Total</th>
<th *ngFor="let value of seriesColTotal; let i = index" class="font-monospace text-end">
<span *ngIf="value; else elseBlock" class="pr-1">{{ value }}</span>
<ng-template #elseBlock
><span class="text-empty pr-1">{{ value }}</span></ng-template
>
</th>
@for (value of seriesColTotal; track $index) {
<th class="font-monospace text-end">
@if (value) {
<span class="pr-1">{{ value }}</span>
} @else {
<span class="text-empty pr-1">{{ value }}</span>
}
</th>
}
<th class="font-monospace text-end">{{ grandTotal }}</th>
</tr>
<tr>
<th class="text-end">Moyenne</th>
<th *ngFor="let value of seriesRowAvg; let i = index" class="font-monospace text-end">
<span *ngIf="value; else elseBlock" class="pr-1">{{ value | number: "1.0-1" }}</span>
<ng-template #elseBlock
><span class="text-empty pr-1">{{ value | number: "1.0-1" }}</span></ng-template
>
</th>
@for (value of seriesRowAvg; track $index) {
<th class="font-monospace text-end">
@if (value) {
<span class="pr-1">{{ value | number: "1.0-1" }}</span>
} @else {
<span class="text-empty pr-1">{{ value | number: "1.0-1" }}</span>
}
</th>
}
<th class="font-monospace text-end">{{ grandAvg | number: "1.0-1" }}</th>
</tr>
<tr>
<th class="text-end">Moyenne <small>3 dernières années</small></th>
<th *ngFor="let value of seriesRowAvgLastYears; let i = index" class="font-monospace text-end">
<span *ngIf="value; else elseBlock" class="pr-1">{{ value | number: "1.0-1" }}</span>
<ng-template #elseBlock
><span class="text-empty pr-1">{{ value | number: "1.0-1" }}</span></ng-template
>
</th>
@for (value of seriesRowAvgLastYears; track $index) {
<th class="font-monospace text-end">
@if (value) {
<span class="pr-1">{{ value | number: "1.0-1" }}</span>
} @else {
<span class="text-empty pr-1">{{ value | number: "1.0-1" }}</span>
}
</th>
}
<th class="font-monospace text-end">{{ grandAvgLastYears | number: "1.0-1" }}</th>
</tr>
</tfoot>
@@ -1,6 +1,6 @@
import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { NgFor, NgIf, DecimalPipe } from '@angular/common';
import { DecimalPipe } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
@@ -17,8 +17,6 @@ import { JumpByDate } from '@models';
@Component({
selector: 'app-jumps-by-month',
imports: [
NgFor,
NgIf,
DecimalPipe,
MatButtonModule,
MatCardModule,
@@ -2,28 +2,36 @@
<thead>
<tr>
<th></th>
<th *ngFor='let name of headers; let i=index' class="text-end"> {{name}} </th>
@for (name of headers; track name; let i = $index) {
<th class="text-end">{{ name }}</th>
}
<th class="text-end">Total</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let row of rows; let i=index'>
<th class="{{colors[i]}} text-end"> ● {{ names[i] }} </th>
<td *ngFor='let value of row; let i=index' class="font-monospace text-end">
<span class="{{ value === 0 ? 'text-empty pe-1' : 'pe-1'}}">{{ value }}</span>
</td>
<th class="{{colors[i]}} font-monospace text-end">
<span class="{{ values[i] === 0 ? 'text-empty pe-1' : 'pe-1'}}">{{ values[i] }}</span>
</th>
</tr>
@for (row of rows; track row; let i = $index) {
<tr>
<th class="{{ colors[i] }} text-end">● {{ names[i] }}</th>
@for (value of row; track value; let i = $index) {
<td class="font-monospace text-end">
<span class="{{ value === 0 ? 'text-empty pe-1' : 'pe-1' }}">{{ value }}</span>
</td>
}
<th class="{{ colors[i] }} font-monospace text-end">
<span class="{{ values[i] === 0 ? 'text-empty pe-1' : 'pe-1' }}">{{ values[i] }}</span>
</th>
</tr>
}
</tbody>
<tfoot>
<tr>
<th class="text-end">Total</th>
<th *ngFor='let value of seriesColTotal; let i=index' class="font-monospace text-end">
<span class="{{ value === 0 ? 'text-empty pe-1' : 'pe-1'}}">{{ value }}</span>
</th>
@for (value of seriesColTotal; track value; let i = $index) {
<th class="font-monospace text-end">
<span class="{{ value === 0 ? 'text-empty pe-1' : 'pe-1' }}">{{ value }}</span>
</th>
}
<th class="font-monospace text-end">{{ grandTotal }}</th>
</tr>
</tfoot>
</table>
</table>
@@ -1,8 +1,7 @@
import { Component, Input, AfterContentChecked } from '@angular/core';
import { NgIf, NgFor } from '@angular/common';
@Component({
imports: [NgIf, NgFor],
imports: [],
selector: 'app-history-table',
templateUrl: './history-table.component.html',
styleUrls: [],
@@ -1,5 +1,5 @@
import { Component, Input } from '@angular/core';
import { NgForOf, NgIf } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { Errors } from 'src/app/core';
@@ -7,7 +7,7 @@ import { Errors } from 'src/app/core';
@Component({
selector: 'app-list-errors',
templateUrl: './list-errors.component.html',
imports: [NgIf, NgForOf, MatCardModule],
imports: [MatCardModule],
})
export class ListErrorsComponent {
errorList: string[] = [];