forked from FroSteel/Planification
Version 1.0.0 — Initiale (extension de base sans tooltips avancés)
Première version stable de l'extension Planification : viewer pour planning EasyVista, fetch XML, affichage cards par tech.
This commit is contained in:
@@ -0,0 +1,68 @@
|
|||||||
|
// background.js — Service worker (Manifest V3)
|
||||||
|
//
|
||||||
|
// Quand l'utilisateur clique sur l'icône de l'extension :
|
||||||
|
// 1. On vérifie qu'il est bien sur itsma.vd.ch
|
||||||
|
// 2. On injecte un script dans l'onglet qui récupère le HTML complet
|
||||||
|
// de la page + tous les liens vers les fiches d'intervention
|
||||||
|
// 3. On stocke ça dans chrome.storage.local
|
||||||
|
// 4. On ouvre un nouvel onglet avec viewer.html
|
||||||
|
|
||||||
|
chrome.action.onClicked.addListener(async (tab) => {
|
||||||
|
try {
|
||||||
|
if (!tab.url || !tab.url.startsWith("https://itsma.vd.ch/")) {
|
||||||
|
await chrome.storage.local.set({
|
||||||
|
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({
|
||||||
|
target: { tabId: tab.id },
|
||||||
|
func: extractPlanningFromPage
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = results[0]?.result;
|
||||||
|
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");
|
||||||
|
await chrome.tabs.create({ url: viewerUrl });
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 444 B |
Binary file not shown.
|
After Width: | Height: | Size: 118 B |
Binary file not shown.
|
After Width: | Height: | Size: 207 B |
@@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"manifest_version": 3,
|
||||||
|
"name": "Planning Techniciens — Vue claire",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Réaffiche le planning du jour (itsma.vd.ch) avec pompier, absents et détails d'interventions à la demande.",
|
||||||
|
"permissions": [
|
||||||
|
"activeTab",
|
||||||
|
"scripting",
|
||||||
|
"storage"
|
||||||
|
],
|
||||||
|
"host_permissions": [
|
||||||
|
"https://itsma.vd.ch/*"
|
||||||
|
],
|
||||||
|
"action": {
|
||||||
|
"default_title": "Ouvrir la vue claire du planning"
|
||||||
|
},
|
||||||
|
"background": {
|
||||||
|
"service_worker": "background.js"
|
||||||
|
},
|
||||||
|
"icons": {
|
||||||
|
"16": "icons/icon16.png",
|
||||||
|
"48": "icons/icon48.png",
|
||||||
|
"128": "icons/icon128.png"
|
||||||
|
},
|
||||||
|
"web_accessible_resources": [
|
||||||
|
{
|
||||||
|
"resources": [
|
||||||
|
"viewer.html",
|
||||||
|
"viewer.js",
|
||||||
|
"viewer.css"
|
||||||
|
],
|
||||||
|
"matches": [
|
||||||
|
"https://itsma.vd.ch/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
+360
@@ -0,0 +1,360 @@
|
|||||||
|
/* viewer.css — Style de la vue claire du planning */
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
|
background: #f5f7fa;
|
||||||
|
color: #1f2937;
|
||||||
|
line-height: 1.5;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Top bar === */
|
||||||
|
.topbar {
|
||||||
|
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 20px 32px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 13px;
|
||||||
|
opacity: 0.85;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-right {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar button {
|
||||||
|
background: rgba(255,255,255,0.15);
|
||||||
|
color: white;
|
||||||
|
border: 1px solid rgba(255,255,255,0.3);
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar button:hover {
|
||||||
|
background: rgba(255,255,255,0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar button:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Error zone === */
|
||||||
|
.error-zone {
|
||||||
|
margin: 24px 32px;
|
||||||
|
padding: 16px 20px;
|
||||||
|
background: #fef2f2;
|
||||||
|
border: 1px solid #fca5a5;
|
||||||
|
color: #991b1b;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Summary cards (pompier, absents, stats) === */
|
||||||
|
.summary {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
margin: 24px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card {
|
||||||
|
background: white;
|
||||||
|
padding: 18px 22px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||||
|
border-left: 4px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card.summary-pompier {
|
||||||
|
border-left-color: #dc2626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card.summary-absents {
|
||||||
|
border-left-color: #f59e0b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card.summary-stats {
|
||||||
|
border-left-color: #10b981;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-label {
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
color: #6b7280;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-value {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-value .muted {
|
||||||
|
font-weight: 400;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Main content : cartes techniciens === */
|
||||||
|
#main-content {
|
||||||
|
margin: 0 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
background: white;
|
||||||
|
padding: 48px 32px;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
color: #9ca3af;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-card.tech-absent {
|
||||||
|
opacity: 0.7;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-card.tech-pompier {
|
||||||
|
box-shadow: 0 0 0 2px #dc2626, 0 2px 6px rgba(220,38,38,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-header {
|
||||||
|
padding: 14px 18px;
|
||||||
|
background: #f9fafb;
|
||||||
|
border-bottom: 1px solid #e5e7eb;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-card.tech-pompier .tech-header {
|
||||||
|
background: #fef2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-card.tech-absent .tech-header {
|
||||||
|
background: #fef3c7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-name {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-badge {
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 3px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-badge.badge-pompier {
|
||||||
|
background: #dc2626;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-badge.badge-absent {
|
||||||
|
background: #f59e0b;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-badge.badge-count {
|
||||||
|
background: #e5e7eb;
|
||||||
|
color: #4b5563;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-interventions {
|
||||||
|
padding: 8px 0;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-empty {
|
||||||
|
padding: 24px;
|
||||||
|
text-align: center;
|
||||||
|
color: #9ca3af;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Intervention items === */
|
||||||
|
.intervention {
|
||||||
|
padding: 10px 18px;
|
||||||
|
border-bottom: 1px solid #f3f4f6;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intervention:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intervention:hover {
|
||||||
|
background: #eff6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interv-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interv-time {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1e40af;
|
||||||
|
font-size: 14px;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interv-ref {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #6b7280;
|
||||||
|
font-family: ui-monospace, "SF Mono", Consolas, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interv-summary {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #374151;
|
||||||
|
margin-top: 4px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interv-contact {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interv-location {
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interv-details {
|
||||||
|
margin-top: 12px;
|
||||||
|
padding: 12px;
|
||||||
|
background: #f9fafb;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.6;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interv-details.loading {
|
||||||
|
color: #9ca3af;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interv-details.error {
|
||||||
|
color: #991b1b;
|
||||||
|
background: #fef2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interv-open-link {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #2563eb;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interv-open-link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Absence item (affichée dans la carte du tech absent) === */
|
||||||
|
.absence-info {
|
||||||
|
padding: 12px 18px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #78350f;
|
||||||
|
background: #fef3c7;
|
||||||
|
border-left: 3px solid #f59e0b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pompier-info {
|
||||||
|
padding: 12px 18px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f1d1d;
|
||||||
|
background: #fee2e2;
|
||||||
|
border-left: 3px solid #dc2626;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Tooltip flottant === */
|
||||||
|
.tooltip {
|
||||||
|
position: fixed;
|
||||||
|
background: #1f2937;
|
||||||
|
color: white;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.5;
|
||||||
|
max-width: 400px;
|
||||||
|
z-index: 1000;
|
||||||
|
pointer-events: none;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Responsive === */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.topbar {
|
||||||
|
padding: 16px 20px;
|
||||||
|
}
|
||||||
|
.summary, #main-content {
|
||||||
|
margin: 20px 16px;
|
||||||
|
}
|
||||||
|
.tech-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
+50
@@ -0,0 +1,50 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Planning Techniciens — Vue claire</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>
|
||||||
|
<div class="subtitle" id="subtitle">Chargement…</div>
|
||||||
|
</div>
|
||||||
|
<div class="topbar-right">
|
||||||
|
<button id="btn-refresh" title="Recharger depuis la page EasyVista">
|
||||||
|
🔄 Actualiser
|
||||||
|
</button>
|
||||||
|
<button id="btn-preload" title="Pré-charger tous les détails d'interventions (22 requêtes)">
|
||||||
|
📥 Charger tous les détails
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div id="error-zone" class="error-zone hidden"></div>
|
||||||
|
|
||||||
|
<section id="summary" class="summary hidden">
|
||||||
|
<div class="summary-card summary-pompier">
|
||||||
|
<div class="summary-label">🚒 Pompier du jour</div>
|
||||||
|
<div class="summary-value" id="pompier-name">—</div>
|
||||||
|
</div>
|
||||||
|
<div class="summary-card summary-absents">
|
||||||
|
<div class="summary-label">❌ Absents</div>
|
||||||
|
<div class="summary-value" id="absents-list">—</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"></div>
|
||||||
|
|
||||||
|
<script src="viewer.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,681 @@
|
|||||||
|
// viewer.js — Logique de la vue claire
|
||||||
|
//
|
||||||
|
// É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()
|
||||||
|
|
||||||
|
// ==========================================================================
|
||||||
|
// 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"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
|
||||||
|
// ==========================================================================
|
||||||
|
// Init
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", async () => {
|
||||||
|
document.getElementById("btn-refresh").addEventListener("click", refresh);
|
||||||
|
document.getElementById("btn-preload").addEventListener("click", preloadAll);
|
||||||
|
await loadFromStorage();
|
||||||
|
});
|
||||||
|
|
||||||
|
async function loadFromStorage() {
|
||||||
|
const data = await chrome.storage.local.get([
|
||||||
|
"planningHtml", "planningUrl", "planningCapturedAt", "planningError"
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (data.planningError) {
|
||||||
|
showError(data.planningError);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.planningHtml) {
|
||||||
|
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."
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const parsed = parsePlanning(data.planningHtml, data.planningUrl);
|
||||||
|
render(parsed, data.planningCapturedAt);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
showError("Erreur lors du parsing du planning : " + err.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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."
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==========================================================================
|
||||||
|
// Parsing
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
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");
|
||||||
|
|
||||||
|
// --- 1. Extraire les techniciens depuis <div class="support_list" id="emp_XXXXX">
|
||||||
|
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 };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 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;
|
||||||
|
|
||||||
|
// 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];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 3. Extraire les liens vers les fiches détaillées depuis les AffBulle
|
||||||
|
// Les <a href="..."> 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. 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 <script>)
|
||||||
|
const bulleRegex = /AffBulle\(this,\s*'([^']+)'/g;
|
||||||
|
let bm;
|
||||||
|
while ((bm = bulleRegex.exec(html)) !== null) {
|
||||||
|
const raw = bm[1];
|
||||||
|
// Décoder : < > & &#xx; + \'XX hex (RTF-like)
|
||||||
|
let text = raw
|
||||||
|
.replace(/<BR>/gi, "\n")
|
||||||
|
.replace(/&/g, "&")
|
||||||
|
.replace(/</g, "<")
|
||||||
|
.replace(/>/g, ">");
|
||||||
|
// Trouver l'eventId dans ce texte : il commence par "HH:MM RÉFÉRENCE"
|
||||||
|
// On associe la bulle à l'eventId du lien <a> le plus proche
|
||||||
|
// Stratégie plus simple : chercher une réf S... ou I... dans le texte
|
||||||
|
const refMatch = /([SI]\d{6}_\d{5})/.exec(text);
|
||||||
|
if (refMatch) {
|
||||||
|
eventBulles[refMatch[1]] = text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 5. Calculer le jour cible = date la plus fréquente dans les events
|
||||||
|
const dateCounts = {};
|
||||||
|
for (const e of Object.values(events)) {
|
||||||
|
if (e.dateStart) {
|
||||||
|
dateCounts[e.dateStart] = (dateCounts[e.dateStart] || 0) + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let targetDate = null;
|
||||||
|
let maxCount = 0;
|
||||||
|
for (const [d, c] of Object.entries(dateCounts)) {
|
||||||
|
if (c > maxCount) { maxCount = c; targetDate = d; }
|
||||||
|
}
|
||||||
|
// Si on n'a rien, fallback sur aujourd'hui
|
||||||
|
if (!targetDate) {
|
||||||
|
const t = new Date();
|
||||||
|
targetDate = `${pad(t.getDate())}/${pad(t.getMonth()+1)}/${t.getFullYear()}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 6. Filtrer les événements actifs ce jour
|
||||||
|
const targetDateObj = parseFrDate(targetDate);
|
||||||
|
const eventsToday = [];
|
||||||
|
for (const e of Object.values(events)) {
|
||||||
|
if (!e.techId || !e.dateStart) continue;
|
||||||
|
const d1 = parseFrDate(e.dateStart);
|
||||||
|
const d2 = parseFrDate(e.dateEnd || e.dateStart);
|
||||||
|
if (d1 && d2 && targetDateObj >= d1 && targetDateObj <= d2) {
|
||||||
|
// Associer la bulle si on a trouvé la réf correspondante
|
||||||
|
const refMatch = /([SI]\d{6}_\d{5})/.exec(e.label || "");
|
||||||
|
if (refMatch) {
|
||||||
|
e.ref = refMatch[1];
|
||||||
|
e.bulleText = eventBulles[refMatch[1]];
|
||||||
|
}
|
||||||
|
e.detailUrl = eventLinks[e.eventId];
|
||||||
|
eventsToday.push(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 7. Détecter pompier et absents
|
||||||
|
let pompierId = null;
|
||||||
|
const absentIds = new Set();
|
||||||
|
for (const e of eventsToday) {
|
||||||
|
if (e.type !== "AL-Absence") continue;
|
||||||
|
const lbl = ((e.label || "") + " " + (e.title || "")).toLowerCase();
|
||||||
|
if (lbl.includes("pompier")) {
|
||||||
|
pompierId = e.techId;
|
||||||
|
} else {
|
||||||
|
absentIds.add(e.techId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Appliquer les règles fixes (Pillonel absent le vendredi)
|
||||||
|
const dayOfWeek = targetDateObj ? targetDateObj.getDay() : null;
|
||||||
|
const fixedAbsences = {}; // techId -> reason
|
||||||
|
for (const [tid, rule] of Object.entries(RULES)) {
|
||||||
|
if (rule.alwaysAbsentOn && dayOfWeek !== null && rule.alwaysAbsentOn.includes(dayOfWeek)) {
|
||||||
|
// On l'ajoute aux absents (si pas déjà là)
|
||||||
|
if (tid !== pompierId && techs[tid]) {
|
||||||
|
absentIds.add(tid);
|
||||||
|
fixedAbsences[tid] = rule.reason;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
techs,
|
||||||
|
eventsToday,
|
||||||
|
targetDate,
|
||||||
|
pompierId,
|
||||||
|
absentIds,
|
||||||
|
fixedAbsences
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function decodeText(s) {
|
||||||
|
if (!s) return s;
|
||||||
|
// Décodage des séquences RTF \'XX en caractères latin-1
|
||||||
|
// (rare dans un DOM vivant, mais présent si le HTML vient d'un fichier RTF)
|
||||||
|
return s.replace(/\\'([0-9a-fA-F]{2})/g, (_, hex) => {
|
||||||
|
return String.fromCharCode(parseInt(hex, 16));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseFrDate(s) {
|
||||||
|
if (!s) return null;
|
||||||
|
const m = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(s);
|
||||||
|
if (!m) return null;
|
||||||
|
return new Date(parseInt(m[3]), parseInt(m[2])-1, parseInt(m[1]));
|
||||||
|
}
|
||||||
|
|
||||||
|
function pad(n) { return String(n).padStart(2, "0"); }
|
||||||
|
|
||||||
|
// ==========================================================================
|
||||||
|
// Rendu
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
function render(data, capturedAt) {
|
||||||
|
const { techs, eventsToday, targetDate, pompierId, absentIds, fixedAbsences } = data;
|
||||||
|
|
||||||
|
// Topbar
|
||||||
|
document.getElementById("display-date").textContent = formatFrDate(targetDate);
|
||||||
|
const ago = capturedAt ? ` (capturé il y a ${formatAgo(Date.now() - capturedAt)})` : "";
|
||||||
|
document.getElementById("subtitle").textContent =
|
||||||
|
`${Object.keys(techs).length} techniciens · ${eventsToday.length} événements${ago}`;
|
||||||
|
|
||||||
|
// Summary cards
|
||||||
|
const interventions = eventsToday.filter(e => e.type === "AL-Intervention");
|
||||||
|
document.getElementById("summary").classList.remove("hidden");
|
||||||
|
document.getElementById("pompier-name").textContent =
|
||||||
|
pompierId ? techs[pompierId]?.name || "?" : "(aucun)";
|
||||||
|
document.getElementById("absents-list").innerHTML = [...absentIds]
|
||||||
|
.map(id => techs[id]?.name || id)
|
||||||
|
.map(n => `<div>${escape(n)}</div>`).join("") || '<span class="muted">(aucun)</span>';
|
||||||
|
document.getElementById("stats-interv").innerHTML =
|
||||||
|
`<span>${interventions.length}</span> <span class="muted">sur ${eventsToday.length} événements</span>`;
|
||||||
|
|
||||||
|
// Grid des techniciens
|
||||||
|
const main = document.getElementById("main-content");
|
||||||
|
main.innerHTML = "";
|
||||||
|
const grid = document.createElement("div");
|
||||||
|
grid.className = "tech-grid";
|
||||||
|
|
||||||
|
// Ordonner les techs : pompier d'abord, puis actifs par nb d'interv desc, puis absents
|
||||||
|
const sortedIds = Object.keys(techs).sort((a, b) => {
|
||||||
|
if (a === pompierId) return -1;
|
||||||
|
if (b === pompierId) return 1;
|
||||||
|
const aAbs = absentIds.has(a);
|
||||||
|
const bAbs = absentIds.has(b);
|
||||||
|
if (aAbs !== bAbs) return aAbs ? 1 : -1;
|
||||||
|
const aInt = eventsToday.filter(e => e.techId === a && e.type === "AL-Intervention").length;
|
||||||
|
const bInt = eventsToday.filter(e => e.techId === b && e.type === "AL-Intervention").length;
|
||||||
|
return bInt - aInt;
|
||||||
|
});
|
||||||
|
|
||||||
|
for (const tid of sortedIds) {
|
||||||
|
const tech = techs[tid];
|
||||||
|
const techEvents = eventsToday.filter(e => e.techId === tid);
|
||||||
|
const card = renderTechCard(tech, techEvents, tid === pompierId, absentIds.has(tid), fixedAbsences[tid]);
|
||||||
|
grid.appendChild(card);
|
||||||
|
}
|
||||||
|
|
||||||
|
main.appendChild(grid);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTechCard(tech, events, isPompier, isAbsent, fixedAbsenceReason) {
|
||||||
|
const card = document.createElement("div");
|
||||||
|
card.className = "tech-card";
|
||||||
|
if (isPompier) card.classList.add("tech-pompier");
|
||||||
|
if (isAbsent && !isPompier) card.classList.add("tech-absent");
|
||||||
|
|
||||||
|
// Header
|
||||||
|
const header = document.createElement("div");
|
||||||
|
header.className = "tech-header";
|
||||||
|
const name = document.createElement("div");
|
||||||
|
name.className = "tech-name";
|
||||||
|
name.textContent = tech.name;
|
||||||
|
header.appendChild(name);
|
||||||
|
|
||||||
|
const badges = document.createElement("div");
|
||||||
|
if (isPompier) {
|
||||||
|
badges.innerHTML += '<span class="tech-badge badge-pompier">🚒 Pompier</span> ';
|
||||||
|
}
|
||||||
|
if (isAbsent && !isPompier) {
|
||||||
|
badges.innerHTML += '<span class="tech-badge badge-absent">❌ Absent</span> ';
|
||||||
|
}
|
||||||
|
const interv = events.filter(e => e.type === "AL-Intervention");
|
||||||
|
if (interv.length > 0) {
|
||||||
|
badges.innerHTML += `<span class="tech-badge badge-count">${interv.length} interv.</span>`;
|
||||||
|
}
|
||||||
|
header.appendChild(badges);
|
||||||
|
card.appendChild(header);
|
||||||
|
|
||||||
|
// Pompier info (bandeau)
|
||||||
|
if (isPompier) {
|
||||||
|
const pompierEvent = events.find(e =>
|
||||||
|
e.type === "AL-Absence" &&
|
||||||
|
(((e.label || "") + " " + (e.title || "")).toLowerCase().includes("pompier"))
|
||||||
|
);
|
||||||
|
if (pompierEvent) {
|
||||||
|
const info = document.createElement("div");
|
||||||
|
info.className = "pompier-info";
|
||||||
|
const period = pompierEvent.dateStart && pompierEvent.dateEnd && pompierEvent.dateStart !== pompierEvent.dateEnd
|
||||||
|
? `Astreinte du ${pompierEvent.dateStart} au ${pompierEvent.dateEnd}`
|
||||||
|
: `Astreinte ${pompierEvent.timeStart || ""}-${pompierEvent.timeEnd || ""}`;
|
||||||
|
info.textContent = "🚒 " + period;
|
||||||
|
card.appendChild(info);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Absence info (bandeau)
|
||||||
|
if (isAbsent && !isPompier) {
|
||||||
|
const absenceEvent = events.find(e => e.type === "AL-Absence");
|
||||||
|
const info = document.createElement("div");
|
||||||
|
info.className = "absence-info";
|
||||||
|
if (fixedAbsenceReason) {
|
||||||
|
info.textContent = "📌 " + fixedAbsenceReason;
|
||||||
|
} else if (absenceEvent) {
|
||||||
|
// On n'affiche pas le motif précis (congé/maladie) - juste "Absent"
|
||||||
|
const period = absenceEvent.dateStart && absenceEvent.dateEnd && absenceEvent.dateStart !== absenceEvent.dateEnd
|
||||||
|
? `Absent du ${absenceEvent.dateStart} au ${absenceEvent.dateEnd}`
|
||||||
|
: `Absent`;
|
||||||
|
info.textContent = period;
|
||||||
|
} else {
|
||||||
|
info.textContent = "Absent";
|
||||||
|
}
|
||||||
|
card.appendChild(info);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Interventions list
|
||||||
|
const list = document.createElement("div");
|
||||||
|
list.className = "tech-interventions";
|
||||||
|
|
||||||
|
if (interv.length === 0 && !isAbsent && !isPompier) {
|
||||||
|
list.innerHTML = '<div class="tech-empty">Aucune intervention planifiée</div>';
|
||||||
|
} else if (interv.length === 0 && isPompier) {
|
||||||
|
list.innerHTML = '<div class="tech-empty">Pompier sans intervention planifiée</div>';
|
||||||
|
} else {
|
||||||
|
// Trier par heure de début
|
||||||
|
interv.sort((a, b) => (a.timeStart || "").localeCompare(b.timeStart || ""));
|
||||||
|
for (const e of interv) {
|
||||||
|
list.appendChild(renderInterventionItem(e));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
card.appendChild(list);
|
||||||
|
|
||||||
|
return card;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderInterventionItem(e) {
|
||||||
|
const item = document.createElement("div");
|
||||||
|
item.className = "intervention";
|
||||||
|
item.dataset.eventId = e.eventId;
|
||||||
|
|
||||||
|
// Header : heure + ref
|
||||||
|
const header = document.createElement("div");
|
||||||
|
header.className = "interv-header";
|
||||||
|
const time = document.createElement("span");
|
||||||
|
time.className = "interv-time";
|
||||||
|
time.textContent = `${e.timeStart || "?"} – ${e.timeEnd || "?"}`;
|
||||||
|
const ref = document.createElement("span");
|
||||||
|
ref.className = "interv-ref";
|
||||||
|
ref.textContent = e.ref || "";
|
||||||
|
header.appendChild(time);
|
||||||
|
header.appendChild(ref);
|
||||||
|
item.appendChild(header);
|
||||||
|
|
||||||
|
// Summary depuis la bulle rapide (contact + lieu si dispo)
|
||||||
|
if (e.bulleText) {
|
||||||
|
const lines = e.bulleText.split("\n").map(l => l.trim()).filter(Boolean);
|
||||||
|
// Format bulle : ligne 0 = "HH:MM ref (type)", 1 = AL-Intervention, 2 = contact, 3 = lieu, 4 = catégorie
|
||||||
|
const contact = lines[2] || "";
|
||||||
|
const lieu = lines[3] || "";
|
||||||
|
const summary = document.createElement("div");
|
||||||
|
summary.className = "interv-summary";
|
||||||
|
if (contact) {
|
||||||
|
const c = document.createElement("div");
|
||||||
|
c.className = "interv-contact";
|
||||||
|
c.textContent = "👤 " + contact;
|
||||||
|
summary.appendChild(c);
|
||||||
|
}
|
||||||
|
if (lieu) {
|
||||||
|
const l = document.createElement("div");
|
||||||
|
l.className = "interv-location";
|
||||||
|
l.textContent = "📍 " + lieu;
|
||||||
|
summary.appendChild(l);
|
||||||
|
}
|
||||||
|
item.appendChild(summary);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Zone détails (cachée au départ, s'affiche au clic)
|
||||||
|
const details = document.createElement("div");
|
||||||
|
details.className = "interv-details hidden";
|
||||||
|
item.appendChild(details);
|
||||||
|
|
||||||
|
// Click pour déplier/replier
|
||||||
|
item.addEventListener("click", async (ev) => {
|
||||||
|
if (ev.target.tagName === "A") return; // ne pas intercepter les liens
|
||||||
|
if (!details.classList.contains("hidden")) {
|
||||||
|
details.classList.add("hidden");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
details.classList.remove("hidden");
|
||||||
|
await loadIntervDetails(e, details);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Tooltip au survol (quand détails pas chargés : affiche la bulle)
|
||||||
|
item.addEventListener("mouseenter", (ev) => {
|
||||||
|
if (!details.classList.contains("hidden")) return;
|
||||||
|
const cached = detailsCache.get(e.eventId);
|
||||||
|
const text = cached || e.bulleText || "(pas d'aperçu)";
|
||||||
|
showTooltip(ev, text);
|
||||||
|
});
|
||||||
|
item.addEventListener("mousemove", moveTooltip);
|
||||||
|
item.addEventListener("mouseleave", hideTooltip);
|
||||||
|
|
||||||
|
return item;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadIntervDetails(event, container) {
|
||||||
|
if (detailsCache.has(event.eventId)) {
|
||||||
|
renderDetails(container, detailsCache.get(event.eventId), event);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (detailsPromises.has(event.eventId)) {
|
||||||
|
container.classList.add("loading");
|
||||||
|
container.textContent = "Chargement en cours…";
|
||||||
|
const text = await detailsPromises.get(event.eventId);
|
||||||
|
renderDetails(container, text, event);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.classList.add("loading");
|
||||||
|
container.textContent = "Chargement de la fiche détaillée…";
|
||||||
|
|
||||||
|
const promise = fetchInterventionDetails(event.detailUrl);
|
||||||
|
detailsPromises.set(event.eventId, promise);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const text = await promise;
|
||||||
|
detailsCache.set(event.eventId, text);
|
||||||
|
renderDetails(container, text, event);
|
||||||
|
} catch (err) {
|
||||||
|
container.classList.add("error");
|
||||||
|
container.textContent = "Erreur : " + err.message;
|
||||||
|
} finally {
|
||||||
|
detailsPromises.delete(event.eventId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderDetails(container, text, event) {
|
||||||
|
container.classList.remove("loading", "error");
|
||||||
|
container.textContent = "";
|
||||||
|
const pre = document.createElement("div");
|
||||||
|
pre.style.whiteSpace = "pre-wrap";
|
||||||
|
pre.textContent = text || "(pas de description disponible)";
|
||||||
|
container.appendChild(pre);
|
||||||
|
|
||||||
|
if (event.detailUrl) {
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = event.detailUrl;
|
||||||
|
link.target = "_blank";
|
||||||
|
link.rel = "noopener";
|
||||||
|
link.className = "interv-open-link";
|
||||||
|
link.textContent = "🔍 Ouvrir la fiche complète dans EasyVista";
|
||||||
|
container.appendChild(link);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchInterventionDetails(url) {
|
||||||
|
if (!url) throw new Error("Lien de la fiche introuvable");
|
||||||
|
|
||||||
|
// Requête avec les cookies de session de l'utilisateur
|
||||||
|
const resp = await fetch(url, { credentials: "include" });
|
||||||
|
if (!resp.ok) {
|
||||||
|
throw new Error(`HTTP ${resp.status} en accédant à la fiche`);
|
||||||
|
}
|
||||||
|
const html = await resp.text();
|
||||||
|
|
||||||
|
// Extraire la description : chercher la zone Froala Editor
|
||||||
|
// Elle contient un <div class="fr-element fr-view ..."> ou, si doublement encodé,
|
||||||
|
// <div class="fr-element fr-view ...">
|
||||||
|
return extractDescription(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
function extractDescription(html) {
|
||||||
|
// Essayer la forme directe
|
||||||
|
let m = /class="fr-element fr-view[^"]*"[^>]*>([\s\S]*?)<\/div>/.exec(html);
|
||||||
|
if (m) {
|
||||||
|
return cleanDescription(m[1]);
|
||||||
|
}
|
||||||
|
// Essayer la forme doublement encodée (Copy outerHTML sur Angular)
|
||||||
|
m = /class="fr-element fr-view[^"]*"[^&]*>([\s\S]*?)<\/div>/.exec(html);
|
||||||
|
if (m) {
|
||||||
|
let raw = m[1];
|
||||||
|
// Décoder les entités HTML
|
||||||
|
raw = raw
|
||||||
|
.replace(/</g, "<")
|
||||||
|
.replace(/>/g, ">")
|
||||||
|
.replace(/&/g, "&")
|
||||||
|
.replace(/"/g, '"')
|
||||||
|
.replace(/'/g, "'");
|
||||||
|
return cleanDescription(raw);
|
||||||
|
}
|
||||||
|
// Dernier recours : chercher autour du mot "Description"
|
||||||
|
return "(Description introuvable dans la fiche — il se peut que la structure ait changé)";
|
||||||
|
}
|
||||||
|
|
||||||
|
function cleanDescription(raw) {
|
||||||
|
// Remplacer <br> par \n
|
||||||
|
let text = raw.replace(/<br\s*\/?>/gi, "\n");
|
||||||
|
// Enlever toutes les autres balises
|
||||||
|
text = text.replace(/<[^>]+>/g, "");
|
||||||
|
// Décoder les entités HTML résiduelles
|
||||||
|
text = text
|
||||||
|
.replace(/ /g, " ")
|
||||||
|
.replace(/&/g, "&")
|
||||||
|
.replace(/</g, "<")
|
||||||
|
.replace(/>/g, ">")
|
||||||
|
.replace(/"/g, '"')
|
||||||
|
.replace(/'/g, "'");
|
||||||
|
// Enlever les espaces multiples mais préserver les retours à la ligne
|
||||||
|
text = text.split("\n").map(l => l.replace(/\s+/g, " ").trim()).join("\n");
|
||||||
|
return text.trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==========================================================================
|
||||||
|
// Pré-chargement (bouton "Charger tous les détails")
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
async function preloadAll() {
|
||||||
|
const items = document.querySelectorAll(".intervention");
|
||||||
|
const btn = document.getElementById("btn-preload");
|
||||||
|
btn.disabled = true;
|
||||||
|
const total = items.length;
|
||||||
|
let done = 0;
|
||||||
|
|
||||||
|
// On fait ça en séquentiel avec un petit délai pour être gentil avec le serveur
|
||||||
|
for (const item of items) {
|
||||||
|
const eventId = item.dataset.eventId;
|
||||||
|
if (detailsCache.has(eventId)) { done++; continue; }
|
||||||
|
|
||||||
|
// Retrouver l'événement correspondant (via data-attribute on n'a que l'eventId)
|
||||||
|
// On fetch directement depuis le lien présent dans la page d'origine
|
||||||
|
// Mais on ne l'a pas en direct ici — on ré-utilise la structure via item interne
|
||||||
|
// Pour simplifier : on clique programmatiquement pour déclencher loadIntervDetails
|
||||||
|
// → mais on veut pas afficher. Donc on récupère via une autre voie.
|
||||||
|
// Solution : on a stocké l'URL dans un data-attribute au rendu ? Non.
|
||||||
|
// Plus simple : déclencher l'expansion puis la replier.
|
||||||
|
item.click(); // déplie → déclenche le fetch
|
||||||
|
await new Promise(r => setTimeout(r, 250)); // 250ms entre chaque
|
||||||
|
done++;
|
||||||
|
btn.textContent = `📥 Chargement ${done}/${total}…`;
|
||||||
|
}
|
||||||
|
|
||||||
|
btn.textContent = "✅ Tout chargé";
|
||||||
|
setTimeout(() => {
|
||||||
|
btn.disabled = false;
|
||||||
|
btn.textContent = "📥 Charger tous les détails";
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==========================================================================
|
||||||
|
// Tooltip
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
function showTooltip(ev, text) {
|
||||||
|
const tip = document.getElementById("tooltip");
|
||||||
|
tip.textContent = text;
|
||||||
|
tip.classList.remove("hidden");
|
||||||
|
moveTooltip(ev);
|
||||||
|
}
|
||||||
|
|
||||||
|
function moveTooltip(ev) {
|
||||||
|
const tip = document.getElementById("tooltip");
|
||||||
|
if (tip.classList.contains("hidden")) return;
|
||||||
|
let x = ev.clientX + 16;
|
||||||
|
let y = ev.clientY + 16;
|
||||||
|
const rect = tip.getBoundingClientRect();
|
||||||
|
if (x + rect.width > window.innerWidth - 10) x = ev.clientX - rect.width - 16;
|
||||||
|
if (y + rect.height > window.innerHeight - 10) y = ev.clientY - rect.height - 16;
|
||||||
|
tip.style.left = x + "px";
|
||||||
|
tip.style.top = y + "px";
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideTooltip() {
|
||||||
|
document.getElementById("tooltip").classList.add("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==========================================================================
|
||||||
|
// Utilitaires
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
function showError(msg) {
|
||||||
|
const z = document.getElementById("error-zone");
|
||||||
|
z.textContent = msg;
|
||||||
|
z.classList.remove("hidden");
|
||||||
|
document.getElementById("main-content").innerHTML = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatFrDate(dateStr) {
|
||||||
|
// "17/04/2026" -> "vendredi 17 avril 2026"
|
||||||
|
const d = parseFrDate(dateStr);
|
||||||
|
if (!d) return dateStr;
|
||||||
|
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"];
|
||||||
|
return `${jours[d.getDay()]} ${d.getDate()} ${mois[d.getMonth()]} ${d.getFullYear()}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatAgo(ms) {
|
||||||
|
const s = Math.floor(ms / 1000);
|
||||||
|
if (s < 60) return `${s}s`;
|
||||||
|
const m = Math.floor(s / 60);
|
||||||
|
if (m < 60) return `${m} min`;
|
||||||
|
const h = Math.floor(m / 60);
|
||||||
|
return `${h}h${m % 60 ? " " + (m % 60) + "min" : ""}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function escape(s) {
|
||||||
|
return String(s).replace(/[&<>"']/g, c => ({
|
||||||
|
"&": "&", "<": "<", ">": ">", '"': """, "'": "'"
|
||||||
|
}[c]));
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user