Kacheln zeigen Moonraker-Thumbnails; Toolpath-Thinning behält ganze Schichten; Nicht-ASCII-Namen vermeiden 10115 beim Senden.
449 lines
29 KiB
HTML
449 lines
29 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="csrf" content="{{ csrf }}">
|
||
{% if current_user %}<meta name="user-role" content="{{ current_user.role }}">{% endif %}
|
||
<title>{{ title }} · Grotti</title>
|
||
<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=41">
|
||
<script>
|
||
(function () {
|
||
try {
|
||
if (!localStorage.getItem("grotti-display") && localStorage.getItem("farm-display")) {
|
||
localStorage.setItem("grotti-display", localStorage.getItem("farm-display"));
|
||
}
|
||
} catch (e) {}
|
||
try {
|
||
var q = new URLSearchParams(location.search);
|
||
if (q.has("shelf")) {
|
||
var on = q.get("shelf") === "1" || q.get("shelf") === "true";
|
||
localStorage.setItem("grotti-display", on ? "shelf" : "desktop");
|
||
q.delete("shelf");
|
||
var next = location.pathname + (q.toString() ? "?" + q : "") + location.hash;
|
||
history.replaceState(null, "", next);
|
||
}
|
||
} catch (e) {}
|
||
try {
|
||
if (localStorage.getItem("grotti-display") === "shelf") document.documentElement.classList.add("shelf");
|
||
var nav = localStorage.getItem("grotti-nav-collapsed");
|
||
if (nav === "1" || (nav == null && localStorage.getItem("grotti-display") === "shelf")) {
|
||
document.documentElement.classList.add("nav-collapsed");
|
||
}
|
||
} catch (e) {}
|
||
})();
|
||
</script>
|
||
</head>
|
||
<body class="app-shell">
|
||
<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>
|
||
<symbol id="i-file" viewBox="0 0 24 24"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></symbol>
|
||
<symbol id="i-spool" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3"/></symbol>
|
||
<symbol id="i-folder" viewBox="0 0 24 24"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z"/></symbol>
|
||
<symbol id="i-folder-open" viewBox="0 0 24 24"><path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/></symbol>
|
||
<symbol id="i-list" viewBox="0 0 24 24"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></symbol>
|
||
<symbol id="i-activity" viewBox="0 0 24 24"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></symbol>
|
||
<symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></symbol>
|
||
<symbol id="i-check" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></symbol>
|
||
<symbol id="i-alert" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4M12 17h.01"/></symbol>
|
||
<symbol id="i-flame" viewBox="0 0 24 24"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></symbol>
|
||
<symbol id="i-pause" viewBox="0 0 24 24"><rect x="14" y="4" width="4" height="16" rx="1"/><rect x="6" y="4" width="4" height="16" rx="1"/></symbol>
|
||
<symbol id="i-play" viewBox="0 0 24 24"><path d="M5 3v18l15-9z"/></symbol>
|
||
<symbol id="i-stop" viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="2"/></symbol>
|
||
<symbol id="i-layers" viewBox="0 0 24 24"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></symbol>
|
||
<symbol id="i-x" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></symbol>
|
||
<symbol id="i-up" viewBox="0 0 24 24"><path d="m18 15-6-6-6 6"/></symbol>
|
||
<symbol id="i-down" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
|
||
<symbol id="i-upload" viewBox="0 0 24 24"><path d="M12 15V3"/><path d="m7 8 5-5 5 5"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></symbol>
|
||
<symbol id="i-refresh" viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></symbol>
|
||
<symbol id="i-queue" viewBox="0 0 24 24"><path d="M3 5h12"/><path d="M3 12h9"/><path d="M3 19h6"/><path d="m16 11 5 3-5 3z"/></symbol>
|
||
<symbol id="i-send" viewBox="0 0 24 24"><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></symbol>
|
||
<symbol id="i-book" viewBox="0 0 24 24"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5A2.5 2.5 0 0 1 4 19.5"/><path d="M8 7h8M8 11h8"/></symbol>
|
||
<symbol id="i-cube" viewBox="0 0 24 24"><path d="m21 8-9-5-9 5v8l9 5 9-5z"/><path d="m3.3 7.2 8.7 4.8 8.7-4.8"/><path d="M12 22V12"/></symbol>
|
||
<symbol id="i-bell" viewBox="0 0 24 24"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></symbol>
|
||
<symbol id="i-sweep" viewBox="0 0 24 24"><path d="M3 21h18"/><path d="M9 8v8"/><path d="M15 8v8"/><path d="M5 12h14"/><path d="M7 16h10"/><path d="M12 3v5"/></symbol>
|
||
<symbol id="i-thermo" viewBox="0 0 24 24"><path d="M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0"/><path d="M12 14v3"/></symbol>
|
||
<symbol id="i-settings" viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></symbol>
|
||
<symbol id="i-bulb" viewBox="0 0 24 24"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6M10 22h4"/></symbol>
|
||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></symbol>
|
||
<symbol id="i-filter" viewBox="0 0 24 24"><path d="M22 3H2l8 9.46V19l4 2v-8.54z"/></symbol>
|
||
<symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></symbol>
|
||
<symbol id="i-scan" viewBox="0 0 24 24"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><rect x="7" y="7" width="10" height="10" rx="1"/></symbol>
|
||
<symbol id="i-trash" viewBox="0 0 24 24"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M10 11v6M14 11v6"/></symbol>
|
||
<symbol id="i-inbox" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></symbol>
|
||
<symbol id="i-image" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></symbol>
|
||
<symbol id="i-grid" viewBox="0 0 24 24"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></symbol>
|
||
<symbol id="i-menu" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></symbol>
|
||
<symbol id="i-panel" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="18" rx="1"/><path d="M14 8h7M14 12h7M14 16h7"/></symbol>
|
||
<symbol id="i-nozzle" viewBox="0 0 24 24"><path d="M8 3h8v4l-2 3v5l-2 6-2-6v-5L8 7z"/><path d="M9 7h6"/></symbol>
|
||
<symbol id="i-bed" viewBox="0 0 24 24"><path d="M4 16h16"/><path d="M5 16v3M19 16v3"/><path d="M6 12h12v4H6z"/><path d="M8 8h8"/></symbol>
|
||
<symbol id="i-chamber" viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></symbol>
|
||
<symbol id="i-fan" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><path d="M12 4c2 2 2 5 0 6-2-1-2-4 0-6zM12 14c2 1 2 4 0 6-2-2-2-5 0-6zM4 12c2-2 5-2 6 0-1 2-4 2-6 0zM14 12c1-2 4-2 6 0-2 2-5 2-6 0z"/></symbol>
|
||
<symbol id="i-fan-chamber" viewBox="0 0 24 24"><circle cx="12" cy="12" r="1.6"/><path d="M12 5.5c1.4 1.4 1.4 3.5 0 4.2-1.4-.7-1.4-2.8 0-4.2zM12 14.3c1.4.7 1.4 2.8 0 4.2-1.4-1.4-1.4-3.5 0-4.2zM5.5 12c1.4-1.4 3.5-1.4 4.2 0-.7 1.4-2.8 1.4-4.2 0zM14.3 12c.7-1.4 2.8-1.4 4.2 0-1.4 1.4-3.5 1.4-4.2 0z"/><rect x="3.5" y="3.5" width="17" height="17" rx="2" fill="none"/></symbol>
|
||
<symbol id="i-fan-aux" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1"/></symbol>
|
||
</svg>
|
||
<aside class="sidebar">
|
||
<div class="brand-row">
|
||
<a class="brand" href="/" title="Grotti">
|
||
<img class="brand-mark" src="{{ url_for('static', filename='brand/logo.png') }}" alt="" width="28" height="28" decoding="async">
|
||
<span class="brand-name">Grotti</span>
|
||
</a>
|
||
<button type="button" class="icon-btn nav-toggle" id="nav-toggle" title="Menü einklappen" aria-label="Menü einklappen" aria-pressed="false"><svg class="ico"><use href="#i-panel"/></svg></button>
|
||
</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="/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="/protokoll" class="{{ 'on' if page == 'protokoll' else '' }} nav-desk" title="Protokoll"><svg class="ico"><use href="#i-list"/></svg><span>Protokoll</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>
|
||
</nav>
|
||
<div class="live-panel" id="live-panel">
|
||
<details class="queue-box" data-box="run" id="run-box" open hidden>
|
||
<summary class="queue-title"><svg class="ico caret"><use href="#i-down"/></svg><span class="grow">Läuft jetzt</span><span class="count hot" id="run-count">0</span></summary>
|
||
<ul class="queue-list" id="run-list"></ul>
|
||
</details>
|
||
<details class="queue-box" data-box="wait" id="wait-box" open>
|
||
<summary class="queue-title"><svg class="ico caret"><use href="#i-down"/></svg><span class="grow">Wartet</span><span class="count" id="wait-count">0</span></summary>
|
||
<ul class="queue-list" id="wait-list"></ul>
|
||
<div class="queue-empty" id="wait-empty"><svg class="ico"><use href="#i-inbox"/></svg><span>Leer</span></div>
|
||
</details>
|
||
<details class="queue-box" data-box="todo" id="todo-box" open hidden>
|
||
<summary class="queue-title"><svg class="ico caret"><use href="#i-down"/></svg><span class="grow">Aufgaben</span><span class="count todo" id="todo-count">0</span></summary>
|
||
<ul class="queue-list" id="todo-list"></ul>
|
||
</details>
|
||
<details class="queue-box" data-box="send" id="send-box" open hidden>
|
||
<summary class="queue-title"><svg class="ico caret"><use href="#i-down"/></svg><span class="grow">Senden</span><span class="count" id="send-count">0</span></summary>
|
||
<ul class="queue-list" id="send-list"></ul>
|
||
</details>
|
||
<details class="queue-box" data-box="alerts" id="alert-box" open hidden>
|
||
<summary class="queue-title"><svg class="ico caret"><use href="#i-down"/></svg><span class="grow">Alerts</span><span class="count bad" id="alert-count">0</span></summary>
|
||
<ul class="queue-list" id="alert-list"></ul>
|
||
<div class="queue-foot"><button type="button" class="ghost tiny-btn" id="events-clear">gelesen</button> <a href="/aktivitaet">alle →</a></div>
|
||
</details>
|
||
</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">
|
||
{% if current_user %}
|
||
<div class="side-user">
|
||
<span class="tiny" title="{{ current_user.role }}">{{ current_user.username }}</span>
|
||
<button type="button" class="ghost tiny-btn" id="logout-btn">Abmelden</button>
|
||
</div>
|
||
{% endif %}
|
||
<span class="side-copy">© by <a href="mailto:[email protected]">[email protected]</a></span>
|
||
<a href="/doku" title="Doku">v{{ version }}</a>
|
||
</div>
|
||
</aside>
|
||
<div class="app-main">
|
||
<main>
|
||
{% block body %}{% endblock %}
|
||
</main>
|
||
</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>
|
||
</nav>
|
||
<script src="{{ url_for('static', filename='api.js') }}?v=24"></script>
|
||
<script>
|
||
document.getElementById("logout-btn")?.addEventListener("click", async () => {
|
||
try { await api("/auth/logout", { method: "POST", json: {} }); } catch (e) {}
|
||
location.href = "/login";
|
||
});
|
||
(function applyShellClasses() {
|
||
const shelf = document.documentElement.classList.contains("shelf");
|
||
const collapsed = document.documentElement.classList.contains("nav-collapsed");
|
||
document.body.classList.toggle("shelf", shelf);
|
||
document.body.classList.toggle("nav-collapsed", collapsed);
|
||
const toggle = document.getElementById("nav-toggle");
|
||
if (toggle) {
|
||
toggle.setAttribute("aria-pressed", collapsed ? "true" : "false");
|
||
toggle.title = collapsed ? "Menü ausklappen" : "Menü einklappen";
|
||
}
|
||
})();
|
||
|
||
const LIVE_KEY = "grotti-live-closed";
|
||
const NAV_KEY = "grotti-nav-collapsed";
|
||
const DISPLAY_KEY = "grotti-display";
|
||
|
||
function setNavCollapsed(on) {
|
||
document.documentElement.classList.toggle("nav-collapsed", on);
|
||
document.body.classList.toggle("nav-collapsed", on);
|
||
try { localStorage.setItem(NAV_KEY, on ? "1" : "0"); } catch (error) {}
|
||
const toggle = document.getElementById("nav-toggle");
|
||
if (toggle) {
|
||
toggle.setAttribute("aria-pressed", on ? "true" : "false");
|
||
toggle.title = on ? "Menü ausklappen" : "Menü einklappen";
|
||
}
|
||
}
|
||
|
||
function setDisplayMode(mode) {
|
||
const shelf = mode === "shelf";
|
||
document.documentElement.classList.toggle("shelf", shelf);
|
||
document.body.classList.toggle("shelf", shelf);
|
||
try { localStorage.setItem(DISPLAY_KEY, shelf ? "shelf" : "desktop"); } catch (error) {}
|
||
if (shelf && localStorage.getItem(NAV_KEY) == null) setNavCollapsed(true);
|
||
}
|
||
|
||
document.getElementById("nav-toggle")?.addEventListener("click", () => {
|
||
setNavCollapsed(!document.body.classList.contains("nav-collapsed"));
|
||
});
|
||
|
||
(function restoreBoxes() {
|
||
let closed = [];
|
||
try { closed = JSON.parse(localStorage.getItem(LIVE_KEY) || "[]"); } catch (error) { closed = []; }
|
||
if (window.matchMedia("(max-width: 760px)").matches && !localStorage.getItem(LIVE_KEY)) closed = ["wait", "send"];
|
||
document.querySelectorAll("#live-panel details[data-box]").forEach((box) => {
|
||
if (closed.includes(box.dataset.box)) box.open = false;
|
||
box.addEventListener("toggle", () => {
|
||
const now = [...document.querySelectorAll("#live-panel details[data-box]")].filter((d) => !d.open).map((d) => d.dataset.box);
|
||
localStorage.setItem(LIVE_KEY, JSON.stringify(now));
|
||
});
|
||
});
|
||
})();
|
||
|
||
function queueTarget(job) {
|
||
return job.printer_name || job.host || (job.family_label ? "nächster " + job.family_label : "nächster freier");
|
||
}
|
||
|
||
async function cancelQueueItem(job, button) {
|
||
const running = job.status === "running";
|
||
const armed = running
|
||
? (job.is_ablauf ? "Ablauf stoppen?" : "Auftrag stoppen?")
|
||
: "Entfernen?";
|
||
const go = async () => {
|
||
if (button) button.disabled = true;
|
||
try {
|
||
await api("/druck-queue/" + job.id, { method: "PATCH", json: { status: "cancelled" } });
|
||
toast(running ? "Abgebrochen." : "Aus der Warteschlange genommen.");
|
||
} catch (error) {
|
||
toast(error.message, "bad");
|
||
}
|
||
refreshPrintQueue();
|
||
if (typeof window.onQueueChanged === "function") window.onQueueChanged();
|
||
if (button) button.disabled = false;
|
||
};
|
||
if (button) armButton(button, armed, go);
|
||
else go();
|
||
}
|
||
window.cancelQueueItem = cancelQueueItem;
|
||
|
||
function runItemHtml(job) {
|
||
const rep = repeatText(job);
|
||
const steps = job.is_ablauf ? stepsHtml(job.step_labels, job.display_step_index != null ? job.display_step_index : job.step_index, true) : "";
|
||
return `<li class="queue-item running">
|
||
<div class="queue-row">
|
||
<a class="queue-link grow" href="/#${encodeURIComponent(job.host || "")}"><span class="queue-name">${escapeHtml(queueTarget(job))}</span></a>
|
||
${rep ? `<span class="queue-sub">${escapeHtml(rep)}</span>` : ""}
|
||
<span class="queue-tools"><button type="button" class="icon-btn danger" data-cancel-q="${job.id}" title="Abbrechen">${icon("x")}</button></span>
|
||
</div>
|
||
${steps}
|
||
<span class="queue-msg">${escapeHtml(phaseText(job))}</span>
|
||
<span class="queue-sub">${escapeHtml(jobLabel(job.filename))}</span>
|
||
</li>`;
|
||
}
|
||
|
||
function waitItemHtml(job, index, total) {
|
||
const isError = job.status === "error";
|
||
const label = job.is_ablauf ? "Ablauf · " + jobLabel(job.filename) : jobLabel(job.filename);
|
||
const rep = job.is_ablauf && (job.repeat_total || 1) > 1 ? job.repeat_total + "×" : "";
|
||
return `<li class="queue-item ${isError ? "error" : ""}">
|
||
<div class="queue-row">
|
||
<span class="grow"><span class="queue-name" title="${escapeHtml(job.filename)}">${escapeHtml(label)}</span></span>
|
||
<span class="queue-tools">
|
||
${!isError && index > 0 ? `<button type="button" class="icon-btn" data-prio-q="${job.id}" data-dir="-1" title="Höher">${icon("up")}</button>` : ""}
|
||
${!isError && index < total - 1 ? `<button type="button" class="icon-btn" data-prio-q="${job.id}" data-dir="1" title="Tiefer">${icon("down")}</button>` : ""}
|
||
${isError && job.is_ablauf ? `<button type="button" class="icon-btn" data-resume-q="${job.id}" title="Ab Schritt ${(Number(job.step_index) || 0) + 1} (${escapeHtml(job.step_label_current || "")}) weitermachen">${icon("play")}</button>` : ""}
|
||
<button type="button" class="icon-btn danger" ${isError ? `data-dismiss-q="${job.id}" title="Ausblenden"` : `data-cancel-q="${job.id}" title="Entfernen"`}>${icon("x")}</button>
|
||
</span>
|
||
</div>
|
||
<span class="queue-sub">${isError ? "fehlgeschlagen · " : "→ "}${escapeHtml(queueTarget(job))}${rep ? " · " + rep : ""}</span>
|
||
${isError ? `<span class="queue-msg">${escapeHtml(job.message || "")}</span>` : ""}
|
||
</li>`;
|
||
}
|
||
|
||
function directItemHtml(p) {
|
||
const pct = Math.round((Number(p.progress) || 0) * 100);
|
||
const eta = p.remain > 0 ? "noch " + hours(p.remain) + " · fertig " + finishClock(p.remain) : "";
|
||
return `<li class="queue-item running">
|
||
<div class="queue-row">
|
||
<a class="queue-link grow" href="/#${encodeURIComponent(p.host)}"><span class="queue-name">${escapeHtml(p.name || p.host)}</span></a>
|
||
<span class="queue-sub">${pct} %</span>
|
||
</div>
|
||
<span class="bar slim live"><span style="width:${pct}%"></span></span>
|
||
<span class="queue-msg">${escapeHtml(STATE_LABELS[p.state] || p.state)}${eta ? " · " + escapeHtml(eta) : ""}</span>
|
||
<span class="queue-sub">${escapeHtml(jobLabel(p.filename))}</span>
|
||
</li>`;
|
||
}
|
||
|
||
let queueCache = [];
|
||
async function refreshPrintQueue() {
|
||
let jobs;
|
||
let active = [];
|
||
try {
|
||
[jobs, active] = await Promise.all([api("/druck-queue"), api("/laeuft").catch(() => [])]);
|
||
} catch (error) { return; }
|
||
queueCache = jobs || [];
|
||
const running = queueCache.filter((job) => job.status === "running");
|
||
const queuedHosts = new Set(running.map((job) => job.host));
|
||
const direct = (active || []).filter((p) => !queuedHosts.has(p.host));
|
||
const waiting = queueCache.filter((job) => job.status === "waiting");
|
||
const errors = queueCache
|
||
.filter((job) => job.status === "error")
|
||
.sort((a, b) => String(b.updated_at).localeCompare(String(a.updated_at)))
|
||
.slice(0, 2);
|
||
|
||
const runBox = document.getElementById("run-box");
|
||
runBox.hidden = !(running.length || direct.length);
|
||
document.getElementById("run-count").textContent = running.length + direct.length;
|
||
document.getElementById("run-list").innerHTML = running.map(runItemHtml).join("") + direct.map(directItemHtml).join("");
|
||
|
||
const waitList = document.getElementById("wait-list");
|
||
document.getElementById("wait-count").textContent = waiting.length;
|
||
document.getElementById("wait-count").className = "count" + (errors.length ? " bad" : waiting.length ? " hot" : "");
|
||
document.getElementById("wait-empty").hidden = !!(waiting.length || errors.length);
|
||
document.getElementById("wait-box").classList.toggle("is-empty", !(waiting.length || errors.length));
|
||
waitList.innerHTML = errors.map((job) => waitItemHtml(job, 0, 1)).join("")
|
||
+ waiting.map((job, i) => waitItemHtml(job, i, waiting.length)).join("");
|
||
|
||
const panel = document.getElementById("live-panel");
|
||
panel.querySelectorAll("[data-cancel-q]").forEach((btn) => {
|
||
btn.onclick = () => {
|
||
const job = queueCache.find((item) => item.id === Number(btn.dataset.cancelQ));
|
||
if (job) cancelQueueItem(job, btn);
|
||
};
|
||
});
|
||
panel.querySelectorAll("[data-resume-q]").forEach((btn) => {
|
||
btn.onclick = () => {
|
||
const job = queueCache.find((item) => item.id === Number(btn.dataset.resumeQ));
|
||
if (!job) return;
|
||
const step = job.step_label_current || ("Schritt " + ((job.step_index || 0) + 1));
|
||
armButton(btn, "Weiter ab „" + step + "“?", async () => {
|
||
btn.disabled = true;
|
||
try {
|
||
await api("/druck-queue/" + job.id, { method: "PATCH", json: { status: "running", resume: true } });
|
||
toast("Ablauf geht weiter.");
|
||
} catch (error) { toast(error.message, "bad"); }
|
||
refreshPrintQueue();
|
||
if (typeof window.onQueueChanged === "function") window.onQueueChanged();
|
||
btn.disabled = false;
|
||
});
|
||
};
|
||
});
|
||
panel.querySelectorAll("[data-dismiss-q]").forEach((btn) => {
|
||
btn.onclick = () => armButton(btn, "Ausblenden?", async () => {
|
||
try { await api("/druck-queue/" + btn.dataset.dismissQ, { method: "PATCH", json: { status: "dismissed" } }); } catch (error) { toast(error.message, "bad"); }
|
||
refreshPrintQueue();
|
||
});
|
||
});
|
||
panel.querySelectorAll("[data-prio-q]").forEach((btn) => {
|
||
btn.onclick = async () => {
|
||
const id = Number(btn.dataset.prioQ);
|
||
const dir = Number(btn.dataset.dir);
|
||
const idx = waiting.findIndex((job) => job.id === id);
|
||
const other = waiting[idx + dir];
|
||
if (!other) return;
|
||
try {
|
||
await api("/druck-queue/" + id, { method: "PATCH", json: { priority: Number(other.priority) + dir } });
|
||
} catch (error) { toast(error.message, "bad"); }
|
||
refreshPrintQueue();
|
||
};
|
||
});
|
||
}
|
||
|
||
async function refreshSendQueue() {
|
||
let jobs;
|
||
try { jobs = await api("/sende-auftraege"); } catch (error) { return; }
|
||
const active = (jobs || []).filter((job) => job.status === "pending" || job.status === "running");
|
||
const recent = active.length ? active : (jobs || []).slice(0, 2).filter((job) => job.status === "error");
|
||
const box = document.getElementById("send-box");
|
||
box.hidden = !recent.length;
|
||
document.getElementById("send-count").textContent = active.length;
|
||
document.getElementById("send-list").innerHTML = recent.map((job) => {
|
||
const pct = Math.max(0, Math.min(100, Number(job.progress) || 0));
|
||
const cls = job.status === "error" ? "bad" : job.status === "done" ? "good" : "";
|
||
return `<li class="queue-item ${job.status === "error" ? "error" : ""}">
|
||
<span class="queue-name">${escapeHtml(job.printer || "")}</span>
|
||
<span class="queue-msg">${escapeHtml(job.message || "")}</span>
|
||
<span class="send-progress-track slim"><span class="send-progress-bar ${cls}" style="width:${pct}%"></span></span>
|
||
</li>`;
|
||
}).join("");
|
||
}
|
||
|
||
async function refreshEvents() {
|
||
let data;
|
||
try { data = await api("/ereignisse?unread=1&limit=5"); } catch (error) { return; }
|
||
const items = data.items || [];
|
||
const unread = Number(data.unread != null ? data.unread : items.length);
|
||
const box = document.getElementById("alert-box");
|
||
box.hidden = !items.length;
|
||
document.getElementById("alert-count").textContent = unread;
|
||
document.getElementById("alert-list").innerHTML = items.map((item) => `<li class="queue-item">
|
||
<div class="queue-row"><span class="grow"><span class="queue-name">${escapeHtml(item.printer || item.kind)}</span></span><span class="queue-sub">${escapeHtml(clockOf(item.created_at))}</span></div>
|
||
<span class="queue-msg">${escapeHtml(item.message)}</span>
|
||
</li>`).join("");
|
||
}
|
||
|
||
async function refreshTasks() {
|
||
let items;
|
||
try { items = await api("/aufgaben"); } catch (error) { return; }
|
||
items = items || [];
|
||
document.getElementById("todo-box").hidden = !items.length;
|
||
document.getElementById("todo-count").textContent = items.length;
|
||
const list = document.getElementById("todo-list");
|
||
list.innerHTML = items.map((p) => `<li class="queue-item">
|
||
<div class="queue-row">
|
||
<a class="queue-link grow" href="/#${encodeURIComponent(p.host)}"><span class="queue-name">${escapeHtml(p.name || p.host)}</span></a>
|
||
<span class="queue-tools"><button type="button" class="icon-btn done-btn" data-cleared="${escapeHtml(p.host)}" title="Platte geräumt (zweimal klicken)" aria-label="Platte geräumt">${icon("check")}</button></span>
|
||
</div>
|
||
<span class="queue-msg">Platte räumen${p.state === "complete" ? " · Druck fertig" : ""}</span>
|
||
${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.disabled = true;
|
||
try {
|
||
await api("/drucker/" + encodeURIComponent(btn.dataset.cleared) + "/abraeumen", { method: "POST", json: { confirm: true } });
|
||
toast("Platte frei.");
|
||
} catch (error) { toast(error.message, "bad"); }
|
||
refreshTasks();
|
||
if (typeof window.onQueueChanged === "function") window.onQueueChanged();
|
||
});
|
||
});
|
||
}
|
||
|
||
document.getElementById("events-clear").addEventListener("click", async (event) => {
|
||
event.preventDefault();
|
||
try { await api("/ereignisse/gelesen", { method: "POST", json: {} }); } catch (error) { /* still */ }
|
||
refreshEvents();
|
||
if (typeof window.onEventsRead === "function") window.onEventsRead();
|
||
});
|
||
|
||
window.refreshPrintQueue = refreshPrintQueue;
|
||
window.refreshSendQueue = refreshSendQueue;
|
||
refreshSendQueue();
|
||
refreshPrintQueue();
|
||
refreshEvents();
|
||
refreshTasks();
|
||
window.refreshTasks = refreshTasks;
|
||
setInterval(refreshTasks, 8000);
|
||
setInterval(refreshSendQueue, 2000);
|
||
setInterval(refreshPrintQueue, 4000);
|
||
setInterval(refreshEvents, 8000);
|
||
</script>
|
||
{% block script %}{% endblock %}
|
||
</body>
|
||
</html>
|