New UI elements Grid view and List view.

CHANGELOG.md

@@ -1,4 +1,11 @@
 ## v0.70 (dev)
+* Fixed installs having to be run twice.
+* Updated systeminformation.
+* Updated adm-zip.
+* Updated yaml.
+* Pushed new docker image with 'latest' tag.
+* Updated compose.yaml volume to /app/config.
+* Fixed container card links.
 * 
 
 ## v0.60 (June 9th 2024) - Permissions system and import templates

README.md

@@ -16,7 +16,7 @@
 
 * [x] A dynamically updating dashboard that displays server metrics along with container metrics and container controls.
 * [x] Multi-user support with permissions system.
-* [ ] Display and control docker containers from multiple remote hosts.
+* [ ] Display and control docker containers from multiple remote hosts (planned).
 * [x] Container actions: Start, Stop, Pause, Restart, View Details, View Logs.
 * [x] Windows, Linux, and MacOS compatable.
 * [x] Light/Dark Mode.
@@ -44,7 +44,7 @@ version: "3.9"
 services:
   dweebui:
     container_name: dweebui
-    image: lllllllillllllillll/dweebui:v0.60
+    image: lllllllillllllillll/dweebui
     environment:
       PORT: 8000
       SECRET: MrWiskers

controllers/dashboard.js

@@ -212,14 +212,6 @@ async function containerInfo (containerName) {
         internal = ports_list[0].internal;
     } catch {}
 
