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

web/templates/protokoll.html

@@ -27,6 +27,7 @@
     <thead><tr><th>Drucker</th><th>Datei</th><th>Zustand</th><th>Dauer</th><th>Ist</th><th>Kosten</th><th>Urteil</th><th>Spule</th><th></th></tr></thead>
     <tbody id="run-rows"></tbody>
   </table>
+  <div class="pager" id="run-pager" hidden></div>
 </div>
 {% endblock %}
 {% block script %}
@@ -37,6 +38,7 @@ const states = {
 };
 let runs = [];
 let spools = [];
+let runPage = 1;
 
 function fillPrinterFilter() {
   const select = document.getElementById("run-filter-printer");
@@ -82,13 +84,17 @@ function render() {
   const shown = filteredRuns();
   if (!runs.length) {
     body.innerHTML = '<tr><td class="empty" colspan="9"><div class="empty-state">' + icon("list") + '<p>Noch kein Lauf.</p><p class="tiny">„Läufe holen“ liest die Drucker aus.</p></div></td></tr>';
+    renderPager(document.getElementById("run-pager"), null, () => {});
     return;
   }
   if (!shown.length) {
     body.innerHTML = '<tr><td class="empty" colspan="9"><div class="empty-state">' + icon("filter") + '<p>Kein Lauf passt zum Filter.</p></div></td></tr>';
+    renderPager(document.getElementById("run-pager"), null, () => {});
     return;
   }
-  shown.forEach((run) => {
+  const paged = pageSlice(shown, runPage, DEFAULT_PAGE_SIZE);
+  runPage = paged.page;
+  paged.items.forEach((run) => {
     const tr = document.createElement("tr");
     tr.className = "pick";
     tr.innerHTML = "<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>";
@@ -233,16 +239,21 @@ function render() {
     }
     body.appendChild(tr);
   });
+  renderPager(document.getElementById("run-pager"), paged, (p) => {
+    runPage = p;
+    render();
+  });
 }
 
 async function load() {
-  [runs, spools] = await Promise.all([api("/laeufe"), api("/spulen")]);
+  [runs, spools] = await Promise.all([api("/laeufe?limit=500"), api("/spulen")]);
+  runPage = 1;
   render();
 }
 
 ["run-filter-printer", "run-filter-verdict", "run-filter-spool"].forEach((id) => {
-  document.getElementById(id).addEventListener("change", render);
-  document.getElementById(id).addEventListener("input", render);
+  document.getElementById(id).addEventListener("change", () => { runPage = 1; render(); });
+  document.getElementById(id).addEventListener("input", () => { runPage = 1; render(); });
 });
 
 document.getElementById("sync").addEventListener("click", async () => {