css and js changes.

functions/install.js

@@ -9,6 +9,8 @@ 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;        
@@ -176,8 +178,10 @@ export const Install = async (req, res) => {
 
                 (async () => {
                 await compose.pull();
-                await compose.up();
-                
+                await compose.up().then(() => {
+                    req.app.locals.installCard = 'empty';
+                    console.log(req.app.locals.installCard)
+                });
                 const syslog = await Syslog.create({
                     user: req.session.user,
                     email: null,

public/js/main.js

@@ -1,4 +1,8 @@
-socket.on('connect', () => { console.log('connected'); });
+socket.on('connect', () => { 
+  console.log('connected'); 
+  //clear localStorage (because of code in old versions)
+  localStorage.clear();
+});
 
 // Server metrics
 const cpuText = document.getElementById('cpu-text');

server.js

@@ -22,12 +22,11 @@ let [cpu, ram, tx, rx, disk] = [0, 0, 0, 0, 0];
 let [hidden, clicked, dockerEvents] = ['', false, ''];
 let metricsInterval, cardsInterval, graphsInterval;
 let cardList = '';
-app.locals.installCard = '';
+app.locals.installCard = 'test';
 const statsArray = {};
 
 // Socket.io admin ui
 export const io = new Server(server, { 
-    connectionStateRecovery: {},
     cors: {
         origin: ['http://localhost:8000', 'https://admin.socket.io'],
         methods: ['GET', 'POST'],
@@ -233,40 +232,30 @@ io.on('connection', (socket) => {
         }, 1000);
 
 
-
         // Client input        
         socket.on('clicked', (data) => {
-            if (clicked == true) { return; } clicked = true;
             let { name, id, value } = data;
             console.log(`${sessionData.user} clicked: ${id} ${value} ${name}`);
+            if (clicked == true) { return; } clicked = true;
 
             // View container logs
             if (id == 'logs'){
                 function containerLogs (data) {
                     return new Promise((resolve, reject) => {
                         let logString = '';
-                
                         var options = {
                             follow: false,
                             stdout: true,
                             stderr: false,
                             timestamps: false
                         };
-                
                         var containerName = docker.getContainer(data);
-                
                         containerName.logs(options, function (err, stream) {
-                            if (err) {
-                                reject(err);
-                                return;
-                            }
-                
+                            if (err) { reject(err); return; }
                             const readableStream = Readable.from(stream);
-                
                             readableStream.on('data', function (chunk) {
                                 logString += chunk.toString('utf8');
                             });
-                
                             readableStream.on('end', function () {
                                 resolve(logString);
                             });
@@ -275,10 +264,7 @@ io.on('connection', (socket) => {
                 };
                 containerLogs(name).then((data) => {
                     socket.emit('logs', data);
-                }).catch((err) => {
-                    console.log(err);
                 });
-
             }
 
             // start, stop, pause, restart container

views/account.ejs

@@ -6,10 +6,10 @@
 		<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
 		<title>DweebUI - Account</title>
 		<!-- CSS files -->
-		<link href="css/tabler.min.css" rel="stylesheet"/>
-		<link href="css/demo.min.css" rel="stylesheet"/>
+		<link href="/css/tabler.min.css" rel="stylesheet"/>
+		<link href="/css/demo.min.css" rel="stylesheet"/>
 		<style>
-			@import url('fonts/inter.css');
+			@import url('/fonts/inter.css');
 			:root {
 			  --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
 			}
@@ -19,23 +19,22 @@
 		  </style>
 	</head>
 	<body >
-		<script src="js/demo-theme.min.js"></script>
 		<div class="page">
 		<!-- Navbar -->
 		<%- include('navbar.ejs') %>
 		<div class="page-wrapper">
 			<!-- Page header -->
 			<div class="page-header d-print-none">
-			<div class="container-xl">
-				<div class="row g-2 align-items-center">
-				<div class="col">
-					<h2 class="page-title">
-					Account Settings
-					</h2>
-				</div>
+				<div class="container-xl">
+					<div class="row g-2 align-items-center">
+					<div class="col">
+						<h2 class="page-title">
+						Account Settings
+						</h2>
+					</div>
+					</div>
 				</div>
 			</div>
-			</div>
 			<!-- Page body -->
 			<div class="page-body">
 			<div class="container-xl">
@@ -139,7 +138,7 @@
 		</div>
 		<!-- Libs JS -->
 		<!-- Tabler Core -->
-		<script src="js/tabler.min.js" defer></script>
-		<script src="js/demo.min.js" defer></script>
+		<script src="/js/tabler.min.js" defer></script>
+		<script src="/js/demo.min.js" defer></script>
 	</body>
 	</html>

views/apps.ejs

@@ -6,10 +6,10 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>DweebUI - Apps</title>
     <!-- CSS files -->
-    <link href="css/tabler.min.css" rel="stylesheet"/>
-    <link href="css/demo.min.css" rel="stylesheet"/>
+    <link href="/css/tabler.min.css" rel="stylesheet"/>
+    <link href="/css/demo.min.css" rel="stylesheet"/>
     <style>
-			@import url('fonts/inter.css');
+			@import url('/fonts/inter.css');
 			:root {
 			  --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
 			}
@@ -19,7 +19,6 @@
 		  </style>
   </head>
   <body >
-    <script src="js/demo-theme.min.js"></script>
     <div class="page">
       <!-- Navbar -->
 
@@ -105,8 +104,8 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="js/tabler.min.js" defer></script>
-    <script src="js/demo.min.js" defer></script>
+    <script src="/js/tabler.min.js" defer></script>
+    <script src="/js/demo.min.js" defer></script>
     
     <!-- <script>
       async function sendData(form) {

views/dashboard.ejs

@@ -6,10 +6,10 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>DweebUI - Dashboard</title>
     <!-- CSS files -->
-    <link href="css/tabler.min.css" rel="stylesheet"/>
-    <link href="css/meters.css" rel="stylesheet"/>
+    <link href="/css/tabler.min.css" rel="stylesheet"/>
+    <link href="/css/meters.css" rel="stylesheet"/>
     <style>
-      @import url('fonts/inter.css');
+      @import url('/fonts/inter.css');
       :root {
         --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
       }
@@ -996,15 +996,15 @@
     
 
   <!-- Libs JS -->
-  <script src="libs/apexcharts/dist/apexcharts.min.js" defer></script>
+  <script src="/libs/apexcharts/dist/apexcharts.min.js" defer></script>
   <!-- Tabler Core -->
-  <script src="js/tabler.min.js"></script>
+  <script src="/js/tabler.min.js"></script>
   <!-- Socket.io -->
   <script src="/socket.io/socket.io.js"></script>
   <script>
     const socket = io();
   </script>
-  <script src="js/main.js"></script>
+  <script src="/js/main.js"></script>
     
   </body>
 </html>

views/images.ejs

@@ -5,10 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>DweebUI - Images</title>
-    <link href="css/tabler.min.css" rel="stylesheet"/>
-    <link href="css/demo.min.css" rel="stylesheet"/>
+    <link href="/css/tabler.min.css" rel="stylesheet"/>
+    <link href="/css/demo.min.css" rel="stylesheet"/>
     <style>
-      @import url('fonts/inter.css');
+      @import url('/fonts/inter.css');
       :root {
         --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
       }
@@ -150,10 +150,10 @@
     </div>
     
     <!-- Libs JS -->
-    <script src="libs/list.js/dist/list.min.js" defer></script>
+    <script src="/libs/list.js/dist/list.min.js" defer></script>
     <!-- Tabler Core -->
-    <script src="js/tabler.min.js" defer></script>
-    <script src="js/demo.min.js" defer></script>
+    <script src="/js/tabler.min.js" defer></script>
+    <script src="/js/demo.min.js" defer></script>
 
     <script>
       document.addEventListener("DOMContentLoaded", function() {

views/login.ejs

@@ -6,8 +6,8 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>DweebUI - Login</title>
     <!-- CSS files -->
-    <link href="css/tabler.min.css" rel="stylesheet"/>
-    <link href="css/demo.min.css" rel="stylesheet"/>
+    <link href="/css/tabler.min.css" rel="stylesheet"/>
+    <link href="/css/demo.min.css" rel="stylesheet"/>
     <style>
       @import url('fonts/inter.css');
       :root {
@@ -72,7 +72,7 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="js/tabler.min.js" defer></script>
-    <script src="js/demo.min.js" defer></script>
+    <script src="/js/tabler.min.js" defer></script>
+    <script src="/js/demo.min.js" defer></script>
   </body>
 </html>

views/navbar.ejs

@@ -3,32 +3,18 @@
   var defaultTheme = "dark";
   var selectedTheme;
 
-  (function (factory) {
-    typeof define === 'function' && define.amd ? define(factory) :
-    factory();
-  })((function () {
+  (function () {
     'use strict';
 
-    var params = new Proxy(new URLSearchParams(window.location.search), {
-      get: function get(searchParams, prop) {
-        return searchParams.get(prop);
-      }
-    });
-
-    if (!!params.theme) {
-      localStorage.setItem(themeStorageKey, params.theme);
-      selectedTheme = params.theme;
-    } else {
-      var storedTheme = localStorage.getItem(themeStorageKey);
-      selectedTheme = storedTheme ? storedTheme : defaultTheme;
-    }
+    var storedTheme = localStorage.getItem(themeStorageKey);
+    selectedTheme = storedTheme ? storedTheme : defaultTheme;
 
     if (selectedTheme === 'dark') {
       document.body.setAttribute("data-bs-theme", selectedTheme);
     } else {
       document.body.removeAttribute("data-bs-theme");
     }
-  }));
+  })();
 
   function toggleTheme(button) {
     if (button.value == 'dark-theme') {
@@ -49,7 +35,7 @@
     </button>
     <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
       <a href="#">
-        <img src="static/logo.svg" alt="DweebUI" title="DweebUI" class="navbar-brand-image">
+        <img src="/static/logo.svg" alt="DweebUI" title="DweebUI" class="navbar-brand-image">
       </a>
     </h1>
     <div class="navbar-nav flex-row order-md-last">
@@ -152,10 +138,10 @@
           </div>
         </a>
         <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
-          <a href="#" class="dropdown-item">Status</a>
+          <!-- <a href="#" class="dropdown-item">Status</a> -->
           <a href="/account" class="dropdown-item">Account</a>
-          <a href="#" class="dropdown-item">Feedback</a>
-          <div class="dropdown-divider"></div>
+          <!-- <a href="#" class="dropdown-item">Feedback</a> -->
+          <!-- <div class="dropdown-divider"></div> -->
           <a href="/settings" class="dropdown-item">Settings</a>
           <a href="/logout" class="dropdown-item">Logout</a>
         </div>
@@ -216,6 +202,7 @@
             </a>
           </li>
 
+
           <li class="nav-item">
             <a class="nav-link" href="/apps">
               <span
@@ -263,18 +250,13 @@
             </a>
           </li>
 
-          
         </ul>
 
         <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
-          <form action="/" method="get" autocomplete="off" novalidate>
-            <div class="input-icon">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" 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 d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /> <path d="M21 21l-6 -6" /> </svg>
-              </span>
-              <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
-            </div>
-          </form>
+
+          <ul class="navbar-nav">
+            
+          </ul>
         </div>
 
       </div>

views/networks.ejs

@@ -5,10 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>DweebUI - Networks</title>
-    <link href="css/tabler.min.css" rel="stylesheet"/>
-    <link href="css/demo.min.css" rel="stylesheet"/>
+    <link href="/css/tabler.min.css" rel="stylesheet"/>
+    <link href="/css/demo.min.css" rel="stylesheet"/>
     <style>
-      @import url('fonts/inter.css');
+      @import url('/fonts/inter.css');
       :root {
         --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
       }
@@ -150,10 +150,10 @@
     </div>
     
     <!-- Libs JS -->
-    <script src="libs/list.js/dist/list.min.js" defer></script>
+    <script src="/libs/list.js/dist/list.min.js" defer></script>
     <!-- Tabler Core -->
-    <script src="js/tabler.min.js" defer></script>
-    <script src="js/demo.min.js" defer></script>
+    <script src="/js/tabler.min.js" defer></script>
+    <script src="/js/demo.min.js" defer></script>
 
     <script>
       document.addEventListener("DOMContentLoaded", function() {

views/portal.ejs

@@ -6,10 +6,10 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>DweebUI - Dashboard</title>
     <!-- CSS files -->
-    <link href="css/tabler.min.css" rel="stylesheet"/>
-    <link href="css/meters.css" rel="stylesheet"/>
+    <link href="/css/tabler.min.css" rel="stylesheet"/>
+    <link href="/css/meters.css" rel="stylesheet"/>
     <style>
-      @import url('fonts/inter.css');
+      @import url('/fonts/inter.css');
       :root {
         --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
       }
@@ -138,9 +138,9 @@
     
 
   <!-- Libs JS -->
-  <script src="libs/apexcharts/dist/apexcharts.min.js" defer></script>
+  <script src="/libs/apexcharts/dist/apexcharts.min.js" defer></script>
   <!-- Tabler Core -->
-  <script src="js/tabler.min.js"></script>
+  <script src="/js/tabler.min.js"></script>
   </body>
 </html>
 

views/register.ejs

@@ -6,8 +6,8 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>DweebUI - Register</title>
     <!-- CSS files -->
-    <link href="css/tabler.min.css" rel="stylesheet"/>
-    <link href="css/demo.min.css" rel="stylesheet"/>
+    <link href="/css/tabler.min.css" rel="stylesheet"/>
+    <link href="/css/demo.min.css" rel="stylesheet"/>
     <style>
       @import url('fonts/inter.css');
       :root {
@@ -19,15 +19,15 @@
     </style>
   </head>
   <body  class=" d-flex flex-column">
-    <script src="js/demo-theme.js"></script>
+    <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 mb-4">
-          <a href="." class="navbar-brand navbar-brand-autodark"><img src="./static/logo.svg" height="36" alt=""></a>
-        </div> -->
+        <div class="text-center mb-4">
+          <a href="#" class="navbar-brand navbar-brand-autodark d-none"><img src="/static/logo.svg" height="36" alt=""></a>
+        </div>
 
         <div class="card">
           

views/settings.ejs

@@ -6,10 +6,10 @@
 		<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
 		<title>DweebUI - Settings</title>
 		<!-- CSS files -->
-		<link href="css/tabler.min.css" rel="stylesheet"/>
-		<link href="css/demo.min.css" rel="stylesheet"/>
+		<link href="/css/tabler.min.css" rel="stylesheet"/>
+		<link href="/css/demo.min.css" rel="stylesheet"/>
 		<style>
-			@import url('fonts/inter.css');
+			@import url('/fonts/inter.css');
 			:root {
 			  --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
 			}
@@ -19,7 +19,6 @@
 		  </style>
 	</head>
 	<body >
-		<script src="js/demo-theme.min.js"></script>
 		<div class="page">
 		<!-- Navbar -->
 		<%- include('navbar.ejs') %>
@@ -131,7 +130,7 @@
 		</div>
 		<!-- Libs JS -->
 		<!-- Tabler Core -->
-		<script src="js/tabler.min.js" defer></script>
-		<script src="js/demo.min.js" defer></script>
+		<script src="/js/tabler.min.js" defer></script>
+		<script src="/js/demo.min.js" defer></script>
 	</body>
 	</html>

views/syslogs.ejs

@@ -5,10 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>DweebUI - Syslogs</title>
-    <link href="css/tabler.min.css" rel="stylesheet"/>
-    <link href="css/demo.min.css" rel="stylesheet"/>
+    <link href="/css/tabler.min.css" rel="stylesheet"/>
+    <link href="/css/demo.min.css" rel="stylesheet"/>
     <style>
-			@import url('fonts/inter.css');
+			@import url('/fonts/inter.css');
 			:root {
 			  --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
 			}
@@ -18,7 +18,6 @@
 		  </style>
   </head>
   <body >
-    <script src="js/demo-theme.min.js"></script>
     <div class="page">
 
 
@@ -73,10 +72,10 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="libs/list.js/dist/list.min.js" defer></script>
+    <script src="/libs/list.js/dist/list.min.js" defer></script>
     <!-- Tabler Core -->
-    <script src="js/tabler.min.js" defer></script>
-    <script src="js/demo.min.js" defer></script>
+    <script src="/js/tabler.min.js" defer></script>
+    <script src="/js/demo.min.js" defer></script>
 
     <script>
       document.addEventListener("DOMContentLoaded", function() {

views/users.ejs

@@ -5,10 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>DweebUI - Users</title>
-    <link href="css/tabler.min.css" rel="stylesheet"/>
-    <link href="css/demo.min.css" rel="stylesheet"/>
+    <link href="/css/tabler.min.css" rel="stylesheet"/>
+    <link href="/css/demo.min.css" rel="stylesheet"/>
     <style>
-			@import url('fonts/inter.css');
+			@import url('/fonts/inter.css');
 			:root {
 			  --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
 			}
@@ -18,7 +18,6 @@
 		  </style>
   </head>
   <body >
-    <script src="js/demo-theme.min.js"></script>
     <div class="page">
 
 
@@ -65,7 +64,7 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="js/tabler.min.js" defer></script>
-    <script src="js/demo.min.js" defer></script>
+    <script src="/js/tabler.min.js" defer></script>
+    <script src="/js/demo.min.js" defer></script>
   </body>
 </html>

views/volumes.ejs

@@ -5,10 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>DweebUI - Volumes</title>
-    <link href="css/tabler.min.css" rel="stylesheet"/>
-    <link href="css/demo.min.css" rel="stylesheet"/>
+    <link href="/css/tabler.min.css" rel="stylesheet"/>
+    <link href="/css/demo.min.css" rel="stylesheet"/>
     <style>
-      @import url('fonts/inter.css');
+      @import url('/fonts/inter.css');
       :root {
         --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
       }
@@ -150,10 +150,10 @@
     </div>
     
     <!-- Libs JS -->
-    <script src="libs/list.js/dist/list.min.js" defer></script>
+    <script src="/libs/list.js/dist/list.min.js" defer></script>
     <!-- Tabler Core -->
-    <script src="js/tabler.min.js" defer></script>
-    <script src="js/demo.min.js" defer></script>
+    <script src="/js/tabler.min.js" defer></script>
+    <script src="/js/demo.min.js" defer></script>
 
     <script>
       document.addEventListener("DOMContentLoaded", function() {