feat(ui): image tabblad sorteren toegevoegd

webui/html/assets/js/tabs/images.js

@@ -1,7 +1,13 @@
+let imagesData = [];
+let imagesSort = { field: null, dir: null };
+
 async function loadImages() {
   const res = await fetch("/api/images");
   const images = await res.json();
-  renderImages(images);
+
+  imagesData = images;
+  updateSortIndicators();
+  applyImageSorting();
 }
 
 function renderImages(images) {
@@ -311,4 +317,79 @@ function ensureSystemdContextOrAlert(contextDir) {
     return false;
   }
   return true;
+}
+function sortImages(field) {
+  if (imagesSort.field !== field) {
+    imagesSort.field = field;
+    imagesSort.dir = "asc";
+  } else if (imagesSort.dir === "asc") {
+    imagesSort.dir = "desc";
+  } else if (imagesSort.dir === "desc") {
+    imagesSort.field = null;
+    imagesSort.dir = null;
+  } else {
+    imagesSort.dir = "asc";
+  }
+
+  updateSortIndicators();
+  applyImageSorting();
+}
+
+function applyImageSorting() {
+  let data = [...imagesData];
+
+  if (imagesSort.field && imagesSort.dir) {
+    data.sort((a, b) => {
+      let va, vb;
+
+      switch (imagesSort.field) {
+        case "repo":
+          va = (a.RepoTags && a.RepoTags[0]) || "";
+          vb = (b.RepoTags && b.RepoTags[0]) || "";
+          break;
+        case "id":
+          va = a.Id || "";
+          vb = b.Id || "";
+          break;
+        case "size":
+          va = a.Size || 0;
+          vb = b.Size || 0;
+          break;
+        case "created":
+          va = a.Created || 0;
+          vb = b.Created || 0;
+          break;
+        case "containers":
+          va = a.Containers || 0;
+          vb = b.Containers || 0;
+          break;
+      }
+
+      if (typeof va === "string") {
+        return imagesSort.dir === "asc"
+          ? va.localeCompare(vb)
+          : vb.localeCompare(va);
+      } else {
+        return imagesSort.dir === "asc"
+          ? va - vb
+          : vb - va;
+      }
+    });
+  }
+
+  renderImages(data);
+}
+
+function updateSortIndicators() {
+  // default: toon dat alles sorteerbaar is
+  document.querySelectorAll(".sort-indicator").forEach(el => el.textContent = "↕");
+
+  // als er geen sort actief is: laat defaults staan
+  if (!imagesSort.field || !imagesSort.dir) return;
+
+  // actieve kolom: ▲ of ▼
+  const el = document.getElementById("sort-" + imagesSort.field);
+  if (el) {
+    el.textContent = imagesSort.dir === "asc" ? "▲" : "▼";
+  }
 }