feat(ui): image tabblad sorteren toegevoegd

webui/html/assets/css/app.css

@@ -417,4 +417,17 @@ pre{
 .badge-yellow {
     background: #f1c40f;
     color: black;
+}
+.sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.sort-indicator{
+  display: inline-block;
+  width: 14px;          /* vaste ruimte => geen verspringen */
+  text-align: center;
+  font-size: 11px;
+  margin-left: 4px;
+  opacity: .75;
 }

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" ? "▲" : "▼";
+  }
 }

webui/html/index.html

@@ -163,11 +163,26 @@
               <th style="width:30px;">
                 <input type="checkbox" id="imagesSelectAll" onclick="toggleSelectAllImages(this)">
               </th>
-              <th>Repo / Tag</th>
+              <th class="sortable" onclick="sortImages('repo')">
-              <th>ID</th>
+                Repo / Tag <span class="sort-indicator" id="sort-repo"></span>
-              <th>Size</th>
+              </th>
-              <th>Created</th>
+
-              <th>Containers</th>
+              <th class="sortable" onclick="sortImages('id')">
+                ID <span class="sort-indicator" id="sort-id"></span>
+              </th>
+
+              <th class="sortable" onclick="sortImages('size')">
+                Size <span class="sort-indicator" id="sort-size"></span>
+              </th>
+
+              <th class="sortable" onclick="sortImages('created')">
+                Created <span class="sort-indicator" id="sort-created"></span>
+              </th>
+
+              <th class="sortable" onclick="sortImages('containers')">
+                Containers <span class="sort-indicator" id="sort-containers"></span>
+              </th>
+
               <th>Status</th>
               <th style="width:100px;">Acties</th>
             </tr>