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

web/templates/auftraege.html

@@ -29,6 +29,7 @@
         <thead><tr><th>Titel</th><th>Status</th><th>Fortschritt</th></tr></thead>
         <tbody id="order-rows"></tbody>
       </table>
+      <div class="pager" id="order-pager" hidden></div>
     </div>
   </section>
   <section class="card">
@@ -246,16 +247,22 @@ async function einreihen(itemId) {
   }
 }
 
+let orderPage = 1;
+
 function renderList() {
   const body = document.getElementById("order-rows");
   body.innerHTML = "";
+  const pager = document.getElementById("order-pager");
   if (!orders.length) {
     body.innerHTML = '<tr><td colspan="3" class="empty"><div class="empty-state"><p>Noch kein Auftrag.</p><p><button type="button" class="ghost" id="order-empty-new">Ersten Auftrag anlegen →</button></p></div></td></tr>';
     document.getElementById("order-empty-new")?.addEventListener("click", () => fillOrder(null));
+    renderPager(pager, null, () => {});
     return;
   }
   const selected = document.getElementById("order-id").value;
-  orders.forEach((order) => {
+  const paged = pageSlice(orders, orderPage, DEFAULT_PAGE_SIZE);
+  orderPage = paged.page;
+  paged.items.forEach((order) => {
     const tr = document.createElement("tr");
     tr.className = "pick" + (selected && String(order.id) === selected ? " on" : "");
     tr.innerHTML = "<td></td><td></td><td></td>";
@@ -275,12 +282,17 @@ function renderList() {
     });
     body.appendChild(tr);
   });
+  renderPager(pager, paged, (p) => {
+    orderPage = p;
+    renderList();
+  });
 }
 
 async function loadList() {
   const st = document.getElementById("filter-status").value;
   const q = st ? "?status=" + encodeURIComponent(st) : "";
   orders = await api("/auftraege" + q);
+  orderPage = 1;
   renderList();
 }