working 'new volume' button

CHANGELOG.md

@@ -19,10 +19,12 @@
 * Added titles to activity indicators.
 * Created Github Wiki.
 * Added image pull to images page.
-* Images display 'In use' or 'Unused'.
+* Images and volumes display 'In use'.
 * Images display tag.
 * Image pull gets latest if not set.
 * Updated buttons to trigger from 'mousedown' (John Carmack + Theo told me to).
+* Volumes page displays type (Volume or Bind).
+* New Volume button is now functional.
 
 ## v0.40 (Feb 26th 2024) - HTMX rewrite
 * Pages rewritten to use HTMX.

controllers/images.js

@@ -76,11 +76,9 @@ export const Images = async function(req, res) {
         let size = images[i].Size / 1000 / 1000; // to match docker desktop
         size = size.toFixed(2);
 
-        let status = 'unused';
-        let status_color = 'yellow';
+        let status = '';
         if (container_images.includes(images[i].RepoTags[0])) {
-            status = '<strong>In Use</strong>';
-            status_color = 'green';
+            status = 'In Use';
         }
 
         let details = `
@@ -89,7 +87,7 @@ export const Images = async function(req, res) {
                 <td class="sort-name">${name}</td>
                 <td class="sort-type">${tag}</td>
                 <td class="sort-city">${images[i].Id}</td>
-                <td class="sort-score text-${status_color}">${status}</td>
+                <td class="sort-score text-green">${status}</td>
                 <td class="sort-date" data-date="1628122643">${created}</td>
                 <td class="sort-quantity">${size} MB</td>
                 <td class="text-end"><a class="btn" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler icon-tabler-player-play" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 4v16l13 -8z"></path></svg></a></td>

controllers/volumes.js

@@ -44,7 +44,7 @@ export const Volumes = async function(req, res) {
         let type = "Bind";
 
         // Check if the volume is being used by any of the containers
-        let status = ` - `;
+        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"; }
 

views/volumes.html

@@ -81,8 +81,6 @@
                   </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">
@@ -93,9 +91,8 @@
                         <div class="modal-body text-center">
                           <form method="post" action="/addVolume">
 
-
                               <div class="row g-2 align-items-end">
-                                <div class="col-8">
+                                <div class="col-9">
                                   <label class="form-label text-muted">Volume Name</label>
                                   <input type="text" class="form-control" name="volume">
                                 </div>
@@ -104,7 +101,8 @@
                                   <button type="submit" class="btn mt-2">Create</button>
                                 </div>
                               </div>
-
+                                
+                                <label class="mt-3 text-muted"><label class="text-danger">*</label>Name cannot contain spaces or special characters.</label>
                           </form>
                         </div>