Grotti 3.0.0: Aufträge, Wartung, SSE, Ausschuss-Dialog, UI-Umbau.

Migrationen 003–009, Kundaufträge mit Lieferschein, Abräumen mit Urteil,
ntfy/Backup/Zeitfenster, Live-Stream und Mobile-Mehr-Menü.

web/templates/layout.html

@@ -9,7 +9,9 @@
 <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='brand/favicon-32.png') }}">
 <link rel="icon" type="image/png" sizes="512x512" href="{{ url_for('static', filename='brand/favicon.png') }}">
 <link rel="apple-touch-icon" href="{{ url_for('static', filename='brand/apple-touch-icon.png') }}">
-<link rel="stylesheet" href="{{ url_for('static', filename='grotti.css') }}?v=52">
+<link rel="stylesheet" href="{{ url_for('static', filename='grotti.css') }}?v=54">
+<link rel="manifest" href="{{ url_for('static', filename='manifest.webmanifest') }}">
+<meta name="theme-color" content="#0a0a0c">
 <script>
 (function () {
   try {
@@ -38,6 +40,7 @@
 </script>
 </head>
 <body class="app-shell">
+<div id="conn-banner" class="conn-banner" hidden role="status"></div>
 <svg width="0" height="0" style="position:absolute" aria-hidden="true">
   <symbol id="i-printer" viewBox="0 0 24 24"><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 9V3h12v6"/><rect x="6" y="14" width="12" height="8" rx="1"/></symbol>
   <symbol id="i-camera" viewBox="0 0 24 24"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></symbol>
@@ -96,14 +99,15 @@
   </div>
   <nav class="nav-main" aria-label="Hauptmenü">
     <a href="/" class="{{ 'on' if page == 'wand' else '' }}" title="Drucker"><svg class="ico"><use href="#i-printer"/></svg><span>Drucker</span></a>
-    <a href="/dateien" class="{{ 'on' if page == 'dateien' else '' }} nav-desk" title="Dateien"><svg class="ico"><use href="#i-send"/></svg><span>Dateien</span></a>
+    <a href="/dateien" class="{{ 'on' if page == 'dateien' else '' }} nav-desk" title="Dateien"><svg class="ico"><use href="#i-file"/></svg><span>Dateien</span></a>
     <a href="/kameras" class="{{ 'on' if page == 'kameras' else '' }}" title="Kameras"><svg class="ico"><use href="#i-camera"/></svg><span>Kameras</span></a>
-    <a href="/aktivitaet" class="{{ 'on' if page == 'aktivitaet' else '' }} nav-desk" title="Aktivität"><svg class="ico"><use href="#i-activity"/></svg><span>Aktivität</span></a>
     <a href="/warteschlange" class="{{ 'on' if page == 'warteschlange' else '' }}" title="Warteschlange"><svg class="ico"><use href="#i-queue"/></svg><span>Warteschlange</span></a>
+    <a href="/auftraege" class="{{ 'on' if page == 'auftraege' else '' }} nav-desk" title="Aufträge"><svg class="ico"><use href="#i-folder"/></svg><span>Aufträge</span></a>
     <a href="/protokoll" class="{{ 'on' if page == 'protokoll' or page == 'bericht' else '' }} nav-desk" title="Protokoll"><svg class="ico"><use href="#i-list"/></svg><span>Protokoll</span></a>
-    <a href="/statistik" class="{{ 'on' if page == 'statistik' else '' }} nav-desk" title="Statistik"><svg class="ico"><use href="#i-activity"/></svg><span>Statistik</span></a>
+    <a href="/statistik" class="{{ 'on' if page == 'statistik' else '' }} nav-desk" title="Statistik"><svg class="ico"><use href="#i-grid"/></svg><span>Statistik</span></a>
+    <a href="/aktivitaet" class="{{ 'on' if page == 'aktivitaet' else '' }} nav-desk" title="Aktivität"><svg class="ico"><use href="#i-activity"/></svg><span>Aktivität</span></a>
     <a href="/material" class="{{ 'on' if page == 'material' else '' }} nav-desk" title="Material"><svg class="ico"><use href="#i-spool"/></svg><span>Material</span></a>
-    <a href="/projekte" class="{{ 'on' if page == 'projekte' else '' }} nav-desk" title="Projekte"><svg class="ico"><use href="#i-folder"/></svg><span>Projekte</span></a>
+    <a href="/wartung" class="{{ 'on' if page == 'wartung' else '' }} nav-desk" title="Wartung"><svg class="ico"><use href="#i-nozzle"/></svg><span>Wartung</span></a>
   </nav>
   <div class="live-panel" id="live-panel">
     <details class="queue-box" data-box="run" id="run-box" open hidden>
@@ -131,7 +135,6 @@
   </div>
   <nav class="nav-secondary" aria-label="Weitere Seiten">
     <a href="/einstellungen" class="{{ 'on' if page == 'einstellungen' else '' }}" title="Einstellungen"><svg class="ico"><use href="#i-settings"/></svg><span>Einstellungen</span></a>
-    <a href="/ideen" class="{{ 'on' if page == 'ideen' else '' }}" title="Ideen"><svg class="ico"><use href="#i-bulb"/></svg><span>Ideen</span></a>
     <a href="/doku" class="{{ 'on' if page == 'doku' else '' }}" title="Doku"><svg class="ico"><use href="#i-book"/></svg><span>Doku</span></a>
   </nav>
   <div class="side-foot">
@@ -152,12 +155,26 @@
 </div>
 <nav class="mobile-nav" aria-label="Schnellmenü">
   <a href="/" class="{{ 'on' if page == 'wand' else '' }}"><svg class="ico"><use href="#i-printer"/></svg><span>Drucker</span></a>
-  <a href="/dateien" class="{{ 'on' if page == 'dateien' else '' }} nav-desk"><svg class="ico"><use href="#i-send"/></svg><span>Dateien</span></a>
-  <a href="/kameras" class="{{ 'on' if page == 'kameras' else '' }} nav-shelf"><svg class="ico"><use href="#i-camera"/></svg><span>Kameras</span></a>
-  <a href="/warteschlange" class="{{ 'on' if page == 'warteschlange' else '' }} nav-shelf"><svg class="ico"><use href="#i-queue"/></svg><span>Warteschlange</span></a>
-  <a href="/aktivitaet" class="{{ 'on' if page == 'aktivitaet' else '' }} nav-desk"><svg class="ico"><use href="#i-activity"/></svg><span>Aktivität</span></a>
+  <a href="/dateien" class="{{ 'on' if page == 'dateien' else '' }}"><svg class="ico"><use href="#i-file"/></svg><span>Dateien</span></a>
+  <a href="/warteschlange" class="{{ 'on' if page == 'warteschlange' else '' }}"><svg class="ico"><use href="#i-queue"/></svg><span>Queue</span></a>
+  <a href="/aktivitaet" class="{{ 'on' if page == 'aktivitaet' else '' }}"><svg class="ico"><use href="#i-activity"/></svg><span>Aktivität</span></a>
+  <button type="button" class="mobile-more-btn" id="mobile-more" aria-expanded="false" aria-controls="mobile-more-sheet"><svg class="ico"><use href="#i-menu"/></svg><span>Mehr</span></button>
 </nav>
-<script src="{{ url_for('static', filename='api.js') }}?v=26"></script>
+<dialog id="mobile-more-sheet" class="mobile-more-sheet">
+  <nav aria-label="Weitere Seiten">
+    <a href="/kameras">Kameras</a>
+    <a href="/auftraege">Aufträge</a>
+    <a href="/protokoll">Protokoll</a>
+    <a href="/statistik">Statistik</a>
+    <a href="/material">Material</a>
+    <a href="/wartung">Wartung</a>
+    <a href="/einstellungen">Einstellungen</a>
+    <a href="/doku">Doku</a>
+  </nav>
+  <form method="dialog"><button class="ghost">Schließen</button></form>
+</dialog>
+<script src="{{ url_for('static', filename='api.js') }}?v=28"></script>
+<script src="{{ url_for('static', filename='ui.js') }}?v=2"></script>
 <script>
 document.getElementById("logout-btn")?.addEventListener("click", async () => {
   try { await api("/auth/logout", { method: "POST", json: {} }); } catch (e) {}
@@ -476,17 +493,27 @@ async function refreshTasks() {
       ${p.filename ? `<span class="queue-sub" title="${escapeHtml(p.filename)}">${escapeHtml(jobLabel(p.filename))}</span>` : ""}
     </li>`).join("");
   list.querySelectorAll("[data-cleared]").forEach((btn) => {
-    btn.onclick = () => armButton(btn, "leer?", async () => {
+    btn.onclick = async () => {
+      const host = btn.dataset.cleared;
+      const payload = await promptAbraeumen(btn.closest("li")?.querySelector(".queue-name")?.textContent || host);
+      if (!payload) return;
       btn.disabled = true;
       try {
-        await api("/drucker/" + encodeURIComponent(btn.dataset.cleared) + "/abraeumen", { method: "POST", json: { confirm: true } });
+        await api("/drucker/" + encodeURIComponent(host) + "/abraeumen", { method: "POST", json: payload });
         toast("Platte frei.");
       } catch (error) { toast(error.message, "bad"); }
       refreshTasks();
       if (typeof window.onQueueChanged === "function") window.onQueueChanged();
-    });
+      btn.disabled = false;
+    };
   });
 }
+document.getElementById("mobile-more")?.addEventListener("click", () => {
+  document.getElementById("mobile-more-sheet")?.showModal();
+});
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker.register("/static/sw.js").catch(() => {});
+}
 
 document.getElementById("events-clear").addEventListener("click", async (event) => {
   event.preventDefault();
@@ -502,10 +529,52 @@ refreshPrintQueue();
 refreshEvents();
 refreshTasks();
 window.refreshTasks = refreshTasks;
-setInterval(refreshTasks, 8000);
-setInterval(refreshSendQueue, 2000);
-setInterval(refreshPrintQueue, 4000);
-setInterval(refreshEvents, 8000);
+
+(function liveUpdates() {
+  const sseKinds = {
+    queue: () => refreshPrintQueue(),
+    senden: () => refreshSendQueue(),
+    ereignis: () => refreshEvents(),
+    aufgaben: () => refreshTasks(),
+    drucker: () => {
+      refreshPrintQueue();
+      refreshTasks();
+      if (typeof window.onDruckerLive === "function") window.onDruckerLive();
+    },
+  };
+
+  if (typeof EventSource !== "undefined") {
+    let es;
+    let retryMs = 2000;
+    const retryMax = 60000;
+    let hadStream = false;
+
+    function connectStream() {
+      es = new EventSource("/api/v1/stream", { withCredentials: true });
+      es.addEventListener("open", () => {
+        retryMs = 2000;
+        if (hadStream) setConnectionBanner(true, "Live-Verbindung wieder da.");
+        hadStream = true;
+      });
+      es.addEventListener("error", () => {
+        es.close();
+        setConnectionBanner(false, "Live-Verbindung unterbrochen — Fallback-Polling läuft.");
+        setTimeout(connectStream, retryMs);
+        retryMs = Math.min(retryMax, retryMs * 2);
+      });
+      Object.keys(sseKinds).forEach((kind) => {
+        es.addEventListener(kind, () => sseKinds[kind]());
+      });
+      es.addEventListener("ping", () => {});
+    }
+    connectStream();
+  }
+
+  createPoller(refreshPrintQueue, 8000).start();
+  createPoller(refreshSendQueue, 4000).start();
+  createPoller(refreshEvents, 12000).start();
+  createPoller(refreshTasks, 12000).start();
+})();
 </script>
 {% block script %}{% endblock %}
 </body>