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

web/templates/projekte.html

@@ -22,6 +22,7 @@
         <thead><tr><th>Name</th><th>Status</th><th>Ordner</th><th class="num">Dateien</th></tr></thead>
         <tbody id="proj-rows"></tbody>
       </table>
+      <div class="pager" id="proj-pager" hidden></div>
     </div>
   </section>
 
@@ -110,15 +111,21 @@ function fill(project) {
   renderDetail(project);
 }
 
+let projPage = 1;
+
 function renderList() {
   const body = document.getElementById("proj-rows");
+  const pager = document.getElementById("proj-pager");
   document.getElementById("proj-count").textContent = String(projects.length);
   if (!projects.length) {
     body.innerHTML = '<tr><td class="empty" colspan="4"><div class="empty-state">' + icon("folder") + "<p>Noch kein Projekt.</p></div></td></tr>";
+    renderPager(pager, null, () => {});
     return;
   }
   body.innerHTML = "";
-  projects.forEach((project) => {
+  const paged = pageSlice(projects, projPage, DEFAULT_PAGE_SIZE);
+  projPage = paged.page;
+  paged.items.forEach((project) => {
     const tr = document.createElement("tr");
     tr.className = "pick" + (String(project.id) === String(selectedId) ? " on" : "");
     tr.innerHTML = "<td></td><td></td><td></td><td class=\"num\"></td>";
@@ -130,6 +137,10 @@ function renderList() {
     tr.addEventListener("click", () => openProject(project.id));
     body.appendChild(tr);
   });
+  renderPager(pager, paged, (p) => {
+    projPage = p;
+    renderList();
+  });
 }
 
 function renderDetail(project) {