-    // console.log(ports_list);
-    // console.log(info.HostConfig.PortBindings);
-
-    // console.log(info.HostConfig.Binds);
-
-    // console.log(info.Config.Env);
-    // console.log(info.Config.Labels);
-
     let details = {
         name: containerName,
         image: image,
@@ -268,6 +260,7 @@ async function createCard (details) {
     card = card.replace(/AppIcon/g, details.service);
     card = card.replace(/AppState/g, state);
     card = card.replace(/StateColor/g, state_color);
+    card = card.replace(/AppLink/g, 'localhost');
     card = card.replace(/ExternalPort/g, details.external_port);
     card = card.replace(/InternalPort/g, details.internal_port);
     card = card.replace(/ChartName/g, details.name.replace(/-/g, ''));

controllers/settings.js

@@ -1,3 +1,4 @@
+import { ServerSettings } from '../database/models.js';
 
 export const Settings = (req, res) => {
 
@@ -12,5 +13,25 @@ export const Settings = (req, res) => {
 
 export const settingsAction = (req, res) => {
     let action = req.params.action;
+    let name = req.header('hx-trigger-name');
+    let value = req.header('hx-trigger');
+
+    console.log(`action: ${action}`);
+    console.log(`name: ${name}`);
+    console.log(`value: ${value}`);
+
+    if ((action == 'links') && (req.body.links == 'on')) {
+        console.log('links on');
+    }   else if ((action == 'links') && (!req.body.links)) {
+        console.log('links off');
+    }
+
+
+    if ((action == 'registration') && (req.body.registration == 'on')) {
+        console.log(`registration on and secret: ${req.body.secret}`);
+    } else if ((action == 'registration') && (!req.body.registration)) {
+        console.log('registration off');
+    }
+
     res.send('ok');
 }

database/models.js

@@ -93,11 +93,11 @@ export const Container = sequelize.define('Container', {
         type: DataTypes.STRING
     },
     cpu: {
-        // store the last 15 values from dockerContainerStats
+        // stores the last 15 values from dockerContainerStats
         type: DataTypes.STRING
     },
     ram: {
-        // store the last 15 values from dockerContainerStats
+        // stores the last 15 values from dockerContainerStats
         type: DataTypes.STRING
     },
   });
@@ -172,7 +172,6 @@ export const Permission = sequelize.define('Permission', {
   },
 });
 
-
 export const Syslog = sequelize.define('Syslog', {
   id: {
     type: DataTypes.INTEGER,
@@ -198,7 +197,6 @@ export const Syslog = sequelize.define('Syslog', {
   },
 });
 
-
 export const Notification = sequelize.define('Notification', {
   id: {
     type: DataTypes.INTEGER,
@@ -228,8 +226,7 @@ export const Notification = sequelize.define('Notification', {
   },
 });
 
-
-export const Settings = sequelize.define('Settings', {
+export const ServerSettings = sequelize.define('Settings', {
   id: {
     type: DataTypes.INTEGER,
     autoIncrement: true,
@@ -245,6 +242,25 @@ export const Settings = sequelize.define('Settings', {
   }
 });
 
+export const UserSettings = sequelize.define('Settings', {
+  id: {
+    type: DataTypes.INTEGER,
+    autoIncrement: true,
+    primaryKey: true
+  },
+  uuid: {
+    type: DataTypes.STRING,
+    allowNull: false
+  },
+  key: {
+    type: DataTypes.STRING,
+    allowNull: false
+  },
+  value: {
+    type: DataTypes.STRING,
+    allowNull: false
+  }
+});
 
 export const Variables = sequelize.define('Variables', {
   find: {

views/dashboard.html

@@ -27,11 +27,11 @@
     
     <div class="page-wrapper">
 
-      <div class="page-body">
+      <div class="page-body mt-3">
         <div class="container-xl">
           <div class="row row-deck row-cards" hx-ext="sse" sse-connect="/sse">
-            
-            <div class="col-12">
+
+            <div class="col-12 mt-3">
               <div class="row row-cards">
                 
                 <div class="col-sm-6 col-lg-3">
@@ -138,6 +138,11 @@
               </div>
             </div>
 
+
+            
+
+
+
             <div class="col-12">
               <div class="row row-cards" id="containers">
               </div>

views/partials/containerFull.html

@@ -39,7 +39,6 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-end">
                     <button class="dropdown-item text-secondary" data-hx-post="/dashboard/hide" data-hx-trigger="mousedown" data-hx-swap="none" name="AppName" id="hide" value="hide">Hide</button>
-                    <button class="dropdown-item text-secondary" data-hx-post="/dashboard/reset" data-hx-trigger="mousedown" data-hx-swap="none" name="AppName" id="reset" value="reset">Reset View</button>
                     <button class="dropdown-item text-secondary" data-hx-post="/dashboard/permissions" name="AppName" data-hx-target="#modals-here" hx-swap="innerHTML" data-hx-trigger="mousedown" data-bs-toggle="modal" data-bs-target="#modals-here">Permissions</button>
                   </div>
                 </div>
@@ -49,7 +48,7 @@
         </div>
         <div class="d-flex align-items-baseline">
           <div class="h1 me-2" title="AppName" style="margin-bottom: 0;">
-            <a href="http://AppLink:AppPort" target="_blank">
+            <a href="http://AppLink:ExternalPort" target="_blank">
               AppShortName
             </a>
           </div>

views/partials/navbar.html

@@ -27,7 +27,7 @@
     }
   }
 </script>
-<header class="navbar navbar-expand-md d-print-none py-0">
+<header class="navbar navbar-expand-md d-print-none">
   <div class="container-xl">
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu"
       aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
@@ -267,9 +267,22 @@
 
         <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
 
-          <ul class="navbar-nav">
-            
-          </ul>
+          <div class="card-actions btn-actions">
+            <button class="btn-action" title="Grid View" data-hx-post="/dashboard/view" data-hx-trigger="mousedown" data-hx-target="#" name="grid" id="AppState">
+              <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1.5"  stroke-linecap="round"  stroke-linejoin="round"  class="icon-tabler icons-tabler-outline icon-tabler-layout-grid"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M14 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /></svg>
+            </button>
+            <button class="btn-action" title="List View" data-hx-post="/dashboard/view" data-hx-trigger="mousedown" data-hx-target="#" name="list" id="AppState">
+              <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1.5"  stroke-linecap="round"  stroke-linejoin="round"  class="icon-tabler icons-tabler-outline icon-tabler-list"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l11 0" /><path d="M9 12l11 0" /><path d="M9 18l11 0" /><path d="M5 6l0 .01" /><path d="M5 12l0 .01" /><path d="M5 18l0 .01" /></svg>
+            </button>
+            <div class="dropdown">
+              <a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <svg xmlns="http://www.w3.org/2000/svg" class="" 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><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle><circle cx="12" cy="5" r="1"></circle></svg>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end">
+                <button class="dropdown-item text-secondary" data-hx-post="/dashboard/reset" data-hx-trigger="mousedown" data-hx-swap="none" name="AppName" id="reset" value="reset">Reset View</button>
+              </div>
+            </div>
+          </div>
         </div>
 
       </div>

views/settings.html

@@ -7,17 +7,16 @@
 		<title>DweebUI - Settings</title>
 		<!-- CSS files -->
 		<link href="/css/tabler.min.css" rel="stylesheet"/>
-		<link href="/css/demo.min.css" rel="stylesheet"/>
 		<script src="/js/htmx.min.js"></script>
 		<style>
 			@import url('/fonts/inter.css');
 			:root {
-			  --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+				--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
 			}
 			body {
-			  font-feature-settings: "cv03", "cv04", "cv11";
+				font-feature-settings: "cv03", "cv04", "cv11";
 			}
-		  </style>
+		</style>
 	</head>
 	<body >
 		<div class="page">
@@ -45,7 +44,7 @@
 					  	<div class="col d-flex flex-column">
 					  
 							<div class="card-body">
-							<h2 class="mb-2">Settings</h2>
+							<h2 class="">Settings</h2>
 							<p class="text-muted mb-4">Configure server below</p>
 							
 							<div class="row align-items-center">
@@ -59,39 +58,43 @@
 
 							
 
-							<h3 class="card-title mt-4">Container Links</h3>
+							<h3 class="card-title mt-6">Container Links</h3>
 							<p class="card-subtitle"> Set the default behaviour for container links. </p>
-							<div>
-								<label class="form-check form-switch form-switch-lg">
-									<input class="form-check-input" type="checkbox">
-									<span class="form-check-label form-check-label-on">
-										Host IP
-									</span>
-									<span class="form-check-label form-check-label-off">
-										Localhost
-									</span>
-								</label>
-							</div>
-
-							<h3 class="mt-4">User Registration</h3>
-							<label class="text-muted">Allow other users to register.</label>
-							<div class="row align-items-center">
-								<div class="col-auto">
-									<label class="form-check form-switch form-switch-lg mt-2">
-										<input class="form-check-input" type="checkbox" id="registration" value="something" name="registration" hx-trigger="mousedown" hx-post="/settings/registration" hx-swap="none">
-										<span class="form-check-label form-check-label-on text-success">
-											Enabled
+							<form id="container-links">
+								<div>
+									<label class="form-check form-switch form-switch-lg">
+										<input class="form-check-input" type="checkbox" id="submit" name="links" hx-trigger="click" hx-post="/settings/links" hx-swap="none">
+										<span class="form-check-label form-check-label-on">
+											Host IP
 										</span>
-										<span class="form-check-label form-check-label-off text-danger">
-											Disabled
+										<span class="form-check-label form-check-label-off">
+											Localhost
 										</span>
 									</label>
 								</div>
-								<div class="col-6">
-									<input type="text" class="form-control" placeholder="Registration Secret">
-								</div>
-							</div>
+							</form>
+
 
+							<h3 class="mt-6">User Registration</h3>
+							<label class="text-muted mb-2">Allow other users to register.</label>
+							<form id="registration">
+								<div class="row align-items-center">
+									<div class="col-auto">
+										<label class="form-check form-switch form-switch-lg">
+											<input class="form-check-input" type="checkbox" id="submit" name="registration" hx-trigger="click" hx-post="/settings/registration" hx-swap="none" RegistrationEnabled>
+											<span class="form-check-label form-check-label-on text-success">
+												Enabled
+											</span>
+											<span class="form-check-label form-check-label-off text-danger">
+												Disabled
+											</span>
+										</label>
+									</div>
+									<div class="col-6">
+										<input type="text" class="form-control" name="secret" placeholder="Registration Secret">
+									</div>
+								</div>
+							</form>
 
 							</div>