| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>BuSCA - Veille Sanitaire 2026</title> |
| |
| |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> |
| |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> |
|
|
| <style> |
| :root { |
| --primary: #1E88E5; --dark: #2E3B4E; --light: #f8f9fa; |
| --white: #fff; --grey: #e0e0e0; --success: #28a745; --danger: #dc3545; |
| } |
| * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; } |
| body { background: var(--light); color: #333; display: flex; height: 100vh; overflow: hidden; } |
| |
| |
| aside { |
| width: 280px; background: var(--dark); color: #ccc; |
| display: flex; flex-direction: column; border-right: 1px solid #444; |
| flex-shrink: 0; |
| } |
| .brand { padding: 15px; border-bottom: 1px solid #444; display: flex; align-items: center; gap: 10px; color: white; } |
| .brand img { width: 35px; border-radius: 5px; } |
| |
| .controls { padding: 15px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; } |
| |
| button, .btn-upload { |
| background: #3a4a60; border: none; color: white; padding: 10px; border-radius: 5px; |
| cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 0.9em; |
| transition: 0.2s; text-decoration: none; justify-content: flex-start; |
| } |
| button:hover, .btn-upload:hover { background: #4a5a70; transform: translateX(3px); } |
| button:disabled { opacity: 0.5; cursor: not-allowed; } |
| |
| .btn-primary { background: var(--primary); } |
| .btn-success { background: var(--success); } |
| .btn-warning { background: #ffc107; color: #333; animation: pulse 2s infinite; } |
| |
| @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } } |
| |
| |
| .filter-box { margin-top: 15px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 5px; } |
| .filter-box label { display: block; margin-bottom: 5px; font-size: 0.85em; color: #aaa; } |
| textarea { |
| width: 100%; background: #222; border: 1px solid #555; color: white; padding: 8px; |
| border-radius: 4px; resize: vertical; min-height: 80px; |
| } |
| textarea:focus { outline: 1px solid var(--primary); } |
| |
| |
| main { flex: 1; display: flex; flex-direction: column; overflow: hidden; } |
| |
| header { |
| height: 60px; background: white; border-bottom: 1px solid var(--grey); |
| display: flex; align-items: center; padding: 0 20px; font-size: 1.2em; font-weight: 500; |
| } |
| |
| .scroll-area { flex: 1; overflow-y: auto; padding: 20px; } |
| |
| |
| .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; } |
| .stat-item { background: white; padding: 15px; border-radius: 8px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-top: 4px solid var(--primary); } |
| .stat-val { font-size: 1.8em; font-weight: bold; color: var(--dark); } |
| .stat-label { font-size: 0.8em; color: #666; } |
| |
| |
| .card { background: white; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); overflow: hidden; } |
| .card-header { |
| padding: 15px; background: linear-gradient(to right, #1E88E5, #42A5F5); color: white; |
| cursor: pointer; display: flex; justify-content: space-between; align-items: center; |
| } |
| .card-body { padding: 20px; display: none; border-top: 1px solid #eee; } |
| .card-body.open { display: block; animation: fadeIn 0.3s; } |
| @keyframes fadeIn { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } } |
| |
| .tags { margin-bottom: 15px; } |
| .tag { padding: 3px 8px; border-radius: 4px; font-size: 0.85em; margin-right: 5px; display: inline-block; } |
| .tag-danger { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; } |
| .tag-matrix { background: #e3f2fd; color: #1565C0; border: 1px solid #bbdefb; } |
| |
| |
| .loader { text-align: center; padding: 50px; color: #666; } |
| .msg-box { padding: 15px; border-radius: 5px; margin-bottom: 20px; text-align: center; } |
| .msg-error { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <aside> |
| <div class="brand"> |
| <i class="fas fa-search-plus"></i> <span>BuSCA 2026</span> |
| </div> |
| |
| <div class="controls"> |
| |
| <button id="btnWeb" class="btn-primary"> |
| <i class="fas fa-cloud-download-alt"></i> Web Auto (Proxy) |
| </button> |
| |
| |
| <label for="inputFile" id="btnManual" class="btn-upload"> |
| <i class="fas fa-folder-open"></i> Ouvrir Fichier Excel |
| </label> |
| <input type="file" id="inputFile" accept=".xlsx, .xls" style="display:none;"> |
|
|
| |
| <div class="filter-box"> |
| <label><i class="fas fa-filter"></i> Filtrer par mots-clés :</label> |
| <textarea id="txtFilter" placeholder="ex: Salmonella, Lait... (séparés par virgule)"></textarea> |
| <button id="btnApply" class="btn-success" style="width:100%; margin-top:10px; justify-content:center;"> |
| <i class="fas fa-check"></i> Appliquer |
| </button> |
| <button id="btnClear" style="width:100%; margin-top:5px; justify-content:center; background: #555;"> |
| <i class="fas fa-eraser"></i> Effacer |
| </button> |
| </div> |
|
|
| <div style="margin-top:auto; border-top:1px solid #444; padding-top:10px;"> |
| <button id="btnExport" style="width:100%"><i class="fas fa-file-csv"></i> Exporter CSV</button> |
| </div> |
| </div> |
| </aside> |
|
|
| |
| <main> |
| <header> |
| <div id="headerTitle">Veille Sanitaire</div> |
| </header> |
|
|
| <div class="scroll-area"> |
| |
| <div class="stats" id="statsArea"></div> |
| |
| |
| <div id="resultsArea"> |
| <div class="loader"> |
| <i class="fas fa-info-circle"></i><br><br> |
| Chargez les données via le bouton bleu (Web) ou gris (Fichier). |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <script> |
| // --- VARIABLES GLOBALES --- |
| let allData = []; // Toutes les données chargées |
| let filteredData = []; // Données affichées après filtre |
| |
| // URLS |
| const URL_SOURCE = 'https://www.plateforme-sca.fr/media/398/download'; |
| const URL_PROXY = `https://api.codetabs.com/v1/proxy?quest=${encodeURIComponent(URL_SOURCE)}`; |
| |
| // --- INIT --- |
| document.addEventListener('DOMContentLoaded', () => { |
| setupEvents(); |
| // On tente le chargement auto au démarrage |
| fetchDataWeb(); |
| }); |
| |
| // --- 1. CHARGEMENT DES DONNÉES --- |
| |
| // Méthode Web (Proxy) |
| async function fetchDataWeb() { |
| showLoader("Connexion au serveur SCA..."); |
| try { |
| const response = await fetch(URL_PROXY); |
| if (!response.ok) throw new Error("Erreur Proxy"); |
| const buffer = await response.arrayBuffer(); |
| parseExcel(buffer); |
| } catch (e) { |
| console.warn(e); |
| showError(); // Affiche le message pour passer en manuel |
| } |
| } |
| |
| // Méthode Manuelle (Fichier Local) |
| function handleFile(e) { |
| const file = e.target.files[0]; |
| if (!file) return; |
| |
| showLoader("Lecture du fichier..."); |
| const reader = new FileReader(); |
| reader.onload = (evt) => parseExcel(evt.target.result); |
| reader.readAsArrayBuffer(file); |
| e.target.value = ''; // Reset input |
| } |
| |
| // Lecture Excel commune |
| function parseExcel(buffer) { |
| try { |
| const wb = XLSX.read(buffer, {type: 'array'}); |
| const ws = wb.Sheets[wb.SheetNames[0]]; |
| const json = XLSX.utils.sheet_to_json(ws); |
| |
| if (!json || json.length === 0) throw new Error("Fichier vide"); |
| |
| // Mapping des colonnes |
| allData = json.map(row => ({ |
| buscA: parseInt(row['BuSCA'] || 0), |
| titre: String(row['Titre'] || '').trim(), |
| texte: String(row['Texte'] || '').trim(), |
| matrice: String(row['Matrices'] || row['Matrice'] || 'Non spécifié').trim(), |
| danger: String(row['Dangers'] || row['Danger'] || 'Non spécifié').trim(), |
| lien1: row['Lien'] || '', |
| lien2: row['Lien2'] || '' |
| })).filter(x => x.buscA > 0 && x.titre !== ""); |
| |
| // Initialisation : Tout afficher au début |
| filteredData = [...allData]; |
| |
| // Réinitialiser les filtres visuels |
| document.getElementById('txtFilter').value = ''; |
| |
| // Mettre à jour l'interface |
| document.getElementById('btnManual').classList.remove('btn-warning'); // Enlever l'alerte jaune |
| updateUI(); |
| alert(`${allData.length} bulletins chargés avec succès !`); |
| |
| } catch (err) { |
| console.error(err); |
| document.getElementById('resultsArea').innerHTML = `<div class="msg-box msg-error">Erreur de lecture du fichier Excel.<br>Vérifiez le format.</div>`; |
| } |
| } |
| |
| // --- 2. GESTION DES FILTRES --- |
| |
| function applyFilters() { |
| const input = document.getElementById('txtFilter').value; |
| |
| // On découpe par virgule, on enlève les espaces, on met en minuscule |
| const keywords = input.toLowerCase().split(',').map(k => k.trim()).filter(k => k !== ''); |
| |
| if (keywords.length === 0) { |
| // Si vide, on remet tout |
| filteredData = [...allData]; |
| } else { |
| // Sinon on filtre |
| filteredData = allData.filter(item => { |
| // On crée une grande chaîne de texte avec tout le contenu de l'item |
| const fullText = (item.titre + " " + item.texte + " " + item.matrice + " " + item.danger).toLowerCase(); |
| |
| // On vérifie que TOUS les mots clés sont présents |
| return keywords.every(key => fullText.includes(key)); |
| }); |
| } |
| updateUI(); |
| } |
| |
| // --- 3. AFFICHAGE (RENDERING) --- |
| |
| function updateUI() { |
| const container = document.getElementById('resultsArea'); |
| const stats = document.getElementById('statsArea'); |
| |
| // Mise à jour des Stats |
| const nbBulletins = filteredData.length; |
| const nbMatrices = new Set(filteredData.map(i => i.matrice)).size; |
| const nbDangers = new Set(filteredData.map(i => i.danger)).size; |
| |
| stats.innerHTML = ` |
| <div class="stat-item"><div class="stat-val">${nbBulletins}</div><div class="stat-label">Bulletins</div></div> |
| <div class="stat-item" style="border-color:#17a2b8"><div class="stat-val">${nbMatrices}</div><div class="stat-label">Matrices</div></div> |
| <div class="stat-item" style="border-color:#ffc107"><div class="stat-val">${nbDangers}</div><div class="stat-label">Dangers</div></div> |
| `; |
| |
| // Affichage Liste |
| if (filteredData.length === 0) { |
| container.innerHTML = `<div class="loader">Aucun résultat trouvé pour cette recherche.</div>`; |
| return; |
| } |
| |
| // Tri par N° BuSCA décroissant |
| const sorted = filteredData.sort((a,b) => b.buscA - a.buscA); |
| |
| container.innerHTML = sorted.map(item => ` |
| <article class="card"> |
| <div class="card-header" onclick="this.nextElementSibling.classList.toggle('open')"> |
| <div style="font-weight:bold;">${item.titre}</div> |
| <div style="font-size:0.8em; background:rgba(255,255,255,0.2); padding:2px 6px; border-radius:4px;">N° ${item.buscA}</div> |
| </div> |
| <div class="card-body"> |
| <div class="tags"> |
| <span class="tag tag-matrix"><i class="fas fa-vial"></i> ${item.matrice}</span> |
| <span class="tag tag-danger"><i class="fas fa-biohazard"></i> ${item.danger}</span> |
| </div> |
| <p style="line-height:1.6; color:#444; margin-bottom:15px;">${item.texte.replace(/\n/g, '<br>')}</p> |
| <div style="border-top:1px dashed #ddd; padding-top:10px;"> |
| ${item.lien1 ? `<a href="${item.lien1}" target="_blank" style="color:var(--primary); font-weight:bold; margin-right:15px; text-decoration:none;">🔗 Lien Principal</a>` : ''} |
| ${item.lien2 ? `<a href="${item.lien2}" target="_blank" style="color:#555; text-decoration:none;">🔗 Lien Secondaire</a>` : ''} |
| </div> |
| </div> |
| </article> |
| `).join(''); |
| } |
| |
| // --- 4. UTILITAIRES --- |
| |
| function setupEvents() { |
| document.getElementById('btnWeb').onclick = fetchDataWeb; |
| document.getElementById('inputFile').onchange = handleFile; |
| |
| // Filtres |
| document.getElementById('btnApply').onclick = applyFilters; |
| document.getElementById('btnClear').onclick = () => { |
| document.getElementById('txtFilter').value = ''; |
| applyFilters(); |
| }; |
| |
| // Touche Entrée dans la zone de texte |
| document.getElementById('txtFilter').addEventListener('keyup', (e) => { |
| if (e.key === 'Enter') applyFilters(); |
| }); |
| |
| // Export |
| document.getElementById('btnExport').onclick = () => { |
| if(!filteredData.length) return alert("Rien à exporter"); |
| const csv = ["BuSCA,Titre,Matrice,Danger,Texte"].concat( |
| filteredData.map(d => `${d.buscA},"${d.titre}","${d.matrice}","${d.danger}","${d.texte.replace(/"/g,'""')}"`) |
| ).join('\n'); |
| const a = document.createElement('a'); |
| a.href = URL.createObjectURL(new Blob([csv], {type:'text/csv'})); |
| a.download = 'busca_export.csv'; |
| a.click(); |
| }; |
| } |
| |
| function showLoader(msg) { |
| document.getElementById('resultsArea').innerHTML = `<div class="loader"><i class="fas fa-circle-notch fa-spin fa-2x"></i><br><br>${msg}</div>`; |
| } |
| |
| function showError() { |
| document.getElementById('btnManual').classList.add('btn-warning'); |
| document.getElementById('resultsArea').innerHTML = ` |
| <div class="msg-box msg-error"> |
| <strong>Accès Web Bloqué (Sécurité Serveur)</strong><br><br> |
| Le serveur SCA refuse l'accès automatique.<br> |
| 1. <a href="${URL_SOURCE}" target="_blank">Téléchargez le fichier Excel ici</a><br> |
| 2. Cliquez sur le bouton jaune <strong>"Ouvrir Fichier Excel"</strong> à gauche. |
| </div> |
| `; |
| } |
| </script> |
| </body> |
| </html> |
