Version 3.1.0 — Améliorations affichage

background.js

@@ -1,68 +1,331 @@
 // background.js — Service worker (Manifest V3)
 //
-// Quand l'utilisateur clique sur l'icône de l'extension :
+// Rôles :
-// 1. On vérifie qu'il est bien sur itsma.vd.ch
+// 1. Au clic sur l'icône : ouvrir le viewer
-// 2. On injecte un script dans l'onglet qui récupère le HTML complet
+// 2. Répondre aux messages du viewer :
-//    de la page + tous les liens vers les fiches d'intervention
+//    - getSession         : trouve l'onglet EasyVista ouvert, renvoie {phpsessid, origin}
-// 3. On stocke ça dans chrome.storage.local
+//    - fetchPlanning      : fetch le XML du planning pour une date
-// 4. On ouvre un nouvel onglet avec viewer.html
+//    - fetchFiche         : fetch une fiche individuelle (HTML)
+// 3. Programmer les alarmes de refresh auto (12h, 15h)
+// 4. Nettoyer les vieux caches (>7 jours)
 
-chrome.action.onClicked.addListener(async (tab) => {
+// Domaines EasyVista reconnus (interne d'abord, externe en fallback)
-  try {
+const EV_ORIGINS = [
-    if (!tab.url || !tab.url.startsWith("https://itsma.vd.ch/")) {
+  "https://itsma.etat-de-vaud.ch",
-      await chrome.storage.local.set({
+  "https://itsma.vd.ch"
-        planningError:
+];
-          "Cette extension ne fonctionne que sur https://itsma.vd.ch/. " +
-          "Va d'abord sur la page du planning, puis reclique sur l'icône."
-      });
-      await openViewer();
-      return;
-    }
 
-    // Injecter un script dans l'onglet pour extraire le HTML
+// ============================================================================
-    const results = await chrome.scripting.executeScript({
+// Clic sur l'icône → ouvrir le viewer
-      target: { tabId: tab.id },
+// ============================================================================
-      func: extractPlanningFromPage
-    });
 
-    const data = results[0]?.result;
+chrome.action.onClicked.addListener(async () => {
-    if (!data || !data.html) {
-      await chrome.storage.local.set({
-        planningError:
-          "Impossible de lire le contenu de la page. " +
-          "Assure-toi d'être bien sur la page du planning des techniciens."
-      });
-      await openViewer();
-      return;
-    }
-
-    // Stocker le HTML capturé + l'URL de base pour les requêtes futures
-    await chrome.storage.local.set({
-      planningHtml: data.html,
-      planningUrl: tab.url,
-      planningCapturedAt: Date.now(),
-      planningError: null
-    });
-
-    await openViewer();
-  } catch (err) {
-    console.error("Erreur extension:", err);
-    await chrome.storage.local.set({
-      planningError: "Erreur inattendue : " + (err?.message || String(err))
-    });
-    await openViewer();
-  }
-});
-
-// Fonction injectée dans la page du planning
-// (elle s'exécute dans le contexte de itsma.vd.ch, pas dans le service worker)
-function extractPlanningFromPage() {
-  // Récupérer tout le HTML de la page
-  const html = document.documentElement.outerHTML;
-  return { html: html };
-}
-
-async function openViewer() {
   const viewerUrl = chrome.runtime.getURL("viewer.html");
+  // Si le viewer est déjà ouvert, on focus cet onglet plutôt que d'en ouvrir un autre
+  const existing = await chrome.tabs.query({ url: viewerUrl + "*" });
+  if (existing.length > 0) {
+    await chrome.tabs.update(existing[0].id, { active: true });
+    await chrome.windows.update(existing[0].windowId, { focused: true });
+  } else {
     await chrome.tabs.create({ url: viewerUrl });
   }
+});
+
+// ============================================================================
+// Trouver l'onglet EasyVista actif et en extraire le PHPSESSID
+// ============================================================================
+
+async function findEasyVistaSession() {
+  // Chercher tous les onglets sur un domaine EasyVista
+  for (const origin of EV_ORIGINS) {
+    const tabs = await chrome.tabs.query({ url: origin + "/*" });
+    for (const tab of tabs) {
+      const m = (tab.url || "").match(/[?&]PHPSESSID=([a-zA-Z0-9]+)/);
+      if (m) {
+        return { phpsessid: m[1], origin: origin, tabId: tab.id };
+      }
+    }
+  }
+  return null;
+}
+
+// ============================================================================
+// Fetch helpers (s'exécutent dans le contexte du service worker,
+// les cookies du domaine sont automatiquement inclus via credentials: include)
+// ============================================================================
+
+/**
+ * Fetch du XML retourné par planning_xhr.php?div=calendar_block.
+ * Contient les interventions de nos 8 techs pour la date donnée (~40 ko).
+ *
+ * Ce n'est PAS le HTML de la page Planning — le serveur ne rend pas les données
+ * dans le HTML, elles arrivent via cet endpoint AJAX.
+ */
+async function fetchPlanningXml(origin, phpsessid, unixDate) {
+  const techIds = "76272,83725,66635,92235,90070,40944,72485,86874";
+  const groupId = "191";
+  const url =
+    `${origin}/planning_xhr.php` +
+    `?PHPSESSID=${encodeURIComponent(phpsessid)}` +
+    `&div=calendar_block` +
+    `&mode=day` +
+    `&group_id=${groupId}` +
+    `&event_name=HelpDesk_PlanningItem` +
+    `&sql_param=${techIds}` +
+    `&unix_date=${unixDate}` +
+    `&start_date_label=Date` +
+    `&end_date_label=Date` +
+    `&click_here_label=Ici` +
+    `&mail_title=mail` +
+    `&day_start_hour=8` +
+    `&day_end_hour=19`;
+  console.log("[bg] fetchPlanningXml →", url.substring(0, 140));
+  const r = await fetch(url, { credentials: "include" });
+  console.log("[bg]   status =", r.status);
+  if (!r.ok) throw new Error("HTTP " + r.status);
+  const xml = await r.text();
+  console.log("[bg]   taille XML =", xml.length);
+  return xml;
+}
+
+/**
+ * Fetch planning_xhr_2.php?id=ACTIONID pour UNE intervention.
+ * Retourne ~400 octets au format custom :
+ *   @@DESCRIPTION_S@@...@@DESCRIPTION_E@@@@LABEL_S@@...
+ */
+async function fetchXhr2(origin, phpsessid, actionId) {
+  const url = `${origin}/planning_xhr_2.php?PHPSESSID=${encodeURIComponent(phpsessid)}&id=${encodeURIComponent(actionId)}`;
+  const r = await fetch(url, { credentials: "include" });
+  if (!r.ok) throw new Error("HTTP " + r.status);
+  return await r.text();
+}
+
+async function fetchFicheHtml(origin, phpsessid, formLink) {
+  const url = `${origin}/index.php?${formLink}&PHPSESSID=${encodeURIComponent(phpsessid)}`;
+  console.log("[bg] fetchFicheHtml →", url.substring(0, 120));
+  const r = await fetch(url, { credentials: "include" });
+  if (!r.ok) throw new Error("HTTP " + r.status);
+  const html = await r.text();
+  console.log("[bg]   fiche status =", r.status, "| taille =", html.length);
+  return html;
+}
+
+// GUID du "sender" du menu/workflow — observé dans les URLs EasyVista du planning.
+// Le sender du formLink du XML planning est {9C395E45-...} mais l'API timeline
+// utilise le sender de la FICHE parent ({C99ECD05-...}).
+const TIMELINE_SENDER = "%7BC99ECD05-3D48-4C62-ABF0-66292053AED6%7D";
+
+/**
+ * Fetch l'API timeline JSON pour récupérer le texte des actions d'une fiche.
+ * Params :
+ *   - target     : ID interne de la fiche (pas l'action_id)
+ *   - checksum   : checksum frais extrait depuis le HTML de la fiche
+ * Retour : texte JSON de l'API, ou null en cas d'erreur.
+ */
+async function fetchTimelineJson(origin, phpsessid, target, checksum) {
+  const url =
+    `${origin}/api/v1/internal/forms/${TIMELINE_SENDER}/timeline` +
+    `?target=${encodeURIComponent(target)}` +
+    `&checksum=${encodeURIComponent(checksum)}` +
+    `&type=todo` +
+    `&sectionId=1` +
+    `&navigator=` +
+    `&nbRecord=0` +
+    `&PHPSESSID=${encodeURIComponent(phpsessid)}`;
+  console.log("[bg] fetchTimelineJson →", url.substring(0, 120));
+  const r = await fetch(url, {
+    credentials: "include",
+    headers: {
+      "Accept": "application/json",
+      "X-Requested-With": "XMLHttpRequest"
+    }
+  });
+  if (!r.ok) throw new Error("HTTP " + r.status);
+  const body = await r.text();
+  console.log("[bg]   timeline status =", r.status, "| taille =", body.length);
+  return body;
+}
+
+// ============================================================================
+// Détection "session invalide"
+// ============================================================================
+
+function looksLikeLoginPage(text) {
+  // La page de login EasyVista contient cette chaîne
+  return /customer_login|my\.policy/i.test((text || "").substring(0, 3000));
+}
+
+// ============================================================================
+// Messages du viewer
+// ============================================================================
+
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+  (async () => {
+    try {
+      if (msg.type === "getSession") {
+        const session = await findEasyVistaSession();
+        sendResponse({ ok: true, session });
+        return;
+      }
+
+      if (msg.type === "fetchPlanning") {
+        const session = await findEasyVistaSession();
+        if (!session) {
+          sendResponse({ ok: false, error: "no_session" });
+          return;
+        }
+        // Fetch XML calendar_block du planning (rapide ~40 ko)
+        const xml = await fetchPlanningXml(session.origin, session.phpsessid, msg.unixDate);
+        if (looksLikeLoginPage(xml)) {
+          sendResponse({ ok: false, error: "session_expired" });
+          return;
+        }
+        sendResponse({ ok: true, xml, session });
+        return;
+      }
+
+      if (msg.type === "fetchXhr2") {
+        const session = await findEasyVistaSession();
+        if (!session) {
+          sendResponse({ ok: false, error: "no_session" });
+          return;
+        }
+        try {
+          const body = await fetchXhr2(session.origin, session.phpsessid, msg.actionId);
+          sendResponse({ ok: true, body });
+        } catch (err) {
+          sendResponse({ ok: false, error: String(err) });
+        }
+        return;
+      }
+
+      if (msg.type === "fetchFiche") {
+        const session = await findEasyVistaSession();
+        if (!session) {
+          sendResponse({ ok: false, error: "no_session" });
+          return;
+        }
+        const html = await fetchFicheHtml(session.origin, session.phpsessid, msg.formLink);
+        if (looksLikeLoginPage(html)) {
+          sendResponse({ ok: false, error: "session_expired" });
+          return;
+        }
+        sendResponse({ ok: true, html, session });
+        return;
+      }
+
+      if (msg.type === "fetchTimeline") {
+        const session = await findEasyVistaSession();
+        if (!session) {
+          sendResponse({ ok: false, error: "no_session" });
+          return;
+        }
+        const body = await fetchTimelineJson(
+          session.origin, session.phpsessid, msg.target, msg.checksum
+        );
+        // Si on reçoit du HTML au lieu de JSON, c'est une page d'erreur / login
+        if (body.trimStart().startsWith("<")) {
+          sendResponse({ ok: false, error: "not_json" });
+          return;
+        }
+        sendResponse({ ok: true, body });
+        return;
+      }
+
+      if (msg.type === "scheduleAutoRefresh") {
+        scheduleAutoRefreshAlarms();
+        sendResponse({ ok: true });
+        return;
+      }
+
+      if (msg.type === "cleanupOldCaches") {
+        const removed = await cleanupOldCaches(msg.daysToKeep || 7);
+        sendResponse({ ok: true, removed });
+        return;
+      }
+
+      sendResponse({ ok: false, error: "unknown_message" });
+    } catch (err) {
+      console.error("background error:", err);
+      sendResponse({ ok: false, error: err.message || String(err) });
+    }
+  })();
+
+  // Retourner true pour garder sendResponse asynchrone
+  return true;
+});
+
+// ============================================================================
+// Alarmes : refresh auto 12h / 15h
+// ============================================================================
+
+function scheduleAutoRefreshAlarms() {
+  // Calculer le prochain 12h et 15h à partir de maintenant
+  const now = new Date();
+
+  function nextAt(hour, minute) {
+    const d = new Date();
+    d.setHours(hour, minute, 0, 0);
+    if (d <= now) d.setDate(d.getDate() + 1);
+    return d.getTime();
+  }
+
+  chrome.alarms.create("refresh_12h", {
+    when: nextAt(12, 0),
+    periodInMinutes: 24 * 60  // tous les jours
+  });
+  chrome.alarms.create("refresh_15h", {
+    when: nextAt(15, 0),
+    periodInMinutes: 24 * 60
+  });
+}
+
+chrome.alarms.onAlarm.addListener(async (alarm) => {
+  if (alarm.name === "refresh_12h" || alarm.name === "refresh_15h") {
+    // Envoyer un message à tous les viewers ouverts pour qu'ils se rafraîchissent
+    const viewerUrl = chrome.runtime.getURL("viewer.html");
+    const tabs = await chrome.tabs.query({ url: viewerUrl + "*" });
+    for (const tab of tabs) {
+      try {
+        await chrome.tabs.sendMessage(tab.id, { type: "autoRefresh" });
+      } catch {
+        // Onglet fermé ou pas réactif, on ignore
+      }
+    }
+  }
+});
+
+// ============================================================================
+// Nettoyage caches > 7 jours
+// ============================================================================
+
+async function cleanupOldCaches(daysToKeep) {
+  const all = await chrome.storage.local.get(null);
+  const threshold = new Date();
+  threshold.setDate(threshold.getDate() - daysToKeep);
+  const thresholdStr = threshold.toISOString().substring(0, 10); // YYYY-MM-DD
+
+  const toRemove = [];
+  for (const key of Object.keys(all)) {
+    // Nos clés de cache sont planning_cache_YYYY-MM-DD
+    const m = key.match(/^planning_cache_(\d{4}-\d{2}-\d{2})$/);
+    if (m && m[1] < thresholdStr) {
+      toRemove.push(key);
+    }
+  }
+  if (toRemove.length > 0) {
+    await chrome.storage.local.remove(toRemove);
+  }
+  return toRemove.length;
+}
+
+// Au démarrage, programmer les alarmes et nettoyer
+chrome.runtime.onInstalled.addListener(() => {
+  scheduleAutoRefreshAlarms();
+  cleanupOldCaches(7).catch(err => console.warn("cleanup:", err));
+});
+
+chrome.runtime.onStartup.addListener(() => {
+  scheduleAutoRefreshAlarms();
+  cleanupOldCaches(7).catch(err => console.warn("cleanup:", err));
+});

