@mostajs/flotte-ui 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -3,7 +3,17 @@
 Format [Keep a Changelog](https://keepachangelog.com/fr/1.0.0/) · [SemVer](https://semver.org/lang/fr/).
 Auteur : Dr Hamid MADANI <drmdh@msn.com>
 
-## [0.2.0] — non publiée
+## [0.2.1] — non publiée
+### Added
+- Option `pieces: false` du rendu et des lecteurs. Elle s'adresse à une application qui ne reçoit pas de fichiers :
+  - plus de champ fichier, et des formulaires urlencoded, non multipart ;
+  - les lecteurs ignorent une pièce qui n'a pas été offerte.
+
+  Elle répond à la console de Guerway, qui n'accepte que l'urlencoded. Essai T-FUI-27.
+- Option de rendu `codeSite(code)` : le code de station affiché, choisi par l'application. Guerway saisit `alg-01`
+  et affiche `ALG-01`. Essai T-FUI-28.
+
+## [0.2.0] — 2026-10-24
 Les planches A à F de Guerway (`GUERWAY/docs/L0/maquette-flotte/`, exigences ECR-16.29 à 16.41). Demande
 `@mostajs/flotte` **^0.5.0** (`TRANSITIONS`, `transitionsDepuis`, pièce d'un plein).
 ### Added

package/llms.txt

@@ -38,6 +38,7 @@ EXPORTS
   rendreFormulaireStatut(fiche, transition, opts) ; lireStatut(corps, transition) -> { donnees: { motif, confirme }, erreurs }
   FORMULAIRES { plan, intervention, cloture, plein, releve, echeance } ; rendreFormulaire(nom, { fiche, declarations?, valeurs?,
       erreurs?, refus? }, opts + action) ; lireFormulaire(nom, corps, { declarations? }) -> { donnees, erreurs }
+  codeSite?: (code) → code affiché (rendu, 0.2.1) ; pieces: false (rendu et lecteurs, 0.2.1) : ni champ fichier ni multipart, pour une application sans dépôt de fichiers
   erreurDeFlotte(e) -> { champ, code }   le refus du moteur sous son champ (RECUL → km, DOUBLON → immatriculation…)
   rendreMonVehicule(vm, { liens: { plein, releve } }) ; rendreChoixVehicule(aptitudes, { nom?, choisi? })
   rendreRefusDepart(depart, { lien }) ; rendreDisponibles(aptitudes, { exclure })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mostajs/flotte-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Écrans HTML du carnet du parc (@mostajs/flotte), sans React ni script : tableau de bord, fiche du véhicule pleine page à sept onglets (documents, entretiens, affectations, pleins et relevés, coûts, historique), formulaires d'écriture et leurs lecteurs, « Mon véhicule » du livreur, aptitude en tournée. Vue-modèle lue dans l'API de flotte, rendue avec le kit de composants de l'application (sa charte) ou un kit sobre par défaut.",
   "license": "AGPL-3.0-or-later",
   "author": "Dr Hamid MADANI <drmdh@msn.com>",

package/src/commun.js

@@ -7,8 +7,11 @@ import { KIT_DEFAUT } from './kit.js';
 
 export const BADGE = { en_service: ['vert', 'coche'], a_l_atelier: ['orange', 'cle'], immobilise: ['rouge', 'croix'], reforme: ['gris', 'document'] };
 
-/** Le contexte de rendu : kit complété, traduction, formats. opts : { kit, t, locale, liens, droits, declarations, devise } */
-export function contexte({ kit = {}, t, locale = 'fr-FR', liens = {}, droits = {}, declarations = {}, devise = '' } = {}) {
+/**
+ * Le contexte de rendu : kit complété, traduction, formats. opts : { kit, t, locale, liens, droits, declarations, devise,
+ * codeSite? (code → code affiché : Guerway saisit alg-01 et affiche ALG-01) }
+ */
+export function contexte({ kit = {}, t, locale = 'fr-FR', liens = {}, droits = {}, declarations = {}, devise = '', codeSite } = {}) {
   const k = { ...KIT_DEFAUT, ...kit, classes: { ...KIT_DEFAUT.classes, ...(kit.classes || {}) } };
   const nf = (x) => new Intl.NumberFormat(locale).format(x);
   const nf2 = (x) => new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(x);
@@ -32,7 +35,8 @@ export function contexte({ kit = {}, t, locale = 'fr-FR', liens = {}, droits = {
     if (Number.isFinite(v.n)) v.n = nf(v.n);
     return lib(famille, m.code, v);
   };
-  return { k, c: k.classes, nf, nf2, argent, devise, tx, lib, jj, phrase, liens, droits, peutGerer: Boolean(droits.gerer), locale };
+  const site = (c) => (c === null || c === undefined || c === '' ? '—' : typeof codeSite === 'function' ? String(codeSite(c)) : String(c));
+  return { k, c: k.classes, nf, nf2, argent, devise, tx, lib, jj, phrase, site, liens, droits, peutGerer: Boolean(droits.gerer), locale };
 }
 
 const nonVide = ([, v]) => v !== undefined && v !== null && v !== '';

package/src/formulaires.js

@@ -99,13 +99,14 @@ const tousAttributs = (declarations) => {
 const libelleAttribut = (x, a) => { const l = x.tx(`formulaire.attribut.${a}`); return l === `formulaire.attribut.${a}` ? a : l; };
 
 /**
- * Le formulaire « Nouveau véhicule » ou « Modifier » (multipart : il porte les pièces). Rend { titre, sousTitre, corps }.
+ * Le formulaire « Nouveau véhicule » ou « Modifier » (multipart : il porte les pièces ; `opts.pieces: false` les retire,
+ * pour une application qui ne reçoit pas de fichiers). Rend { titre, sousTitre, corps }.
  * vm : { mode: 'nouveau'|'modifier', vehicule? (lu par flotte.lire), declarations, sites, valeurs?, erreurs?, refus? }
  * opts : ceux du rendu, et liens.enregistrer (l'action POST), liens.base (Annuler).
  */
 export function rendreFormulaireVehicule(vm, opts = {}) {
   const x = contexte({ ...opts, declarations: vm.declarations || opts.declarations });
-  const D = vm.declarations || {}, sites = vm.sites || {}, nouveau = vm.mode !== 'modifier', v = vm.vehicule || null;
+  const D = vm.declarations || {}, sites = vm.sites || {}, nouveau = vm.mode !== 'modifier', v = vm.vehicule || null, pieces = opts.pieces !== false;
   const base = nouveau ? { mode: 'propre' } : {
     immatriculation: v.immatriculation, chassis: v.chassis ?? '', miseEnService: v.miseEnService ?? '', site: v.site ?? '', mode: v.mode ?? 'propre',
     ...Object.fromEntries(Object.entries(v.attributs || {}).map(([a, n]) => [`attributs.${a}`, n])),
@@ -144,15 +145,15 @@ export function rendreFormulaireVehicule(vm, opts = {}) {
     const lignes = Object.entries(D.echeances || {}).map(([t, d]) => {
       const n = (k) => `echeance.${t}.${k}`;
       const cell = (k, forme) => champ(x, { nom: n(k), libelle: `${x.lib('echeance', t)} — ${x.tx(`formulaire.champ.${k}`)}`, forme, valeur: val[n(k)], erreur: e[n(k)], cache: true });
-      return `<tr><th scope="row">${esc(x.lib('echeance', t))}${d.obligatoire ? ` ${x.k.badge(x.tx('documents.obligatoire'), 'rouge')}` : ''}</th><td>${cell('debut', 'date')}</td><td>${cell('fin', 'date')}</td><td>${cell('piece', 'fichier')}</td></tr>`;
+      return `<tr><th scope="row">${esc(x.lib('echeance', t))}${d.obligatoire ? ` ${x.k.badge(x.tx('documents.obligatoire'), 'rouge')}` : ''}</th><td>${cell('debut', 'date')}</td><td>${cell('fin', 'date')}</td>${pieces ? `<td>${cell('piece', 'fichier')}</td>` : ''}</tr>`;
     }).join('');
-    const docs = lignes ? `<div class="fl-defile"><table class="${esc(x.c.tableau)} fl-docs-form"><thead><tr><th scope="col">${esc(x.tx('formulaire.document'))}</th><th scope="col">${esc(x.tx('formulaire.champ.debut'))}</th><th scope="col">${esc(x.tx('formulaire.champ.fin'))}</th><th scope="col">${esc(x.tx('formulaire.champ.piece'))}</th></tr></thead><tbody>${lignes}</tbody></table></div>` : '';
+    const docs = lignes ? `<div class="fl-defile"><table class="${esc(x.c.tableau)} fl-docs-form"><thead><tr><th scope="col">${esc(x.tx('formulaire.document'))}</th><th scope="col">${esc(x.tx('formulaire.champ.debut'))}</th><th scope="col">${esc(x.tx('formulaire.champ.fin'))}</th>${pieces ? `<th scope="col">${esc(x.tx('formulaire.champ.piece'))}</th>` : ''}</tr></thead><tbody>${lignes}</tbody></table></div>` : '';
     suite = `<div class="fl-form-bas">${groupe(3, x.tx('formulaire.compteur'), compteur)}${groupe(4, x.tx('formulaire.documents'), docs, 'fl-large-groupe')}</div>`;
   }
   const action = (x.liens.enregistrer ?? '');
   const annuler = nouveau ? x.liens.base : (x.liens.fiche ? x.liens.fiche(v.id, '') : x.liens.base);
   const corps = `<div class="fl-ecran fl-formulaire">${general ? bandeauKo(x, esc(texteRefus(x, general))) : ''}${e.attributs ? bandeauKo(x, esc(texteErreur(x, e.attributs))) : ''}`
-    + `<form method="post" action="${esc(action)}" enctype="multipart/form-data" novalidate><div class="fl-form-haut">${groupe(1, x.tx('formulaire.identification'), ident)}${groupe(2, x.tx('formulaire.rattachement'), rattachement)}</div>`
+    + `<form method="post" action="${esc(action)}" ${pieces ? ' enctype="multipart/form-data"' : ''} novalidate><div class="fl-form-haut">${groupe(1, x.tx('formulaire.identification'), ident)}${groupe(2, x.tx('formulaire.rattachement'), rattachement)}</div>`
     + `${suite}${boutons(x, annuler, nouveau ? x.tx('formulaire.inscrire') : x.tx('action.enregistrer'))}</form></div>`;
   return {
     titre: nouveau ? x.tx('formulaire.nouveau') : x.tx('formulaire.modifier', { plaque: v.immatriculation }),
@@ -165,7 +166,7 @@ export function rendreFormulaireVehicule(vm, opts = {}) {
  * miseEnService, site, mode, kmDepart, echeances: [{ type, debut, fin?, piece? }] } — inscrire(donnees), puis
  * relever(kmDepart) et poserEcheance pour chaque échéance. Le code est celui saisi, sinon la plaque sans espaces.
  */
-export function lireFormulaireVehicule(corps = {}, { declarations = {} } = {}) {
+export function lireFormulaireVehicule(corps = {}, { declarations = {}, pieces = true } = {}) {
   const erreurs = {}, d = {};
   const imm = brut(corps.immatriculation);
   if (!imm) erreurs.immatriculation = 'requis'; else d.immatriculation = String(imm).replace(/\s+/g, ' ');
@@ -193,7 +194,7 @@ export function lireFormulaireVehicule(corps = {}, { declarations = {} } = {}) {
     const n = (k) => corps[`echeance.${t}.${k}`];
     if (brut(n('debut')) === '') continue;
     const e = { type: t };
-    for (const [k, forme] of [['debut', 'date'], ['fin', 'date'], ['piece', 'fichier']]) {
+    for (const [k, forme] of [['debut', 'date'], ['fin', 'date'], ...(pieces ? [['piece', 'fichier']] : [])]) {
       const [val, err] = lireChamp(forme, n(k), k === 'debut');
       if (err) erreurs[`echeance.${t}.${k}`] = err; else if (val !== undefined) e[k] = val;
     }
@@ -283,11 +284,11 @@ export const FORMULAIRES = gele({
 });
 
 /** Lit un formulaire de FORMULAIRES : { donnees, erreurs } ; un champ vide non requis est omis (le moteur prend son défaut). */
-export function lireFormulaire(nom, corps = {}, { declarations } = {}) {
+export function lireFormulaire(nom, corps = {}, { declarations, pieces = true } = {}) {
   const champs = FORMULAIRES[nom];
   if (!champs) throw new Error(`flotte-ui : formulaire inconnu : ${nom}`);
   const donnees = {}, erreurs = {};
-  for (const c of champs) {
+  for (const c of champs.filter((y) => pieces || y.forme !== 'fichier')) {
     const [val, err] = lireChamp(c.forme === 'long' || c.forme === 'choix' ? 'texte' : c.forme, corps[c.nom], c.requis);
     if (err) { erreurs[c.nom] = err; continue; }
     if (val === undefined) continue;
@@ -300,7 +301,7 @@ export function lireFormulaire(nom, corps = {}, { declarations } = {}) {
 
 /**
  * Rend un formulaire de FORMULAIRES pour la fiche `fiche` (construireFiche). Rend { titre, corps }.
- * vm : { fiche, declarations?, valeurs?, erreurs?, refus? } ; opts : ceux du rendu, plus { action } (POST).
+ * vm : { fiche, declarations?, valeurs?, erreurs?, refus? } ; opts : ceux du rendu, plus { action } (POST), pieces? (false : sans champ fichier ni multipart).
  */
 export function rendreFormulaire(nom, vm = {}, opts = {}) {
   const champs = FORMULAIRES[nom];
@@ -314,8 +315,9 @@ export function rendreFormulaire(nom, vm = {}, opts = {}) {
     plans: [['', x.tx('formulaire.champ.aucunPlan')], ...(f?.plans || []).map((p) => [p.id, p.libelle])],
     echeances: Object.keys(D.echeances || {}).map((t) => [t, x.lib('echeance', t)]),
   };
-  const fichier = champs.some((c) => c.forme === 'fichier');
-  const html = champs.map((c) => champ(x, {
+  const offerts = champs.filter((c) => opts.pieces !== false || c.forme !== 'fichier');
+  const fichier = offerts.some((c) => c.forme === 'fichier');
+  const html = offerts.map((c) => champ(x, {
     nom: c.nom, libelle: x.tx(`formulaire.champ.${c.libelle || c.nom}`), forme: c.forme, requis: Boolean(c.requis), valeur: val[c.nom], erreur: e[c.nom],
     options: c.choix ? options[c.choix] : [], suffixe: c.nom === 'km' ? 'km' : c.nom === 'litres' ? 'L' : (c.nom === 'montant' || c.nom === 'cout') && x.devise ? x.devise : undefined,
     aide: c.nom === 'km' && f && f.km !== null && f.km !== undefined ? x.tx('formulaire.dernierReleve', { km: x.nf(f.km) }) : undefined,

package/src/rendu.js

@@ -77,7 +77,7 @@ function liste(x, vm) {
     const cap = l.capacite.kg !== null ? capacite(x, l.capacite) : '';
     return `<tr${l.id === choisi ? ' class="choisi"' : ''}><td class="fl-plaque"><span class="fl-mini">${x.k.icone('camion', 18)}</span><a href="${esc(acts[0][0])}" dir="ltr">${esc(l.plaque)}</a></td>`
       + `<td class="fl-nowrap">${esc(x.lib('type', l.type))}${cap ? `<br><small class="fl-doux">${esc(cap)}</small>` : ''}</td>`
-      + `<td class="fl-nowrap">${esc(l.site ?? '—')}${l.region ? `<br><small class="fl-doux">(${esc(l.region)})</small>` : ''}</td>`
+      + `<td class="fl-nowrap">${esc(x.site(l.site))}${l.region ? `<br><small class="fl-doux">(${esc(l.region)})</small>` : ''}</td>`
       + `<td>${l.conducteur ? esc(l.conducteur.nom) : `<span class="fl-doux">${esc(x.tx('info.aucunChauffeur'))}</span>`}</td>`
       + `<td>${badgeStatut(x, l.statut)}${l.documentExpire ? `<br><span class="fl-marque">${esc(x.tx('documentExpire'))}</span>` : ''}</td>`
       + `<td>${dep(l.depart)}</td><td class="fl-nowrap">${l.km !== null ? `${x.nf(l.km)} km` : '—'}</td><td>${menu}</td></tr>`;
@@ -113,7 +113,7 @@ function parSiteHtml(x, vm) {
   const lignes = vm.parSite.map((s) => {
     const parts = STATUTS_PARC.filter((k) => s[k]).map((k) => `<i style="width:${((100 * s[k]) / max).toFixed(1)}%;background:${COULEURS.statut[k]}"></i>`).join('');
     const detail = STATUTS_PARC.map((k) => `${x.lib('statut', k)} ${x.nf(s[k])}`).join(', ');
-    return `<div class="fl-ligne-empile"><span title="${esc(s.libelle ?? '')}">${esc(s.site ?? '—')}${s.region ? ` <small class="fl-doux">(${esc(s.region)})</small>` : ''}</span><b>${x.nf(s.total)}</b>`
+    return `<div class="fl-ligne-empile"><span title="${esc(s.libelle ?? '')}">${esc(x.site(s.site))}${s.region ? ` <small class="fl-doux">(${esc(s.region)})</small>` : ''}</span><b>${x.nf(s.total)}</b>`
       + `<span class="fl-piste" role="img" aria-label="${esc(detail)}">${parts}</span></div>`;
   }).join('');
   return `<div class="fl-empile">${lignes}</div>${legende(x, STATUTS_PARC.map((k) => [x.lib('statut', k), COULEURS.statut[k]]))}`;
@@ -375,7 +375,7 @@ export function rendrePageVehicule(f, opts = {}) {
   const ch = f.conducteur;
   const tete = `<div class="fl-tete-page"><span class="fl-vignette">${x.k.icone('camion', 48)}</span>`
     + `<div class="fl-ident"><div><b class="fl-grande" dir="ltr">${esc(f.plaque)}</b> ${badgeStatut(x, v.statut)}</div><div>${esc(x.lib('type', v.type))} · ${esc(capacite(x, f.capacite))}</div>`
-    + `<div class="fl-doux">${x.k.icone('epingle', 16)} ${esc(f.site ?? '—')}${f.region ? ` · ${esc(f.region)}` : ''} · ${f.km !== null ? `${x.nf(f.km)} km` : '—'}</div></div>`
+    + `<div class="fl-doux">${x.k.icone('epingle', 16)} ${esc(x.site(f.site))}${f.region ? ` · ${esc(f.region)}` : ''} · ${f.km !== null ? `${x.nf(f.km)} km` : '—'}</div></div>`
     + `<div class="fl-qui">${x.k.icone('utilisateur', 20)} <div>${ch ? `${esc(ch.nom)}${ch.telephone ? `<br><span class="fl-doux" dir="ltr">${esc(ch.telephone)}</span>` : ''}` : `<span class="fl-doux">${esc(T('info.aucunChauffeur'))}</span>`}</div></div>`
     + `<div class="fl-actions">${modifier}${statut}</div></div>`;
   const msg = opts.message ? bandeauOk(x, esc(opts.message)) : '';
@@ -409,7 +409,7 @@ export function exporterCsv(vm, opts = {}) {
   const x = contexte(opts);
   const champ = (v) => { const s = String(v ?? ''); return /[;"\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s; };
   const ent = ['plaque', 'type', 'capacite', 'region', 'station', 'chauffeur', 'km', 'statut', 'depart'].map((c) => x.tx(`col.${c}`));
-  const lignes = vm.liste.lignes.map((l) => [l.plaque, x.lib('type', l.type), l.capacite.kg ?? '', l.region ?? '', l.site ?? '', l.conducteur?.nom ?? '', l.km ?? '',
+  const lignes = vm.liste.lignes.map((l) => [l.plaque, x.lib('type', l.type), l.capacite.kg ?? '', l.region ?? '', l.site ? x.site(l.site) : '', l.conducteur?.nom ?? '', l.km ?? '',
     x.lib('statut', l.statut) + (l.documentExpire ? ` (${x.tx('documentExpire')})` : ''), l.depart.ok ? x.tx('depart.ouiCourt') : l.depart.motifs.map((m) => x.phrase('motif', m)).join(' ; ')]);
   return `${[ent, ...lignes].map((l) => l.map(champ).join(';')).join('\n')}\n`;
 }
@@ -422,7 +422,7 @@ export function rendreMonVehicule(vm, opts = {}) {
   if (!f) return { titre: T('monVehicule.titre'), corps: `<div class="fl-ecran fl-mobile"><p class="fl-vide">${esc(T('monVehicule.aucun'))}</p></div>` };
   const ch = f.conducteur;
   const tete = `<div class="fl-carte"><div class="fl-entete-fiche"><span class="fl-vignette">${x.k.icone('camion', 40)}</span><div><b dir="ltr">${esc(f.plaque)}</b><div>${esc(x.lib('type', f.vehicule.type))}</div><div class="fl-doux">${esc(capacite(x, f.capacite))}</div></div></div>`
-    + `${bandeau(x, f.depart)}<ul class="fl-liste-infos"><li>${x.k.icone('epingle', 18)} ${esc(f.site ?? '—')}${f.region ? ` — ${esc(f.region)}` : ''}</li>`
+    + `${bandeau(x, f.depart)}<ul class="fl-liste-infos"><li>${x.k.icone('epingle', 18)} ${esc(x.site(f.site))}${f.region ? ` — ${esc(f.region)}` : ''}</li>`
     + `${ch ? `<li>${x.k.icone('utilisateur', 18)} ${esc(ch.nom)}${ch.telephone ? ` <span class="fl-doux" dir="ltr">${esc(ch.telephone)}</span>` : ''}</li>` : ''}`
     + `<li>${x.k.icone('horloge', 18)} ${f.km !== null ? `${x.nf(f.km)} km` : '—'}</li>${f.consommation !== null && f.consommation !== undefined ? `<li>${x.k.icone('barres', 18)} ${x.nf(f.consommation)} L/100 km</li>` : ''}</ul></div>`;
   const boutons = `<div class="fl-boutons-pleins">${x.liens.plein ? `<a class="${bouton(x, 'fl-bloc')}" href="${esc(x.liens.plein)}">${x.k.icone('plus', 20)}${esc(T('action.plein'))}</a>` : ''}`
@@ -453,7 +453,7 @@ export function rendreChoixVehicule(aptitudes, opts = {}) {
     return `<label class="fl-option${a.depart.ok ? '' : ' ko'}"><input type="radio" name="${esc(nom)}" value="${esc(a.id)}"${a.id === opts.choisi ? ' checked' : ''}>`
       + `<span class="fl-depart ${a.depart.ok ? 'ok' : 'ko'}">${x.k.icone(a.depart.ok ? 'coche' : 'croix', 18)}</span>`
       + `<span><b dir="ltr">${esc(a.plaque)}</b><br><small class="fl-doux">${esc(x.lib('type', a.type))} (${esc(capacite(x, a.capacite))})</small></span>`
-      + `<span>${a.km !== null ? `${x.nf(a.km)} km` : '—'}</span><span>${esc(a.site ?? '—')}</span><span>${etat}</span></label>`;
+      + `<span>${a.km !== null ? `${x.nf(a.km)} km` : '—'}</span><span>${esc(x.site(a.site))}</span><span>${etat}</span></label>`;
   }).join('')}</div>`;
 }