First draft of working images page

controllers/images.js

@@ -3,29 +3,50 @@ import { dockerImages } from 'systeminformation';
 
 export const Images = async function(req, res) {
 
-    const data1 = await dockerImages({ all: true });
-
-    const data2 = await docker.listImages({ all: true });
-
-    // for ( i = 0; i < data.length; i++) {
-    //     console.log(`Image ${i}:`)
-    //     console.log(`repoTags: ${data[i].repoTags}`)
-    // }
+    let images = await dockerImages({ all: true });
+
+    let image_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><button class="table-sort" data-sort="sort-name">Name</button></th>
+            <th><button class="table-sort" data-sort="sort-city">ID</button></th>
+            <th><button class="table-sort" data-sort="sort-type">Tag</button></th>
+            <th><button class="table-sort" data-sort="sort-score">Status</button></th>
+            <th><button class="table-sort" data-sort="sort-date">Created</button></th>
+            <th><button class="table-sort" data-sort="sort-quantity">Size</button></th>
+            <th><button class="table-sort" data-sort="sort-progress">Action</button></th>
+        </tr>
+    </thead>
+    <tbody class="table-tbody">`
+
+
+    for (let i = 0; i < images.length; i++) {
+
+    let image = `
+        <tr>
+            <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
+            <td class="sort-name">${images[i].repoTags}</td>
+            <td class="sort-city">${images[i].id}</td>
+            <td class="sort-type">Latest</td>
+            <td class="sort-score text-green">In use</td>
+            <td class="sort-date" data-date="1628122643">August 05, 2021</td>
+            <td class="sort-quantity">69.27 MB</td>
+            <td class="text-end"><a class="btn" href="#">Details</a></td>
+        </tr>`
+
+ 
+        image_list += image;
+    }
     
-    console.log(`data1: ${data1}`);
-
-    console.log(`data2: ${data2}`);
-
+    image_list += `</tbody>`
 
-    // for (let i = 0; i < allImages.length; i++) {
-    //     console.log(`Image ${i}:`)
-    //     console.log(`repoTags: ${allImages[i].repoTags}`)
-    // }
     
     res.render("images", {
         name: req.session.user,
         role: req.session.role,
         avatar: req.session.avatar,
+        image_list: image_list
     });
 
 }

views/images.ejs

@@ -109,47 +109,9 @@
 
                   <div id="table-default" class="table-responsive">
                     <table class="table">
-                      <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><button class="table-sort" data-sort="sort-name">Name</button></th>
-                          <th><button class="table-sort" data-sort="sort-city">ID</button></th>
-                          <th><button class="table-sort" data-sort="sort-type">Tag</button></th>
-                          <th><button class="table-sort" data-sort="sort-score">Status</button></th>
-                          <th><button class="table-sort" data-sort="sort-date">Created</button></th>
-                          <th><button class="table-sort" data-sort="sort-quantity">Size</button></th>
-                          <th><button class="table-sort" data-sort="sort-progress">Action</button></th>
-                        </tr>
-                      </thead>
-                      <tbody class="table-tbody"><tr>
-                          <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
-                          <td class="sort-name">Caddy</td>
-                          <td class="sort-city">2f148ddb6662b4245ef4ced637e928eaf67a8a1941572d69627652253e779366</td>
-                          <td class="sort-type">Latest</td>
-                          <td class="sort-score text-green">In use</td>
-                          <td class="sort-date" data-date="1628122643">August 05, 2021</td>
-                          <td class="sort-quantity">69.27 MB</td>
-                          <td class="text-end"><a class="btn" href="#">Details</a></td>
-                        </tr><tr>
-                          <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
-                          <td class="sort-name">clamav/clamav</td>
-                          <td class="sort-city">c447f9c713058cdb915c5becbef004a678cd7b8d6f5d70ec53479ba7687c3375</td>
-                          <td class="sort-type">Latest</td>
-                          <td class="sort-score text-green">In use</td>
-                          <td class="sort-date" data-date="1546344668">January 01, 2019</td>
-                          <td class="sort-quantity">546.22 MB</td>
-                          <td class="text-end"><a class="btn" href="#">Details</a></td>
-                        </tr><tr>
-                          <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
-                          <td class="sort-name">linuxserver/code-server</td>
-                          <td class="sort-city">af09184f86e955b33bef7634862430f54899cc9ca5e492d1530451caa1d99dc0</td>
-                          <td class="sort-type">Latest</td>
-                          <td class="sort-score text-yellow">Unused</td>
-                          <td class="sort-date" data-date="1545977105">December 28, 2018</td>
-                          <td class="sort-quantity">63.91 MB</td>
-                          <td class="text-end"><a class="btn" href="#">Details</a></td>
-                        </tr>
-                      </tbody>
+                      
+                      <%- image_list %>
+
                     </table>
                   </div>