new permissions modal

CHANGELOG.md

@@ -5,7 +5,8 @@
 * Improved Dockerfile.
 * Express sessions configured to use memorystore.
 * Improved chart rendering.
-* Fixed chart scaling.
+* Improvements to container charts.
+* Created Supporters page.
 
 ## v0.20 (Jan 20th 2024) - The rewrite. Jumping all the way to v0.20.
 * Changed to ES6 imports.

components/containerCard.js

@@ -85,7 +85,7 @@ export const containerCard = (data) => {
                     <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" name="${name}" id="permissions" value="permissions" data-bs-toggle="modal" data-bs-target="#${name}_permissions">Permissions</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>
                 </div>
@@ -212,18 +212,35 @@ export const containerCard = (data) => {
 
             <div class="mb-2">
               <div class="divide-y">
+                
+                <div class="row">
+                  <div class="col-9">
+                    <div class="d-flex align-items-center">
+                      User:
+                      <select class="form-select ms-2">
+                        <option value="john_doe" selected hidden>John Doe</option>
+                        <option value="john_doe">John Doe</option>
+                        <option value="jane_doe">Jane Doe</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+
                 <div class="row">
                   <div class="col-9">
                     <label class="row text-start">
-                      <span class="col">Install</span>
+                      <span class="col">
+                        View
+                      </span>
                     </label>
                   </div>
                   <div class="col-3">
                     <label class="form-check form-check-single form-switch text-end">
-                      <input class="form-check-input" type="checkbox" name="remove_volumes">
+                      <input class="form-check-input" type="checkbox" name="remove_image">
                     </label>
                   </div>
                 </div>
+
                 <div class="row">
                   <div class="col-9">
                     <label class="row text-start">
@@ -238,6 +255,7 @@ export const containerCard = (data) => {
                     </label>
                   </div>
                 </div>
+
                 <div class="row">
                   <div class="col-9">
                     <label class="row text-start">

components/permissions_modal.js

@@ -0,0 +1,269 @@
+export const permissionsModal = (data) => {
+  
+
+  let modal = `
+        <div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollables">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">Permissions</h5>
+            </div>
+            <div class="modal-body">
+              <form action="" id="details_modal" method="POST">
+            
+              <div class="accordion" id="modal-accordion">
+
+
+                <div class="accordion-item" style="border: 1px solid grey;">
+                  <h2 class="accordion-header" id="heading-1">
+                    <button class="accordion-button collapsed row" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false">
+                      <span class="avatar avatar-sm bg-green-lt col-3 text-start">JD</span>
+                        <div class="col text-end" style="margin-right: 10px;">Jane Doe</div>
+                    </button>
+                  </h2>
+                  <div id="collapse-1" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
+                    <div class="accordion-body pt-0">
+
+
+                      <div class="mb-2">
+                        <div class="">
+
+                          <div class="row mb-3">
+                            <div class="col-9">
+                              <label class="row text-start">
+                                <span class="col">
+                                  All
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-3">
+                              <label class="form-check form-check-single form-switch text-end">
+                                <input class="form-check-input" type="checkbox" name="remove_image">
+                              </label>
+                            </div>
+                          </div>
+
+                          <div class="row mb-2">
+                            <div class="col-9">
+                              <label class="row text-start">
+                                <span class="col">
+                                  View
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-3">
+                              <label class="form-check form-check-single form-switch text-end">
+                                <input class="form-check-input" type="checkbox" name="remove_image">
+                              </label>
+                            </div>
+                          </div>
+          
+                          <div class="row mb-2">
+                            <div class="col-9">
+                              <label class="row text-start">
+                                <span class="col">
+                                  Uninstall
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-3">
+                              <label class="form-check form-check-single form-switch text-end">
+                                <input class="form-check-input" type="checkbox" name="remove_image">
+                              </label>
+                            </div>
+                          </div>
+          
+                          <div class="row mb-2">
+                            <div class="col-9">
+                              <label class="row text-start">
+                                <span class="col">
+                                  Edit
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-3">
+                              <label class="form-check form-check-single form-switch text-end">
+                                <input class="form-check-input" type="checkbox" name="remove_backups">
+                              </label>
+                            </div>
+                          </div>
+
+                          <div class="row mb-2">
+                            <div class="col-9">
+                              <label class="row text-start">
+                                <span class="col">
+                                  Upgrade
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-3">
+                              <label class="form-check form-check-single form-switch text-end">
+                                <input class="form-check-input" type="checkbox" name="remove_backups">
+                              </label>
+                            </div>
+                          </div>
+
+                          <div class="row mb-2">
+                            <div class="col-9">
+                              <label class="row text-start">
+                                <span class="col">
+                                  Start
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-3">
+                              <label class="form-check form-check-single form-switch text-end">
+                                <input class="form-check-input" type="checkbox" name="remove_backups">
+                              </label>
+                            </div>
+                          </div>
+
+                          <div class="row mb-2">
+                            <div class="col-9">
+                              <label class="row text-start">
+                                <span class="col">
+                                  Stop
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-3">
+                              <label class="form-check form-check-single form-switch text-end">
+                                <input class="form-check-input" type="checkbox" name="remove_backups">
+                              </label>
+                            </div>
+                          </div>
+
+                          <div class="row mb-2">
+                            <div class="col-9">
+                              <label class="row text-start">
+                                <span class="col">
+                                  Pause
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-3">
+                              <label class="form-check form-check-single form-switch text-end">
+                                <input class="form-check-input" type="checkbox" name="remove_backups">
+                              </label>
+                            </div>
+                          </div>
+
+                          <div class="row mb-2">
+                            <div class="col-9">
+                              <label class="row text-start">
+                                <span class="col">
+                                  Restart
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-3">
+                              <label class="form-check form-check-single form-switch text-end">
+                                <input class="form-check-input" type="checkbox" name="remove_backups">
+                              </label>
+                            </div>
+                          </div>
+
+
+                          <div class="row mb-2">
+                            <div class="col-9">
+                              <label class="row text-start">
+                                <span class="col">
+                                  Logs
+                                </span>
+                              </label>
+                            </div>
+                            <div class="col-3">
+                              <label class="form-check form-check-single form-switch text-end">
+                                <input class="form-check-input" type="checkbox" name="remove_backups">
+                              </label>
+                            </div>
+                          </div>
+
+
+                        </div>
+                      </div>
+
+                    </div>
+                  </div>
+                </div>
+
+
+                <div class="accordion-item mt-2" style="border: 1px solid grey;">
+                  <h2 class="accordion-header" id="heading-2">
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false">
+                      Volumes
+                    </button>
+                  </h2>
+
+                  <div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
+                    <div class="accordion-body pt-0">
+                      
+                    </div>
+                  </div>
+                </div>
+
+
+                <div class="accordion-item mt-2" style="border: 1px solid grey;">
+                  <h2 class="accordion-header" id="heading-3">
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false">
+                      Environment Variables
+                    </button>
+                  </h2>
+                  <div id="collapse-3" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
+                    <div class="accordion-body pt-0">
+    
+                    </div>
+                  </div>
+                </div>
+
+
+                <div class="accordion-item mt-2" style="border: 1px solid grey;">
+                  <h2 class="accordion-header" id="heading-4">
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false">
+                      Labels
+                    </button>
+                  </h2>
+                  <div id="collapse-4" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
+                    <div class="accordion-body pt-0">
+    
+                    </div>
+                  </div>
+                </div>
+
+
+                <div class="accordion-item mt-2" style="border: 1px solid grey;">
+                  <h2 class="accordion-header" id="heading-5">
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-5" aria-expanded="false">
+                      Extras
+                    </button>
+                  </h2>
+                  <div id="collapse-5" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
+                    <div class="accordion-body pt-0">
+    
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+              </form>
+            </div>
+            <div class="modal-footer">
+              <div class="row">
+
+                  <label class="form-check form-switch col">
+                    <input class="form-check-input" type="checkbox">
+                    <span class="form-check-label">Reset</span>
+                  </label>
+              
+                <div class="col">
+                  <button type="button" class="btn btn-danger" data-bs-dismiss="modal" disabled="">Reset</button>
+                </div>
+                <div class="col">
+                  <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Update</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>`;
+
+    return modal;
+}

server.js

@@ -9,6 +9,7 @@ import { sequelize, Container } from './database/models.js';
 import { currentLoad, mem, networkStats, fsSize, dockerContainerStats, dockerImages, networkInterfaces } from 'systeminformation';
 import { containerCard } from './components/containerCard.js';
 import { modal } from './components/modal.js';
+import { permissionsModal } from './components/permissions_modal.js';
 export var docker = new Docker();
 
 const app = express();
@@ -17,7 +18,7 @@ const port = process.env.PORT || 8000;
 let [ hidden, activeEvent, cardList, clicked ] = ['', '', '', false];
 let sentList = '';
 let SSE = false;
-let clicks = 0;
+let thanks = 0;
 
 // Session middleware
 const sessionMiddleware = session({
@@ -298,6 +299,14 @@ router.get('/sse_event', (req, res) => {
 router.get('/modal', async (req, res) => {
 
     let name = req.header('hx-trigger-name');
+    let id = req.header('hx-trigger');
+
+    if (id == 'permissions') {
+        let form = permissionsModal();
+        res.send(form);
+        return;
+    }
+
 
     let containerId = docker.getContainer(name);
     let containerInfo = await containerId.inspect();
@@ -326,8 +335,6 @@ router.get('/modal', async (req, res) => {
         ports: ports_list,
         link: 'localhost',
     }
-
-    console.log(container_info);
     
     let form = modal(container_info);
     res.send(form);
@@ -349,13 +356,13 @@ router.get('/chart', async (req, res) => {
     // slice them down to the last 15 values
     stats[name].cpuArray = stats[name].cpuArray.slice(-15);
     stats[name].ramArray = stats[name].ramArray.slice(-15);
-
+    // replace the chart with the new data
     let chart = `
         <script>
             ${name}chart.updateSeries([{
-                data: ${JSON.stringify(stats[name].cpuArray)}
+                data: [${stats[name].cpuArray}]
             }, {
-                data: ${JSON.stringify(stats[name].ramArray)}
+                data: [${stats[name].ramArray}]
             }])
         </script>`
     res.send(chart);
@@ -363,8 +370,12 @@ router.get('/chart', async (req, res) => {
 
 
 
-router.get('/clicker', async (req, res) => {
+router.get('/thank', async (req, res) => {
     let name = req.header('hx-trigger-name');
-    clicks++;
-    res.send(clicks.toString());
+    thanks++;
+    let data = thanks.toString();
+    if (thanks > 999) {
+        data = 'Did you really click 1000 times?!';
+    }
+    res.send(data);
 });

views/dashboard.html

@@ -146,11 +146,10 @@
             <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">
-
                 </div>
               </div>
             </div>
-
+            
 
             <div class="modal modal-blur fade" id="log_view" tabindex="-1" style="display: none;" aria-hidden="true">
               <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
@@ -203,7 +202,7 @@
             enabled: true
           },
           animations: {
-            enabled: false
+            enabled: true
           }
         },
         fill: {
@@ -229,19 +228,13 @@
           strokeDashArray: 4
         },
         xaxis: {
-          labels: {
-            padding: 0
-          },
           tooltip: {
             enabled: false
           }
         },
         yaxis: {
           min: 0,
-          max: 102,
-          labels: {
-            padding: 4
-          }
+          max: 100,
         },
         colors: [tabler.getColor("primary"), tabler.getColor("gray-600")],
         legend: {

views/navbar.html

@@ -141,8 +141,9 @@
           <!-- <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="/settings" class="dropdown-item">Settings</a>
+          <!-- <div class="dropdown-divider"></div> -->
+
           <a href="/logout" class="dropdown-item">Logout</a>
         </div>
       </div>

views/register.html

@@ -8,6 +8,7 @@
     <!-- CSS files -->
     <link href="/css/tabler.min.css" rel="stylesheet"/>
     <link href="/css/demo.min.css" rel="stylesheet"/>
+    <script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
     <style>
       @import url('/fonts/inter.css');
       :root {

views/sidebar.html

@@ -2,7 +2,7 @@
 	<div class="card-body">
 		<h4 class="subheader">Menu</h4>
 		<div class="list-group list-group-transparent">
-			<a href="/account" class="list-group-item list-group-item-action d-flex align-items-center active">Accounts</a>
+			<a href="/account" class="list-group-item list-group-item-action d-flex align-items-center">Accounts</a>
 			<a href="/settings" class="list-group-item list-group-item-action d-flex align-items-center">Settings</a>
 		</div>
 		<h4 class="subheader mt-4">Other</h4>

views/supporters.html

@@ -50,9 +50,9 @@
 									<div class="row align-items-center">
 										<div class="col">
 
-											<span type="button" class="avatar avatar-md bg-green-lt" hx-trigger="load, click" hx-get="/clicker" hx-target="#count" name="MM"  title="Micheal M" style="margin-right: 5px;">mm</span>
+											<span type="button" class="avatar avatar-md bg-green-lt" hx-trigger="load, click" hx-get="/thank" hx-target="#count" name="MM"  title="Micheal M" style="margin-right: 5px;">mm</span>
 
-											<span type="button" class="avatar avatar-md bg-cyan-lt" hx-trigger="load, click" hx-get="/clicker" hx-target="#count" name="PD" title="Peter D" style="margin-right: 5px;">pd</span>
+											<span type="button" class="avatar avatar-md bg-cyan-lt" hx-trigger="click" hx-get="/thank" hx-target="#count" name="PD" title="Peter D" style="margin-right: 5px;">pd</span>
 
 
 										</div>