manifest.json

@@ -1,14 +1,17 @@
 {
   "manifest_version": 3,
   "name": "Planning Techniciens — Vue claire",
-  "version": "1.0.0",
+  "version": "3.1.0",
-  "description": "Réaffiche le planning du jour (itsma.vd.ch) avec pompier, absents et détails d'interventions à la demande.",
+  "description": "Vue claire du planning EasyVista (itsma.etat-de-vaud.ch et itsma.vd.ch) avec navigation par date, détection automatique des interventions closes et cache 7 jours.",
   "permissions": [
     "activeTab",
     "scripting",
-    "storage"
+    "storage",
+    "tabs",
+    "alarms"
   ],
   "host_permissions": [
+    "https://itsma.etat-de-vaud.ch/*",
     "https://itsma.vd.ch/*"
   ],
   "action": {
@@ -30,6 +33,7 @@
         "viewer.css"
       ],
       "matches": [
+        "https://itsma.etat-de-vaud.ch/*",
         "https://itsma.vd.ch/*"
       ]
     }

viewer.html

@@ -1,49 +1,56 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="fr">
 <head>
-  <meta charset="UTF-8">
+  <meta charset="utf-8">
-  <title>Planning Techniciens — Vue claire</title>
+  <title>Planning techniciens</title>
   <link rel="stylesheet" href="viewer.css">
 </head>
 <body>
   <header class="topbar">
     <div class="topbar-left">
