Fixed image size displayed on images.js

controllers/images.js

@@ -3,7 +3,7 @@ import { dockerImages } from 'systeminformation';
 
 export const Images = async function(req, res) {
 
-    let images = await dockerImages({ all: true });
+    let images = await docker.listImages({ all: true });
 
     let image_list = `
     <thead>
@@ -23,20 +23,24 @@ export const Images = async function(req, res) {
 
     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;
+        let date = new Date(images[i].Created * 1000);
+        let created = date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
+
+        let size = images[i].Size / 1000 / 1000; // to match docker desktop
+        size = size.toFixed(2);
+
+        let details = `
+            <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">${created}</td>
+                <td class="sort-quantity">${size}</td>
+                <td class="text-end"><a class="btn" href="#">Details</a></td>
+            </tr>`
+        image_list += details;
     }
     
     image_list += `</tbody>`
@@ -46,7 +50,8 @@ export const Images = async function(req, res) {
         name: req.session.user,
         role: req.session.role,
         avatar: req.session.avatar,
-        image_list: image_list
+        image_list: image_list,
+        image_count: images.length
     });
 
 }

views/images.ejs

@@ -134,7 +134,7 @@
 
                   </form>
                                         
-                    <p class="m-0 text-muted ms-auto">3 Images</p>
+                    <p class="m-0 text-muted ms-auto"><%- image_count %> Images</p>
 
                   </div>
                 </div>