feat: Scan-Ansicht und Treffer-Rueckmeldung

src/ui/scan-view.js

@@ -0,0 +1,66 @@
+/**
+ * Baut die Hauptansicht auf und liefert Aktualisierungsfunktionen zurueck.
+ * Kennt weder Kamera noch Erkennung - alles kommt ueber die Rueckrufe.
+ */
+export function renderScanView(root, { onCapture, onUndo, onOpenList, onPickFile }) {
+  root.innerHTML = `
+    <div class="camera">
+      <video id="preview" playsinline muted></video>
+      <div class="frame"></div>
+    </div>
+    <div class="status" id="status"></div>
+    <button class="action capture" id="capture">Modul scannen</button>
+    <div class="stacks" id="stacks"></div>
+    <div class="last">
+      <span id="last">Noch nichts erfasst</span>
+      <button class="action secondary" id="undo" style="min-width:64px">&#8630;</button>
+    </div>
+    <input type="file" id="file" accept="image/*" hidden />
+  `;
+
+  const stacksEl = root.querySelector('#stacks');
+  const lastEl = root.querySelector('#last');
+  const statusEl = root.querySelector('#status');
+  const fileEl = root.querySelector('#file');
+
+  root.querySelector('#capture').addEventListener('click', onCapture);
+  root.querySelector('#undo').addEventListener('click', onUndo);
+  fileEl.addEventListener('change', () => {
+    if (fileEl.files[0]) onPickFile(fileEl.files[0]);
+    fileEl.value = '';
+  });
+
+  return {
+    video: root.querySelector('#preview'),
+
+    /** @param {{id: string, count: number}[]} stacks */
+    setStacks(stacks) {
+      stacksEl.innerHTML = '';
+      if (stacks.length === 0) {
+        stacksEl.textContent = 'Noch keine Stapel';
+        return;
+      }
+      for (const stack of stacks) {
+        const button = document.createElement('button');
+        button.textContent = `${stack.id}: ${stack.count}`;
+        button.addEventListener('click', onOpenList);
+        stacksEl.appendChild(button);
+      }
+    },
+
+    setLast(text) {
+      lastEl.textContent = text;
+    },
+
+    /** @param {string} text @param {boolean} warn */
+    setStatus(text, warn = false) {
+      statusEl.textContent = text;
+      statusEl.classList.toggle('warn', warn);
+    },
+
+    openFilePicker() {
+      fileEl.hidden = false;
+      fileEl.click();
+    },
+  };
+}