-      <h1>📅 Planning du <span id="display-date">—</span></h1>
+      <h1>Planning techniciens</h1>
-      <div class="subtitle" id="subtitle">Chargement…</div>
+      <div class="date-nav">
+        <button id="nav-prev" class="btn btn-nav" title="Jour précédent" aria-label="Jour précédent">◀</button>
+        <input type="date" id="date-picker" class="date-input">
+        <button id="nav-next" class="btn btn-nav" title="Jour suivant" aria-label="Jour suivant">▶</button>
+        <button id="nav-today" class="btn btn-today" title="Aujourd'hui">Auj.</button>
+      </div>
+      <span id="capture-info" class="capture-info"></span>
+      <span id="refresh-check" class="refresh-check hidden" title="Mise à jour terminée">✓</span>
     </div>
     <div class="topbar-right">
-      <button id="btn-refresh" title="Recharger depuis la page EasyVista">
+      <button id="refresh-btn" class="btn" title="Rafraîchir maintenant">
-        🔄 Actualiser
+        <span id="refresh-icon">↻</span> Rafraîchir
       </button>
-      <button id="btn-preload" title="Pré-charger tous les détails d'interventions (22 requêtes)">
+      <button id="abort-btn" class="btn btn-abort hidden" title="Arrêter le rafraîchissement en cours">
-        📥 Charger tous les détails
+        ✕ Arrêter
+      </button>
+      <button id="clear-cache-btn" class="btn btn-subtle" title="Vider le cache du jour affiché">
+        Vider cache
+      </button>
+      <button id="theme-toggle" class="btn btn-icon" title="Changer de thème" aria-label="Changer de thème">
+        <span id="theme-icon">🌙</span>
       </button>
     </div>
   </header>
 
