forked from FroSteel/Planification
Quentin Rouiller
149 lines
8.2 KiB
HTML
149 lines
8.2 KiB
HTML
<!doctype html>
|
||
<!--
|
||
Planification — Extension navigateur EasyVista (Canton de Vaud / DGNSI)
|
||
|
||
Copyright (c) 2026 Quentin Rouiller
|
||
Licensed under the MIT License — see LICENSE file in the project root.
|
||
|
||
@author Quentin Rouiller
|
||
@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>
|
||
<div class="date-nav">
|
||
<button id="nav-prev" class="btn btn-nav" title="Jour précédent" aria-label="Jour précédent">◀</button>
|
||
<!-- v2026.5.17 : input date custom qui affiche "Vendredi 24.04.2026" -->
|
||
<div class="date-custom-wrapper">
|
||
<div id="date-custom" class="date-custom" role="button" tabindex="0" title="Choisir une date">
|
||
<span id="date-custom-label"></span>
|
||
<span class="date-custom-icon">📅</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>
|
||
<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>
|
||
<!-- v2026.5.16 : date complète du jour au-dessus de l'heure dans la topbar -->
|
||
<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>
|
||
<!-- v5.0.9 : compteur de session EasyVista (visible < 5 min restantes) -->
|
||
<div id="app-session" class="app-session hidden"></div>
|
||
<div class="topbar-right">
|
||
<!-- v4.2.6 : bouton créer une absence pour un ou plusieurs techs -->
|
||
<button id="absence-btn" class="btn btn-action" title="Créer une absence pour un ou plusieurs techniciens">
|
||
<svg class="btn-action-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||
<rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.8"/>
|
||
<path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
||
<circle cx="12" cy="15" r="4.2" stroke="currentColor" stroke-width="1.8" fill="none"/>
|
||
<line x1="9" y1="15" x2="15" y2="15" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" transform="rotate(-45 12 15)"/>
|
||
</svg>
|
||
<span class="btn-action-label">Absence</span>
|
||
</button>
|
||
<!-- 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>
|
||
|
||
<!-- Bannière session expirée (non bloquante, apparaît en haut du contenu) -->
|
||
<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>
|
||
|
||
<!-- v4.2.5 : Bannière EasyVista inaccessible (non bloquante, avec cache) -->
|
||
<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>
|
||
|
||
<!-- Barre de progression (visible uniquement pendant un refresh actif) -->
|
||
<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>
|
||
|
||
<main id="main">
|
||
<div id="error-box" class="error-box hidden"></div>
|
||
<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="loading" class="loading">Chargement…</div>
|
||
<div id="stats" class="stats hidden"></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>
|