We use cookies to ensure you get the best experience on our website
Home Verkennen Help
Registreren Inloggen
0ct0pu5
/
DweebUI
1
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

sse event can now trigger individual cards

lllllllillllllillll 1 jaar geleden
bovenliggende
2dc22fd75a
commit
785b54d5aa
5 gewijzigde bestanden met toevoegingen van 43 en 85 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 0 1
      controllers/apps.js
  2. 7 1
      router/index.js
  3. 24 10
      server.js
  4. 1 1
      views/partials/containerCard.html
  5. 11 72
      views/register.html

+ 0 - 1
controllers/apps.js
Bestand weergeven 

@@ -1,5 +1,4 @@
 
 import { readFileSync } from 'fs';
 
-import { appCard } from '../components/appCard.js';
 
 
 let templatesJSON = readFileSync('./templates/templates.json');
 
 let templates = JSON.parse(templatesJSON).templates;

+ 7 - 1
router/index.js
Bestand weergeven 

@@ -78,4 +78,10 @@ router.get("/logout", Logout);
 
 import { Uninstall } from "../functions/uninstall.js"
 
 
 // router.post("/install", auth, Install);
 
-router.post("/uninstall", auth, Uninstall);
 
+router.post("/uninstall", auth, Uninstall);
 
+
 
+
 
+router.get("/card", (req, res) => {
 
+    console.log('card route hit');
 
+    res.send('ok');
 
+});

+ 24 - 10
server.js
Bestand weergeven 

@@ -77,21 +77,35 @@ let serverMetrics = async () => {
 
 }
 
 setInterval(serverMetrics, 1000);
 
 
-let sent_list = '';
 
+
 
+let containersArray = [];
 
+let sentArray = [];
 
+
 
+function addContainer(container, state) {
 
+    containersArray.push({ container, state });
 
+}
 
+
 
 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 = '';
 
+    res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' });
 
