FroSteel/Planification
Public Access
2
2
Fork 1
Code Issues Pull Requests Releases 48 Wiki Activity

v2026.5.33 — Vue horizontale : interactions différenciées (hover/clic) [code interpolé]

Browse Source
This commit is contained in:
Quentin Rouiller
2026-04-24 12:12:32 +02:00
parent 3a28e1bd0a
commit 193b3252d4
3 changed files with 745 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
viewer.js
+269 -38
View File
@@ -240,6 +240,7 @@ async function init() {
initModalScrollLock(); // v4.2.9 : bloquer le scroll arrière quand modal
initAppFooter(); // v4.2.9 : pied de page discret bas-droite
initAppClock(); // v5.0.0 : horloge HH:MM au milieu topbar
_applyViewMode(); // v2026.5.32 : appliquer la vue sauvegardée
initAdminMenu(); // v5.0.0 : menu admin caché (5 clics sur titre)
initSessionTimer(); // v5.0.9 : compteur de session EV (tick 1s)
initDateCustomPicker(); // v2026.5.17 : faux input date avec jour
@@ -459,6 +460,21 @@ function toggleUserNamePopup() {
popup.appendChild(sessEl);
// v2026.5.25 : bouton Paramètres (remplace les 5 clics sur le titre)
// v2026.5.32 : bouton "Vue" pour basculer Vue classique ↔ Vue horizontale
const viewBtn = document.createElement("button");
viewBtn.type = "button";
viewBtn.className = "user-name-popup-settings";
const currentView = _getCurrentView();
viewBtn.innerHTML = '<span class="settings-ico">⊞</span> Vue : '
+ (currentView === "horizontal" ? "Horizontale" : "Classique");
viewBtn.title = "Changer la disposition du planning";
viewBtn.addEventListener("click", (e) => {
e.stopPropagation();
hideUserNamePopup();
_toggleView();
});
popup.appendChild(viewBtn);
const settingsBtn = document.createElement("button");
settingsBtn.type = "button";
settingsBtn.className = "user-name-popup-settings";
@@ -946,20 +962,49 @@ function initAppFooter() {
document.body.appendChild(el);
}
// v2026.5.32 : bascule entre Vue classique (cards) et Vue horizontale (rows)
// Persisté dans localStorage (clé : "view_mode"). Défaut : "classic".
const VIEW_MODE_KEY = "view_mode";
function _getCurrentView() {
try {
const v = localStorage.getItem(VIEW_MODE_KEY);
return v === "horizontal" ? "horizontal" : "classic";
} catch (e) {
return "classic";
}
}
function _setCurrentView(mode) {
try {
localStorage.setItem(VIEW_MODE_KEY, mode === "horizontal" ? "horizontal" : "classic");
} catch (e) {}
_applyViewMode();
}
function _toggleView() {
const current = _getCurrentView();
const next = current === "horizontal" ? "classic" : "horizontal";
_setCurrentView(next);
}
function _applyViewMode() {
const mode = _getCurrentView();
document.documentElement.classList.remove("view-classic", "view-horizontal");
document.documentElement.classList.add("view-" + mode);
}
// v5.0.0 : horloge HH:MM au milieu de la topbar. Mise à jour toutes les 30s
// (les secondes ne sont pas affichées donc pas besoin d'un tick plus rapide).
// v2026.5.27 : date courte "Jeudi 23.04.26" sur la même ligne que l'heure,
// séparées par un gros point "•", même taille que l'heure.
function initAppClock() {
const el = document.getElementById("app-clock");
if (!el) return;
const dateEl = document.getElementById("app-clock-date");
const timeEl = document.getElementById("app-clock-time");
// v2026.5.16 : format "Mardi 21 avril 2026"
const JOURS = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
const MOIS = [
"janvier", "février", "mars", "avril", "mai", "juin",
"juillet", "août", "septembre", "octobre", "novembre", "décembre"
];
let lastDateStr = "";
const tick = () => {
@@ -970,13 +1015,13 @@ function initAppClock() {
if (timeEl) timeEl.textContent = timeStr;
else el.textContent = timeStr; // fallback si ancien markup
// Date complète : actualisée seulement si elle a changé (évite reflow inutile)
// Date courte : "Jeudi 23.04.26"
if (dateEl) {
const jour = JOURS[d.getDay()];
const num = d.getDate();
const mois = MOIS[d.getMonth()];
const annee = d.getFullYear();
const dateStr = `${jour} ${num} ${mois} ${annee}`;
const dd = String(d.getDate()).padStart(2, "0");
const mm = String(d.getMonth() + 1).padStart(2, "0");
const yy = String(d.getFullYear()).slice(-2);
const dateStr = `${jour} ${dd}.${mm}.${yy}`;
if (dateStr !== lastDateStr) {
dateEl.textContent = dateStr;
lastDateStr = dateStr;
@@ -2907,6 +2952,16 @@ function actionNodeToIntervention(node) {
reservationCreator: reservationCreator, // "Nom, Prénom" du coordinateur
cssClass: cssClass,
isPompier: /pompier/i.test(label) || /pompier/i.test(actionType),
// v2026.5.27 : catégorie d'absence pour classification visuelle
// "maladie" | "conge" | "pompier" | null
absenceCategory: (function() {
if (effectiveType !== "AL-Absence") return null;
const lblTest = reservationMatch ? reservationMatch[1].trim() : label;
if (/pompier/i.test(lblTest) || /pompier/i.test(actionType)) return "pompier";
if (/maladie/i.test(lblTest)) return "maladie";
if (/cong[ée]s?/i.test(lblTest)) return "conge";
return null;
})(),
ref: ref,
startDate: startDate,
endDate: endDate,
@@ -4585,9 +4640,30 @@ function buildCard(tech, isoDate) {
const isPompier = tech.interventions.some(iv => iv.isPompier);
const isAbsent = isTechAbsent(tech, isoDate);
// v2026.5.30 : détecter aussi les absences récurrentes hardcodées (Pillonel vendredi)
// pour leur appliquer le code couleur cyan (comme Congé) au lieu du rouge Pompier.
const isRecurring = isPillonelAbsentFriday(tech, isoDate);
if (isPompier) card.classList.add("is-pompier");
if (isAbsent) card.classList.add("is-absent");
// v2026.5.27 : déterminer la catégorie d'absence principale (maladie/conge/pompier)
// pour appliquer le bon code couleur sur la carte entière.
// v2026.5.30 : les absences récurrentes hardcodées prennent la catégorie
// "recurring" (même cyan que Congé, texte distinct).
let absenceCategory = null; // "maladie" | "conge" | "pompier" | "recurring" | null
if (isRecurring) {
absenceCategory = "recurring";
} else if (isPompier) {
absenceCategory = "pompier";
} else if (isAbsent) {
const catBlock = tech.interventions.find(iv => iv.type === "AL-Absence" && iv.absenceCategory);
if (catBlock) absenceCategory = catBlock.absenceCategory;
}
if (absenceCategory) {
card.classList.add("absence-cat-" + absenceCategory);
}
const realInterventions = tech.interventions.filter(iv =>
iv.type !== "AL-Absence" && !iv.isPompier
);
@@ -4603,23 +4679,57 @@ function buildCard(tech, isoDate) {
// --- Header ---
const header = document.createElement("div");
header.className = "card-header";
// v2026.5.27 : pastille colorée supprimée (v2026.5.28) — la barre gauche de la
// carte + le badge à droite suffisent pour indiquer la catégorie d'absence.
const nameEl = document.createElement("div");
nameEl.className = "card-tech-name";
nameEl.textContent = tech.name;
header.appendChild(nameEl);
if (isPompier || isAbsent) {
if (isPompier || isAbsent || isRecurring) {
const badge = document.createElement("div");
badge.className = "card-tech-badge";
if (isPompier) {
if (isRecurring) {
// v2026.5.30 : absence récurrente (Pillonel vendredi) → badge "Absent" cyan
badge.classList.add("badge-recurring");
badge.textContent = "Absent";
} else if (isPompier) {
badge.classList.add("badge-pompier");
badge.textContent = "Pompier";
} else if (absenceCategory === "maladie") {
badge.classList.add("badge-maladie");
badge.textContent = "Maladie/Accident";
} else if (absenceCategory === "conge") {
// Déterminer singulier/pluriel selon la durée
const ab = absenceBlocks.find(a => a.absenceCategory === "conge") || absenceBlocks[0];
const multiDay = ab && ab.startDate && ab.endDate && ab.startDate !== ab.endDate;
badge.classList.add("badge-conge");
badge.textContent = multiDay ? "Congés" : "Congé";
} else {
badge.classList.add("badge-absent");
badge.textContent = "Absent";
}
header.appendChild(badge);
}
// v2026.5.32 : stats rapides pour la vue horizontale (cachées en classique)
const rowStats = document.createElement("div");
rowStats.className = "tech-row-stats";
const totalInterv = realInterventions.length;
const pill1 = document.createElement("span");
pill1.className = "stat-pill";
pill1.textContent = totalInterv + " interv.";
rowStats.appendChild(pill1);
if (morning > 0 || afternoon > 0) {
const pill2 = document.createElement("span");
pill2.className = "stat-pill";
pill2.textContent = morning + "m · " + afternoon + "a";
rowStats.appendChild(pill2);
}
header.appendChild(rowStats);
card.appendChild(header);
// --- Body ---
@@ -4640,30 +4750,60 @@ function buildCard(tech, isoDate) {
} else if (isAbsent && absenceBlocks.length) {
const note = document.createElement("div");
note.className = "card-status-note absent";
const ab = absenceBlocks[0];
if (ab.startDate && ab.endDate && ab.startDate !== ab.endDate) {
note.textContent = `Absent du ${ab.startDate.substring(0, 5)} au ${ab.endDate.substring(0, 5)}`;
} else {
note.textContent = "Absent toute la journée";
if (absenceCategory) {
note.classList.add("absent-" + absenceCategory);
}
const ab = absenceBlocks[0];
// v2026.5.27 : libellé enrichi "Absent du XX au YY — Maladie" ou "Absent — Congé"
const multiDay = ab.startDate && ab.endDate && ab.startDate !== ab.endDate;
const catLabel = absenceCategory === "maladie" ? "Maladie/Accident"
: absenceCategory === "conge" ? (multiDay ? "Congés" : "Congé")
: null;
let txt;
if (multiDay) {
txt = `Absent du ${ab.startDate.substring(0, 5)} au ${ab.endDate.substring(0, 5)}`;
} else {
txt = "Absent toute la journée";
}
if (catLabel) txt += ` — ${catLabel}`;
note.textContent = txt;
body.appendChild(note);
// v5.0.4 : tooltip au hover sur toute la carte absent (pas juste un
// bouton visible). Contient : détail période + bouton supprimer si
// c'est une absence supprimable (actionId réel, pas pompier récurrent).
// v2026.5.33 : en vue horizontale, attacher le hover SEULEMENT au badge
// (Congé / Maladie/Accident / Absent) pour éviter que la popup s'affiche
// dès qu'on approche de la ligne du tech. En vue classique, on garde la
// carte entière comme zone de hover (comportement d'origine).
if (ab.actionId && !ab.isPompier && !ab._recurring) {
// On attache le tooltip sur la CARD ENTIÈRE (card) — comme ça
// survoler n'importe où sur la zone grisée "absent" le déclenche.
const ivCopy = {
...ab,
type: "AL-Absence" // force pour buildTooltipHTML
type: "AL-Absence"
};
const _isHorizontalView = () => document.documentElement.classList.contains("view-horizontal");
// Hover sur la carte entière : actif SEULEMENT en vue classique
card.addEventListener("mouseenter", (e) => {
if (_isHorizontalView()) return; // bloqué en horizontal
showTooltip(e, ivCopy, card);
});
card.addEventListener("mouseleave", () => {
if (_isHorizontalView()) return;
hideTooltip();
});
// Hover sur le badge (Congé / Maladie/Accident / Absent) : actif
// SEULEMENT en vue horizontale.
const badgeEl = card.querySelector(".card-tech-badge");
if (badgeEl) {
badgeEl.addEventListener("mouseenter", (e) => {
if (!_isHorizontalView()) return; // bloqué en classique
showTooltip(e, ivCopy, badgeEl);
});
badgeEl.addEventListener("mouseleave", () => {
if (!_isHorizontalView()) return;
hideTooltip();
});
}
}
}
@@ -4909,19 +5049,42 @@ function getStatusClass(iv) {
}
function bindTimelinePopover(el) {
el.addEventListener("mouseenter", (e) => showTimelinePopover(e, el));
// v2026.5.33 : en vue horizontale, les interactions sont différentes :
// - hover : ouvre directement la GRANDE popup (pas la petite)
// - clic : ouvre la fiche EasyVista dans un nouvel onglet
// En vue classique, le comportement existant est conservé :
// - hover : petite popup qui suit la souris
// - clic simple : grande popup persistante
// - double-clic : fiche EasyVista nouvel onglet
// - Ctrl+clic : fiche EasyVista en arrière-plan
const _isHorizontalView = () => document.documentElement.classList.contains("view-horizontal");
el.addEventListener("mouseenter", (e) => {
if (_isHorizontalView()) {
// Grande popup directement en vue horizontale
if (el.dataset.ivIdx !== undefined) {
openPersistentTimelinePopup(el);
}
} else {
showTimelinePopover(e, el);
}
});
// v4.2.3 : la petite popup timeline SUIT la souris (différent de la grande
// popup des lignes d'intervention qui est ancrée). On n'utilise pas
// moveTooltip() (no-op depuis v4.1.12) mais une fonction dédiée.
el.addEventListener("mousemove", (e) => moveTimelineTooltip(e));
el.addEventListener("mouseleave", hideTooltip);
el.addEventListener("mousemove", (e) => {
if (!_isHorizontalView()) {
moveTimelineTooltip(e);
}
});
el.addEventListener("mouseleave", () => {
if (!_isHorizontalView()) {
hideTooltip();
}
// En vue horizontale, la grande popup est persistante donc on ne ferme
// pas au mouseleave (l'user peut interagir avec).
});
// v4.2.3 : clic / double-clic / Ctrl+clic sur un segment timeline
// - clic simple : ferme la petite popup et ouvre la GRANDE popup
// (ancrée juste en dessous de la timeline, persistante pour permettre
// de sélectionner du texte / copier)
// - double-clic : ouvre la fiche EasyVista dans un nouvel onglet actif
// - Ctrl+clic (Cmd+clic sur Mac) : ouvre dans un onglet en arrière-plan
const kind = el.dataset.kind;
const ivIdxStr = el.dataset.ivIdx;
// Seulement sur les segments avec une interventoin (pas les "hole" libres
@@ -4930,6 +5093,17 @@ function bindTimelinePopover(el) {
let singleClickTimer = null;
el.addEventListener("click", (e) => {
// v2026.5.33 : en vue horizontale, tout clic simple = ouvrir la fiche EV
if (_isHorizontalView()) {
e.preventDefault();
e.stopPropagation();
// Ctrl/Cmd/middle → arrière-plan, sinon nouvel onglet actif
const background = !!(e.ctrlKey || e.metaKey || e.button === 1);
openInterventionFromTimeline(el, { background });
return;
}
// Vue classique (inchangé) :
// Ctrl / Cmd / molette → ouvrir fiche en arrière-plan
if (e.ctrlKey || e.metaKey || e.button === 1) {
e.preventDefault();
@@ -4947,8 +5121,10 @@ function bindTimelinePopover(el) {
}, 250);
});
el.addEventListener("dblclick", (e) => {
// Annuler le clic simple en attente
// En vue horizontale le clic simple fait déjà l'ouverture, le dblclick
// devient inutile — on le laisse par sécurité (comportement idem).
if (singleClickTimer) { clearTimeout(singleClickTimer); singleClickTimer = null; }
if (_isHorizontalView()) return;
e.preventDefault();
e.stopPropagation();
openInterventionFromTimeline(el, { background: false });
@@ -6229,6 +6405,13 @@ function showTooltip(e, iv, rowEl) {
// l'ouverture d'un nouveau tooltip par-dessus ce qu'on est en train de bouger.
if (state._popupDragging) return;
// v2026.5.27 : fermer tout popup "soft-unpinned" encore visible (il traîne
// parce que la souris était dessus). Dès qu'on survole autre chose, on veut
// que seul le popup actuel ou les popups épinglés restent.
document.querySelectorAll(".soft-unpinned").forEach(el => {
try { el.remove(); } catch (err) {}
});
// v4.1.15 : si la bulle est épinglée sur une autre iv, on NE REMPLACE PAS
// son contenu (l'user veut garder la fiche épinglée même en survolant
// d'autres cartes).
@@ -7334,15 +7517,26 @@ function _clampPopupInSafeArea(popup) {
const vTop = rect.top;
// Calcul des coords viewport cibles après clamp
// v2026.5.28 : si le popup est plus large que la zone dispo (fenêtre rétrécie
// depuis le côté droit), on le garde à sa position actuelle —
// l'user redimensionnera ou bougera manuellement. On préfère
// "déborder" à droite plutôt que rétrécir le popup.
let newVLeft = vLeft;
let newVTop = vTop;
if (newVLeft < safe.left) newVLeft = safe.left;
if (newVLeft + w > safe.right) newVLeft = safe.right - w;
if (newVLeft < safe.left) newVLeft = safe.left; // si popup plus large que viewport
if (newVTop < safe.top) newVTop = safe.top;
if (newVTop + h > safe.bottom) newVTop = safe.bottom - h;
if (newVTop < safe.top) newVTop = safe.top;
const safeWidth = safe.right - safe.left;
const safeHeight = safe.bottom - safe.top;
if (w <= safeWidth) {
// Popup rentre : on clamp normalement
if (newVLeft < safe.left) newVLeft = safe.left;
if (newVLeft + w > safe.right) newVLeft = safe.right - w;
if (newVLeft < safe.left) newVLeft = safe.left;
}
// Sinon : popup plus large que la zone → on laisse où il est, user libre
if (h <= safeHeight) {
if (newVTop < safe.top) newVTop = safe.top;
if (newVTop + h > safe.bottom) newVTop = safe.bottom - h;
if (newVTop < safe.top) newVTop = safe.top;
}
if (newVLeft === vLeft && newVTop === vTop) return; // rien à faire
@@ -7956,6 +8150,31 @@ function bindTooltipInteractions() {
const el = tooltipEl();
if (!el) return;
// v2026.5.27 : quand la souris entre dans un popup épinglé, fermer tout
// popup non-épinglé (tooltip live ou soft-unpinned) pour garder l'écran clair.
document.addEventListener("mouseover", (e) => {
const target = e.target;
if (!target || !target.closest) return;
const pinned = target.closest(".pinned-popup");
if (!pinned) return;
// On survole un popup épinglé → fermer tooltip live s'il n'est pas pinned
if (!bulleState.pinned) {
const tip = tooltipEl();
if (tip && tip.classList.contains("visible")) {
tip.classList.remove("visible");
tip.classList.add("hidden");
if (tip.dataset) delete tip.dataset.mode;
state.currentTooltipIv = null;
currentTooltipPos = null;
tooltipPositionMode = null;
}
}
// Fermer les soft-unpinned qui traînent
document.querySelectorAll(".soft-unpinned").forEach(el => {
try { el.remove(); } catch (err) {}
});
});
// v4.1.17 : ré-applique la position au scroll de la page (safety net
// contre un ancêtre qui casserait position:fixed silencieusement).
window.addEventListener("scroll", reapplyTooltipPosition, { passive: true });
@@ -8302,10 +8521,22 @@ function escapeHtml(s) {
}
function highlightIntervention(cardEl, ivIdx, on) {
const row = cardEl.querySelector(`.intervention[data-iv-idx="${ivIdx}"]`);
// v2026.5.29 : chercher .intervention-v2 (nouveau nom) et fallback .intervention
const row = cardEl.querySelector(`.intervention-v2[data-iv-idx="${ivIdx}"]`)
|| cardEl.querySelector(`.intervention[data-iv-idx="${ivIdx}"]`);
const slot = cardEl.querySelector(`.timeline-slot[data-iv-idx="${ivIdx}"]`);
if (row) row.classList.toggle("highlight", on);
if (slot) slot.classList.toggle("highlight", on);
// v2026.5.29 : quand on active le highlight (typiquement depuis un slot
// timeline), faire scroller la row dans la vue pour que l'user voie la
// carte correspondante sans avoir à chercher. On évite de scroller le
// body, on scroll juste la row à l'intérieur de la carte si elle déborde.
if (on && row && typeof row.scrollIntoView === "function") {
try {
row.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "smooth" });
} catch (e) {}
}
}
// ============================================================================