Grotti 2.0.0: eigenes Repo, Umbenennung von Farm.

web/templates/kameras.html

@@ -0,0 +1,102 @@
+{% extends "layout.html" %}
+{% block body %}
+<div class="page-head">
+  <div>
+    <h1>Kameras</h1>
+    <p class="tiny">Livebilder aller Drucker.</p>
+  </div>
+  <span id="when"></span>
+</div>
+<div class="camera-grid" id="grid"></div>
+{% endblock %}
+{% block script %}
+<script>
+const labels = {
+  printing: "druckt", paused: "pausiert", complete: "fertig", standby: "bereit",
+  heating: "heizt", error: "Fehler", cancelled: "abgebrochen", offline: "offline"
+};
+const tiles = new Map();
+
+function shownState(printer) {
+  const state = printer.state || "offline";
+  const hot = (printer.nozzle_target || 0) > 40 || (printer.bed_target || 0) > 30;
+  if ((state === "standby" || state === "complete") && hot) return "heating";
+  return state;
+}
+
+function metaLine(printer) {
+  const state = shownState(printer);
+  const busy = state === "printing" || state === "paused";
+  const bits = [labels[state] || state];
+  if (busy) {
+    const pct = Math.round((printer.progress || 0) * 100);
+    bits.push(pct + " %");
+    const eta = finishClock(printer.remain);
+    if (eta) bits.push("fertig " + eta);
+    else if (hours(printer.remain)) bits.push("Rest " + hours(printer.remain));
+  }
+  const job = (printer.filename || "").replace(/\.gcode$/i, "").replace(/^(\d+-)+/, "");
+  if (busy && job) bits.push(job);
+  return bits.join(" · ");
+}
+
+function ensureTile(printer) {
+  let tile = tiles.get(printer.host);
+  if (tile) return tile;
+  tile = document.createElement("figure");
+  tile.className = "camera-tile";
+  tile.dataset.host = printer.host;
+  tile.innerHTML = `
+    <figcaption>
+      <span class="cam-name"></span>
+      <span class="host"></span>
+    </figcaption>
+    <p class="cam-meta tiny"></p>
+    <img alt="" data-role="cam">
+    <a class="cam-url" href="#"></a>`;
+  tiles.set(printer.host, tile);
+  document.getElementById("grid").appendChild(tile);
+  return tile;
+}
+
+async function refresh() {
+  const printers = await api("/drucker?live=1");
+  document.getElementById("when").textContent = new Date().toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" });
+  const grid = document.getElementById("grid");
+  if (!printers.length) {
+    tiles.clear();
+    grid.innerHTML = '<p class="empty">Keine Drucker eingetragen.</p>';
+    return;
+  }
+  if (grid.querySelector(".empty")) grid.innerHTML = "";
+  const seen = new Set();
+  for (const printer of printers) {
+    seen.add(printer.host);
+    const tile = ensureTile(printer);
+    const state = shownState(printer);
+    tile.className = "camera-tile " + state;
+    tile.querySelector(".cam-name").textContent = printer.name;
+    tile.querySelector(".host").textContent = printer.host;
+    tile.querySelector(".cam-meta").textContent = metaLine(printer);
+    const path = "/api/v1/kamera?host=" + encodeURIComponent(printer.host);
+    const shown = "/api/v1/kamera?host=" + printer.host;
+    const img = tile.querySelector('[data-role="cam"]');
+    img.alt = "Kamera " + printer.name;
+    img.src = withToken(path) + "&t=" + Math.floor(Date.now() / 2000);
+    img.classList.remove("broken");
+    img.onerror = () => img.classList.add("broken");
+    const link = tile.querySelector(".cam-url");
+    link.href = withToken(path);
+    link.textContent = shown;
+  }
+  for (const [host, tile] of [...tiles.entries()]) {
+    if (!seen.has(host)) {
+      tile.remove();
+      tiles.delete(host);
+    }
+  }
+}
+refresh().catch((error) => console.error(error));
+setInterval(() => refresh().catch(() => {}), 5000);
+</script>
+{% endblock %}