-  <div id="error-zone" class="error-zone hidden"></div>
+  <main id="main">
-
+    <div id="error-box" class="error-box hidden"></div>
-  <section id="summary" class="summary hidden">
+    <div id="session-needed" class="session-needed hidden">
-    <div class="summary-card summary-pompier">
+      <h2>Connexion à EasyVista requise</h2>
-      <div class="summary-label">🚒 Pompier du jour</div>
+      <p>Cette extension doit se connecter à <code>itsma.etat-de-vaud.ch</code> pour fonctionner.</p>
-      <div class="summary-value" id="pompier-name">—</div>
+      <p>Ouvre EasyVista dans un onglet, connecte-toi, puis <b>reclique sur l'icône de l'extension</b>.</p>
+      <button id="open-ev-btn" class="btn btn-primary">Ouvrir EasyVista</button>
     </div>
-    <div class="summary-card summary-absents">
+    <div id="loading" class="loading">Chargement…</div>
-      <div class="summary-label">❌ Absents</div>
+    <div id="stats" class="stats hidden"></div>
-      <div class="summary-value" id="absents-list">—</div>
+    <div id="cards" class="cards"></div>
-    </div>
-    <div class="summary-card summary-stats">
-      <div class="summary-label">🔧 Interventions</div>
-      <div class="summary-value" id="stats-interv">—</div>
-    </div>
-  </section>
-
-  <main id="main-content">
-    <div class="placeholder">Le planning va s'afficher ici.</div>
   </main>
 
-  <!-- Tooltip pour le survol -->
+  <div id="tooltip" class="tooltip hidden" role="tooltip"></div>
-  <div id="tooltip" class="tooltip hidden"></div>
+
+  <!-- Conteneur des toasts (notifications d'ouverture) -->
+  <div id="toast-stack" class="toast-stack" aria-live="polite"></div>
 
   <script src="viewer.js"></script>
 </body>