reduced server.js to 99 lines. bug fixes.

CHANGELOG.md

@@ -1,4 +1,4 @@
-## v0.30 (dev) - Another rewrite
+## v0.30 (dev) - HTMX rewrite
 * Rewrote the dashboard to use HTMX.
 * Removed Socket.io.
 * Views are now HTML instead of EJS.
@@ -11,6 +11,8 @@
 * Fixed list.js sorting.
 * Removed stackfiles from templates.json and updated some icons.
 * New logo.
+* Improved handling of Docker events.
+* Improved dashboard responsiveness.
 
 ## v0.20 (Jan 20th 2024) - The rewrite. Jumping all the way to v0.20.
 * Changed to ES6 imports.

README.md

@@ -92,4 +92,5 @@ Compose setup:
 
 ## Supporters
 
-* MM (Patreon)
+* MM (Patreon)
+* PD (Buymeacoffee)

components/permissions_modal.js

@@ -355,13 +355,6 @@ export const permissionsModal = (data) => {
             </div>
             <div class="modal-footer">
               <div class="row">
-
-                <div class="col">
-                  <label class="form-check form-switch col">
-                    <span class="form-check-label">Reset</span>
-                    <input class="form-check-input" type="checkbox">
-                  </label>
-                </div>
               
                 <div class="col">
                   <button type="button" class="btn btn-danger" data-bs-dismiss="modal" disabled="">Reset</button>

controllers/dashboard.js

@@ -6,7 +6,7 @@ import { setEvent, cpu, ram, tx, rx, disk, docker } from '../server.js';
 import { dockerContainerStats } from 'systeminformation';
 import { containerCard } from '../components/containerCard.js';
 
-let [ hidden, cardList, sentList ] = [ '', '', ''];
+let [ hidden, cardList ] = [ '', '' ];
 
 export const Dashboard = (req, res) => {
     res.render("dashboard", {
@@ -16,62 +16,6 @@ export const Dashboard = (req, res) => {
     });
 }
 
-export const Start = (req, res) => {
-    let name = req.header('hx-trigger-name');
-    let state = req.header('hx-trigger');
-
-    if (state == 'stopped') {
-        var containerName = docker.getContainer(name);
-        containerName.start();
-    } else if (state == 'paused') {
-        var containerName = docker.getContainer(name);
-        containerName.unpause();
-    }
-
-    res.send("ok");
-}
-
-
-export const Stop = (req, res) => {
-
-    let name = req.header('hx-trigger-name');
-    let state = req.header('hx-trigger');
-
-    if (state != 'stopped') {
-        var containerName = docker.getContainer(name);
-        containerName.stop();
-    }
-
-    res.send("ok");
-}
-
-export const Pause = (req, res) => {
-
-    let name = req.header('hx-trigger-name');
-    let state = req.header('hx-trigger');
-
-    if (state == 'running') {
-        var containerName = docker.getContainer(name);
-        containerName.pause();
-    } else if (state == 'paused') {
-        var containerName = docker.getContainer(name);
-        containerName.unpause();
-    }
-
-    res.send("ok");
-}
-
-export const Restart = (req, res) => {
-
-    let name = req.header('hx-trigger-name');
-    var containerName = docker.getContainer(name);
-    containerName.restart();
-
-    res.send("ok");
-}
-
-
-
 export const Logs = (req, res) => {
     let name = req.header('hx-trigger-name');
     function containerLogs (data) {
@@ -101,18 +45,15 @@ export const Logs = (req, res) => {
     });
 }
 
-
 export const Modal = async (req, res) => {
     let name = req.header('hx-trigger-name');
     let id = req.header('hx-trigger');
-
     if (id == 'permissions') {
         let containerPermissions = await Permission.findAll({ where: {containerName: name}});
         let form = permissionsModal();
         res.send(form);
         return;
     }
-
     let containerId = docker.getContainer(name);
     let containerInfo = await containerId.inspect();
     let ports_list = [];
@@ -127,7 +68,6 @@ export const Modal = async (req, res) => {
         ports_list.push(ports);
     }
     } catch {}
-
     let external_port = ports_list[0]?.external || 0;
     let internal_port = ports_list[0]?.internal || 0;
 
@@ -142,7 +82,6 @@ export const Modal = async (req, res) => {
     }
     let form = modal(container_info);
     res.send(form);
-
 }
 
 export const Stats = async (req, res) => {
@@ -190,8 +129,6 @@ export const Reset = async (req, res) => {
 }
 
 
-
-
 let stats = {};
 export const Chart = async (req, res) => {
     let name = req.header('hx-trigger-name');
@@ -219,27 +156,6 @@ export const Chart = async (req, res) => {
     res.send(chart);
 }
 
-
-
-export const Installing = (req, res) => {
-
-    let install_info = {
-        name: 'App Name',
-        service: '',
-        id: '',
-        state: 'Installing',
-        image: '',
-        external_port: 0,
-        internal_port: 0,
-        ports: '',
-        link: 'localhost',
-    }
-    let card = containerCard(install_info);
-    res.send(card);
-}
-
-
-
 // Get hidden containers
 async function getHidden() {
     hidden = await Container.findAll({ where: {visibility:false}});
@@ -296,3 +212,46 @@ export const Containers = async (req, res) => {
     await containerCards();
     res.send(cardList);
 }
+
+export const Start = (req, res) => {
+    let name = req.header('hx-trigger-name');
+    let state = req.header('hx-trigger');
+    if (state == 'stopped') {
+        var containerName = docker.getContainer(name);
+        containerName.start();
+    } else if (state == 'paused') {
+        var containerName = docker.getContainer(name);
+        containerName.unpause();
+    }
+    res.send("ok");
+}
+
+export const Stop = (req, res) => {   
+    let name = req.header('hx-trigger-name');
+    let state = req.header('hx-trigger');
+    if (state != 'stopped') {
+        var containerName = docker.getContainer(name);
+        containerName.stop();
+    }
+    res.send("ok");
+}
+
+export const Pause = (req, res) => {
+    let name = req.header('hx-trigger-name');
+    let state = req.header('hx-trigger');
+    if (state == 'running') {
+        var containerName = docker.getContainer(name);
+        containerName.pause();
+    } else if (state == 'paused') {
+        var containerName = docker.getContainer(name);
+        containerName.unpause();
+    }
+    res.send("ok");
+}
+
+export const Restart = (req, res) => {   
+    let name = req.header('hx-trigger-name');
+    var containerName = docker.getContainer(name);
+    containerName.restart();
+    res.send("ok");
+}

docker-compose.yaml

@@ -2,7 +2,7 @@ version: "3.9"
 services:
   dweebui:
     container_name: dweebui
-    image: lllllllillllllillll/dweebui:v0.21-dev
+    image: lllllllillllllillll/dweebui:v0.30-dev
     environment:
       PORT: 8000
       SECRET: MrWiskers

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, Installing, Containers } from "../controllers/dashboard.js";
+import { Dashboard, Start, Stop, Pause, Restart, Logs, Modal, Stats, Hide, Reset, Chart, Containers } from "../controllers/dashboard.js";
 import { Apps, appSearch } from "../controllers/apps.js";
 import { Users } from "../controllers/users.js";
 import { Images, removeImage } from "../controllers/images.js";
@@ -39,7 +39,6 @@ router.get("/stats", auth, Stats);
 router.post("/hide", auth, Hide);
 router.post("/reset", auth, Reset);
 router.get("/chart", auth, Chart);
-router.get("/installing", auth, Installing);
 
 router.get("/images", auth, Images);
 router.post("/removeImage", auth, removeImage);

server.js

@@ -13,6 +13,8 @@ export { setEvent, cpu, ram, tx, rx, disk }
 const app = express();
 const MemoryStore = memorystore(session);
 const port = process.env.PORT || 8000;
+let [ cpu, ram, tx, rx, disk ] = [0, 0, 0, 0, 0];
+let [ event, sse, eventType ] = [false, false, ''];
 
 // Session middleware
 const sessionMiddleware = session({
@@ -52,9 +54,6 @@ app.listen(port, async () => {
     });
 });
 
-let [ cpu, ram, tx, rx, disk ] = [0, 0, 0, 0, 0];
-let [ event, sse, eventType ] = [false, false, ''];
-
 function setEvent(value, type) {
     event = value;
     eventType = type;
@@ -78,24 +77,19 @@ let serverMetrics = async () => {
 }
 setInterval(serverMetrics, 1000);
 
-
-
 let sent_list = '';
 router.get('/sse_event', (req, res) => {
     res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', });
-
     let eventCheck = setInterval(async() => {
         let all_containers = '';
-
         await docker.listContainers({ all: true }).then(containers => {
             containers.forEach(container => {
                 all_containers += `${container.Names}: ${container.State}\n`;
             });
         });
-        if (all_containers != sent_list) {
+        if ((all_containers != sent_list) || event) {
             sent_list = all_containers;
-            setEvent(true, 'docker');
-            res.write(`event: ${eventType}\n`);
+            res.write(`event: docker\n`);
             res.write(`data: there was an event!\n\n`);
         }
     }, 1000);

views/apps.html

@@ -82,11 +82,11 @@ <h2 class="page-title">
                     prev
                   </a>
                 </li>
-                <li class="page-item"><a class="page-link" href="/apps?page=1">1</a></li>
-                <li class="page-item"><a class="page-link" href="/apps?page=2">2</a></li>
-                <li class="page-item"><a class="page-link" href="/apps?page=3">3</a></li>
-                <li class="page-item"><a class="page-link" href="/apps?page=4">4</a></li>
-                <li class="page-item"><a class="page-link" href="/apps?page=5">5</a></li>
+                <li class="page-item"><a class="page-link" href="/apps/1">1</a></li>
+                <li class="page-item"><a class="page-link" href="/apps/2">2</a></li>
+                <li class="page-item"><a class="page-link" href="/apps/3">3</a></li>
+                <li class="page-item"><a class="page-link" href="/apps/4">4</a></li>
+                <li class="page-item"><a class="page-link" href="/apps/5">5</a></li>
                 <li class="page-item">
                   <a class="page-link" href="<%- next %>">
                     next <!-- Download SVG icon from http://tabler-icons.io/i/chevron-right -->

views/navbar.html

@@ -145,6 +145,7 @@ <h3 class="card-title">Notifications</h3>
         <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
           <!-- <a href="#" class="dropdown-item">Status</a> -->
           <a href="/account" class="dropdown-item">Account</a>
+          <a href="/variables" class="dropdown-item">Variables</a>
           <!-- <a href="#" class="dropdown-item">Feedback</a> -->
           <a href="/settings" class="dropdown-item">Settings</a>
           <!-- <div class="dropdown-divider"></div> -->

views/supporters.html

@@ -50,9 +50,9 @@ <h2 class="mb-2">Supporters</h2>
 									<div class="row align-items-center">
 										<div class="col">
 
-											<span type="button" class="avatar avatar-md bg-green-lt" hx-trigger="load, click" hx-post="/thank" hx-target="#count" name="MM"  title="Micheal M" style="margin-right: 5px;">mm</span>
+											<span type="button" class="avatar avatar-md bg-green-lt" hx-trigger="load, click" hx-post="/thank" hx-target="#count" name="MM"  title="MM" style="margin-right: 5px;">mm</span>
 
-											<span type="button" class="avatar avatar-md bg-cyan-lt" hx-trigger="click" hx-post="/thank" hx-target="#count" name="PD" title="Peter D" style="margin-right: 5px;">pd</span>
+											<span type="button" class="avatar avatar-md bg-cyan-lt" hx-trigger="click" hx-post="/thank" hx-target="#count" name="PD" title="PD" style="margin-right: 5px;">pd</span>
 
 
 										</div>