Volumes page displays bind type and status(in use)

controllers/volumes.js

@@ -1,59 +1,66 @@
 import { docker } from '../server.js';
 
-
 export const Volumes = async function(req, res) {
-
+    let container_volumes = [];
+    let volume_list = '';
+
+    // Table header
+    volume_list = `<thead>
+                        <tr>
+                            <th class="w-1"><input class="form-check-input m-0 align-middle" name="select" type="checkbox" aria-label="Select all" onclick="selectAll()"></th>
+                            <th><label class="table-sort" data-sort="sort-type">Type</label></th>
+                            <th><label class="table-sort" data-sort="sort-name">Name</label></th>
+                            <th><label class="table-sort" data-sort="sort-city">Mount point</label></th>
+                            <th><label class="table-sort" data-sort="sort-score">Status</label></th>
+                            <th><label class="table-sort" data-sort="sort-date">Created</label></th>
+                            <th><label class="table-sort" data-sort="sort-quantity">Size</label></th>
+                            <th><label class="table-sort" data-sort="sort-progress">Action</label></th>
+                        </tr>
+                    </thead>
+                    <tbody class="table-tbody">`
+
+    // List all containers
+    let containers = await docker.listContainers({ all: true });
+
+    // Get the first 6 volumes from each container
+    for (let i = 0; i < containers.length; i++) {
+        try { container_volumes.push({type: containers[i].Mounts[0].Type, source: containers[i].Mounts[0].Source}); } catch { } 
+        try { container_volumes.push({type: containers[i].Mounts[1].Type, source: containers[i].Mounts[1].Source}); } catch { }
+        try { container_volumes.push({type: containers[i].Mounts[2].Type, source: containers[i].Mounts[2].Source}); } catch { }
+        try { container_volumes.push({type: containers[i].Mounts[3].Type, source: containers[i].Mounts[3].Source}); } catch { }
+        try { container_volumes.push({type: containers[i].Mounts[4].Type, source: containers[i].Mounts[4].Source}); } catch { }
+        try { container_volumes.push({type: containers[i].Mounts[5].Type, source: containers[i].Mounts[5].Source}); } catch { }
+    }
+    
+    // List ALL volumes
     let list = await docker.listVolumes({ all: true });
     let volumes = list.Volumes;
 
-    let volume_list = `
-    <thead>
-        <tr>
-            <th class="w-1"><input class="form-check-input m-0 align-middle" name="select" type="checkbox" aria-label="Select all" onclick="selectAll()"></th>
-            <th><label class="table-sort" data-sort="sort-name">Name</label></th>
-            <th><label class="table-sort" data-sort="sort-city">Mount point</label></th>
-            <th><label class="table-sort" data-sort="sort-score">Status</label></th>
-            <th><label class="table-sort" data-sort="sort-date">Created</label></th>
-            <th><label class="table-sort" data-sort="sort-quantity">Size</label></th>
-            <th><label class="table-sort" data-sort="sort-progress">Action</label></th>
-        </tr>
-    </thead>
-    <tbody class="table-tbody">`
-
-
-
+    // Create a table row for each volume
     for (let i = 0; i < volumes.length; i++) {
         let volume = volumes[i];
-        let name = volume.Name;
-        let mount = volume.Mountpoint;
+        let name = "" + volume.Name;
+        let mount = "" + volume.Mountpoint;
+        let type = "Bind";
 
-        if (name.length > 40) {
-            name = name.slice(0, 37) + '...';
-        }
-
-        if (mount.length > 70) {
-            mount = mount.slice(0, 67) + '...';
-        }
-        
-        // docker.df(volume.Mountpoint).then((data) => {
-        //     for (let key in data) {
-        //         console.log(data[key]);
-        //     }
-        // });
+        // Check if the volume is being used by any of the containers
+        let status = ` - `;
+        if (container_volumes.some(volume => volume.source === mount)) { status = "In use"; }
+        if (container_volumes.some(volume => volume.source === mount && volume.type === 'volume')) { type = "Volume"; }
 
-    
-        let details = `
+        let row = `
         <tr>
             <td><input class="form-check-input m-0 align-middle" name="select" value="${name}" type="checkbox" aria-label="Select"></td>
+            <td class="sort-type">${type}</td>
             <td class="sort-name">${name}</td>
             <td class="sort-city">${mount}</td>
-            <td class="sort-score text-green"> - </td>
+            <td class="sort-score text-green">${status}</td>
             <td class="sort-date" data-date="1628122643">${volume.CreatedAt}</td>
             <td class="sort-quantity">MB</td>
             <td class="text-end"><a class="btn" href="#">Details</a></td>
         </tr>`
     
-        volume_list += details;    
+        volume_list += row;    
     }
 
     volume_list += `</tbody>`
@@ -102,4 +109,11 @@ export const removeVolume = async function(req, res) {
     }
 
     res.redirect("/volumes");
-}
+}
+
+
+// docker.df(volume.Name).then((data) => {
+//     for (let key in data) {
+//         console.log(data[key]);
+//     }
+// });

views/volumes.html

@@ -39,7 +39,7 @@
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-refresh" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path> <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path> </svg>
                               Refresh
                             </a>
-                            <a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#not_add-site">
+                            <a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#modals-here">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 5l0 14"></path> <path d="M5 12l14 0"></path> </svg>
                               New Volume
                             </a>
@@ -79,6 +79,52 @@
 
                     </div>
                   </form>
+
+
+
+                  <!-- HTMX Modal Target -->
+                  <div id="modals-here" class="modal modal-blur fade" style="display: none" aria-hidden="false" tabindex="-1">
+                    <div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollables">
+                      <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title">New Volume</h5>
+                        </div>
+
+                        <div class="modal-body text-center">
+                          <form method="post" action="/volumes/add">
+
+                            <div class="row row-cards">
+                              <div class="col-sm-6 col-md-6">
+                                  
+                              </div>
+                              <div class="col-sm-6 col-md-6">
+                                  
+                              </div>
+                            </div>
+
+                              <div class="row g-2 align-items-end">
+                                <div class="col-7">
+                                  <label class="form-label text-muted">Image</label>
+                                  <input type="text" class="form-control" name="image" placeholder="lllllllillllllillll/dweebui">
+                                </div>
+                                <div class="col-3">
+                                  <label class="form-label text-muted">Tag</label>
+                                  <input type="text" class="form-control" name="tag" placeholder="latest">
+                                </div>
+                                <div class="col-2">
+                                  <button type="submit" class="btn mt-2">Pull</button>
+                                </div>
+                              </div>
+
+                          </form>
+                        </div>
+
+                      </div>
+                    </div>
+                  </div>
+
+
+
                 </div>
               </div>