fixed users.js avatars. app.js modal

controllers/dashboard.js

@@ -67,12 +67,6 @@ export const Stats = async (req, res) => {
 
 let [ hidden, cardList, eventType, containersArray, sentArray ] = [ '', '', '', [], [] ];
 
-// Container cards
-export const Containers = async (req, res) => {
-    console.log('Containers called');
-    res.send(cardList);
-}
-
 
 
 let cardUpdates = [];
@@ -103,12 +97,10 @@ export const SSE = (req, res) => {
                 const { container: containerName, state } = container;
                 const existingContainer = sentArray.find(c => c.container === containerName);
                 if (!existingContainer) {
-                    console.log(`New container: ${containerName}`);
                     addCard(containerName, 'newCards');
                     res.write(`event: update\n`);
                     res.write(`data: 'update cards'\n\n`);
                 } else if (existingContainer.state !== state) {
-                    console.log(`State of ${containerName} changed`);
                     cardUpdates.push(containerName);
                 }
                 addCard(containerName, 'cardList');
@@ -118,7 +110,6 @@ export const SSE = (req, res) => {
                 const { container: containerName } = container;
                 const existingContainer = containersArray.find(c => c.container === containerName);
                 if (!existingContainer) {
-                    console.log(`Removed container: ${containerName}`);
                     cardUpdates.push(containerName);
                 }
             });
@@ -140,16 +131,9 @@ export const SSE = (req, res) => {
 };
 
 
-
-
-
-
-
-
 // Container charts
 export const Chart = async (req, res) => {
     let name = req.header('hx-trigger-name');
-    console.log(`Chart called for ${name}`);
     if (!stats[name]) {
         stats[name] = { cpuArray: Array(15).fill(0), ramArray: Array(15).fill(0) };
     }
@@ -202,7 +186,7 @@ async function addCard(container, list) {
             state_indicator = 'orange';
         }
         
-        let trigger = 'data-hx-trigger="load, every 2s"';
+        let trigger = 'data-hx-trigger="load, every 3s"';
         if (state != 'running') {  trigger = 'data-hx-trigger="load"'; }
 
         let imageVersion = data.Config.Image.split('/');
@@ -280,7 +264,7 @@ export const Card = (req, res) => {
         
 
         
-        let trigger = 'data-hx-trigger="load, every 2s"';
+        let trigger = 'data-hx-trigger="load, every 3s"';
         if (state != 'running') {  trigger = 'data-hx-trigger="load"'; }
 
         let imageVersion = data.Config.Image.split('/');

controllers/users.js

@@ -24,6 +24,7 @@ export const Users = async (req, res) => {
         let lastLogin = new Date(account.lastLogin);
         let currentDate = new Date();
         let days = Math.floor((currentDate - lastLogin) / (1000 * 60 * 60 * 24));
+        let avatar = account.username.charAt(0);
 
         if (days > 30) {
             active = '<span class="badge badge-outline text-grey">Inactive</span>';
@@ -35,7 +36,7 @@ export const Users = async (req, res) => {
         <tr>
             <td><input class="form-check-input" type="checkbox"></td>
             <td>${account.id}</td>
-            <td><span class="avatar me-2">${account.avatar}</span></td>
+            <td><span class="avatar avatar-sm bg-green-lt">${avatar}</span></span>
             <td>${account.name}</td>
             <td>${account.username}</td>
             <td>${account.email}</td>

router/index.js

@@ -4,7 +4,7 @@ export const router = express.Router();
 // Controllers
 import { Login, submitLogin, Logout } from "../controllers/login.js";
 import { Register, submitRegister } from "../controllers/register.js";
-import { Dashboard, Start, Stop, Pause, Restart, Logs, Modal, Stats, Hide, Reset, Chart, Containers, Installs, SSE, Card, updateCards } from "../controllers/dashboard.js";
+import { Dashboard, Start, Stop, Pause, Restart, Logs, Modal, Stats, Hide, Reset, Chart, Installs, SSE, Card, updateCards } from "../controllers/dashboard.js";
 import { Apps, appSearch } from "../controllers/apps.js";
 import { Users } from "../controllers/users.js";
 import { Images, removeImage } from "../controllers/images.js";
@@ -28,7 +28,6 @@ const auth = (req, res, next) => {
 
 // Admin routes
 router.get("/", auth, Dashboard);
-router.get("/containers", auth, Containers);
 router.post("/start", auth, Start);
 router.post("/stop", auth, Stop);
 router.post("/pause", auth, Pause);

views/apps.html

@@ -75,8 +75,14 @@
 
             <!-- HTMX Target-->
             <div id="modals-here" class="modal modal-blur fade" style="display: none" aria-hidden="false" tabindex="-1">
-              <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
+              <div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollables">
                 <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">Loading</h5>
+                  </div>
+                  <div class="modal-body text-center">
+                    <div class="spinner-border"></div>
+                  </div>
                 </div>
               </div>
             </div>

views/dashboard.html

@@ -142,7 +142,7 @@
             
             <!-- HTMX -->
             <div class="col-12">
-              <div class="row row-cards" data-hx-get="/containers" data-hx-trigger="" data-hx-swap="innerHTML" id="containers">
+              <div class="row row-cards" id="containers">
               </div>
             </div>
 

views/partials/appCard.html

@@ -13,7 +13,7 @@
             <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-article" 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="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path> <path d="M7 8h10"></path> <path d="M7 12h10"></path> <path d="M7 16h10"></path></svg>
               Learn More
             </a>
-            <a href="#" class="card-btn" data-bs-toggle="modal" data-bs-target="#${modal}-install">
+            <a href="" class="card-btn" name="AppName" id="install" data-hx-get="" data-hx-target="#modals-here" hx-swap="innerHTML" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">
             <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-bar-to-down" 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="M4 20l16 0"></path> <path d="M12 14l0 -10"></path> <path d="M12 14l4 -4"></path> <path d="M12 14l-4 -4"></path></svg>
               Install
             </a>