feat(ui): image tabblad toegevoegd

webui/html/index.html

@@ -51,6 +51,9 @@
       <div class="tab" id="tab-networks" onclick="setTab('networks')" title="Netwerk">
         <span class="navIcon">🌐</span><span class="navLabel">Netwerk</span>
       </div>
+      <div class="tab" id="tab-images" onclick="setTab('images')" title="Images">
+        <span class="navIcon">📦</span><span class="navLabel">Images</span>
+      </div>
       <div class="tab" id="tab-files" onclick="setTab('files')" title="Files">
         <span class="navIcon">📁</span><span class="navLabel">Files</span>
       </div>
@@ -142,6 +145,37 @@
     </div>
   </div>
 
+  <div id="view-images" class="grid" style="display:none">
+    <div class="card" style="grid-column: 1 / -1;">
+      <div class="cardHeader">
+        <div class="cardTitle">Images</div>
+          <div class="flex">
+            <button class="btn" onclick="loadImages()">Ververs</button>
+            <button class="btn bad" onclick="removeSelectedImages()">Remove selected</button>
+            <button class="btn warn" onclick="pruneUnusedImages()">Prune unused</button>
+          </div>
+      </div>
+      <div class="cardBody">
+        <table>
+          <thead>
+            <tr>
+              <th style="width:30px;">
+                <input type="checkbox" id="imagesSelectAll" onclick="toggleSelectAllImages(this)">
+              </th>
+              <th>Repo / Tag</th>
+              <th>ID</th>
+              <th>Size</th>
+              <th>Containers</th>
+              <th>Status</th>
+              <th style="width:100px;">Acties</th>
+            </tr>
+          </thead>
+          <tbody id="images-tbody"></tbody>
+        </table>
+      </div>
+    </div>
+</div>
+
   <div id="view-files" class="grid" style="display:none">
     <div class="card" style="grid-column: 1 / -1;">
       <div class="cardHeader">
@@ -302,7 +336,9 @@
     if (tab === 'networks') {
       networksRefresh();
     }
-    
+    if (tab === "images") {
+        loadImages();
+    }
     // Start/stop live stats alleen in Containers tab
     if (tab === 'containers') startContainersStatsStream();
     else stopContainersStatsStream();
@@ -1227,5 +1263,6 @@
     setInterval(() => { pingApi(); }, 20000);
   })();
 </script>
+<script src="assets/js/tabs/images.js"></script>
 </body>
 </html>