Tweaks to event trigger. Improved Uninstall.

components/containerCard.js

@@ -111,7 +111,7 @@ export const containerCard = (data) => {
           </script>
 
           <div class="chart-sm">
-            <div id="${chartName}_chart" data-hx-trigger="load, every 3s" data-hx-get="/chart" name="${chartName}">
+            <div id="${chartName}_chart" data-hx-trigger="load, every 2s" data-hx-get="/chart" name="${chartName}">
               <script>
                 ${chartName}chart.render();
               </script>

functions/install.js

@@ -9,8 +9,6 @@ import { containerCard } from "../components/containerCard.js";
 // This entire page hurts to look at. 
 export const Install = async (req, res) => {
 
-        console.log(req.app.locals.installCard);
-
         let data = req.body;
 
         let { service_name, name, image, command_check, command, net_mode, restart_policy } = data;        

functions/uninstall.js

@@ -6,17 +6,20 @@ export const Uninstall = async (req, res) => {
 
     let { confirm, service_name } = req.body;
 
+    console.log(`Uninstalling ${service_name}...`);
+
     if (confirm == 'Yes') {
+
         var containerName = docker.getContainer(`${service_name}`);
         try {
             await containerName.stop();
         } catch {
             console.log(`Error stopping ${service_name} container`);
         }
+
         try {
-            await containerName.remove();
+            containerName.remove();
             
-
             const syslog = await Syslog.create({
                 user: req.session.user,
                 email: null,

server.js

@@ -15,11 +15,6 @@ export var docker = new Docker();
 const app = express();
 const MemoryStore = memorystore(session);
 const port = process.env.PORT || 8000;
-let [ hidden, activeEvent, cardList, clicked ] = ['', '', '', false];
-let sentList = '';
-let SSE = false;
-app.locals.installCard = '';
-let thanks = 0;
 
 // Session middleware
 const sessionMiddleware = session({
@@ -59,14 +54,15 @@ app.listen(port, async () => {
     });
 });
 
-// Get hidden containers
-async function getHidden() {
-    hidden = await Container.findAll({ where: {visibility:false}});
-    hidden = hidden.map((container) => container.name);
-}
+let [ cpu, ram, tx, rx, disk ] = [0, 0, 0, 0, 0];
+let [ hidden, cardList, sentList ] = ['', '', ''];
+let thanks = 0;
+
+let event = false;
+let sse = false;
+let eventInfo = '';
 
 // Server metrics
-let [ cpu, ram, tx, rx, disk ] = [0, 0, 0, 0, 0];
 let serverMetrics = async () => {
     currentLoad().then(data => { 
         cpu = Math.round(data.currentLoad); 
@@ -84,7 +80,45 @@ let serverMetrics = async () => {
 }
 setInterval(serverMetrics, 1000);
 
-// Docker containers
+
+router.get('/stats', async (req, res) => {
+    let name = req.header('hx-trigger-name');
+    let color = req.header('hx-trigger');
+    let value = 0;
+
+    switch (name) {
+        case 'CPU':
+            value = cpu;
+            break;
+        case 'RAM':
+            value = ram;
+            break;
+        case 'TX':
+            value = tx;
+            break;
+        case 'RX':
+            value = rx;
+            break;
+        case 'DISK':
+            value = disk;
+            break;
+    }
+    let info = `<div class="font-weight-medium">
+                    <label class="cpu-text mb-1">${name} ${value}%</label>
+                </div>
+                <div class="cpu-bar meter animate ${color}">
+                    <span style="width:${value}%"><span></span></span>
+                </div>`;
+    res.send(info);
+});
+
+// Get hidden containers
+async function getHidden() {
+    hidden = await Container.findAll({ where: {visibility:false}});
+    hidden = hidden.map((container) => container.name);
+}
+
+// Create list of docker containers cards
 let containerCards = async () => {
     let list = '';
     const allContainers = await docker.listContainers({ all: true });
@@ -129,93 +163,41 @@ let containerCards = async () => {
     cardList = list;
 }
 
-
-// Store docker events 
+// Docker events
 docker.getEvents((err, stream) => {
     if (err) throw err;
     stream.on('data', (chunk) => {
-        activeEvent += chunk.toString('utf8');
+        event = true;
+        eventInfo = 'docker';
     });
 });
 
 // Check if the container cards need to be updated
 setInterval(async () => {
-    if (activeEvent == '') { return; }
-    activeEvent = '';
+    if (event == false) { return; }
     await getHidden();
     await containerCards();
     if (cardList != sentList) {
         cardList = sentList;
-        SSE = true;
+        sse = true;
     }
+    event = false;
 }, 1000);
 
-
-
-/////////////////// HTMX routes //////////////////////////
-
-
-router.get('/stats', async (req, res) => {
-    if (req.session.UUID == undefined) { return; }
-
-    switch (req.header('HX-Trigger')) {
-        case 'cpu': 
-        let info = '<div class="font-weight-medium">';
-            info += '<label class="cpu-text mb-1" for="cpu">CPU ' + cpu + '%</label>';
-            info += '</div>';
-            info += '<div class="cpu-bar meter animate">';
-            info += '<span style="width:' + cpu + '%"><span></span></span>';
-            info += '</div>';
-            res.send(info);
-            break;
-        case 'ram':
-        let info2 = '<div class="font-weight-medium">';
-            info2 += '<label class="ram-text mb-1" for="ram">RAM ' + ram + '%</label>';
-            info2 += '</div>';
-            info2 += '<div class="ram-bar meter animate orange">';
-            info2 += '<span style="width:' + ram + '%"><span></span></span>';
-            info2 += '</div>';
-            res.send(info2);
-            break;
-        case 'tx':
-            res.send('TX ' + tx.toFixed(2) + ' MB');
-            break;
-        case 'rx':
-            res.send('RX ' + rx.toFixed(2) + ' MB');
-            break;
-        case 'disk':
-        let info5 = '<div class="font-weight-medium">';
-            info5 += '<label class="disk-text mb-1" for="disk">Disk ' + disk + '%</label>';
-            info5 += '</div>';
-            info5 += '<div class="disk-bar meter animate red">';
-            info5 += '<span style="width:' + disk + '%"><span></span></span>';
-            info5 += '</div>';
-            res.send(info5);
-            break;
-        default:
-            console.log('Unknown trigger');
-            break;
-    }
-});
-
+// Gets called at load and after server-side events
 router.get('/containers', async (req, res) => {
-    if (req.session.UUID == undefined) { return; }
-
     await getHidden();
     await containerCards();
     sentList = cardList;
     res.send(cardList);
 });
 
+// Dashboard controls
 router.get('/action', async (req, res) => {
-    if (req.session.UUID == undefined) { return; }
-
     let name = req.header('hx-trigger-name');
     let id = req.header('hx-trigger');
     let value = req.query[name];
-
     var containerName = docker.getContainer(name);
-
     if ((id == 'start') && (value == 'stopped')) {
         containerName.start();
     } else if ((id == 'start') && (value == 'paused')) {
@@ -232,34 +214,23 @@ router.get('/action', async (req, res) => {
 });
 
 router.get('/hide', async (req, res) => {
-    if (req.session.UUID == undefined) { return; }
-
     let name = req.header('hx-trigger-name');
     let id = req.header('hx-trigger');
-
     if (id == 'hide') {
         let exists = await Container.findOne({ where: {name: name}});
         if (!exists) {
             const newContainer = await Container.create({ name: name, visibility: false, });
-            SSE = true;
-            return;
         } else {
             exists.update({ visibility: false });
-            SSE = true;
-            return;
         }
-    }
-
-    if (id == 'reset') {
+    } else if (id == 'reset') {
         Container.update({ visibility: true }, { where: {} });
-        SSE = true;
     }
+    event = true;
+    eventInfo = 'docker';
 });
 
-
-
 router.get('/logs', async (req, res) => {
-    if (req.session.UUID == undefined) { return; }
     
     let name = req.header('hx-trigger-name');
     
@@ -291,24 +262,23 @@ router.get('/logs', async (req, res) => {
 });
 
 
+
 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 () => {
-        if (SSE == true) {
-            SSE = false;
-            res.write(`event: docker\n`);
-            res.write(`data: there was a docker event!\n\n`);
+        if (sse == true) {
+            res.write(`event: ${eventInfo}\n`);
+            res.write(`data: there was an event!\n\n`);
+            sse = false;
         }
     }, 1000);
     req.on('close', () => {
         clearInterval(eventCheck);
     });
+    return;
 });
 
-
-
 router.get('/modal', async (req, res) => {
-    if (req.session.UUID == undefined) { return; }
 
     let name = req.header('hx-trigger-name');
     let id = req.header('hx-trigger');
@@ -358,7 +328,6 @@ router.get('/modal', async (req, res) => {
 
 let stats = {};
 router.get('/chart', async (req, res) => {
-    if (req.session.UUID == undefined) { return; }
 
     let name = req.header('hx-trigger-name');
     // create an empty array if it doesn't exist

views/dashboard.html

@@ -46,11 +46,11 @@
                         </div>
 
                         <!-- HTMX -->
-                        <div class="col" id="cpu" data-hx-get="/stats" data-hx-trigger="load, every 1s" data-hx-target="#cpu">
+                        <div class="col" name="CPU" id="green" data-hx-get="/stats" data-hx-trigger="load, every 1s">
                           <div class="font-weight-medium">
                             <label class="cpu-text mb-1" for="cpu">CPU 0%</label>
                           </div>
-                          <div class="cpu-bar meter animate">
+                          <div class="cpu-bar meter animate green">
                             <span style="width:20%"><span></span></span>
                           </div>
                         </div>
@@ -71,7 +71,7 @@
                         </div>
 
                         <!-- HTMX -->
-                        <div class="col" id="ram" data-hx-get="/stats" data-hx-trigger="load, every 2s">
+                        <div class="col" name="RAM" id="orange" data-hx-get="/stats" data-hx-trigger="load, every 2s">
                           <div class="font-weight-medium">
                             <label class="ram-text mb-1" for="ram">RAM 0%</label>
                           </div>
@@ -118,7 +118,7 @@
                         </div>
 
                         <!-- HTMX -->
-                        <div class="col" id="disk" data-hx-get="/stats" data-hx-trigger="load, every 2s">
+                        <div class="col" name="DISK" id="red" data-hx-get="/stats" data-hx-trigger="load, every 2s">
                           <div class="font-weight-medium">
                             <label class="disk-text mb-1" for="disk">DISK 0%</label>
                           </div>
@@ -143,6 +143,14 @@
               </div>
             </div>
 
+            <!-- HTMX -->
+            <div class="col-12" hx-ext="sse" sse-connect="/sse_event">
+              <div class="row row-cards" data-hx-get="/installing" data-hx-trigger="load, sse:install" data-hx-swap="innerHTML">
+
+              </div>
+            </div>
+
+            <!-- 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-content">
@@ -237,7 +245,7 @@
         },
         yaxis: {
           min: 0,
-          max: 150,
+          max: 100,
           labels: {
             padding: 4
           }

views/footer.html

@@ -24,7 +24,7 @@
           </li>
           <li class="list-inline-item">
             <a href="https://github.com/lllllllillllllillll/DweebUI/releases" class="link-secondary" rel="noopener">
-              v0.21
+              v0.30
             </a>
           </li>
         </ul>