+    let eventCheck = setInterval(async () => {
 
+        containersArray = [];
 
         await docker.listContainers({ all: true }).then(containers => {
 
             containers.forEach(container => {
 
-                all_containers += `${container.Names}: ${container.State}\n`;
 
+                let name = container.Names[0].replace('/', '');
 
+                addContainer(name, container.State);
 
             });
 
         });
 
-        if ((all_containers != sent_list) || (event == true)) {
 
-            sent_list = all_containers;
 
-            event = false;
 
-            res.write(`event: ${eventType}\n`);
 
-            res.write(`data: there was an event!\n\n`);
 
+
 
+        if ((JSON.stringify(containersArray) !== JSON.stringify(sentArray)) || event) {
 
+            console.log('Event triggered');
 
+            for (let i = 0; i < containersArray.length; i++) {
 
+                const container = containersArray[i];
 
+                if (!sentArray[i] || JSON.stringify(container) !== JSON.stringify(sentArray[i])) {
 
+                    res.write(`event: ${container.container}\n`);
 
+                    res.write(`data: ${JSON.stringify(container)}\n\n`);
 
+                }
 
+            }
 
+            sentArray = containersArray.slice();
 
         }
 
     }, 1000);
 
     req.on('close', () => {

+ 1 - 1
views/partials/containerCard.html
Bestand weergeven 

@@ -1,4 +1,4 @@
 
-  <div class="col-sm-6 col-lg-3 pt-1">
 
+  <div class="col-sm-6 col-lg-3 pt-1" hx-get="/card" hx-trigger="sse:AppName" hx-swap="outerHTML">
 
     <div class="card">
 
       <div class="card-body">
 
         <div class="card-stamp card-stamp-sm">

+ 11 - 72
views/register.html
Bestand weergeven 

@@ -18,15 +18,23 @@
 
       }
 
     </style>
 
   </head>
 
-  <body  class=" d-flex flex-column">
 
+  <body class="d-flex flex-column">
 
     <script src="/js/demo-theme.js"></script>
 
     <div class="page page-center">
 
 
       
       <form class="container container-tight py-4" action="/register" method="POST" novalidate>
 
+
 
         
+        <div class="text-center">
 
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
 
+              <img src="/images/logo.png" alt="DweebUI" title="DweebUI" height="100px">
 
+          </h1>
 
+        </div>
 
         <div class="text-center mb-4">
 
-          <a href="#" class="navbar-brand navbar-brand-autodark d-none"><img src="/images/logo.svg" height="36" alt=""></a>
 
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
 
+            <img src="/images/dweebui.svg" alt="DweebUI" title="DweebUI" class="navbar-brand-image">
 
+          </h1>
 
         </div>
 
 
         <div class="card">
 
@@ -81,76 +89,7 @@
 
               <input type="text" class="form-control" id="secret" name="secret">
 
             </div>
 
 
-            <div class="mb-2">
 
-              <label class="form-label">Avatar</label>
 
-              <div class="row g-2">
 
-                <div class="col-6 col-sm-3">
 
-                  <label class="form-imagecheck mb-2">
 
-                    <input name="avatar" type="radio" value="rus.jpg" class="form-imagecheck-input" checked/>
 
-                    <span class="form-imagecheck-figure">
 
-                      <img src="/images/avatars/rus.jpg" alt="Rich Uncle Skeleton" title="Rich Uncle Skeleton" class="form-imagecheck-image" width="100px">
 
-                    </span>
 
-                  </label>
 
-                </div>
 
-                <div class="col-6 col-sm-3">
 
-                  <label class="form-imagecheck mb-2">
 
-                    <input name="avatar" type="radio" value="burns.jpg" class="form-imagecheck-input"/>
 
-                    <span class="form-imagecheck-figure">
 
-                      <img src="/images/avatars/burns.jpg" alt="Montgomery Burns" title="Montgomery Burns" class="form-imagecheck-image" width="100px">
 
-                    </span>
 
-                  </label>
 
-                </div>
 
-                <div class="col-6 col-sm-3">
 
-                  <label class="form-imagecheck mb-2">
 
-                    <input name="avatar" type="radio" value="frank.jpg" class="form-imagecheck-input" />
 
-                    <span class="form-imagecheck-figure">
 
-                      <img src="/images/avatars/frank.jpg" alt="Frank Grimes" title= "Frank Grimes" class="form-imagecheck-image" width="100px">
 
-                    </span>
 
-                  </label>
 
-                </div>
 
-                <div class="col-6 col-sm-3">
 
-                  <label class="form-imagecheck mb-2">
 
-                    <input name="avatar" type="radio" value="moe.jpg" class="form-imagecheck-input"/>
 
-                    <span class="form-imagecheck-figure">
 
-                      <img src="/images/avatars/moe.jpg" alt="Moe Szyslak" title="Moe Szyslak" class="form-imagecheck-image" width="100px">
 
-                    </span>
 
-                  </label>
 
-                </div>
 
-                <div class="col-6 col-sm-3">
 
-                  <label class="form-imagecheck mb-2">
 
-                    <input name="avatar" type="radio" value="poochie.jpg" class="form-imagecheck-input" />
 
-                    <span class="form-imagecheck-figure">
 
-                      <img src="/images/avatars/poochie.jpg" alt="Poochie" title="Poochie" class="form-imagecheck-image" width="100px">
 
-                    </span>
 
-                  </label>
 
-                </div>
 
-                <div class="col-6 col-sm-3">
 
-                  <label class="form-imagecheck mb-2">
 
-                    <input name="avatar" type="radio" value="skinner.jpg" class="form-imagecheck-input" />
 
-                    <span class="form-imagecheck-figure">
 
-                      <img src="/images/avatars/skinner.jpg" alt="Seymour Skinner" title="Seymour Skinner" class="form-imagecheck-image" width="100px">
 
-                    </span>
 
-                  </label>
 
-                </div>
 
-                <div class="col-6 col-sm-3">
 
-                  <label class="form-imagecheck mb-2">
 
-                    <input name="avatar" type="radio" value="moleman.png" class="form-imagecheck-input" />
 
-                    <span class="form-imagecheck-figure">
 
-                      <img src="/images/avatars/moleman.png" alt="Hans Moleman" title="Hans Moleman" class="form-imagecheck-image" width="100px">
 
-                    </span>
 
-                  </label>
 
-                </div>
 
-                <div class="col-6 col-sm-3">
 
-                  <label class="form-imagecheck mb-2">
 
-                    <input name="avatar" type="radio" value="duffman.png" class="form-imagecheck-input" />
 
-                    <span class="form-imagecheck-figure">
 
-                      <img src="/images/avatars/duffman.png" alt="Duffman" title="Duffman" class="form-imagecheck-image" width="100px">
 
-                    </span>
 
-                  </label>
 
-                </div>
 
-              </div>
 
-            </div>
 
-
 
+          
             <div class="mb-2">
 
               <label class="form-check">
 
                 <input type="checkbox" class="form-check-input" name="warning"/>

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5