import modal. added UI elements to apps.js

.dockerignore

@@ -5,3 +5,5 @@
 .gitignore
 .github
 .git
+Dockerfile
+docker-compose.yaml

CHANGELOG.md

@@ -8,6 +8,7 @@
 * Dynamically generated avatars.
 * Updated database models.
 * Persistent Database.
+* Install cards displayed on dashboard.
 
 ## v0.40 (Feb 26th 2024) - HTMX rewrite
 * Pages rewritten to use HTMX.

controllers/apps.js

@@ -384,3 +384,9 @@ export const LearnMore = async (req, res) => {
   let modal = readFileSync('./views/modals/learnmore.html', 'utf8');
   res.send(modal);
 }
+
+
+export const ImportModal = async (req, res) => {
+  let modal = readFileSync('./views/modals/import.html', 'utf8');
+  res.send(modal);
+}

controllers/dashboard.js

@@ -30,16 +30,21 @@ export const Stats = async (req, res) => {
                 value = Math.round((data.active / data.total) * 100); 
             });
             break;
-        case 'TX':
+        case 'NET':
+            let down = 0;
+            let up = 0;
             await networkStats().then(data => {
-                value = data[0].tx_bytes / (1024 * 1024); 
+                down = Math.round(data[0].rx_bytes / (1024 * 1024));
+                up = Math.round(data[0].tx_bytes / (1024 * 1024));
             });
-            break;
+            let net = `<div class="font-weight-medium">
-        case 'RX':
+                        <label class="cpu-text mb-1">Down:${down} Up:${up}</label>
-            await networkStats().then(data => { 
+                        </div>
-                value = data[0].rx_bytes / (1024 * 1024); 
+                        <div class="cpu-bar meter animate ${color}">
-            });
+                            <span style="width:20%"><span></span></span>
-            break;
+                        </div>`;           
+            res.send(net);
+            return;
         case 'DISK':
             await fsSize().then(data => { 
                 value = data[0].use; 

router/index.js

@@ -5,7 +5,7 @@ export const router = express.Router();
 import { Login, submitLogin, Logout } from "../controllers/login.js";
 import { Register, submitRegister } from "../controllers/register.js";
 import { Dashboard, Logs, Modals, Stats, Chart, SSE, Card, updateCards, Containers, Action } from "../controllers/dashboard.js";
-import { Apps, appSearch, InstallModal, LearnMore } from "../controllers/apps.js";
+import { Apps, appSearch, InstallModal, ImportModal, LearnMore } from "../controllers/apps.js";
 import { Users } from "../controllers/users.js";
 import { Images, removeImage } from "../controllers/images.js";
 import { Networks, removeNetwork } from "../controllers/networks.js";
@@ -52,6 +52,7 @@ router.get("/apps", auth, Apps);
 router.get("/apps/:page", auth, Apps);
 router.post("/apps", auth, appSearch);
 router.get("/install_modal", auth, InstallModal)
+router.get("/import_modal", auth, ImportModal)
 router.get("/learn_more", auth, LearnMore)
 
 router.get("/users", auth, Users);

views/apps.html

@@ -36,16 +36,27 @@
               <!-- Page title actions -->
               <div class="col-auto ms-auto d-print-none">
                 <div class="d-flex align-items-center">
+                  <div class="me-2">
+                    <select class="form-select">
+                      <option>Category:</option>
+                      <option>Media</option>
+                      <option>Tools</option>
+                      <option>Gaming</option>
+                      <option>FOSS</option>
+                      <option>Database</option>
+                    </select>
+                  </div>
                   <div class="me-2">
                     <select class="form-select">
                       <option>Templates.json (default)</option>
                       <option>Compose</option>
                     </select>
                   </div>
+                  <button class="btn btn-primary h-50" name="Import" id="Import" data-hx-get="/import_modal" data-hx-target="#modals-here" hx-swap="innerHTML" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">Import</button>
                   <form action="/apps" id="search" name="search" method="POST">
                     <input type="search" class="form-control" name="search" placeholder="Search apps…" >
                   </form>
-                  <input type="submit" form="search" class="btn btn-outline-success h-50" value="search">
+                  <input type="submit" form="search" class="btn btn-primary h-50" value="Search">
                 </div>
               </div>
             </div>

views/dashboard.html

@@ -96,7 +96,7 @@
                         </div>
 
                         <!-- HTMX -->
-                        <div class="col" name="NET" id="purple">
+                        <div class="col" name="NET" id="purple" data-hx-get="/stats" data-hx-trigger="load, every 2s">
                           <div class="font-weight-medium">
                             <label id="net-text" class="net-text mb-1" for="network">Down: 0MB  Up: 0MB</label>
                           </div>

views/modals/import.html

@@ -0,0 +1,20 @@
+
+<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
+    <div class="modal-content">
+        <div class="modal-body">
+            <div class="modal-title">Import Template(s)</div>
+            <div class="text-muted">Templates can be *.json, *.yml, or .yaml</div>
+
+            <div class="mt-3">
+                <div class="form-label">Choose file(s)</div>
+                <input type="file" class="form-control">
+            </div>
+
+        </div>
+        
+        <div class="modal-footer">
+            <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
+            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Upload</button>
+        </div>
+    </div>
+</div>