feat(ui): image tabblad toegevoegd

2026-02-21 12:33:10 +01:00
parent 1ed7699437
commit 815d16f872
3 changed files with 157 additions and 1 deletions
@@ -390,4 +390,31 @@ pre{

 .file-folder-files{
    margin-left: 18px;
+}
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.data-table th,
+.data-table td {
+    padding: 8px;
+    border-bottom: 1px solid #ddd;
+    text-align: left;
+}
+
+.badge {
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+
+.badge-green {
+    background: #2ecc71;
+    color: white;
+}
+
+.badge-yellow {
+    background: #f1c40f;
+    color: black;
 }
@@ -0,0 +1,92 @@
+async function loadImages() {
+  const res = await fetch("/api/images");
+  const images = await res.json();
+  renderImages(images);
+}
+
+function renderImages(images) {
+  const tbody = document.getElementById("images-tbody");
+  tbody.innerHTML = "";
+
+  images.forEach(img => {
+    const tr = document.createElement("tr");
+
+    const repoTag = (img.RepoTags && img.RepoTags.length > 0)
+      ? img.RepoTags[0]
+      : "<none>";
+
+    const shortId = img.Id.substring(0, 12);
+    const sizeMB = (img.Size / 1024 / 1024).toFixed(1);
+    const containers = img.Containers || 0;
+    const fullId = img.Id;
+
+    const status = containers > 0
+      ? `<span class="badge badge-green">In use</span>`
+      : `<span class="badge badge-yellow">Unused</span>`;
+
+    const disabled = containers > 0 ? "disabled" : "";
+
+    tr.innerHTML = `
+      <td>
+        <input type="checkbox" class="image-checkbox" value="${fullId}" ${disabled}>
+      </td>
+      <td>${repoTag}</td>
+      <td>${shortId}</td>
+      <td>${sizeMB} MB</td>
+      <td>${containers}</td>
+      <td>${status}</td>
+      <td>
+        <button class="btn small bad" onclick="removeSingleImage('${fullId}')" ${disabled}>
+          Remove
+        </button>
+      </td>
+    `;
+
+    tbody.appendChild(tr);
+  });
+}
+
+function toggleSelectAllImages(master) {
+  document.querySelectorAll(".image-checkbox:not(:disabled)")
+    .forEach(cb => cb.checked = master.checked);
+}
+
+async function removeSingleImage(id) {
+  if (!confirm("Image verwijderen?")) return;
+
+  await fetch("/api/images/" + encodeURIComponent(id), {
+    method: "DELETE"
+  });
+
+  await loadImages();
+}
+
+async function removeSelectedImages() {
+  const selected = Array.from(document.querySelectorAll(".image-checkbox:checked"))
+    .map(cb => cb.value);
+
+  if (!selected.length) {
+    alert("Geen images geselecteerd.");
+    return;
+  }
+
+  if (!confirm("Geselecteerde images verwijderen?")) return;
+
+  await fetch("/api/images/remove", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ images: selected })
+  });
+
+  await loadImages();
+}
+
+async function pruneUnusedImages() {
+  if (!confirm("Alle unused images verwijderen?")) return;
+
+  await fetch("/api/images/prune?all=true", {
+    method: "POST"
+  });
+
+  await loadImages();
+}