SchotzIAD KM Tracker : suivi des trajets kilométriques (Angular + .NET 8)
Application complète de saisie et de suivi des trajets kilométriques avec calcul de distance routière (OpenRouteService), barème kilométrique, résumés et régularisation annuelle. Backend (ASP.NET Core .NET 8, EF Core, SQLite) : - Trajets (CRUD, réordonnancement, insertion), calcul de distance ORS avec fallback Haversine, géométrie d'itinéraire stockée par trajet, recalcul en masse. - Profil, véhicules (avec dénomination), carnet d'adresses nommées, cache d'adresses. - Barème kilométrique : tranches multiples par puissance fiscale, borne max exclusive avec 'illimité' (KmMax nullable), coefficient à 3 décimales, recopie du dernier barème connu. - Résumés mensuel/annuel, montants réglés, régularisation, export PDF. Frontend (Angular 22, zoneless + signals) : - Consultation par jour, navigation temporelle synchronisée, carte Leaflet, formulaire de trajet (adresses nommées, domicile, autocomplétion BAN). - Détection de changement zoneless (indépendante de zone.js). Hébergement : Docker Compose (nginx + backend), scripts run-dev.sh / run-docker.sh.
This commit is contained in:
@@ -0,0 +1,58 @@
|
||||
<section class="resume-annuel">
|
||||
<h1>Résumé annuel</h1>
|
||||
|
||||
<form class="selecteurs" (ngSubmit)="charger()">
|
||||
<div class="champ">
|
||||
<label for="annee">Année</label>
|
||||
<input
|
||||
id="annee"
|
||||
name="annee"
|
||||
type="number"
|
||||
[(ngModel)]="annee"
|
||||
[min]="anneeMin"
|
||||
[max]="anneeMax"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn-principal" [disabled]="chargement()">
|
||||
Afficher
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-secondaire"
|
||||
(click)="exporterPdf()"
|
||||
[disabled]="export() || chargement()"
|
||||
>
|
||||
Export PDF annuel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@if (chargement()) {
|
||||
<p class="info">Chargement du résumé…</p>
|
||||
} @else if (resumeCharge()) {
|
||||
<table class="mois">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Mois</th>
|
||||
<th class="num">Total (km)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (ligne of lignes(); track ligne.mois) {
|
||||
<tr>
|
||||
<td>{{ ligne.libelle }}</td>
|
||||
<td class="num">{{ ligne.totalKm | number: '1.2-2' }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Total annuel</td>
|
||||
<td class="num total">{{ totalAnnuel() | number: '1.2-2' }} km</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
}
|
||||
</section>
|
||||
@@ -0,0 +1,99 @@
|
||||
.resume-annuel {
|
||||
padding: 1.5rem;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.selecteurs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.champ {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.champ label {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.champ input {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 6px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-principal,
|
||||
.btn-secondaire {
|
||||
padding: 0.55rem 1.25rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.btn-principal {
|
||||
background: #1565c0;
|
||||
color: #fff;
|
||||
border: 1px solid #1565c0;
|
||||
}
|
||||
|
||||
.btn-secondaire {
|
||||
background: #fff;
|
||||
color: #1565c0;
|
||||
border: 1px solid #1565c0;
|
||||
}
|
||||
|
||||
.btn-principal:disabled,
|
||||
.btn-secondaire:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.mois {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.mois th,
|
||||
.mois td {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.mois th {
|
||||
font-weight: 600;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.mois .num {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mois tfoot td {
|
||||
font-weight: 600;
|
||||
border-top: 2px solid #bbb;
|
||||
}
|
||||
|
||||
.mois .total {
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: #555;
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { NotificationService } from '../../core/services/notification.service';
|
||||
import { TrajetService } from '../../core/services/trajet.service';
|
||||
import { ResumeAnnuel } from '../../core/models';
|
||||
|
||||
/** Libellés des mois affichés dans le tableau annuel (index 0 = janvier). */
|
||||
const NOMS_MOIS = [
|
||||
'Janvier',
|
||||
'Février',
|
||||
'Mars',
|
||||
'Avril',
|
||||
'Mai',
|
||||
'Juin',
|
||||
'Juillet',
|
||||
'Août',
|
||||
'Septembre',
|
||||
'Octobre',
|
||||
'Novembre',
|
||||
'Décembre'
|
||||
];
|
||||
|
||||
/** Ligne du tableau annuel : un mois et son total kilométrique. */
|
||||
export interface LigneAnnuelle {
|
||||
mois: number;
|
||||
libelle: string;
|
||||
totalKm: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Résumé annuel (Exigences 4.1, 4.5, 4.6, 7.3).
|
||||
*
|
||||
* - Sélecteur année (2000–2100).
|
||||
* - Tableau de 12 lignes (mois, total km) + ligne du total annuel à 2 décimales,
|
||||
* plafonné à 999 999,99 (Exigence 4.5).
|
||||
* - Bouton « Export PDF annuel » : Blob → téléchargement navigateur, repli
|
||||
* `trajets_AAAA.pdf` ; échec de téléchargement → message d'erreur (Exigences 4.6, 7.3).
|
||||
* - En cas d'erreur API, aucune donnée partielle n'est affichée.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-resume-annuel',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule],
|
||||
templateUrl: './resume-annuel.component.html',
|
||||
styleUrl: './resume-annuel.component.scss'
|
||||
})
|
||||
export class ResumeAnnuelComponent implements OnInit {
|
||||
private readonly trajetService = inject(TrajetService);
|
||||
private readonly notification = inject(NotificationService);
|
||||
|
||||
/** Bornes de saisie de l'année (cohérentes avec la validation backend). */
|
||||
readonly anneeMin = 2000;
|
||||
readonly anneeMax = 2100;
|
||||
|
||||
/** Plafond d'affichage du total annuel (Exigence 4.5). */
|
||||
readonly totalMax = 999999.99;
|
||||
|
||||
/** Année sélectionnée, initialisée à l'année en cours. */
|
||||
annee: number = new Date().getFullYear();
|
||||
|
||||
/** 12 lignes (mois → total km) dérivées du résumé chargé. */
|
||||
readonly lignes = signal<LigneAnnuelle[]>([]);
|
||||
|
||||
/** Total annuel plafonné à 999 999,99. */
|
||||
readonly totalAnnuel = signal(0);
|
||||
|
||||
/** true tant qu'aucun chargement réussi (masque le tableau). */
|
||||
readonly resumeCharge = signal(false);
|
||||
|
||||
/** true pendant le chargement du résumé. */
|
||||
readonly chargement = signal(false);
|
||||
|
||||
/** true pendant la génération/téléchargement du PDF (désactive le bouton). */
|
||||
readonly export = signal(false);
|
||||
|
||||
ngOnInit(): void {
|
||||
this.charger();
|
||||
}
|
||||
|
||||
/** Charge le résumé annuel pour l'année sélectionnée. */
|
||||
charger(): void {
|
||||
if (!this.anneeValide()) {
|
||||
this.notification.error('Veuillez saisir une année valide (2000–2100).');
|
||||
return;
|
||||
}
|
||||
|
||||
this.chargement.set(true);
|
||||
this.trajetService.getResumeAnnuel(this.annee).subscribe({
|
||||
next: (resume) => {
|
||||
this.appliquerResume(resume);
|
||||
this.chargement.set(false);
|
||||
this.resumeCharge.set(true);
|
||||
},
|
||||
error: () => {
|
||||
// Ne pas afficher de données partielles en cas d'erreur.
|
||||
this.lignes.set([]);
|
||||
this.totalAnnuel.set(0);
|
||||
this.resumeCharge.set(false);
|
||||
this.chargement.set(false);
|
||||
this.notification.error('Impossible de charger le résumé annuel.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Déclenche l'export PDF annuel et le téléchargement navigateur (Exigences 4.6, 7.3). */
|
||||
exporterPdf(): void {
|
||||
if (!this.anneeValide() || this.export()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.export.set(true);
|
||||
this.trajetService.exportPdfAnnuel(this.annee).subscribe({
|
||||
next: (blob) => {
|
||||
this.export.set(false);
|
||||
this.declencherTelechargement(blob, `trajets_${this.annee}.pdf`);
|
||||
},
|
||||
error: () => {
|
||||
this.export.set(false);
|
||||
this.notification.error("Échec du téléchargement du PDF annuel.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Construit les 12 lignes à partir du résumé (toujours 12 mois côté backend,
|
||||
* mais on garantit l'ordre et la présence des 12 mois) et plafonne le total.
|
||||
*/
|
||||
private appliquerResume(resume: ResumeAnnuel): void {
|
||||
const parMois = new Map<number, number>();
|
||||
for (const m of resume.mois ?? []) {
|
||||
parMois.set(m.mois, m.totalKm ?? 0);
|
||||
}
|
||||
|
||||
this.lignes.set(NOMS_MOIS.map((libelle, index) => {
|
||||
const mois = index + 1;
|
||||
return { mois, libelle, totalKm: parMois.get(mois) ?? 0 };
|
||||
}));
|
||||
|
||||
this.totalAnnuel.set(Math.min(resume.totalKm ?? 0, this.totalMax));
|
||||
}
|
||||
|
||||
/**
|
||||
* Crée une URL d'objet à partir du Blob et déclenche un téléchargement via
|
||||
* une ancre temporaire, puis libère l'URL.
|
||||
*/
|
||||
private declencherTelechargement(blob: Blob, nomFichier: string): void {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const ancre = document.createElement('a');
|
||||
ancre.href = url;
|
||||
ancre.download = nomFichier;
|
||||
document.body.appendChild(ancre);
|
||||
ancre.click();
|
||||
document.body.removeChild(ancre);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
/** Vérifie que l'année sélectionnée est dans les bornes attendues. */
|
||||
private anneeValide(): boolean {
|
||||
return (
|
||||
Number.isInteger(this.annee) &&
|
||||
this.annee >= this.anneeMin &&
|
||||
this.annee <= this.anneeMax
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user