Version 3.0.0 — Évolution majeure du viewer

viewer.html

@@ -9,11 +9,21 @@
   <header class="topbar">
     <div class="topbar-left">
       <h1>Planning techniciens</h1>
+      <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="refresh-btn" class="btn" title="Revenir sur EasyVista pour recapturer le planning">
-        ↻ Rafraîchir
+      <button id="refresh-btn" class="btn" title="Rafraîchir maintenant">
+        <span id="refresh-icon">↻</span> Rafraîchir
+      </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>
@@ -23,6 +33,12 @@
 
   <main id="main">
     <div id="error-box" class="error-box hidden"></div>
+    <div id="session-needed" class="session-needed hidden">
+      <h2>Connexion à EasyVista requise</h2>
+      <p>Cette extension doit se connecter à <code>itsma.etat-de-vaud.ch</code> pour fonctionner.</p>
+      <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 id="loading" class="loading">Chargement…</div>
     <div id="stats" class="stats hidden"></div>
     <div id="cards" class="cards"></div>
@@ -30,6 +46,9 @@
 
   <div id="tooltip" class="tooltip hidden" role="tooltip"></div>
 
+  <!-- Conteneur des toasts (notifications d'ouverture) -->
+  <div id="toast-stack" class="toast-stack" aria-live="polite"></div>
+
   <script src="viewer.js"></script>
 </body>
 </html>