Compare commits

...

8 Commits

Author SHA1 Message Date
FroSteel ecb490c55a Version 2026.5.31 — Sarcelle absence récurrente (REJETÉ par utilisateur)
[code interpolé — version revertée par la suite]
2026-04-24 09:00:00 +02:00
FroSteel 7e497de40e Version 2026.5.30 — Absence récurrente cyan + mode compact 24"
[code interpolé]
2026-04-23 17:00:00 +02:00
FroSteel bbdcb8c7de Version 2026.5.29 — Contraste++ + footer QRO/version
[code interpolé]
2026-04-23 15:00:00 +02:00
FroSteel 5a9e465116 Version 2026.5.28 — Ajustements visuels absences
- Retrait pastille .tech-name-dot, 'Maladie/Accident', popups 520px fixe
[code interpolé]
2026-04-23 13:00:00 +02:00
FroSteel 0511c18b07 Version 2026.5.27 — Classification absences (Maladie/Congé/Pompier)
- Topbar une ligne, fermeture auto popups, contrastes améliorés
- ABSENCE_LABELS, couleurs Maladie/Congé/Pompier, badge + barre gauche
[code interpolé]
2026-04-23 11:00:00 +02:00
FroSteel df623da8f4 Version 2026.5.26 — Badge user inconnu cliquable + retry 60s (max 10 essais)
[code interpolé]
2026-04-23 09:00:00 +02:00
FroSteel 1441b0a7a1 Version 2026.5.25 — Bouton ⚙ Paramètres dans popup user-badge
[code interpolé]
2026-04-22 17:00:00 +02:00
FroSteel 5eae40d38b Version 2026.5.24 — Corrections diverses
[code interpolé]
2026-04-22 15:00:00 +02:00
4 changed files with 548 additions and 168 deletions
+1 -1
View File
@@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "Planification",
"version": "2026.5.23",
"version": "2026.5.31",
"description": "Vue claire et rapide du planning des techniciens EasyVista. Regroupe interventions et réservations par tech, affiche horaires, contact, lieu, catégorie et statut en un coup d'œil.",
"browser_specific_settings": {
"gecko": {
+71 -32
View File
@@ -842,6 +842,17 @@ html, body {
background: var(--bg-hover);
}
/* v2026.5.29 : highlight visible sur les rows .intervention-v2 quand on
survole le segment timeline correspondant (ou que l'user survole la row) */
.intervention-v2.highlight {
background: var(--accent-soft);
outline: 2px solid var(--accent);
outline-offset: -2px;
box-shadow: 0 0 0 3px var(--accent-soft);
z-index: 2;
position: relative;
}
/* ==========================================================================
Interventions — layout v2 (heures verticales)
========================================================================== */
@@ -1832,22 +1843,28 @@ body.modal-open {
overflow: hidden;
}
/* v4.2.9 : pied de page discret en bas à droite — affiche auteur + date + version */
/* v4.2.9 : pied de page discret en bas à droite — affiche auteur + date + version
v2026.5.29 : agrandi + plus contrasté */
.app-footer {
position: fixed;
right: 8px;
bottom: 4px;
font-size: 10px;
color: var(--text-faint, #8892a0);
opacity: 0.55;
pointer-events: none; /* ne capture pas les clics */
right: 10px;
bottom: 6px;
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
opacity: 0.85;
pointer-events: none;
user-select: none;
font-variant-numeric: tabular-nums;
letter-spacing: 0.2px;
z-index: 1; /* sous les modals (qui sont à 10000) */
letter-spacing: 0.3px;
z-index: 1;
padding: 3px 8px;
background: var(--bg-muted);
border: 1px solid var(--border);
border-radius: 6px;
}
.app-footer:hover {
opacity: 0.85;
opacity: 1;
}
/* ─────────────────────────────────────────────────────────────────────────
@@ -1992,18 +2009,18 @@ body.modal-open {
/* ─────────────────────────────────────────────────────────────────────────
v5.0.0 : horloge au milieu de la topbar (HH:MM, pas de secondes)
───────────────────────────────────────────────────────────────────────── */
/* v2026.5.16 : app-clock contient maintenant 2 lignes empilées :
- app-clock-date : "Mardi 21 avril 2026" (petit)
- app-clock-time : "12:34" (grand) */
/* v2026.5.27 : app-clock sur UNE seule ligne : "Jeudi 23.04.26 • 21:55"
Même taille pour la date et l'heure, gros point au milieu. */
.app-clock {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 12px;
line-height: 1.1;
color: var(--text);
pointer-events: none;
@@ -2011,11 +2028,19 @@ body.modal-open {
white-space: nowrap;
}
.app-clock-date {
font-size: 12px;
font-weight: 500;
font-size: 22px;
font-weight: 600;
color: var(--text);
letter-spacing: 0.5px;
font-variant-numeric: tabular-nums;
}
.app-clock-date::after {
content: "•";
margin-left: 12px;
color: var(--text-muted);
letter-spacing: 0.3px;
text-transform: capitalize;
font-size: 26px;
line-height: 0.8;
vertical-align: middle;
}
.app-clock-time {
font-size: 22px;
@@ -2487,11 +2512,12 @@ header.topbar::before {
/* Breakpoint medium : entre 1000 et 1300px, on compacte un peu */
@media (max-width: 1300px) {
.app-clock-date { font-size: 11px; }
.app-clock-time { font-size: 20px; }
.app-clock-date { font-size: 18px; }
.app-clock-time { font-size: 18px; }
.app-clock-date::after { font-size: 20px; }
.topbar-right .btn-action .btn-action-label,
.topbar-right .btn-refresh .btn-refresh-label {
font-size: 12px;
font-size: 13px;
}
}
@@ -2499,10 +2525,10 @@ header.topbar::before {
et on réduit encore l'horloge. Les icônes restent, titres restent. */
@media (max-width: 1000px) {
.topbar { padding: 8px 14px; gap: 8px; }
.topbar h1 { font-size: 16px; }
.app-clock { font-size: smaller; }
.app-clock-date { font-size: 10px; }
.app-clock-time { font-size: 18px; }
.topbar h1 { font-size: 18px; }
.app-clock-date { font-size: 16px; }
.app-clock-time { font-size: 16px; }
.app-clock-date::after { font-size: 18px; }
.btn-action .btn-action-label,
.btn-refresh .btn-refresh-label {
display: none;
@@ -2593,21 +2619,34 @@ header.topbar::before {
v2026.5.19 : refonte — élément .pinned-popup-minref créé à la volée
v2026.5.21 : agrandi pour que la ref tienne sans déborder
v2026.5.22 : encore agrandi + plus d'espace entre dragbar et topbar
v2026.5.23 : refonte complète en style "onglet" single-line, compact
========================================================================== */
.pinned-popup.pinned-popup-minimized {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
min-width: 300px !important;
max-width: 360px !important;
width: 300px !important;
height: auto !important;
min-height: 80px !important;
padding: 44px 16px 16px 16px !important;
max-width: 400px !important;
width: auto !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 6px 0 4px !important;
overflow: visible;
background: var(--bg-elevated) !important;
border: 1px solid var(--border) !important;
border-radius: 6px !important;
}
/* Séparer visuellement la dragbar (collée en haut) des boutons topbar */
/* Dans le mode minimisé, la topbar n'est plus en absolute : elle se pose en fin
de ligne à droite, après la ref */
.pinned-popup.pinned-popup-minimized .pinned-popup-topbar {
top: 14px !important; /* sous la dragbar (qui fait ~6-8px) */
position: static !important;
top: auto !important;
right: auto !important;
margin-left: auto !important;
order: 3;
flex-shrink: 0;
padding: 0 2px;
}
/* Masquer tous les enfants directs du popup minimisé */
.pinned-popup.pinned-popup-minimized > *:not(.pinned-popup-topbar):not(.pinned-popup-dragbar):not(.pinned-popup-minref) {
+7 -2
View File
@@ -9,8 +9,13 @@
<header class="topbar">
<div class="topbar-left">
<!-- v4.2.3 : pastille avec initiales de l'utilisateur connecté, avant
le titre. Clic → popup fixe avec nom complet juste en dessous. -->
<button id="user-badge" class="user-badge hidden"
le titre. Clic → popup fixe avec nom complet juste en dessous.
v2026.5.34 : TOUJOURS visible d'office avec "?" (état user inconnu)
pour garantir l'accès au menu (⊞ Vue / ⚙ Paramètres) même si
la détection user échoue ou est en retard.
Le script JS mettra à jour le textContent + classes quand le
fetch aboutit. En cas d'échec persistant, reste sur "?". -->
<button id="user-badge" class="user-badge user-badge-unknown"
type="button" aria-label="Utilisateur connecté"
title="Utilisateur connecté"></button>
<h1 id="app-title">Planification</h1>
+464 -128
View File
@@ -502,7 +502,13 @@ function toggleUserNamePopup() {
popup.innerHTML = "";
const nameEl = document.createElement("div");
nameEl.className = "user-name-popup-name";
if (state.currentUser && state.currentUser.name) {
nameEl.textContent = state.currentUser.name;
} else {
nameEl.textContent = "Utilisateur inconnu";
nameEl.style.fontStyle = "italic";
nameEl.style.color = "var(--text-muted)";
}
popup.appendChild(nameEl);
const sessEl = document.createElement("div");
@@ -511,6 +517,36 @@ function toggleUserNamePopup() {
_renderUserPopupSessionLine(sessEl);
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";
settingsBtn.innerHTML = '<span class="settings-ico">⚙</span> Paramètres';
settingsBtn.title = "Ouvrir les paramètres d'administration";
settingsBtn.addEventListener("click", (e) => {
e.stopPropagation();
hideUserNamePopup();
if (typeof showAdminPanel === "function") {
showAdminPanel();
}
});
popup.appendChild(settingsBtn);
popup.classList.remove("hidden");
badge.classList.add("open");
// Positionne juste en dessous de la pastille
@@ -984,20 +1020,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 = () => {
@@ -1008,13 +1073,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;
@@ -1097,25 +1162,14 @@ function updateNowLine() {
});
}
// v5.0.0 : menu admin caché. 5 clics consécutifs sur le titre "Planification"
// (avec max 2 secondes entre chaque clic) ouvrent le panneau admin.
// v5.0.0 : menu admin caché via 5 clics sur le titre "Planification".
// v2026.5.25 : SUPPRIMÉ — l'accès au panneau admin se fait désormais via le
// bouton "⚙ Paramètres" du popup user-badge (clic sur les initiales).
function initAdminMenu() {
const title = document.getElementById("app-title");
if (!title) return;
let clicks = 0;
let resetTimer = null;
title.addEventListener("click", () => {
clicks++;
if (resetTimer) clearTimeout(resetTimer);
resetTimer = setTimeout(() => { clicks = 0; }, 2000);
if (clicks >= 5) {
clicks = 0;
clearTimeout(resetTimer);
showAdminPanel();
}
});
// Cursor pointer pour indiquer (discrètement) qu'il est cliquable
title.style.cursor = "default";
// Plus de handler de clic : les 5 clics n'ouvrent plus rien.
}
// ============================================================================
@@ -1158,6 +1212,10 @@ function initSessionTimer() {
hideReconnectFailedBanner();
markSessionActivity();
showToast("Reconnecté", "Session EasyVista renouvelée");
// v2026.5.34 : relancer fetchUser tout de suite (au lieu d'attendre
// le retry de 60s) — la session vient d'être renouvelée, c'est le
// meilleur moment pour récupérer le user.
_maybeRetryFetchUser("session_reconnected");
// Recharger le planning à la date courante sans perdre la position
await loadForDate(state.currentDate);
}
@@ -1805,17 +1863,9 @@ function renderAdminSectionTeam(container, cfg, saveFn) {
tableWrap.appendChild(table);
// Bouton Ajouter manuellement
const addBtn = document.createElement("button");
addBtn.type = "button";
addBtn.className = "btn btn-secondary";
addBtn.textContent = "+ Ajouter manuellement";
addBtn.style.marginTop = "10px";
addBtn.addEventListener("click", () => {
rows.push({ id: "", name: "", included: true, days: [] });
render();
});
tableWrap.appendChild(addBtn);
// v2026.5.26 : bouton "+ Ajouter manuellement" retiré. La liste complète
// des techniciens du groupe est chargée automatiquement depuis EasyVista
// à l'ouverture du panel admin (voir auto-détection plus bas).
// Bouton Enregistrer
const saveBtn = document.createElement("button");
@@ -1841,6 +1891,36 @@ function renderAdminSectionTeam(container, cfg, saveFn) {
}
render();
// v2026.5.26 : auto-détection EasyVista à l'ouverture du panel admin.
// On lance en arrière-plan (non-bloquant), et on merge avec cfg.team actuel
// quand le résultat arrive. Les techs actuellement en cfg.team restent
// cochés par défaut ; les nouveaux détectés du groupe apparaissent non-cochés.
(async () => {
try {
const resp = await sendMessage({ type: "detectTeam" });
if (resp && resp.ok && resp.members && resp.members.length) {
for (const m of resp.members) {
const existing = rows.find(r => r.id === m.id);
if (existing) {
if (m.name && !m.name.startsWith("?") && existing.name.startsWith("?")) {
existing.name = m.name;
}
} else {
rows.push({
id: m.id,
name: m.name || "? (" + m.id + ")",
included: !!m.alreadyInTeam,
days: []
});
}
}
render();
}
} catch (err) {
console.warn("[admin auto-detect]", err);
}
})();
}
// v5.0.0 : sections suivantes (placeholders, à enrichir v5.0.1+)
@@ -2672,6 +2752,11 @@ async function loadForDate(isoDate, opts = {}) {
console.log(`[load] merged : ${merged.techs.length} techs, ${totalIv} iv totales, ${totalInterIv} interventions réelles, ${notFetched} sans fiche`);
console.log(`[load] needFetch = ${needFetch} | doStatusRefresh = ${!!opts.doStatusRefresh} | forceRefetch = ${!!opts.forceRefetch} | aborted = ${isRefreshAborted(myToken)}`);
// v2026.5.34 : si le user n'est pas encore connu (badge "?"), on tente
// un fetch immédiatement puisque le planning a réussi = session valide.
// Évite d'attendre le retry de 60s quand on vient juste de se reconnecter.
_maybeRetryFetchUser("after_load_success");
// v4.3.2 : avant de lancer le fetch des fiches (lourd, ~460 KB chacune),
// on fait d'abord un batch xhr2 (léger, ~2-5 KB chacun) pour récupérer
// les vraies infos contact/lieu de toutes les interventions en parallèle.
@@ -2934,6 +3019,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,
@@ -4612,9 +4707,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
);
@@ -4630,23 +4746,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 ---
@@ -4667,30 +4817,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();
});
}
}
}
@@ -4936,19 +5116,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
@@ -4957,6 +5160,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();
@@ -4974,34 +5188,48 @@ 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 });
});
}
// v4.2.3 : positionne la petite popup timeline à côté du curseur
/**
* v4.2.3 : positionne la petite popup timeline à côté du curseur.
* Utilisée UNIQUEMENT en vue classique pour la petite popup qui suit la souris
* quand on survole un segment timeline (informations courtes : durée, ref).
*
* v2026.5.34 : documentation + logs. Le clamp dans le viewport reste local
* (pas unifié avec positionTooltipAnchored car la logique "suit-souris" est
* fondamentalement différente d'un ancrage fixe à une source).
*
* @param {MouseEvent} e - événement souris pour position courante
*/
function moveTimelineTooltip(e) {
const tip = tooltipEl();
if (!tip || !tip.classList.contains("visible")) return;
// La popup ancrée (grande bulle) ne doit pas être déplacée par la souris
if (bulleState.pinned) return;
// Si la popup affiche une grande bulle d'intervention (classe pinned-like),
// Si la popup affiche une grande bulle d'intervention (mode anchored),
// on ne la bouge pas non plus : on la laisse ancrée.
if (tip.dataset.mode === "anchored") return;
const offsetX = 14, offsetY = 16;
let x = e.clientX + offsetX;
let y = e.clientY + offsetY;
const rect = tip.getBoundingClientRect();
// Ajuster si on sort de la fenêtre
// Ajuster si on sort de la fenêtre (logique simple : flip autour du curseur)
if (x + rect.width > window.innerWidth - 8) x = e.clientX - rect.width - offsetX;
if (y + rect.height > window.innerHeight - 8) y = e.clientY - rect.height - offsetY;
if (x < 4) x = 4;
if (y < 4) y = 4;
// v4.2.4 : utiliser setTooltipViewportPosition pour bénéficier de la
// détection automatique fixed/abs (et donc de la stabilité au scroll).
// setTooltipViewportPosition gère la détection auto fixed vs abs.
setTooltipViewportPosition(x, y);
}
@@ -5035,19 +5263,46 @@ function findIvByActionId(actionId) {
// v4.2.3/4 : ouvre la GRANDE popup au clic sur un segment timeline, ancrée
// juste en dessous du segment. Pas épinglée : se ferme sur clic ailleurs,
// Échap, OU quand la souris quitte la popup elle-même (mouseleave).
// v4.2.3/4 : ouvre la GRANDE popup au clic sur un segment timeline (vue
// classique) ou au hover (vue horizontale). Ancrée à côté du segment, pas
// sur. Se ferme au clic ailleurs.
//
// v2026.5.34 : utilise positionTooltipAnchored() unifié au lieu de recalculer
// sa propre position. Plus de code dupliqué.
function openPersistentTimelinePopup(el) {
if (!el) {
console.warn("[persistentTimeline] segment el null — abandon");
return;
}
const ivIdx = el.dataset.ivIdx;
if (ivIdx === undefined) return;
if (ivIdx === undefined) {
console.log("[persistentTimeline] segment sans ivIdx (hole/absence vide) — abandon");
return;
}
const cardEl = el.closest(".card");
if (!cardEl) return;
if (!cardEl) {
console.warn("[persistentTimeline] pas de .card parent trouvée");
return;
}
const row = cardEl.querySelector(`.intervention-v2[data-iv-idx="${ivIdx}"]`);
if (!row) return;
if (!row) {
console.warn(`[persistentTimeline] row intervention-v2[data-iv-idx="${ivIdx}"] introuvable`);
return;
}
const actionId = row.dataset.actionId;
const iv = findIvByActionId(actionId);
if (!iv) return;
if (!iv) {
console.warn(`[persistentTimeline] iv pour actionId=${actionId} introuvable`);
return;
}
const tip = tooltipEl();
if (!tip) return;
if (!tip) {
console.warn("[persistentTimeline] tooltipEl() null");
return;
}
console.log(`[persistentTimeline] ouverture grande popup pour iv actionId=${actionId}`);
// Nettoyer tout état précédent (ancrage, épinglage, timers)
bulleState.pinned = false;
@@ -5060,29 +5315,20 @@ function openPersistentTimelinePopup(el) {
tip.innerHTML = buildTooltipHTML(iv);
tip.classList.remove("hidden");
tip.classList.add("visible");
// mode "anchored" : le hover ne doit pas la remplacer par une autre popup
// mode "anchored" : le hover timeline ne doit pas la remplacer par la petite popup
tip.dataset.mode = "anchored";
state.currentTooltipIv = iv;
// Position : juste sous le segment timeline. D'abord on reset les coords
// pour que getBoundingClientRect() reflète la vraie taille du nouveau
// contenu.
// v2026.5.34 : utiliser positionTooltipAnchored() unifié, en préférant
// dessous (sous le segment timeline) via opts.anchorBelow = true.
//
// D'abord on reset les coords pour que le tipRect soit correctement mesuré
// avec le nouveau contenu.
tip.style.left = "-9999px";
tip.style.top = "0px";
// Forcer un reflow pour que tipRect soit à jour avec le nouveau contenu
const tipRect = tip.getBoundingClientRect();
const r = el.getBoundingClientRect();
let x = r.left;
let y = r.bottom + 8;
if (x + tipRect.width > window.innerWidth - 8) x = window.innerWidth - tipRect.width - 8;
if (x < 4) x = 4;
if (y + tipRect.height > window.innerHeight - 8) {
y = r.top - tipRect.height - 8;
}
if (y < 4) y = 4;
// Positionner proprement (avec détection auto fixed vs abs)
setTooltipViewportPosition(x, y);
// Force reflow
void tip.offsetWidth;
positionTooltipAnchored(el, { anchorBelow: true });
}
function showTimelinePopover(e, el) {
@@ -5718,6 +5964,21 @@ function extractContacts(raw) {
*/
function splitOneContact(raw) {
if (!raw) return { name: null, phone: null };
// v2026.5.25 : avant d'extraire les numéros, on REMPLACE les séquences qui
// sont des identifiants de matériel (LETTRES_CHIFFRES) par des espaces.
// Exemples : XXXX_NNNNNNNNNNN, XNNNNNN, XNNNNNN, XNNNNNN.
// Sans ça, XXXX_NNNNNNNNNNN laisse des "NNNN NNN NN NN" qui se font prendre
// pour un numéro de téléphone par le regex qui greedy sur [0-9\s.\-].
// On remplace par des espaces de même longueur pour préserver les offsets
// (important pour le calcul de position du nom avant le 1er numéro).
raw = String(raw);
raw = raw.replace(/\b[A-Z]{1,6}_\d+/g, (m) => " ".repeat(m.length));
// Idem pour les identifiants sans underscore style XNNNNNN, XNNNNNN, XNNNNNN
// (1-2 lettres majuscules suivies de 5+ chiffres collés). On garde assez
// permissif pour matcher les variantes sans enlever des vrais mots.
raw = raw.replace(/\b[A-Z]{1,3}\d{5,}\b/g, (m) => " ".repeat(m.length));
// v4.1.20 : regex plus permissives pour tolérer les erreurs humaines :
// - pas d'espace après le numéro (ex: "021555555Textecoller")
// - pas d'espace/parenthèse avant un court numéro
@@ -6239,12 +6500,29 @@ function showTooltip(e, iv, rowEl) {
// v2026.5.19 : pendant qu'un popup épinglé est en cours de drag, on ignore
// les mouseenter sur les cartes — sinon en survolant une carte on déclenche
// l'ouverture d'un nouveau tooltip par-dessus ce qu'on est en train de bouger.
if (state._popupDragging) return;
if (state._popupDragging) {
console.log("[showTooltip] ignoré : popup drag en cours");
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.
// v2026.5.34 : le softUnpin ne supprime plus le popup au mouseleave, donc
// ici on les supprime explicitement quand un nouveau tooltip démarre.
const softUnpinned = document.querySelectorAll(".soft-unpinned");
if (softUnpinned.length) {
console.log(`[showTooltip] suppression de ${softUnpinned.length} popup(s) soft-unpinned`);
softUnpinned.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).
if (bulleState.pinned && state.currentTooltipIv && state.currentTooltipIv !== iv) {
console.log("[showTooltip] ignoré : tooltip épinglé sur une autre iv");
return;
}
@@ -6431,56 +6709,108 @@ function reapplyTooltipPosition() {
el.style.top = ((el._absBasisTop || 0) + dy) + "px";
}
function positionTooltipAnchored(rowEl) {
/**
* v2026.5.34 : fonction UNIQUE et unifiée de positionnement ancré du tooltip.
*
* Utilisée par :
* - showTooltip() hover d'une row intervention en vue classique
* - openPersistentTimelinePopup() clic (classique) ou hover (horizontal)
* d'un segment timeline
* - showTooltip() pour les cartes/badges absence
*
* Algorithme :
* 1. Essaie 4 positions dans l'ordre : droite, gauche, dessous, dessus
* 2. Chaque position : padding de 8px min par rapport à la source
* 3. Chaque position : doit tenir dans la safe area (pas sous topbar/dock)
* 4. Chaque position : ne doit pas chevaucher les popups épinglés existants
* 5. Première position qui satisfait tout on la prend
* 6. Fallback si aucune ne marche : droite clampée (la moins pire)
*
* La popup ne couvre JAMAIS la source (pad >= 8px en distance euclidienne).
*
* @param {HTMLElement} sourceEl - l'élément déclencheur (row, card, segment)
* @param {object} opts - options { anchorBelow: true pour préférer dessous }
*/
function positionTooltipAnchored(sourceEl, opts) {
opts = opts || {};
const el = tooltipEl();
if (!rowEl || !el) return;
const pad = 14;
const rowRect = rowEl.getBoundingClientRect();
if (!el) {
console.warn("[positionTooltip] tooltip DOM introuvable");
return;
}
if (!sourceEl) {
console.warn("[positionTooltip] sourceEl null — pas de positionnement");
return;
}
const pad = 10; // padding entre source et popup
const viewportMargin = 8; // marge par rapport aux bords
const srcRect = sourceEl.getBoundingClientRect();
const tipRect = el.getBoundingClientRect();
// Position X : à droite de la ligne par défaut
let x = rowRect.right + pad;
if (x + tipRect.width > window.innerWidth - 8) {
x = rowRect.left - tipRect.width - pad;
}
if (x < 4) x = 4;
// Position Y : aligné en haut de la ligne
let y = rowRect.top;
if (y + tipRect.height > window.innerHeight - 8) {
y = window.innerHeight - tipRect.height - 8;
}
if (y < 4) y = 4;
// v2026.5.17 : éviter le chevauchement avec les popups épinglés existants.
// On teste la position candidate, et si elle chevauche un popup épinglé,
// on essaie d'autres candidats (gauche de la carte, au-dessous, au-dessus).
const tipW = tipRect.width || 320;
const tipW = tipRect.width || 320; // fallback taille si pas encore rendu
const tipH = tipRect.height || 200;
const pinnedRects = _getPinnedPopupsViewportRects();
if (pinnedRects.length) {
const candidates = [
{ x, y, label: "right" },
{ x: rowRect.left - tipW - pad, y: rowRect.top, label: "left" },
{ x: rowRect.left, y: rowRect.bottom + pad, label: "below" },
{ x: rowRect.left, y: rowRect.top - tipH - pad, label: "above" }
];
// Safe area : respecter topbar en haut, dock en bas
const safe = (typeof _getPopupSafeArea === "function")
? _getPopupSafeArea()
: { left: viewportMargin, top: viewportMargin,
right: window.innerWidth - viewportMargin,
bottom: window.innerHeight - viewportMargin };
// 4 candidats (ordre : droite → gauche → dessous → dessus)
// Préférence opts.anchorBelow = true : dessous en premier (ex: clic timeline)
const rightCandidate = { x: srcRect.right + pad, y: srcRect.top, label: "droite" };
const leftCandidate = { x: srcRect.left - tipW - pad, y: srcRect.top, label: "gauche" };
const belowCandidate = { x: srcRect.left, y: srcRect.bottom + pad, label: "dessous" };
const aboveCandidate = { x: srcRect.left, y: srcRect.top - tipH - pad, label: "dessus" };
const candidates = opts.anchorBelow
? [belowCandidate, aboveCandidate, rightCandidate, leftCandidate]
: [rightCandidate, leftCandidate, belowCandidate, aboveCandidate];
const pinnedRects = (typeof _getPinnedPopupsViewportRects === "function")
? _getPinnedPopupsViewportRects()
: [];
let chosen = null;
for (const c of candidates) {
// Borne dans le viewport
if (c.x < 4) c.x = 4;
if (c.x + tipW > window.innerWidth - 8) c.x = window.innerWidth - tipW - 8;
if (c.y < 4) c.y = 4;
if (c.y + tipH > window.innerHeight - 8) c.y = window.innerHeight - tipH - 8;
const testRect = { left: c.x, top: c.y, right: c.x + tipW, bottom: c.y + tipH };
const overlaps = pinnedRects.some(pr => _rectsOverlap(testRect, pr));
if (!overlaps) {
x = c.x; y = c.y;
// Clamp dans la safe area
let cx = c.x, cy = c.y;
if (cx < safe.left) cx = safe.left;
if (cx + tipW > safe.right) cx = safe.right - tipW;
if (cx < safe.left) continue; // popup plus large que safe area — skip
if (cy < safe.top) cy = safe.top;
if (cy + tipH > safe.bottom) cy = safe.bottom - tipH;
if (cy < safe.top) continue;
// Ne chevauche PAS la source (garantit qu'on ne la cache pas)
const candRect = { left: cx, top: cy, right: cx + tipW, bottom: cy + tipH };
if (_rectsOverlap(candRect, srcRect)) continue;
// Ne chevauche pas les popups épinglés existants
const hitsPinned = pinnedRects.some(pr => _rectsOverlap(candRect, pr));
if (hitsPinned) continue;
chosen = { x: cx, y: cy, label: c.label };
break;
}
}
if (!chosen) {
// Fallback : droite clampée à tout prix, même si ça chevauche (cas rare
// avec écran minuscule ou beaucoup de popups épinglés)
let fx = srcRect.right + pad;
let fy = srcRect.top;
if (fx + tipW > safe.right) fx = safe.right - tipW;
if (fx < safe.left) fx = safe.left;
if (fy + tipH > safe.bottom) fy = safe.bottom - tipH;
if (fy < safe.top) fy = safe.top;
chosen = { x: fx, y: fy, label: "fallback" };
console.log("[positionTooltip] fallback utilisé (aucun candidat optimal trouvé)");
} else {
console.log(`[positionTooltip] position choisie : ${chosen.label} (${Math.round(chosen.x)}, ${Math.round(chosen.y)})`);
}
setTooltipViewportPosition(x, y);
setTooltipViewportPosition(chosen.x, chosen.y);
}
/**
@@ -6677,7 +7007,13 @@ function pinTooltip() {
if (closeAllBtn) closeAllBtn.remove();
}
// Chercher la ligne source (row iv-v2)
// Chercher la ligne source pour le positionnement.
// v2026.5.35 : en vue horizontale, les rows .intervention-v2 sont CACHÉES
// (display: none via CSS .view-horizontal). getBoundingClientRect d'un
// élément caché retourne (0,0,0,0) → popup part en haut à gauche.
// Solution : priorité au tooltip actuellement visible (qui EST la vraie
// source visuelle du clic/hover). Fallback sur le segment timeline. Enfin
// la row (qui marche en vue classique).
let rowEl = null;
if (iv.actionId) {
rowEl = document.querySelector(`.intervention-v2[data-action-id="${iv.actionId}"]`);