Planification/src/viewer.html

<!doctype html>
<!--
  Planification — Extension navigateur EasyVista (Canton de Vaud / DGNSI)

  Copyright (c) 2026 Quentin
  Licensed under the MIT License — see LICENSE file in the project root.

  @author Quentin
  @repository https://gitea.netaplaid.ch/FroSteel/Planification
-->
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Planification</title>
  <link rel="stylesheet" href="viewer.css">
</head>
<body>
  <header class="topbar">
    <div class="topbar-left">
      <!-- v4.2.3 : pastille avec initiales de l'utilisateur connecté, avant
           le titre. Clic → popup fixe avec nom complet juste en dessous.
           v2026.5.34 : TOUJOURS visible d'office avec "?" (état user inconnu)
           pour garantir l'accès au menu (⊞ Vue / ⚙ Paramètres) même si
           la détection user échoue ou est en retard.
           Le script JS mettra à jour le textContent + classes quand le
           fetch aboutit. En cas d'échec persistant, reste sur "?". -->
      <button id="user-badge" class="user-badge user-badge-unknown"
              type="button" aria-label="Utilisateur connecté"
              title="Utilisateur — cliquer pour accéder aux paramètres">?</button>
      <h1 id="app-title">Planification</h1>
      <!-- : bloc "Aujourd'hui + horloge" encadré, suivi DIRECTEMENT
           du statut d'actualisation (MAJ + ✓), puis le sélecteur de date
           du planning. -->
      <div id="today-block" class="today-block">
        <button id="nav-today" class="btn btn-today" title="Revenir au jour courant">Aujourd'hui</button>
        <div id="app-clock" class="app-clock" title="Date et heure actuelles">
          <div id="app-clock-date" class="app-clock-date"></div>
          <div id="app-clock-time" class="app-clock-time"></div>
        </div>
      </div>
      <span id="capture-info" class="capture-info"></span>
      <span id="refresh-check" class="refresh-check hidden" title="Mise à jour terminée">✓</span>
      <div class="date-nav">
        <button id="nav-prev" class="btn btn-nav" title="Jour précédent" aria-label="Jour précédent">◀</button>
        <div class="date-custom-wrapper">
          <div id="date-custom" class="date-custom" role="button" tabindex="0" title="Choisir une date du planning">
            <span id="date-custom-label"></span>
          </div>
          <input type="date" id="date-picker" class="date-input-hidden">
        </div>
        <button id="nav-next" class="btn btn-nav" title="Jour suivant" aria-label="Jour suivant">▶</button>
      </div>
    </div>
    <!-- v5.0.9 : compteur de session EasyVista (visible < 5 min restantes) -->
    <div id="app-session" class="app-session hidden"></div>
    <div class="topbar-right">
      <!-- v2026.5.46 — bouton principal "Ajouter" : ouvre un menu déroulant
           avec Réservation / Absence / Pompier (remplace les boutons séparés). -->
      <div id="add-menu-wrap" class="add-menu-wrap">
        <button id="add-menu-btn" class="btn btn-action" title="Ajouter : réservation, absence ou pompier" aria-haspopup="true" aria-expanded="false">
          <span class="btn-action-emoji">➕</span>
          <span class="btn-action-label">Ajouter</span>
        </button>
        <div id="add-menu" class="add-menu hidden" role="menu">
          <button id="add-menu-reservation" class="add-menu-item" type="button" role="menuitem"><span class="add-menu-emoji">📅</span> Réservation</button>
          <button id="add-menu-absence" class="add-menu-item" type="button" role="menuitem"><span class="add-menu-emoji">🗓️</span> Absence</button>
          <button id="add-menu-pompier" class="add-menu-item" type="button" role="menuitem"><span class="add-menu-emoji">🚒</span> Pompier</button>
        </div>
      </div>
      <!-- v4.2.6 : bouton envoyer la planification sur la douchette -->
      <button id="douchette-btn" class="btn btn-action" title="Envoyer la planification sur la douchette des techniciens">
        <span class="btn-action-emoji">🎯</span>
        <span class="btn-action-label">Douchette</span>
      </button>
      <button id="refresh-partial-btn" class="btn btn-refresh" title="Actualiser : ajoute les nouvelles interventions et retire celles qui ne sont plus dans le planning. Rapide, ne re-télécharge pas les fiches déjà connues.">
        <svg id="refresh-partial-icon" class="btn-refresh-icon" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M2 8a6 6 0 0 1 10.2-4.24M14 3v3h-3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <span class="btn-refresh-label">Actualiser</span>
      </button>
      <button id="refresh-btn" class="btn btn-refresh btn-refresh-strong" title="Tout recharger : re-télécharge le planning ET toutes les fiches (y compris celles déjà connues) pour voir évoluer les statuts. Plus lent.">
        <svg id="refresh-icon" class="btn-refresh-icon" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M2 8a6 6 0 1 0 1.76-4.24M2 3v3h3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 8a6 6 0 0 1-10.2 4.24M14 13v-3h-3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <span class="btn-refresh-label">Tout recharger</span>
      </button>
      <button id="abort-btn" class="btn btn-abort hidden" title="Arrêter le rafraîchissement en cours">
        ✕ 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>

  <!-- v2026.5.46 — bandeaux pleine largeur en haut (sous la topbar). Le
       chevauchement avec la ligne stats+recherche est réglé par l'empilement
       sticky (--stack-top), pas en les déplaçant. Un seul visible à la fois
       (coordinateur _hideAllSessionBanners / _setSessionBanner). -->
  <div id="session-expired-banner" class="session-banner hidden">
    <span class="session-banner-icon">⚠</span>
    <span class="session-banner-text">
      <strong>Session EasyVista expirée.</strong>
      Données affichées depuis le cache. Reconnectez-vous à EasyVista pour rafraîchir.
    </span>
    <button id="session-banner-reconnect" class="btn btn-primary btn-sm">Ouvrir EasyVista</button>
    <button id="session-banner-close" class="btn btn-icon" title="Masquer">×</button>
  </div>
  <div id="ev-unreachable-banner" class="session-banner ev-banner hidden">
    <span class="session-banner-icon">⚠</span>
    <span class="session-banner-text">
      <strong>EasyVista est inaccessible.</strong>
      Données affichées depuis le cache.
    </span>
    <button id="ev-unreachable-banner-retry" class="btn btn-primary btn-sm">Réessayer</button>
    <button id="ev-unreachable-banner-open" class="btn btn-sm">Ouvrir EasyVista</button>
    <button id="ev-unreachable-banner-close" class="btn btn-icon" title="Masquer">×</button>
  </div>

  <main id="main">
    <div id="error-box" class="error-box hidden"></div>
    <!-- v2026.5.46 — ligne collante (sticky) EN PREMIER : stats + barre de
         recherche sur la même hauteur, toujours visibles au scroll. En vue
         horizontale, les deux enfants sont relocalisés dans la sidebar
         (cf. ELEMENTS_TO_RELOCATE). -->
    <div id="topline" class="topline">
      <div id="stats" class="stats hidden"></div>
      <div id="search-zone" class="search-zone hidden">
        <div class="search-bar">
          <span class="search-ico" aria-hidden="true">🔍</span>
          <input id="ev-search" class="search-input" type="search" autocomplete="off"
                 spellcheck="false" placeholder="Rechercher : réf, personne, matériel, lieu…">
          <span id="ev-search-spin" class="search-spin hidden" aria-hidden="true"></span>
          <button id="ev-search-clear" class="search-clear hidden" type="button" title="Effacer" aria-label="Effacer">×</button>
          <!-- v2026.5.46 — aide sur la syntaxe de recherche -->
          <button id="ev-search-help" class="search-help" type="button" title="Aide sur la recherche" aria-label="Aide sur la recherche">❕</button>
        </div>
        <div id="ev-search-results" class="search-results hidden" role="listbox"></div>
      </div>
      <!-- v2026.5.46 — 3e colonne (droite) : bouton « Mes actions » du mode
           coordinateur, calé complètement à droite de la ligne. -->
      <div id="topline-coord" class="topline-coord"></div>
    </div>
    <!-- v2026.5.46 — barre de progression du rafraîchissement : SOUS la ligne
         stats+recherche (#topline), sticky juste en dessous (avant : au-dessus). -->
    <div id="progress-bar" class="progress-bar hidden">
      <div class="progress-bar-fill" id="progress-bar-fill"></div>
      <span class="progress-bar-label" id="progress-bar-label"></span>
    </div>
    <!-- v2026.5.46 — le « Chargement… » vit DANS la zone des cartes
         (sous la ligne stats+recherche), jamais en haut de page. -->
    <div id="loading" class="loading">Chargement…</div>
    <!-- v2026.5.49 — les messages « session expirée » / « EV inaccessible »
         CENTRÉS vivent DANS la zone de contenu (sous la barre de recherche, à
         la place des cartes), pas en haut de #main : sinon ils s'affichaient
         au-dessus de la ligne stats+recherche. showSessionNeeded/showEvUnreachable
         vident #cards et affichent le message ici. -->
    <div id="session-needed" class="session-needed hidden">
      <h2>Session EasyVista expirée</h2>
      <p>Reconnectez-vous à EasyVista pour continuer.</p>
      <button id="open-ev-btn" class="btn btn-primary">Ouvrir EasyVista</button>
    </div>
    <div id="ev-unreachable" class="session-needed hidden">
      <h2>EasyVista est inaccessible pour le moment.</h2>
      <p>Réessayez dans quelques instants, ou ouvrez EasyVista directement.</p>
      <button id="open-ev-btn-2" class="btn btn-primary">Ouvrir EasyVista</button>
      <button id="retry-btn" class="btn btn-subtle">Réessayer</button>
    </div>
    <div id="cards" class="cards"></div>
  </main>

  <div id="tooltip" class="tooltip hidden" role="tooltip"></div>

  <!-- v4.2.3 : popup fixe du nom de l'utilisateur connecté. S'ouvre au clic
       sur la pastille d'initiales (topbar gauche). -->
  <div id="user-name-popup" class="user-name-popup hidden" role="dialog" aria-hidden="true"></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>