Fixed hide and resetView

CHANGELOG.md

@@ -9,7 +9,7 @@
 * Created Supporters page.
 * Ability to remove images, volumes, or networks.
 * Fixed list.js sorting.
-* Updated templates.json.
+* Removed stackfiles from templates.json and updated some icons.
 * New logo.
 
 ## v0.20 (Jan 20th 2024) - The rewrite. Jumping all the way to v0.20.

components/containerCard.js

@@ -83,8 +83,8 @@ export const containerCard = (data) => {
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler icon-tabler-eye" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /> <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /> </svg>
                     </a>
                     <div class="dropdown-menu dropdown-menu-end">
-                      <button class="dropdown-item text-secondary" data-hx-get="/hide" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="hide" value="hide">Hide</button>
-                      <button class="dropdown-item text-secondary" data-hx-get="/hide" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="reset" value="reset">Reset View</button>
+                      <button class="dropdown-item text-secondary" data-hx-post="/hide" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="hide" value="hide">Hide</button>
+                      <button class="dropdown-item text-secondary" data-hx-post="/reset" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="reset" value="reset">Reset View</button>
                       <button class="dropdown-item text-secondary" name="${name}" id="permissions" data-hx-get="/modal" data-hx-target="#modals-here" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">Permissions</button>
                     </div>
                   </div>

components/permissions_modal.js

@@ -148,7 +148,7 @@ export const permissionsModal = (data) => {
                           </div>
 
 
-                          <div class="row mb-2">
+                          <div class="row mb-4">
                             <div class="col-9">
                               <label class="row text-start">
                                 <span class="col">
@@ -163,6 +163,10 @@ export const permissionsModal = (data) => {
                             </div>
                           </div>
 
+                          <div class="row mb-2">
+                            <button class="btn" type="submit" formaction="/updatePermissions">Update</button>
+                          </div>
+
 
                         </div>
                       </div>

controllers/dashboard.js

@@ -1,14 +1,12 @@
-import { docker, event } from "../server.js";
 import { Readable } from 'stream';
 import { Permission, Container } from '../database/models.js';
 import { modal } from '../components/modal.js';
 import { permissionsModal } from '../components/permissions_modal.js';
-import { cpu, ram, tx, rx, disk } from '../server.js';
+import { setEvent, sse, cpu, ram, tx, rx, disk, docker } from '../server.js';
 import { dockerContainerStats } from 'systeminformation';
 import { containerCard } from '../components/containerCard.js';
 
 
-
 export const Dashboard = (req, res) => {
     res.render("dashboard", {
         name: req.session.user,
@@ -201,16 +199,14 @@ export const Hide = async (req, res) => {
     } else {
         exists.update({ visibility: false });
     }
-    event = true;
-    eventInfo = 'docker';
+    setEvent(true, 'docker');
     res.send("ok");
 }
 
 
 export const Reset = async (req, res) => {
     Container.update({ visibility: true }, { where: {} });
-    event = true;
-    eventInfo = 'docker';
+    setEvent(true, 'docker');
     res.send("ok");
 }
 

server.js

@@ -9,7 +9,7 @@ import { currentLoad, mem, networkStats, fsSize } from 'systeminformation';
 import { containerCard } from './components/containerCard.js';
 export var docker = new Docker();
 
-export { event, sse, cpu, ram, tx, rx, disk }
+export { setEvent, sse, cpu, ram, tx, rx, disk }
 
 const app = express();
 const MemoryStore = memorystore(session);
@@ -49,7 +49,7 @@ app.listen(port, async () => {
             () => { console.log('Synced Models: ✔️') }); }
             catch { console.log('Synced Models: ❌'); } }
         await init().then(() => { 
-            console.log(`Listening on http://localhost:${port} ✔️`);
+            console.log(`Listening on http://localhost:${port}`);
     });
 });
 
@@ -59,6 +59,11 @@ let event = false;
 let sse = false;
 let eventInfo = '';
 
+function setEvent(value, type) {
+    event = value;
+    eventInfo = type;
+}
+
 // Server metrics
 let serverMetrics = async () => {
     currentLoad().then(data => { 
@@ -128,6 +133,7 @@ let containerCards = async () => {
     cardList = list;
 }
 
+
 // Docker events
 docker.getEvents((err, stream) => {
     if (err) throw err;

views/login.html

@@ -24,7 +24,7 @@
       <div class="container container-tight py-4">
         <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="200px">
+              <img src="/images/logo.png" alt="DweebUI" title="DweebUI" height="100px">
           </h1>
         </div>
         <div class="text-center mb-4">

views/navbar.html

@@ -33,9 +33,9 @@
       aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+    <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0">
       <a href="#">
-        <img src="/images/logo.png" alt="DweebUI" title="DweebUI" height="50px" style="margin-bottom: 0;">
+        <img src="/images/logo.png" alt="DweebUI" title="DweebUI" height="40px">
       </a>
       <a href="#">
         <img src="/images/dweebui.svg" alt="DweebUI" title="DweebUI" class="navbar-brand-image">