Grotti 3.5.0: Pagination, Logging, Deb-Paket, Makro-Doku, PLA-Match-Fix.

web/templates/material.html

@@ -65,6 +65,7 @@
         <thead><tr><th>Spule</th><th>Charge</th><th>Sorte</th><th>Farbe</th><th>Ort</th><th class="num">Rest</th></tr></thead>
         <tbody id="spool-rows"></tbody>
       </table>
+      <div class="pager" id="spool-pager" hidden></div>
     </section>
 
     <section class="card mat-form" id="spool-panel" hidden>
@@ -683,6 +684,8 @@ function fillSelects() {
   materialSelect.value = currentMaterial;
 }
 
+let spoolPage = 1;
+
 function renderSpools() {
   document.querySelectorAll("#spool-filter .fchip").forEach((btn) => {
     btn.classList.toggle("on", (btn.dataset.filter || "all") === spoolFilter);
@@ -698,14 +701,17 @@ function renderSpools() {
     spoolFilter === "archive" ? shown.length : activeCount
   );
   const note = document.getElementById("spool-list-note");
+  const pager = document.getElementById("spool-pager");
   if (!spools.length) {
     note.textContent = "";
     body.innerHTML = '<tr><td class="empty" colspan="6"><div class="empty-state">' + icon("spool") + '<p>Noch keine Spule.</p><p class="tiny">„Neue Spule“ anlegen oder Code scannen.</p></div></td></tr>';
+    renderPager(pager, null, () => {});
     return;
   }
   if (!shown.length) {
     note.textContent = "";
     body.innerHTML = '<tr><td class="empty" colspan="6"><div class="empty-state">' + icon("search") + '<p>Keine Spule passt.</p></div></td></tr>';
+    renderPager(pager, null, () => {});
     return;
   }
   note.textContent = spoolFilter === "archive"
@@ -719,8 +725,10 @@ function renderSpools() {
     const bh = b.printer_host || "zzz";
     return ah.localeCompare(bh, "de") || (Number(a.ace_slot) || 0) - (Number(b.ace_slot) || 0) || a.name.localeCompare(b.name, "de");
   });
+  const paged = pageSlice(ordered, spoolPage, DEFAULT_PAGE_SIZE);
+  spoolPage = paged.page;
   let lastPlace = null;
-  ordered.forEach((spool) => {
+  paged.items.forEach((spool) => {
     const group = spool.printer_host ? printerName(spool.printer_host) : "Regal";
     if (group !== lastPlace) {
       lastPlace = group;
@@ -753,6 +761,10 @@ function renderSpools() {
     tr.addEventListener("click", () => fill(spool));
     body.appendChild(tr);
   });
+  renderPager(pager, paged, (p) => {
+    spoolPage = p;
+    renderSpools();
+  });
 }
 
 function renderSorten() {
@@ -867,6 +879,7 @@ document.querySelectorAll(".mat-tabs [data-view]").forEach((btn) => {
 });
 
 document.getElementById("spool-filter").addEventListener("click", (event) => {
+  spoolPage = 1;
   const btn = event.target.closest("[data-filter]");
   if (!btn) return;
   spoolFilter = btn.dataset.filter || "all";
@@ -874,6 +887,7 @@ document.getElementById("spool-filter").addEventListener("click", (event) => {
 });
 document.getElementById("spool-search").addEventListener("input", (event) => {
   spoolSearch = event.target.value || "";
+  spoolPage = 1;
   renderSpools();
 });
 document.getElementById("sorten-search").addEventListener("input", (event) => {
@@ -996,10 +1010,12 @@ document.getElementById("spool-delete").addEventListener("click", () => {
   });
 });
 document.getElementById("spool-filter-type")?.addEventListener("change", (event) => {
+  spoolPage = 1;
   spoolTypeFilter = event.target.value || "";
   renderSpools();
 });
 document.getElementById("spool-filter-color")?.addEventListener("change", (event) => {
+  spoolPage = 1;
   spoolColorFilter = event.target.value || "";
   renderSpools();
 });