MadJax
5b72e21c9d
- Login : case à cocher « Se souvenir de moi » sous le champ email ; mémorisation de l'identifiant (email uniquement) dans le localStorage du navigateur, pré-remplissage à la visite suivante sur le même navigateur, effacement si décochée ; erreurs de stockage ignorées - Panneau Totaux : « Total du mois » en gras et « Total annuel partiel » non gras ; « Remboursement indicatif » renommé « Remboursement indicatif pour ce mois » ; « Montant prévisionnel annuel » non gras - Steering : nouvelle règle imposant les réponses en français - Mise à jour requirements.md (Req 17 + glossaire), design-requirements.md (Req 17 technique) et design.md (LoginComponent, PanneauTotaux)
70 lines
3.2 KiB
HTML
70 lines
3.2 KiB
HTML
<section class="panneau-totaux" aria-label="Totaux kilométriques">
|
|
<h2 class="panneau-totaux__titre">Totaux</h2>
|
|
|
|
@if (chargement() && !totaux()) {
|
|
<p class="panneau-totaux__chargement">Chargement des totaux…</p>
|
|
}
|
|
|
|
<dl class="panneau-totaux__liste">
|
|
<div class="panneau-totaux__ligne">
|
|
<dt>Total du jour</dt>
|
|
<dd>{{ (totaux()?.totalJour ?? 0) | number: formatKm() }} km</dd>
|
|
</div>
|
|
<div class="panneau-totaux__ligne panneau-totaux__ligne--fort">
|
|
<dt>Total du mois</dt>
|
|
<dd>{{ (totaux()?.totalMois ?? 0) | number: formatKm() }} km</dd>
|
|
</div>
|
|
<div class="panneau-totaux__ligne">
|
|
<dt>Total annuel partiel</dt>
|
|
<dd>{{ (totaux()?.totalAnnuelPartiel ?? 0) | number: formatKm() }} km</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
@if (montantPrevisionnel(); as montantPrevisionnel) {
|
|
<div class="panneau-totaux__previsionnel">
|
|
<div class="panneau-totaux__ligne panneau-totaux__ligne--fort">
|
|
<span class="panneau-totaux__previsionnel-libelle">
|
|
Remboursement indicatif pour ce mois
|
|
<button
|
|
type="button"
|
|
class="panneau-totaux__aide"
|
|
aria-label="En savoir plus sur le remboursement indicatif"
|
|
title="Simple indication de versement, calculée à 80% du barème sur le mois affiché. Le montant réellement versé est le montant réglé que vous saisissez."
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
|
|
<line x1="12" y1="17" x2="12.01" y2="17"></line>
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
<span class="panneau-totaux__previsionnel-montant">
|
|
{{ montantPrevisionnel.montantPrevisionnelMensuel | number: '1.2-2' }} €
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="panneau-totaux__previsionnel">
|
|
<div class="panneau-totaux__ligne">
|
|
<span class="panneau-totaux__previsionnel-libelle">
|
|
Montant prévisionnel annuel
|
|
<button
|
|
type="button"
|
|
class="panneau-totaux__aide"
|
|
aria-label="En savoir plus sur le montant prévisionnel annuel"
|
|
title="Projection à 100% du barème sur le total annuel partiel, sans minoration. Cette projection ne se substitue pas au montant réel calculé en fin d'année."
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
|
|
<line x1="12" y1="17" x2="12.01" y2="17"></line>
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
<span class="panneau-totaux__previsionnel-montant">
|
|
{{ montantPrevisionnel.montantPrevisionnelAnnuel | number: '1.2-2' }} €
|
|
</span>
|
|
</div>
|
|
</div>
|
|
}
|
|
</section>
|