- Le planning va s'afficher ici.
+
+
+ Chargement…
+
+
-
-
+
diff --git a/viewer.js b/viewer.js
index 654e8a1..ab6b493 100644
--- a/viewer.js
+++ b/viewer.js
@@ -1,681 +1,1361 @@
-// viewer.js — Logique de la vue claire
+// ============================================================================
+// viewer.js — vue claire du planning techniciens (v2)
+// ============================================================================
+// Ce fichier fait tourner la page viewer.html. Il :
+// 1. Récupère le HTML capturé (via background.js → chrome.storage.local)
+// 2. Parse ce HTML pour extraire les techs + événements du jour
+// 3. Construit une vue claire (une carte par tech, triées pompier > actifs > absents)
+// 4. Gère les interactions : survol (tooltip enrichi), clic copie (ref dans presse-papier),
+// bouton rafraîchir, toggle de thème.
+// 5. Met en cache le parsing dans sessionStorage pour un rechargement instantané
+// (le cache se vide automatiquement à la fermeture du navigateur).
//
-// Étapes :
-// 1. Lire le HTML capturé depuis chrome.storage.local
-// 2. Parser les techniciens (emp_XXXXX dans le DOM)
-// 3. Parser les événements (g_arr_player[N] dans le JS inline)
-// 4. Calculer : pompier du jour, absents, interventions par tech
-// 5. Afficher tout ça
-// 6. Au survol / clic : charger la fiche détaillée via fetch()
+// Pas de fetch de fiches détaillées : v2 affiche uniquement ce qui est dans
+// la page du planning. La détection de statut clos viendra en v3.
-// ==========================================================================
+// ============================================================================
// Configuration
-// ==========================================================================
+// ============================================================================
-// Règles fixes (techs avec horaires particuliers)
-const RULES = {
- // Pillonel, Olivier (ID 40944) est absent tous les vendredis
- "40944": {
- alwaysAbsentOn: [5], // 5 = vendredi (JS: 0=dim, 1=lun, ..., 5=ven, 6=sam)
- reason: "Absent fixe le vendredi"
- }
+// Équipe : ID EasyVista → nom affiché. Copié depuis la page du planning.
+// Si la composition de l'équipe change, modifier cette map.
+const TEAM = {
+ "76272": "Ciuppa, Mathieu",
+ "83725": "De Almeida Martins, Solange",
+ "66635": "Makonda, Yannick",
+ "92235": "Mamouni, Anas",
+ "90070": "Paisana, David",
+ "40944": "Pillonel, Olivier",
+ "72485": "Rosset, Pascal",
+ "86874": "Rouiller, Quentin"
};
-// Cache des fiches détaillées (persiste pour la session)
-const detailsCache = new Map();
-// Fetch en cours (pour éviter de lancer 2x la même requête)
-const detailsPromises = new Map();
+// Règles fixes d'absence (personnes absentes récurrentes).
+// Format : id tech → [liste de jours JS, 0=dim, 1=lun, ..., 5=ven, 6=sam]
+const RECURRING_ABSENCES = {
+ "40944": [5] // Pillonel absent tous les vendredis
+};
-// ==========================================================================
-// Init
-// ==========================================================================
+// Clés localStorage et sessionStorage
+const LS_THEME = "planning_theme"; // "light" | "dark"
+const SS_CACHE = "planning_cache_v2"; // dernier parsing JSON
-document.addEventListener("DOMContentLoaded", async () => {
- document.getElementById("btn-refresh").addEventListener("click", refresh);
- document.getElementById("btn-preload").addEventListener("click", preloadAll);
- await loadFromStorage();
-});
+// ============================================================================
+// Mapping de catégorie → titre court affiché
+// ============================================================================
+// Les interventions EasyVista ont une catégorie longue type :
+// "Demande de service/Place de travail/Poste de travail/Z - Options/Remplacement de matériel"
+// On extrait un titre court lisible pour l'humain.
-async function loadFromStorage() {
- const data = await chrome.storage.local.get([
- "planningHtml", "planningUrl", "planningCapturedAt", "planningError"
+const CATEGORY_TO_TITLE = [
+ // [regex, titre court, clé de couleur CSS]
+ [/Arriv[ée]e\s+ou\s+mutation/i, "Livraison", "livraison"],
+ [/Accessoire\s+pour\s+PC/i, "Livraison", "livraison"],
+ [/D[ée]part\s+d[\u2018\u2019']un\s+utilisateur/i, "Récupération", "recup"],
+ [/Reprise\s+du\s+mat[ée]riel/i, "Récupération", "recup"],
+ [/Remplacement\s+de\s+mat[ée]riel/i, "Remplacement", "remplacement"],
+];
+
+/**
+ * Dérive un titre court à partir de la catégorie d'une intervention.
+ */
+function deriveShortTitle(iv) {
+ const raw = (iv.infobulle && iv.infobulle._raw) || "";
+ const catLine = raw.split(/\n+/).map(l => l.trim())
+ .find(l => /^(Demande de service|Incident|Changement|Probl[èe]me)\//.test(l));
+ if (!catLine) return "Autres";
+ for (const [regex, title] of CATEGORY_TO_TITLE) {
+ if (regex.test(catLine)) return title;
+ }
+ return "Autres";
+}
+
+/**
+ * Renvoie la clé de couleur ("livraison", "recup", "remplacement", "autre")
+ * pour appliquer en classe CSS.
+ */
+function deriveColorKey(iv) {
+ const raw = (iv.infobulle && iv.infobulle._raw) || "";
+ const catLine = raw.split(/\n+/).map(l => l.trim())
+ .find(l => /^(Demande de service|Incident|Changement|Probl[èe]me)\//.test(l));
+ if (!catLine) return "autre";
+ for (const [regex, , colorKey] of CATEGORY_TO_TITLE) {
+ if (regex.test(catLine)) return colorKey;
+ }
+ return "autre";
+}
+
+// ============================================================================
+// État global
+// ============================================================================
+
+let currentData = null; // { techs, stats, captureTime }
+
+// ============================================================================
+// Boot
+// ============================================================================
+
+document.addEventListener("DOMContentLoaded", init);
+
+async function init() {
+ initTheme();
+ bindTopbar();
+ bindTooltipHandlers();
+
+ // Récupérer le HTML capturé depuis le background
+ const stored = await chrome.storage.local.get([
+ "planningHtml", "planningError", "planningCapturedAt", "planningUrl"
]);
- if (data.planningError) {
- showError(data.planningError);
+ if (stored.planningError) {
+ showError(stored.planningError);
return;
}
- if (!data.planningHtml) {
+ if (!stored.planningHtml) {
+ // Essayer le cache de session
+ const cached = loadFromSessionCache();
+ if (cached) {
+ render(cached);
+ return;
+ }
showError(
- "Aucune donnée de planning disponible. " +
- "Va sur la page du planning des techniciens sur itsma.vd.ch puis clique sur l'icône de l'extension."
+ "Pas de planning à afficher pour le moment. " +
+ "Va sur la page du planning dans itsma.vd.ch puis clique sur l'icône de l'extension."
);
return;
}
try {
- const parsed = parsePlanning(data.planningHtml, data.planningUrl);
- render(parsed, data.planningCapturedAt);
+ const parsed = parsePlanning(stored.planningHtml);
+ parsed.captureTime = stored.planningCapturedAt || Date.now();
+ saveToSessionCache(parsed);
+ render(parsed);
} catch (err) {
- console.error(err);
- showError("Erreur lors du parsing du planning : " + err.message);
+ console.error("Erreur parsing:", err);
+ showError(
+ "Impossible de parser le planning. " +
+ "Détail technique : " + (err?.message || String(err))
+ );
}
}
-async function refresh() {
- document.getElementById("subtitle").textContent = "Retour sur EasyVista pour actualiser…";
- // Inviter l'utilisateur à revenir sur l'onglet EasyVista et re-cliquer sur l'icône
- // (on ne peut pas re-capturer automatiquement depuis le viewer)
- showError(
- "Pour actualiser : va sur l'onglet EasyVista, recharge le planning (F5), " +
- "puis clique à nouveau sur l'icône de l'extension."
+// ============================================================================
+// Thème clair/sombre
+// ============================================================================
+
+function initTheme() {
+ const saved = localStorage.getItem(LS_THEME);
+ const theme = (saved === "light" || saved === "dark") ? saved : detectDefaultTheme();
+ applyTheme(theme);
+}
+
+function detectDefaultTheme() {
+ // Respecter la préférence système
+ if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+ return "dark";
+ }
+ return "light";
+}
+
+function applyTheme(theme) {
+ document.documentElement.setAttribute("data-theme", theme);
+ const icon = document.getElementById("theme-icon");
+ if (icon) icon.textContent = theme === "dark" ? "☀️" : "🌙";
+}
+
+function toggleTheme() {
+ const current = document.documentElement.getAttribute("data-theme") || "light";
+ const next = current === "dark" ? "light" : "dark";
+ applyTheme(next);
+ localStorage.setItem(LS_THEME, next);
+}
+
+// ============================================================================
+// Topbar (rafraîchir + thème)
+// ============================================================================
+
+function bindTopbar() {
+ document.getElementById("theme-toggle").addEventListener("click", toggleTheme);
+ document.getElementById("refresh-btn").addEventListener("click", refreshFromPlanning);
+}
+
+async function refreshFromPlanning() {
+ // On cherche un onglet itsma.vd.ch ouvert. Sinon on propose d'y aller.
+ // Le fonctionnement "normal" c'est : l'utilisateur clique sur l'icône depuis
+ // la page du planning, pas depuis ici. Ici on lui rappelle.
+ const tabs = await chrome.tabs.query({ url: "https://itsma.vd.ch/*" });
+ if (tabs.length === 0) {
+ alert(
+ "Ouvre d'abord l'onglet du planning sur itsma.vd.ch, " +
+ "puis reclique sur l'icône de l'extension (et non sur ce bouton)."
+ );
+ return;
+ }
+ // Réactiver l'onglet et demander à l'utilisateur de cliquer sur l'icône
+ await chrome.tabs.update(tabs[0].id, { active: true });
+ alert(
+ "Le planning a été rouvert. Clique maintenant sur l'icône de l'extension " +
+ "pour recapturer le planning."
);
}
-// ==========================================================================
-// Parsing
-// ==========================================================================
+// ============================================================================
+// Cache sessionStorage
+// ============================================================================
-function parsePlanning(html, sourceUrl) {
- // Parser le HTML dans un DOM isolé pour pouvoir utiliser les sélecteurs CSS
- const parser = new DOMParser();
- const doc = parser.parseFromString(html, "text/html");
+function saveToSessionCache(data) {
+ try {
+ sessionStorage.setItem(SS_CACHE, JSON.stringify(data));
+ } catch (e) {
+ console.warn("Cache session impossible (quota ?) :", e);
+ }
+}
- // --- 1. Extraire les techniciens depuis
- const techs = {}; // id -> { name, id }
- for (const el of doc.querySelectorAll('div.support_list[id^="emp_"]')) {
- const id = el.id.replace("emp_", "");
- // Le nom est le texte direct du div (après le checkbox)
- const rawText = el.textContent.trim();
- // Nettoyer : enlever les \u00a0 ( )
- const name = rawText.replace(/\u00a0/g, " ").trim();
- if (name && /^\d+$/.test(id)) {
- techs[id] = { id, name };
- }
+function loadFromSessionCache() {
+ try {
+ const raw = sessionStorage.getItem(SS_CACHE);
+ if (!raw) return null;
+ return JSON.parse(raw);
+ } catch {
+ return null;
+ }
+}
+
+// ============================================================================
+// Parsing du HTML du planning
+// ============================================================================
+
+/**
+ * Parse le HTML complet de la page EasyVista et retourne une structure :
+ * {
+ * techs: [
+ * {
+ * id: "76272",
+ * name: "Ciuppa, Mathieu",
+ * interventions: [
+ * {
+ * playerIdx: 0,
+ * ref: "S260414_00100",
+ * label: "...",
+ * type: "intervention" | "absence",
+ * startTime: "08:00",
+ * endTime: "12:00",
+ * startDate: "17/04/2026",
+ * endDate: "17/04/2026",
+ * isPompier: boolean,
+ * infobulle: {
+ * horaire, ref, type, contact, beneficiaire, lieu, service,
+ * probleme, aFaire, materiel, deadline, description
+ * }
+ * }
+ * ]
+ * }
+ * ],
+ * targetDate: "17/04/2026",
+ * stats: { total, pompiers, absents }
+ * }
+ */
+function parsePlanning(html) {
+ // On bosse sur un DOM temporaire pour les sélecteurs, mais aussi sur le HTML
+ // brut pour attraper les données JS inline (g_arr_player[...])
+ const doc = new DOMParser().parseFromString(html, "text/html");
+
+ // --- 1. Repérer la date cible du planning ---
+ const targetDate = extractTargetDate(doc, html);
+
+ // --- 2. Extraire les définitions d'événements ---
+ // Format : g_arr_player[N] = new action_player("event_id", "label", ...);
+ // Puis ensuite : g_arr_player[N].assign_informations(tech_id, "title", type, ...)
+ // Puis : g_arr_player[N].assign_date_time_informations(...)
+ const players = extractPlayers(html);
+
+ // --- 3. Construire la map tech → interventions ---
+ const techMap = new Map();
+ for (const id of Object.keys(TEAM)) {
+ techMap.set(id, {
+ id,
+ name: TEAM[id],
+ interventions: []
+ });
}
- // --- 2. Extraire les événements depuis le JS inline (g_arr_player[N])
- // On parse les scripts
- const events = {};
- for (const script of doc.querySelectorAll("script")) {
- const src = script.textContent;
- if (!src.includes("g_arr_player")) continue;
+ for (const player of players) {
+ if (!player.techId || !techMap.has(player.techId)) continue;
+ // Ne garder que les interventions qui concernent le jour cible
+ if (!intersectsDate(player, targetDate)) continue;
- // Pattern 1 : new action_player("event_id", "label", ...)
- const pLabel = /g_arr_player\[(\d+)\]\s*=\s*new action_player\("(\d+)",\s*"([^"]*)"/g;
- let m;
- while ((m = pLabel.exec(src)) !== null) {
- const idx = m[1];
- events[idx] = events[idx] || {};
- events[idx].eventId = m[2];
- events[idx].label = decodeText(m[3]);
- }
-
- // Pattern 2 : assign_informations(tech_id, "title", "type", ...)
- const pInfo = /g_arr_player\[(\d+)\]\.assign_informations\((\d+),\s*"([^"]*)",\s*"([^"]*)"/g;
- while ((m = pInfo.exec(src)) !== null) {
- const idx = m[1];
- events[idx] = events[idx] || {};
- events[idx].techId = m[2];
- events[idx].title = decodeText(m[3]);
- events[idx].type = m[4];
- }
-
- // Pattern 3 : assign_date_time_informations (plusieurs arguments)
- const pTime = /g_arr_player\[(\d+)\]\.assign_date_time_informations\(([^)]+)\)/g;
- while ((m = pTime.exec(src)) !== null) {
- const idx = m[1];
- const args = m[2];
- const parts = [...args.matchAll(/"([^"]*)"/g)].map(x => x[1]);
- if (parts.length >= 10) {
- events[idx] = events[idx] || {};
- events[idx].dateStart = parts[0];
- events[idx].dateEnd = parts[4];
- events[idx].timeStart = parts[8];
- events[idx].timeEnd = parts[9];
- }
- }
+ techMap.get(player.techId).interventions.push(player);
}
- // --- 3. Extraire les liens vers les fiches détaillées depuis les AffBulle
- // Les
contenant target=XXXXXXXX donnent l'URL de la fiche
- const eventLinks = {}; // eventId -> full URL
- for (const a of doc.querySelectorAll('a[href*="target="]')) {
- const href = a.getAttribute("href");
- const m = /target=(\d+)/.exec(href);
- if (m) {
- // Construire l'URL absolue à partir de sourceUrl
- try {
- const absoluteUrl = new URL(href, sourceUrl || "https://itsma.vd.ch/").href;
- eventLinks[m[1]] = absoluteUrl;
- } catch (e) {
- // ignore
- }
- }
+ // --- 4. Tri des interventions de chaque tech par heure ---
+ for (const tech of techMap.values()) {
+ tech.interventions.sort((a, b) => {
+ return (a.startTime || "").localeCompare(b.startTime || "");
+ });
}
- // --- 4. Extraire les infobulles rapides pour chaque event
- // Format : AffBulle(this, '...texte échappé...')
- const eventBulles = {}; // eventId -> texte décodé
- // Recherche dans le HTML brut pour les AffBulle (ils ne sont pas dans