spb/qc-election

1<!DOCTYPE html>2<!--3  QC Élection Forecast — Plateforme de prévision électorale du Québec 20264  Auteur : Simon-Pierre Boucher5  Contact : contact@spboucher.ai6  https://www.qc-election.com7-->8<html lang="fr">9<head>10<script>document.documentElement.dataset.theme=localStorage.getItem("qce-theme")||"dark";</script>11<meta charset="utf-8">12<meta name="viewport" content="width=device-width, initial-scale=1">13<title>Administration — QC Élection Forecast</title>14<link rel="stylesheet" href="/assets/style.css">15</head>16<body>17<header class="site"></header>18<div class="wrap">19  <div class="hero">20    <h1>Administration</h1>21    <p class="sub">Gestion des données, du pipeline et des runs du modèle.</p>22  </div>2324  <div class="card" style="max-width:520px">25    <h3>Authentification</h3>26    <div class="filters">27      <input type="password" id="token" placeholder="Jeton d'administration" style="flex:1">28      <button class="primary" id="login">Connecter</button>29    </div>30    <p class="note" id="auth-status">Non connecté.</p>31  </div>3233  <div id="panel" style="display:none">34    <h2 class="section">Actions</h2>35    <div class="filters">36      <button id="act-refresh">Rafraîchir les données + relancer le forecast</button>37      <button id="act-forecast">Relancer le forecast seul</button>38      <button id="act-backtest">Relancer le backtest 2022</button>39      <span id="act-status" style="color:var(--muted)"></span>40    </div>4142    <div class="grid two">43      <div class="card">44        <h3>Ajouter un sondage</h3>45        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px">46          <input id="np-pollster" type="text" placeholder="Maison (ex. Léger)">47          <input id="np-end" type="date" title="Fin de terrain">48          <input id="np-n" type="number" placeholder="Taille n">49          <select id="np-mode"><option value="web">web</option><option value="phone">téléphone</option>50            <option value="ivr">IVR</option><option value="sms">SMS</option>51            <option value="mixed">mixte</option><option value="unknown">inconnu</option></select>52          <input id="np-url" type="text" placeholder="URL source" style="grid-column:1/3">53        </div>54        <div id="np-shares" style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px"></div>55        <div style="margin-top:12px"><button class="primary" id="np-save">Enregistrer</button>56          <span id="np-status" style="color:var(--muted);font-size:.85rem"></span></div>57      </div>58      <div class="card">59        <h3>Exclure / réintégrer un sondage</h3>60        <div class="filters">61          <input id="ex-id" type="number" placeholder="ID sondage" style="width:110px">62          <input id="ex-reason" type="text" placeholder="Raison" style="flex:1">63          <button id="ex-do">Exclure</button>64          <button id="ex-undo">Réintégrer</button>65        </div>66        <p class="note">Les ID sont visibles via l'API <code>/api/polls</code>.</p>67        <h3 style="margin-top:18px">Sources de données</h3>68        <table class="data" id="sources"></table>69      </div>70    </div>7172    <h2 class="section">Derniers runs du modèle</h2>73    <div class="card" style="overflow-x:auto"><table class="data" id="runs"></table></div>7475    <h2 class="section">Journal du pipeline</h2>76    <div class="card" style="overflow-x:auto"><table class="data" id="logs"></table></div>77  </div>78</div>79<footer class="site"></footer>8081<script src="/assets/app.js"></script>82<script>83(async () => {84  const meta = await initShell("/admin");85  const parties = Object.keys(meta.parties);86  document.getElementById("np-shares").innerHTML = parties.map(p =>87    `<label style="font-size:.8rem;color:var(--muted)">${p}88     <input id="np-${p}" type="number" step="0.1" min="0" max="70" style="width:100%"></label>`).join("");8990  let TOKEN = sessionStorage.getItem("qce-admin") || "";91  const H = () => ({ "Authorization": `Bearer ${TOKEN}`, "Content-Type": "application/json" });9293  async function connect() {94    try {95      await getJSON(`${API}/admin/runs?limit=1`, { headers: H() });96      document.getElementById("auth-status").textContent = "Connecté.";97      document.getElementById("panel").style.display = "block";98      sessionStorage.setItem("qce-admin", TOKEN);99      loadTables();100    } catch {101      document.getElementById("auth-status").textContent = "Jeton refusé.";102      document.getElementById("panel").style.display = "none";103    }104  }105  document.getElementById("login").onclick = () => {106    TOKEN = document.getElementById("token").value.trim(); connect();107  };108  if (TOKEN) connect();109110  async function loadTables() {111    const runs = await getJSON(`${API}/admin/runs`, { headers: H() });112    document.getElementById("runs").innerHTML =113      `<tr><th>ID</th><th>Exécuté</th><th>Vu au</th><th>Type</th><th>Sondages</th><th>Simulations</th><th>Version</th></tr>` +114      runs.map(r => `<tr><td>${r.id}</td><td>${r.run_at.slice(0, 16).replace("T", " ")}</td>115        <td>${r.as_of}</td><td>${r.is_backtest ? (r.label || "backtest") : "forecast"}</td>116        <td>${r.n_polls}</td><td>${r.n_sims.toLocaleString("fr-CA")}</td><td>${r.model_version}</td></tr>`).join("");117    const logs = await getJSON(`${API}/admin/logs`, { headers: H() });118    document.getElementById("logs").innerHTML =119      `<tr><th>Date</th><th>Étape</th><th>Statut</th><th>Message</th></tr>` +120      logs.map(l => `<tr><td>${l.at.slice(0, 16).replace("T", " ")}</td><td>${l.step}</td>121        <td style="color:${l.status === "ok" ? "var(--good)" : "var(--plq)"}">${l.status}</td>122        <td style="color:var(--muted);max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${l.message}</td></tr>`).join("");123    const srcs = await getJSON(`${API}/admin/sources`, { headers: H() });124    document.getElementById("sources").innerHTML =125      `<tr><th>Source</th><th>Dernier accès</th><th>Statut</th></tr>` +126      srcs.map(s => `<tr><td>${s.name}</td>127        <td>${s.last_fetch ? s.last_fetch.slice(0, 16).replace("T", " ") : "—"}</td>128        <td style="color:var(--muted)">${s.last_status || "—"}</td></tr>`).join("");129  }130131  async function act(url, label) {132    document.getElementById("act-status").textContent = label + "…";133    try {134      const r = await getJSON(url, { method: "POST", headers: H() });135      document.getElementById("act-status").textContent = JSON.stringify(r);136      setTimeout(loadTables, 1500);137    } catch (e) { document.getElementById("act-status").textContent = "erreur : " + e.message; }138  }139  document.getElementById("act-refresh").onclick = () => act(`${API}/admin/refresh`, "pipeline");140  document.getElementById("act-forecast").onclick = () => act(`${API}/admin/forecast`, "forecast");141  document.getElementById("act-backtest").onclick = () => act(`${API}/admin/backtest`, "backtest");142143  document.getElementById("np-save").onclick = async () => {144    const shares = {};145    parties.forEach(p => {146      const v = parseFloat(document.getElementById(`np-${p}`).value);147      if (!isNaN(v)) shares[p] = v;148    });149    const body = {150      pollster: document.getElementById("np-pollster").value.trim(),151      field_end: document.getElementById("np-end").value,152      sample_size: parseInt(document.getElementById("np-n").value) || null,153      mode: document.getElementById("np-mode").value,154      source_url: document.getElementById("np-url").value || null,155      shares,156    };157    try {158      const r = await getJSON(`${API}/admin/poll`, { method: "POST", headers: H(), body: JSON.stringify(body) });159      document.getElementById("np-status").textContent = `Créé (id ${r.id}). Relancez le forecast.`;160    } catch (e) { document.getElementById("np-status").textContent = "erreur : " + e.message; }161  };162163  async function patchPoll(excluded) {164    const id = document.getElementById("ex-id").value;165    if (!id) return;166    try {167      await getJSON(`${API}/admin/poll/${id}`, { method: "PATCH", headers: H(),168        body: JSON.stringify({ excluded, exclusion_reason: document.getElementById("ex-reason").value || null }) });169      document.getElementById("act-status").textContent = `Sondage ${id} ${excluded ? "exclu" : "réintégré"}.`;170    } catch (e) { document.getElementById("act-status").textContent = "erreur : " + e.message; }171  }172  document.getElementById("ex-do").onclick = () => patchPoll(true);173  document.getElementById("ex-undo").onclick = () => patchPoll(false);174})();175</script>176</body>177</html>178