Infobulle carte : commentaire en tête + « (A/R) » après la distance
- Backend : TrajetCarteDto expose désormais le commentaire du trajet ; la
projection de GET /api/trajets/journee/{date} le renseigne.
- Frontend : l'interface TrajetCarte porte le commentaire. L'infobulle affiche
le commentaire en première ligne (s'il existe, séparé par un léger trait) et
ajoute « (A/R) » après la distance pour un aller/retour.
- Style .carte-infobulle__commentaire (italique, discret) dans les styles
globaux.
Builds backend, frontend dev et prod OK.
This commit is contained in:
@@ -48,8 +48,7 @@ export interface Trajet {
|
||||
|
||||
/**
|
||||
* Trajet enrichi pour l'affichage carte (géométries GeoJSON).
|
||||
* Note : ce DTO ne porte PAS de `commentaire` (le commentaire n'est affiché que
|
||||
* dans la liste des trajets, via l'interface `Trajet`, jamais dans l'infobulle carte).
|
||||
* Le `commentaire` est exposé pour être affiché en tête de l'infobulle carte.
|
||||
*/
|
||||
export interface TrajetCarte {
|
||||
id: number;
|
||||
@@ -62,6 +61,7 @@ export interface TrajetCarte {
|
||||
arriveeLatitude?: number | null;
|
||||
arriveeLongitude?: number | null;
|
||||
geometrieJson: string | null; // GeoJSON LineString ou null
|
||||
commentaire?: string | null; // commentaire du trajet (affiché en tête de l'infobulle)
|
||||
allerRetour?: boolean; // information aller/retour conservée par trajet
|
||||
}
|
||||
|
||||
|
||||
@@ -413,12 +413,25 @@ export class CarteTrajetsComponent implements AfterViewInit, OnChanges, OnDestro
|
||||
: null;
|
||||
}
|
||||
|
||||
/** Contenu HTML de l'infobulle : départ, arrivée, distance (Exigence 8.3). */
|
||||
/**
|
||||
* Contenu HTML de l'infobulle : commentaire (en tête, s'il existe), départ,
|
||||
* arrivée, puis distance suivie de « (A/R) » pour un aller/retour (Exigence 8.3).
|
||||
*/
|
||||
private contenuInfobulle(trajet: TrajetCarte): string {
|
||||
const distance =
|
||||
const distanceBase =
|
||||
trajet.distance != null ? `${trajet.distance.toFixed(2)} km` : 'distance non calculée';
|
||||
// Précise l'aller/retour après la distance (la distance affichée est déjà la
|
||||
// distance effective doublée côté API).
|
||||
const distance = trajet.allerRetour ? `${distanceBase} (A/R)` : distanceBase;
|
||||
|
||||
const commentaire = trajet.commentaire?.trim();
|
||||
const ligneCommentaire = commentaire
|
||||
? `<div class="carte-infobulle__commentaire">${this.echapper(commentaire)}</div>`
|
||||
: '';
|
||||
|
||||
return `
|
||||
<div class="carte-infobulle">
|
||||
${ligneCommentaire}
|
||||
<div><strong>Départ :</strong> ${this.echapper(trajet.adresseDepart)}</div>
|
||||
<div><strong>Arrivée :</strong> ${this.echapper(trajet.adresseArrivee)}</div>
|
||||
<div><strong>Distance :</strong> ${distance}</div>
|
||||
|
||||
@@ -38,6 +38,15 @@ html, body {
|
||||
div {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
/* Commentaire en tête de l'infobulle : mis en avant, discret et italique. */
|
||||
&__commentaire {
|
||||
margin: 0 0 4px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
font-style: italic;
|
||||
color: #475569;
|
||||
}
|
||||
}
|
||||
|
||||
/* Contrainte de taille des popups Leaflet pour éviter tout débordement de la zone
|
||||
|
||||
Reference in New Issue
Block a user