modal and graph fixes. new supporters page.

components/containerCard.js

@@ -1,31 +1,24 @@
-// export for app.js
 export const containerCard = (data) => {
   
   let { name, service, state, external_port, internal_port, ports, link } = data;
   let wrapped = name;
-  
+  let disable = "";
   let chartName = name.replace(/-/g, '');
 
-  if (name.length > 13) {
-    wrapped = name.slice(0, 10) + '...';
-  }
-
-  //disable controls for a docker container depending on its name
-  let actions = "";
-  if (name.startsWith('dweebui')) {
-    actions = 'disabled=""';
-  }
+  // shorten long names
+  if (name.length > 13) { wrapped = name.slice(0, 10) + '...'; }
+  // disable buttons for dweebui
+  if (name.startsWith('dweebui')) { disable = 'disabled=""'; }
 
   if ( external_port == undefined ) { external_port = 0; }
   if ( internal_port == undefined ) { internal_port = 0; }
 
-
   let state_indicator = 'green';
   if (state == 'exited') {
-    state = 'stopped';
-    state_indicator = 'red';
+      state = 'stopped';
+      state_indicator = 'red';
   } else if (state == 'paused') {
-    state_indicator = 'orange';
+      state_indicator = 'orange';
   }
 
   let ports_data = [];
@@ -61,16 +54,16 @@ export const containerCard = (data) => {
             <div class="ms-auto lh-1">
               <div class="card-actions btn-actions">
                 <div class="card-actions btn-actions">
-                  <button class="btn-action" title="Start" data-hx-get="/click" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="start" value="${state}" ${actions}><!-- player-play -->
+                  <button class="btn-action" title="Start" data-hx-get="/action" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="start" value="${state}" ${disable}><!-- player-play -->
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler icon-tabler-player-play" 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><path d="M7 4v16l13 -8z"></path></svg>
                   </button>
-                  <button class="btn-action" title="Stop" data-hx-get="/click" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="stop" value="${state}" ${actions}><!-- player-stop -->
+                  <button class="btn-action" title="Stop" data-hx-get="/action" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="stop" value="${state}" ${disable}><!-- player-stop -->
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler icon-tabler-player-stop" 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><path d="M5 5m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"></path></svg>
                   </button>
-                  <button class="btn-action" title="Pause" data-hx-get="/click" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="pause" value="${state}" ${actions}><!-- player-pause -->
+                  <button class="btn-action" title="Pause" data-hx-get="/action" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="pause" value="${state}" ${disable}><!-- player-pause -->
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler icon-tabler-player-pause" 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><path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path><path d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path></svg>
                   </button>
-                  <button class="btn-action" title="Restart" data-hx-get="/click" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="restart" value="${state}" ${actions}><!-- reload -->
+                  <button class="btn-action" title="Restart" data-hx-get="/action" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="restart" value="${state}" ${disable}><!-- reload -->
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler icon-tabler-reload" 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><path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747"></path><path d="M20 4v5h-5"></path></svg>                          
                   </button>
                   <div class="dropdown">
@@ -78,10 +71,10 @@ export const containerCard = (data) => {
                       <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" id="details" data-bs-toggle="modal" data-bs-target="#details_modal">Details</button>
+                      <button class="dropdown-item text-secondary" name="${name}" data-hx-get="/modal" data-hx-target="#modals-here" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">Details</button>
                       <button class="dropdown-item text-secondary" name="${name}" id="logs" data-hx-get="/logs" data-hx-target="#logView" data-bs-toggle="modal" data-bs-target="#log_view">Logs</button>
-                      <button class="dropdown-item text-secondary" name="${name}" id="edit" href="#">Edit</button>
-                      <button class="dropdown-item text-primary" name="${name}" id="update" href="#">Update</button>
+                      <button class="dropdown-item text-secondary" name="${name}" id="edit">Edit</button>
+                      <button class="dropdown-item text-primary" name="${name}" id="update">Update</button>
                       <button class="dropdown-item text-danger" name="${name}" id="remove" data-bs-toggle="modal" data-bs-target="#${name}_uninstall_modal" href="#">Remove</button>
                     </div>
                   </div>
@@ -90,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="/click" 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="/click" 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-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>
                     </div>
                   </div>
@@ -118,7 +111,7 @@ export const containerCard = (data) => {
           </script>
 
           <div class="chart-sm">
-            <div id="${chartName}_chart" data-hx-trigger="every 4s" data-hx-get="/chart" name="${chartName}">
+            <div id="${chartName}_chart" data-hx-trigger="load, every 3s" data-hx-get="/chart" name="${chartName}">
               <script>
                 ${chartName}chart.render();
               </script>

components/modal.js

@@ -0,0 +1,893 @@
+export const modal = (data) => {
+  
+  let { name, state, image } = data;
+
+  let ports_data = [];
+
+  for (let i = 0; i < 12; i++) {
+
+    let port_check = "checked";
+    let external = i;
+    let internal = i;
+    let protocol = "tcp";
+
+    ports_data.push({
+      check: port_check,
+      external: external,
+      internal: internal,
+      protocol: protocol
+    });
+  }
+  
+
+  let volumes_data = [];
+  
+    for (let i = 0; i < 12; i++) {
+
+      let vol_check = "checked";
+      let bind = i;
+      let container = i;
+      let readwrite = "rw";
+
+      volumes_data.push({
+        check: vol_check,
+        bind: bind,
+        container: container,
+        readwrite: readwrite
+      });
+    }
+  
+
+
+  let env_data = [];
+  
+    for (let i = 0; i < 12; i++) {
+
+      let env_check = "checked";
+      let env_name = i;
+      let env_default = i;
+
+      env_data.push({
+        check: env_check,
+        name: env_name,
+        default: env_default
+      });
+    }
+  
+
+
+  let label_data = [];
+  
+    for (let i = 0; i < 12; i++) {
+
+      let label_check = "checked";
+      let label_name = i;
+      let label_default = i;
+      
+      label_data.push({
+        check: label_check,
+        name: label_name,
+        value: label_default
+      });
+    }
+  
+
+
+  let modal = `
+  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Details</h5>
+      </div>
+      <div class="modal-body">
+        <pre class="text-secondary">note</pre>
+          <form action="" id="details_modal" method="POST">
+            <div class="row mb-3 align-items-end">
+              <div class="col-lg-6">
+                <label class="form-label">Container Name: </label>
+                <input type="text" class="form-control" name="service_name" value="${name}" hidden/>
+                <input type="text" class="form-control" name="name" value="${name}"/>
+              </div>
+              <div class="col-lg-3">
+                <label class="form-label">Image: </label>
+                <input type="text" class="form-control" name="image" value="${image}"/>
+              </div>
+              <div class="col-lg-3">
+                <label class="form-label">Restart Policy: </label>
+                <select class="form-select" name="restart_policy" value="">
+                  <option value="1">unless-stopped</option>
+                  <option value="2">on-failure</option>
+                  <option value="3">never</option>
+                  <option value="4">always</option>
+                </select>
+              </div>
+            </div>
+            <label class="form-label">Network Mode</label>
+            <div class="form-selectgroup-boxes row mb-3">
+              <div class="col">
+                  <label class="form-selectgroup-item">
+                    <input type="radio" name="report-type" value="1" class="form-selectgroup-input">
+                    <span class="form-selectgroup-label d-flex align-items-center p-3">
+                      <span class="me-3">
+                        <span class="form-selectgroup-check"></span>
+                      </span>
+                      <span class="form-selectgroup-label-content">
+                        <span class="form-selectgroup-title strong mb-1">Host Network</span>
+                        <span class="d-block text-secondary">Same as host. No isolation. ex.127.0.0.1</span>
+                      </span>
+                    </span>
+                  </label>
+                </div>
+                <div class="col">
+                  <label class="form-selectgroup-item">
+                    <input type="radio" name="report-type" class="form-selectgroup-input">
+                    <span class="form-selectgroup-label d-flex align-items-center p-3">
+                      <span class="me-3">
+                        <span class="form-selectgroup-check"></span>
+                      </span>
+                      <span class="form-selectgroup-label-content">
+                        <span class="form-selectgroup-title strong mb-1">Bridge Network</span>
+                        <span class="d-block text-secondary">Containers can communicate using names.</span>
+                      </span>
+                    </span>
+                  </label>
+                </div>
+                <div class="col">
+                <label class="form-selectgroup-item">
+                <input type="radio" name="report-type" class="form-selectgroup-input">
+                <span class="form-selectgroup-label d-flex align-items-center p-3">
+                  <span class="me-3">
+                    <span class="form-selectgroup-check"></span>
+                  </span>
+                  <span class="form-selectgroup-label-content">
+                    <span class="form-selectgroup-title strong mb-1">Docker Network</span>
+                    <span class="d-block text-secondary">Isolated on the docker network. ex.172.0.34.2</span>
+                  </span>
+                </span>
+                </label>
+              </div>
+            </div>
+            
+            <div class="accordion" id="modal-accordion">
+                        <div class="accordion-item">
+                          <h2 class="accordion-header" id="heading-1">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false">
+                              Ports
+                            </button>
+                          </h2>
+                          <div id="collapse-1" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
+                            <div class="accordion-body pt-0">
+            
+
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" name="port_0_check" type="checkbox" ${ports_data[0].check}>
+                                </div>
+                                <div class="col">
+                                  <label class="form-label">External Port</label>
+                                  <input type="text" class="form-control" name="port_0_external" value="${ports_data[0].external}"/>
+                                </div>
+                                <div class="col">
+                                  <label class="form-label">Internal Port</label>
+                                  <input type="text" class="form-control" name="port_0_internal" value="${ports_data[0].internal}"/>
+                                </div>
+                                <div class="col-lg-2">
+                                  <label class="form-label">Protocol</label>
+                                  <select class="form-select" name="port_0_protocol">
+                                    <option value="${ports_data[0].protocol}" selected hidden>${ports_data[0].protocol}</option>
+                                    <option value="tcp">tcp</option>
+                                    <option value="udp">udp</option>
+                                  </select>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" name="port_1_check" type="checkbox" ${ports_data[1].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_1_external" value="${ports_data[1].external}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_1_internal" value="${ports_data[1].internal}"/>
+                                </div>
+                                <div class="col-lg-2">
+                                  <select class="form-select" name="port_1_protocol">
+                                    <option value="${ports_data[1].protocol}" selected hidden>${ports_data[1].protocol}</option>
+                                    <option value="tcp">tcp</option>
+                                    <option value="udp">udp</option>
+                                  </select>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" name="port_2_check" type="checkbox" ${ports_data[2].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_2_external" value="${ports_data[2].external}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_2_internal" value="${ports_data[2].internal}"/>
+                                </div>
+                                <div class="col-lg-2">
+                                  <select class="form-select" name="port_2_protocol">
+                                    <option value="${ports_data[2].protocol}" selected hidden>${ports_data[2].protocol}</option>
+                                    <option value="tcp">tcp</option>
+                                    <option value="udp">udp</option>
+                                  </select>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" name="port_3_check" type="checkbox" ${ports_data[3].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_3_external" value="${ports_data[3].external}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_3_internal" value="${ports_data[3].internal}"/>
+                                </div>
+                                <div class="col-lg-2">
+                                  <select class="form-select" name="port_3_protocol">
+                                    <option value="${ports_data[3].protocol}" selected hidden>${ports_data[3].protocol}</option>
+                                    <option value="tcp">tcp</option>
+                                    <option value="udp">udp</option>
+                                  </select>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" name="port_4_check" type="checkbox" ${ports_data[4].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_4_external" value="${ports_data[4].external}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_4_internal" value="${ports_data[4].internal}"/>
+                                </div>
+                                <div class="col-lg-2">
+                                  <select class="form-select" name="port_4_protocol">
+                                    <option value="${ports_data[4].protocol}" selected hidden>${ports_data[4].protocol}</option>
+                                    <option value="tcp">tcp</option>
+                                    <option value="udp">udp</option>
+                                  </select>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" name="port_5_check" type="checkbox" ${ports_data[5].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_5_external" value="${ports_data[5].external}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_5_internal" value="${ports_data[5].internal}"/>
+                                </div>
+                                <div class="col-lg-2">
+                                  <select class="form-select" name="port_5_protocol">
+                                    <option value="${ports_data[5].protocol}" selected hidden>${ports_data[5].protocol}</option>
+                                    <option value="tcp">tcp</option>
+                                    <option value="udp">udp</option>
+                                  </select>
+                                </div>
+                              </div>
+            
+            
+                            </div>
+                          </div>
+                        </div>
+                        <div class="accordion-item">
+                          <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 class="row mb-1 align-items-end">
+                            <div class="col-auto">
+                              <input class="form-check-input" name="volume_0_check" type="checkbox" ${volumes_data[0].check}>
+                            </div>
+                            <div class="col">
+                              <input type="text" class="form-control" name="volume_0_bind" value="${volumes_data[0].bind}"/>
+                            </div>
+                            <div class="col">
+                              <input type="text" class="form-control" name="volume_0_container" value="${volumes_data[0].container}"/>
+                            </div>
+                            <div class="col-lg-2">
+                              <select class="form-select" name="volume_0_readwrite">
+                                <option value="${volumes_data[0].readwrite}" selected hidden>${volumes_data[0].readwrite}</option>
+                                <option value="rw">rw</option>
+                                <option value="ro">ro</option>
+                              </select>
+                            </div>
+                          </div>
+            
+                          <div class="row mb-1 align-items-end">
+                            <div class="col-auto">
+                              <input class="form-check-input" name="volume_1_check" type="checkbox" ${volumes_data[1].check}>
+                            </div>
+                            <div class="col">
+                              <input type="text" class="form-control" name="volume_1_bind" value="${volumes_data[1].bind}"/>
+                            </div>
+                            <div class="col">
+                              <input type="text" class="form-control" name="volume_1_container" value="${volumes_data[1].container}"/>
+                            </div>
+                            <div class="col-lg-2">
+                              <select class="form-select" name="volume_1_readwrite">
+                                <option value="${volumes_data[1].readwrite}" selected hidden>${volumes_data[1].readwrite}</option>
+                                <option value="rw">rw</option>
+                                <option value="ro">ro</option>
+                              </select>
+                            </div>
+                          </div>
+            
+                          <div class="row mb-1 align-items-end">
+                            <div class="col-auto">
+                              <input class="form-check-input" name="volume_2_check" type="checkbox" ${volumes_data[2].check}>
+                            </div>
+                            <div class="col">
+                              <input type="text" class="form-control" name="volume_2_bind" value="${volumes_data[2].bind}"/>
+                            </div>
+                            <div class="col">
+                              <input type="text" class="form-control" name="volume_2_container" value="${volumes_data[2].container}"/>
+                            </div>
+                            <div class="col-lg-2">
+                              <select class="form-select" name="volume_2_readwrite">
+                                <option value="${volumes_data[2].readwrite}" selected hidden>${volumes_data[2].readwrite}</option>
+                                <option value="rw">rw</option>
+                                <option value="ro">ro</option>
+                              </select>
+                            </div>
+                          </div>
+            
+                          <div class="row mb-1 align-items-end">
+                            <div class="col-auto">
+                              <input class="form-check-input" name="volume_3_check" type="checkbox" ${volumes_data[3].check}>
+                            </div>
+                            <div class="col">
+                              <input type="text" class="form-control" name="volume_3_bind" value="${volumes_data[3].bind}"/>
+                            </div>
+                            <div class="col">
+                              <input type="text" class="form-control" name="volume_3_container" value="${volumes_data[3].container}"/>
+                            </div>
+                            <div class="col-lg-2">
+                              <select class="form-select" name="volume_3_readwrite">
+                                <option value="${volumes_data[3].readwrite}" selected hidden>${volumes_data[3].readwrite}</option>
+                                <option value="rw">rw</option>
+                                <option value="ro">ro</option>
+                              </select>
+                            </div>
+                          </div>
+            
+                          <div class="row mb-1 align-items-end">
+                            <div class="col-auto">
+                              <input class="form-check-input" name="volume_4_check" type="checkbox" ${volumes_data[4].check}>
+                            </div>
+                            <div class="col">
+                              <input type="text" class="form-control" name="volume_4_bind" value="${volumes_data[4].bind}"/>
+                            </div>
+                            <div class="col">
+                              <input type="text" class="form-control" name="volume_4_container" value="${volumes_data[4].container}"/>
+                            </div>
+                            <div class="col-lg-2">
+                              <select class="form-select" name="volume_4_readwrite">
+                                <option value="${volumes_data[4].readwrite}" selected hidden>${volumes_data[4].readwrite}</option>
+                                <option value="rw">rw</option>
+                                <option value="ro">ro</option>
+                              </select>
+                            </div>
+                          </div>
+            
+                          <div class="row mb-1 align-items-end">
+                          <div class="col-auto">
+                            <input class="form-check-input" name="volume_5_check" type="checkbox" ${volumes_data[5].check}>
+                          </div>
+                          <div class="col">
+                            <input type="text" class="form-control" name="volume_5_bind" value="${volumes_data[5].bind}"/>
+                          </div>
+                          <div class="col">
+                            <input type="text" class="form-control" name="volume_5_container" value="${volumes_data[5].container}"/>
+                          </div>
+                          <div class="col-lg-2">
+                            <select class="form-select" name="volume_5_readwrite">
+                              <option value="${volumes_data[5].readwrite}" selected hidden>${volumes_data[5].readwrite}</option>
+                              <option value="rw">rw</option>
+                              <option value="ro">ro</option>
+                            </select>
+                          </div>
+                        </div>
+            
+            
+                            </div>
+                          </div>
+                        </div>
+                        <div class="accordion-item">
+                          <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 class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" type="checkbox" name="env_0_check" ${env_data[0].check}>
+                                </div>
+                                <div class="col">
+                                  <label class="form-label">Variable</label>
+                                  <input type="text" class="form-control" name="env_0_name" value="${env_data[0].name}"/>
+                                </div>
+                                <div class="col">
+                                  <label class="form-label">Value</label>
+                                  <input type="text" class="form-control" name="env_0_default" value="${env_data[0].default}"/>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" type="checkbox" name="env_1_check" ${env_data[1].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_1_name" value="${env_data[1].name}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_1_default" value="${env_data[1].default}"/>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" type="checkbox" name="env_2_check" ${env_data[2].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_2_name" value="${env_data[2].name}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_2_default" value="${env_data[2].default}"/>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" type="checkbox" name="env_3_check" ${env_data[3].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_3_name" value="${env_data[3].name}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_3_default" value="${env_data[3].default}"/>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" type="checkbox" name="env_4_check" ${env_data[4].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_4_name" value="${env_data[4].name}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_4_default" value="${env_data[4].default}"/>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" type="checkbox" name="env_5_check" ${env_data[5].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_5_name" value="${env_data[5].name}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_5_default" value="${env_data[5].default}"/>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" type="checkbox" name="env_6_check" ${env_data[6].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_6_name" value="${env_data[6].name}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_6_default" value="${env_data[6].default}"/>
+                                </div>
+                              </div>
+            
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" type="checkbox" name="env_7_check" ${env_data[7].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_7_name" value="${env_data[7].name}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_7_default" value="${env_data[7].default}"/>
+                                </div>
+                              </div>
+            
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" type="checkbox" name="env_8_check" ${env_data[8].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_8_name" value="${env_data[8].name}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_8_default" value="${env_data[8].default}"/>
+                                </div>
+                              </div>
+            
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" type="checkbox" name="env_9_check" ${env_data[9].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_9_name" value="${env_data[9].name}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_9_default" value="${env_data[9].default}"/>
+                                </div>
+                              </div>
+            
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" type="checkbox" name="env_10_check" ${env_data[10].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_10_name" value="${env_data[10].name}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_10_default" value="${env_data[10].default}"/>
+                                </div>
+                              </div>
+            
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" type="checkbox" name="env_11_check" ${env_data[11].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_11_name" value="${env_data[11].name}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="env_11_default" value="${env_data[11].default}"/>
+                                </div>
+                              </div>
+            
+            
+            
+            
+                            </div>
+                          </div>
+                        </div>
+                        <div class="accordion-item">
+                          <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 class="row mb-1 align-items-end">
+                              <div class="col-auto">
+                                <input class="form-check-input" type="checkbox" name="label_0_check" ${label_data[0].check}>
+                              </div>
+                              <div class="col">
+                                <label class="form-label">Variable</label>
+                                <input type="text" class="form-control" name="label_0_name" value="${label_data[0].name}"/>
+                              </div>
+                              <div class="col">
+                                <label class="form-label">Value</label>
+                                <input type="text" class="form-control" name="label_0_value" value="${label_data[0].value}"/>
+                              </div>
+                            </div>
+            
+                            <div class="row mb-1 align-items-end">
+                              <div class="col-auto">
+                                <input class="form-check-input" type="checkbox" name="label_1_check" ${label_data[1].check}>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_1_name" value="${label_data[1].name}"/>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_1_value" value="${label_data[1].value}"/>
+                              </div>
+                            </div>
+            
+                              
+                            <div class="row mb-1 align-items-end">
+                              <div class="col-auto">
+                                <input class="form-check-input" type="checkbox" name="label_2_check" ${label_data[2].check}>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_2_name" value="${label_data[2].name}"/>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_2_value" value="${label_data[2].value}"/>
+                              </div>
+                            </div>
+            
+                            <div class="row mb-1 align-items-end">
+                              <div class="col-auto">
+                                <input class="form-check-input" type="checkbox" name="label_3_check" ${label_data[3].check}>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_3_name" value="${label_data[3].name}"/>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_3_value" value="${label_data[3].value}"/>
+                              </div>
+                            </div>
+            
+                            <div class="row mb-1 align-items-end">
+                              <div class="col-auto">
+                                <input class="form-check-input" type="checkbox" name="label_4_check" ${label_data[4].check}>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_4_name" value="${label_data[4].name}"/>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_4_value" value="${label_data[4].value}"/>
+                              </div>
+                            </div>
+
+                            <div class="row mb-1 align-items-end">
+                              <div class="col-auto">
+                                <input class="form-check-input" type="checkbox" name="label_5_check" ${label_data[5].check}>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_5_name" value="${label_data[5].name}"/>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_5_value" value="${label_data[5].value}"/>
+                              </div>
+                            </div>
+
+                            <div class="row mb-1 align-items-end">
+                              <div class="col-auto">
+                                <input class="form-check-input" type="checkbox" name="label_6_check" ${label_data[6].check}>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_6_name" value="${label_data[6].name}"/>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_6_value" value="${label_data[6].value}"/>
+                              </div>
+                            </div>
+
+                            <div class="row mb-1 align-items-end">
+                              <div class="col-auto">
+                                <input class="form-check-input" type="checkbox" name="label_7_check" ${label_data[7].check}>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_7_name" value="${label_data[7].name}"/>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_7_value" value="${label_data[7].value}"/>
+                              </div>
+                            </div>
+
+                            <div class="row mb-1 align-items-end">
+                              <div class="col-auto">
+                                <input class="form-check-input" type="checkbox" name="label_8_check" ${label_data[8].check}>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_8_name" value="${label_data[8].name}"/>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_8_value" value="${label_data[8].value}"/>
+                              </div>
+                            </div>
+
+                            <div class="row mb-1 align-items-end">
+                              <div class="col-auto">
+                                <input class="form-check-input" type="checkbox" name="label_9_check" ${label_data[9].check}>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_9_name" value="${label_data[9].name}"/>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_9_value" value="${label_data[9].value}"/>
+                              </div>
+                            </div>
+
+                            <div class="row mb-1 align-items-end">
+                              <div class="col-auto">
+                                <input class="form-check-input" type="checkbox" name="label_10_check" ${label_data[10].check}>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_10_name" value="${label_data[10].name}"/>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_10_value" value="${label_data[10].value}"/>
+                              </div>
+                            </div>
+
+                            <div class="row mb-1 align-items-end">
+                              <div class="col-auto">
+                                <input class="form-check-input" type="checkbox" name="label_11_check" ${label_data[11].check}>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_11_name" value="${label_data[11].name}"/>
+                              </div>
+                              <div class="col">
+                                <input type="text" class="form-control" name="label_11_value" value="${label_data[11].value}"/>
+                              </div>
+                            </div>
+            
+            
+                            </div>
+                          </div>
+                        </div>
+
+
+                        <div class="accordion-item">
+                          <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 class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" name="port_0_check" type="checkbox" ${ports_data[0].check}>
+                                </div>
+                                <div class="col">
+                                  <label class="form-label">External Port</label>
+                                  <input type="text" class="form-control" name="port_0_external" value="${ports_data[0].external}"/>
+                                </div>
+                                <div class="col">
+                                  <label class="form-label">Internal Port</label>
+                                  <input type="text" class="form-control" name="port_0_internal" value="${ports_data[0].internal}"/>
+                                </div>
+                                <div class="col-lg-2">
+                                  <label class="form-label">Protocol</label>
+                                  <select class="form-select" name="port_0_protocol">
+                                    <option value="${ports_data[0].protocol}" selected hidden>${ports_data[0].protocol}</option>
+                                    <option value="tcp">tcp</option>
+                                    <option value="udp">udp</option>
+                                  </select>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" name="port_1_check" type="checkbox" ${ports_data[1].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_1_external" value="${ports_data[1].external}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_1_internal" value="${ports_data[1].internal}"/>
+                                </div>
+                                <div class="col-lg-2">
+                                  <select class="form-select" name="port_1_protocol">
+                                    <option value="${ports_data[1].protocol}" selected hidden>${ports_data[1].protocol}</option>
+                                    <option value="tcp">tcp</option>
+                                    <option value="udp">udp</option>
+                                  </select>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" name="port_2_check" type="checkbox" ${ports_data[2].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_2_external" value="${ports_data[2].external}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_2_internal" value="${ports_data[2].internal}"/>
+                                </div>
+                                <div class="col-lg-2">
+                                  <select class="form-select" name="port_2_protocol">
+                                    <option value="${ports_data[2].protocol}" selected hidden>${ports_data[2].protocol}</option>
+                                    <option value="tcp">tcp</option>
+                                    <option value="udp">udp</option>
+                                  </select>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" name="port_3_check" type="checkbox" ${ports_data[3].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_3_external" value="${ports_data[3].external}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_3_internal" value="${ports_data[3].internal}"/>
+                                </div>
+                                <div class="col-lg-2">
+                                  <select class="form-select" name="port_3_protocol">
+                                    <option value="${ports_data[3].protocol}" selected hidden>${ports_data[3].protocol}</option>
+                                    <option value="tcp">tcp</option>
+                                    <option value="udp">udp</option>
+                                  </select>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" name="port_4_check" type="checkbox" ${ports_data[4].check}>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_4_external" value="${ports_data[4].external}"/>
+                                </div>
+                                <div class="col">
+                                  <input type="text" class="form-control" name="port_4_internal" value="${ports_data[4].internal}"/>
+                                </div>
+                                <div class="col-lg-2">
+                                  <select class="form-select" name="port_4_protocol">
+                                    <option value="${ports_data[4].protocol}" selected hidden>${ports_data[4].protocol}</option>
+                                    <option value="tcp">tcp</option>
+                                    <option value="udp">udp</option>
+                                  </select>
+                                </div>
+                              </div>
+            
+                              <div class="row mb-1 align-items-end">
+                                <div class="col-auto">
+                                  <input class="form-check-input" name="" type="checkbox" >
+                                </div>
+                                <div class="col">
+                                  <label class="form-label">External Port</label>
+                                  <input type="text" class="form-control" name="" value=""/>
+                                </div>
+                                <div class="col">
+                                  <label class="form-label">Internal Port</label>
+                                  <input type="text" class="form-control" name="" value=""/>
+                                </div>
+                                <div class="col-lg-2">
+                                  <label class="form-label">Protocol</label>
+                                  <select class="form-select" name="">
+                                    <option value="" selected hidden></option>
+                                    <option value="tcp">tcp</option>
+                                    <option value="udp">udp</option>
+                                  </select>
+                                </div>
+                              </div>
+            
+            
+                            </div>
+                          </div>
+                        </div>
+
+
+
+                      </div>
+            
+            
+                      
+                      </form>
+
+
+      </div>
+      <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>`;
+
+  return modal;
+}

controllers/supporters.js

@@ -0,0 +1,21 @@
+import { User } from "../database/models.js";
+
+export const Supporters = async (req, res) => {
+    
+    if (!req.session.UUID) return res.redirect("/login");
+
+    let user = await User.findOne({ where: { UUID: req.session.UUID }});
+    
+
+    res.render("supporters", {
+        first_name: user.name,
+        last_name: user.name,
+        name: user.name,
+        id: user.id,
+        email: user.email,
+        role: user.role,
+        avatar: user.avatar,
+    });
+
+
+}

database/models.js

@@ -47,25 +47,60 @@ export const User = sequelize.define('User', {
 });
 
 export const Container = sequelize.define('Container', {
-  id: {
-    type: DataTypes.INTEGER,
-    autoIncrement: true,
-    primaryKey: true
-  },
-  name: {
-    type: DataTypes.STRING,
-    allowNull: false
-  },
-  visibility: {
-    type: DataTypes.STRING
-  },
-  size: {
-    type: DataTypes.STRING
-  },
-  group: {
-    type: DataTypes.STRING
-  }
-});
+    id: {
+        type: DataTypes.INTEGER,
+        autoIncrement: true,
+        primaryKey: true
+    },
+    name: {
+        type: DataTypes.STRING,
+        allowNull: false
+    },
+    visibility: {
+        type: DataTypes.STRING
+    },
+    service: {
+        type: DataTypes.STRING
+    },
+    state: {
+        type: DataTypes.STRING
+    },
+    image: {
+        type: DataTypes.STRING
+    },
+    external_port: {
+        type: DataTypes.STRING
+    },
+    internal_port: {
+        type: DataTypes.STRING
+    },
+    ports: {
+        type: DataTypes.STRING
+    },
+    volumes: {
+        type: DataTypes.STRING
+    },
+    environment_variables: {
+        type: DataTypes.STRING
+    },
+    labels: {
+        type: DataTypes.STRING
+    },
+    IPv4: {
+        type: DataTypes.STRING
+    },
+    style: {
+        type: DataTypes.STRING
+    },
+    cpu: {
+        // store the last 15 values from dockerContainerStats
+        type: DataTypes.STRING
+    },
+    ram: {
+        // store the last 15 values from dockerContainerStats
+        type: DataTypes.STRING
+    },
+  });
 
 export const Permission = sequelize.define('Permission', {
   id: {

router/index.js

@@ -10,6 +10,7 @@ import { Users } from "../controllers/users.js";
 import { Images } from "../controllers/images.js";
 import { Account } from "../controllers/account.js";
 import { Settings } from "../controllers/settings.js";
+import { Supporters } from "../controllers/supporters.js";
 import { Networks } from "../controllers/networks.js";
 import { Volumes } from "../controllers/volumes.js";
 import { Syslogs } from "../controllers/syslogs.js";
@@ -56,6 +57,7 @@ router.get("/syslogs", auth, Syslogs);
 
 router.get("/account", Account);
 router.get("/settings", auth, Settings);
+router.get("/supporters", Supporters);
 
 // Functions
 router.post("/install", auth, Install);

server.js

@@ -8,6 +8,7 @@ import { router } from './router/index.js';
 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';
 export var docker = new Docker();
 
 const app = express();
@@ -50,10 +51,9 @@ app.listen(port, async () => {
             catch { console.log('DB Connection: ❌'); }
         try { await sequelize.sync().then( // check out that formatting
             () => { console.log('Synced Models: ✔️') }); }
-            catch { console.log('Synced Models: ❌'); }
-    }
-    await init().then(() => { 
-        console.log(`Listening on http://localhost:${port} ✔️`);
+            catch { console.log('Synced Models: ❌'); } }
+        await init().then(() => { 
+            console.log(`Listening on http://localhost:${port} ✔️`);
     });
 });
 
@@ -148,7 +148,11 @@ setInterval(async () => {
     }
 }, 1000);
 
-// HTMX triggers
+
+
+/////////////////// HTMX routes //////////////////////////
+
+
 router.get('/stats', async (req, res) => {
     switch (req.header('HX-Trigger')) {
         case 'cpu': 
@@ -197,89 +201,54 @@ router.get('/containers', async (req, res) => {
     res.send(cardList);
 });
 
-// Server-side event trigger
-router.get('/sse_event', (req, res) => {
-    res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', });
+router.get('/action', async (req, res) => {
+    let name = req.header('hx-trigger-name');
+    let id = req.header('hx-trigger');
+    let value = req.query[name];
 
-    let eventCheck = setInterval(async () => {
-        if (SSE == true) {
-            SSE = false;
-            res.write(`event: docker\n`);
-            res.write(`data: there was a docker event!\n\n`);
-            console.log(`server-side event sent`)
-        }
-    }, 1000);
+    var containerName = docker.getContainer(name);
 
-    req.on('close', () => {
-        clearInterval(eventCheck);
-    });
+    if ((id == 'start') && (value == 'stopped')) {
+        containerName.start();
+    } else if ((id == 'start') && (value == 'paused')) {
+        containerName.unpause();
+    } else if ((id == 'stop') && (value != 'stopped')) {
+        containerName.stop();
+    } else if ((id == 'pause') && (value == 'running')) {
+        containerName.pause();
+    } else if ((id == 'pause') && (value == 'paused')) {
+        containerName.unpause();
+    } else if (id == 'restart') {
+        containerName.restart();
+    }
 });
 
-// HTMX buttons
-router.get('/click', async (req, res) => {
-    
+router.get('/hide', async (req, res) => {
     let name = req.header('hx-trigger-name');
     let id = req.header('hx-trigger');
-    let value = req.query[name];
 
-    // start, stop, pause, restart container
-    if (id == 'start' || id == 'stop' || id == 'pause' || id == 'restart'){
-        var containerName = docker.getContainer(name);
-
-        if ((id == 'start') && (value == 'stopped')) {
-            containerName.start();
-        } else if ((id == 'start') && (value == 'paused')) {
-            containerName.unpause();
-        } else if ((id == 'stop') && (value != 'stopped')) {
-            containerName.stop();
-        } else if ((id == 'pause') && (value == 'running')) {
-            containerName.pause();
-        } else if ((id == 'pause') && (value == 'paused')) {
-            containerName.unpause();
-        } else if (id == 'restart') {
-            containerName.restart();
-        }
-    }
-
-    // hide container
     if (id == 'hide') {
         let exists = await Container.findOne({ where: {name: name}});
         if (!exists) {
             const newContainer = await Container.create({ name: name, visibility: false, });
             SSE = true;
+            return;
         } else {
             exists.update({ visibility: false });
             SSE = true;
+            return;
         }
     }
 
-    // reset hidden
     if (id == 'reset') {
         Container.update({ visibility: true }, { where: {} });
         SSE = true;
     }
 });
 
-// container charts
-router.get('/chart', async (req, res) => {
-    let name = req.header('hx-trigger-name');
 
-    let chart = `
-    <script>
-        ${name}chart.updateSeries([{
-            data: [50,100,50,100,50,100,50,100,50,100]
-        }, {
-            data: [0,25,0,25,0,25,0,25,0,25]
-        }])
-    </script>`
 
-    res.send(chart);
-      
-});
-
-// container logs
 router.get('/logs', async (req, res) => {
-
     let name = req.header('hx-trigger-name');
     
     function containerLogs (data) {
@@ -309,3 +278,102 @@ router.get('/logs', async (req, res) => {
     });
 });
 
+
+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 () => {
+        if (SSE == true) {
+            SSE = false;
+            res.write(`event: docker\n`);
+            res.write(`data: there was a docker event!\n\n`);
+        }
+    }, 1000);
+    req.on('close', () => {
+        clearInterval(eventCheck);
+    });
+});
+
+
+
+router.get('/modal', async (req, res) => {
+
+    let name = req.header('hx-trigger-name');
+
+    let containerId = docker.getContainer(name);
+    let containerInfo = await containerId.inspect();
+    let ports_list = [];
+    try {
+    for (const [key, value] of Object.entries(containerInfo.HostConfig.PortBindings)) {
+        let ports = {
+            check: 'checked',
+            external: value[0].HostPort,
+            internal: key.split('/')[0],
+            protocol: key.split('/')[1]
+        }
+        ports_list.push(ports);
+    }
+    } catch {}
+
+    let external_port = ports_list[0]?.external || 0;
+    let internal_port = ports_list[0]?.internal || 0;
+
+    let container_info = {
+        name: containerInfo.Name.slice(1),
+        state: containerInfo.State.Status,
+        image: containerInfo.Config.Image,
+        external_port: external_port,
+        internal_port: internal_port,
+        ports: ports_list,
+        link: 'localhost',
+    }
+
+    console.log(container_info);
+    
+    let form = modal(container_info);
+    res.send(form);
+});
+
+
+
+let dockerStats = {};
+setInterval(async () => {
+
+    const data = await docker.listContainers({ all: true });
+    for (const container of data) {
+        let name = container.Names[0].slice(1);
+        if (!hidden.includes(name)) {
+            const stats = await dockerContainerStats(container.Id);
+            let cpu = Math.round(stats[0].cpuPercent);
+            let ram = Math.round(stats[0].memPercent);
+
+            if (!dockerStats[name]) {
+                dockerStats[name] = Array(15).fill({ cpu: 0, ram: 0 });
+            }
+
+            dockerStats[name].push({ cpu: cpu, ram: ram });
+
+            if (dockerStats[name].length > 15) {
+                dockerStats[name].shift();
+            }
+        }
+    }
+    // console.log(dockerStats);
+
+}, 1000);
+
+
+router.get('/chart', async (req, res) => {
+    let name = req.header('hx-trigger-name');
+
+    // console.log(dockerStats[name]);
+
+    let chart = `
+    <script>
+        ${name}chart.appendData([{
+            data: [100]
+        }, {
+            data: [25]
+        }])
+    </script>`
+    res.send(chart);
+});

views/account.html

@@ -20,125 +20,112 @@
 	</head>
 	<body >
 		<div class="page">
-		<!-- Navbar -->
-		<%- include('navbar.html') %>
-		<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>
-				</div>
-			</div>
-			<!-- Page body -->
-			<div class="page-body">
-			<div class="container-xl">
-				<div class="card">
-				<div class="row g-0">
-					<div class="col-3 d-none d-md-block border-end">
-					<div class="card-body">
-						<h4 class="subheader">Business settings</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="#" class="list-group-item list-group-item-action d-flex align-items-center">My Notifications</a>
-						<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">Connected Apps</a> -->
-						<a href="/settings" class="list-group-item list-group-item-action d-flex align-items-center">Settings</a>
-						<!-- <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">Billing & Invoices</a> -->
+			<!-- Navbar -->
+			<%- include('navbar.html') %>
+			<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">
+							Settings
+							</h2>
 						</div>
-						<h4 class="subheader mt-4">Experience</h4>
-						<div class="list-group list-group-transparent">
-						<a href="#" class="list-group-item list-group-item-action">Credits</a>
 						</div>
 					</div>
-					</div>
-					<div class="col d-flex flex-column">
-					<div class="card-body">
-						<h2 class="mb-4">My Account</h2>
-						<h3 class="card-title">Profile Details</h3>
-						<div class="row align-items-center">
-							<div class="col-auto"><span class="avatar avatar-xl"><%- avatar %></span>
-							</div>
-							<div class="col-auto"><a href="#" class="btn">
-								Change avatar
-								</a>
-							</div>
-							<div class="col-auto"><a href="#" class="btn btn-ghost-danger">
-								Delete avatar
-								</a>
-							</div>
-						</div>
-						<h3 class="card-title mt-4">Profile</h3>
-						<div class="row g-3">
-							<div class="col-md">
-								<div class="form-label">Full Name</div>
-								<input type="text" class="form-control" value="<%= name %>" readonly="<%= name %>">
-							</div>
-							<div class="col-md">
-								<div class="form-label">First Name</div>
-								<input type="text" class="form-control" value="<%= first_name %>" readonly="<%= first_name %>">
-							</div>
-							<div class="col-md">
-								<div class="form-label">Last Name</div>
-								<input type="text" class="form-control" value="<%= last_name %>" readonly="<%= last_name %>">
-							</div>
-						</div>
-						<h3 class="card-title mt-4">Email</h3>
-						<p class="card-subtitle">This contact will be shown to others publicly, so choose it carefully.</p>
-						<div>
-							<div class="row g-2">
-								<div class="col-auto">
-									<input type="text" class="form-control w-auto" value="<%= email %>" readonly="<%= email %>">
+				</div>
+				<!-- Page body -->
+				<div class="page-body">
+					<div class="container-xl">
+						<div class="card">
+							<div class="row g-0">
+								
+								<%- include('sidebar.html') %>
+								
+								<div class="col d-flex flex-column">
+								<div class="card-body">
+									<h2 class="mb-4">My Account</h2>
+									<h3 class="card-title">Profile Details</h3>
+									<div class="row align-items-center">
+										<div class="col-auto"><span class="avatar avatar-xl"><%- avatar %></span>
+										</div>
+										<div class="col-auto"><a href="#" class="btn">
+											Change avatar
+											</a>
+										</div>
+										<div class="col-auto"><a href="#" class="btn btn-ghost-danger">
+											Delete avatar
+											</a>
+										</div>
+									</div>
+									<h3 class="card-title mt-4">Profile</h3>
+									<div class="row g-3">
+										<div class="col-md">
+											<div class="form-label">Full Name</div>
+											<input type="text" class="form-control" value="<%= name %>" readonly="<%= name %>">
+										</div>
+										<div class="col-md">
+											<div class="form-label">First Name</div>
+											<input type="text" class="form-control" value="<%= first_name %>" readonly="<%= first_name %>">
+										</div>
+										<div class="col-md">
+											<div class="form-label">Last Name</div>
+											<input type="text" class="form-control" value="<%= last_name %>" readonly="<%= last_name %>">
+										</div>
+									</div>
+									<h3 class="card-title mt-4">Email</h3>
+									<p class="card-subtitle">This contact will be shown to others publicly, so choose it carefully.</p>
+									<div>
+										<div class="row g-2">
+											<div class="col-auto">
+												<input type="text" class="form-control w-auto" value="<%= email %>" readonly="<%= email %>">
+											</div>
+											<div class="col-auto">
+												<a href="#" class="btn">Change</a>
+											</div>
+										</div>
+									</div>
+									<h3 class="card-title mt-4">Password</h3>
+									<p class="card-subtitle">You can set a permanent password if you don't want to use temporary login codes.</p>
+									<div>
+										<a href="#" class="btn">
+											Set new password
+										</a>
+									</div>
+									<h3 class="card-title mt-4">Public profile</h3>
+									<p class="card-subtitle">Making your profile public means that anyone on the Dashkit network will be able to find
+									you.</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">You're currently visible</span>
+											<span class="form-check-label form-check-label-off">You're
+											currently invisible</span>
+										</label>
+									</div>
+								</div>
+								<div class="card-footer bg-transparent mt-auto">
+									<div class="btn-list justify-content-end">
+									<a href="#" class="btn">
+										Cancel
+									</a>
+									<a href="#" class="btn btn-primary">
+										Submit
+									</a>
+									</div>
 								</div>
-								<div class="col-auto">
-									<a href="#" class="btn">Change</a>
 								</div>
 							</div>
 						</div>
-						<h3 class="card-title mt-4">Password</h3>
-						<p class="card-subtitle">You can set a permanent password if you don't want to use temporary login codes.</p>
-						<div>
-							<a href="#" class="btn">
-								Set new password
-							</a>
-						</div>
-						<h3 class="card-title mt-4">Public profile</h3>
-						<p class="card-subtitle">Making your profile public means that anyone on the Dashkit network will be able to find
-						you.</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">You're currently visible</span>
-								<span class="form-check-label form-check-label-off">You're
-								currently invisible</span>
-							</label>
-						</div>
 					</div>
-					<div class="card-footer bg-transparent mt-auto">
-						<div class="btn-list justify-content-end">
-						<a href="#" class="btn">
-							Cancel
-						</a>
-						<a href="#" class="btn btn-primary">
-							Submit
-						</a>
-						</div>
-					</div>
-					</div>
-				</div>
 				</div>
+				<%- include('footer.html') %>
 			</div>
-			</div>
-			<%- include('footer.html') %>
-		</div>
 		</div>
 		<!-- Libs JS -->
 		<!-- Tabler Core -->
 		<script src="/js/tabler.min.js" defer></script>
 		<script src="/js/demo.min.js" defer></script>
 	</body>
-	</html>
+</html>

views/dashboard.html

@@ -143,833 +143,13 @@
               </div>
             </div>
 
-            <div class="modal modal-blur fade" id="details_modal" tabindex="-1" role="dialog" aria-hidden="true">
-                        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
-                          <div class="modal-content">
-                            <div class="modal-header">
-                              <h5 class="modal-title">${name}</h5>
-                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                            </div>
-                    
-                            
-                            <div class="modal-body">
-                              
-                            <pre class="text-secondary">note</pre>
-                            
-                              <form action="" id="details_modal" method="POST">
-                              
-                              <div class="row mb-3 align-items-end">
-                                
-                                <div class="col-lg-6">
-                                  <label class="form-label">Container Name: </label>
-                                  <input type="text" class="form-control" name="service_name" value="${app_name}" hidden/>
-                                  <input type="text" class="form-control" name="name" value="${app_name}"/>
-                                </div>
-                                <div class="col-lg-3">
-                                  <label class="form-label">Image: </label>
-                                  <input type="text" class="form-control" name="image" value="${image}"/>
-                                </div>
-                                <div class="col-lg-3">
-                                  <label class="form-label">Restart Policy: </label>
-                                  <select class="form-select" name="restart_policy" value="${restart_policy}">
-                                    <option value="1">unless-stopped</option>
-                                    <option value="2">on-failure</option>
-                                    <option value="3">never</option>
-                                    <option value="4">always</option>
-                                  </select>
-                                </div>
-                              </div>
-                    
-                              <label class="form-label">Network Mode</label>
-                                <div class="form-selectgroup-boxes row mb-3">
-                                  <div class="col">
-                                    <label class="form-selectgroup-item">
-                                      <input type="radio" name="report-type" value="1" class="form-selectgroup-input">
-                                      <span class="form-selectgroup-label d-flex align-items-center p-3">
-                                        <span class="me-3">
-                                          <span class="form-selectgroup-check"></span>
-                                        </span>
-                                        <span class="form-selectgroup-label-content">
-                                          <span class="form-selectgroup-title strong mb-1">Host Network</span>
-                                          <span class="d-block text-secondary">Same as host. No isolation. ex.127.0.0.1</span>
-                                        </span>
-                                      </span>
-                                    </label>
-                                  </div>
-                                  <div class="col">
-                                    <label class="form-selectgroup-item">
-                                      <input type="radio" name="report-type" class="form-selectgroup-input">
-                                      <span class="form-selectgroup-label d-flex align-items-center p-3">
-                                        <span class="me-3">
-                                          <span class="form-selectgroup-check"></span>
-                                        </span>
-                                        <span class="form-selectgroup-label-content">
-                                          <span class="form-selectgroup-title strong mb-1">Bridge Network</span>
-                                          <span class="d-block text-secondary">Containers can communicate using names.</span>
-                                        </span>
-                                      </span>
-                                    </label>
-                                  </div>
-                                  <div class="col">
-                                  <label class="form-selectgroup-item">
-                                    <input type="radio" name="report-type" class="form-selectgroup-input">
-                                    <span class="form-selectgroup-label d-flex align-items-center p-3">
-                                      <span class="me-3">
-                                        <span class="form-selectgroup-check"></span>
-                                      </span>
-                                      <span class="form-selectgroup-label-content">
-                                        <span class="form-selectgroup-title strong mb-1">Docker Network</span>
-                                        <span class="d-block text-secondary">Isolated on the docker network. ex.172.0.34.2</span>
-                                      </span>
-                                    </span>
-                                  </label>
-                                </div>
-                              </div>
-        
-        
-        
-        
-                    
-                              <div class="accordion" id="details_accordion">
-                                <div class="accordion-item">
-                                  <h2 class="accordion-header" id="heading-1">
-                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false">
-                                      Ports
-                                    </button>
-                                  </h2>
-                                  <div id="collapse-1" class="accordion-collapse collapse" data-bs-parent="#details_accordion">
-                                    <div class="accordion-body pt-0">
-                    
-        
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" name="port_0_check" type="checkbox" ${ports_data[0].check}>
-                                        </div>
-                                        <div class="col">
-                                          <label class="form-label">External Port</label>
-                                          <input type="text" class="form-control" name="port_0_external" value="${ports_data[0].external}"/>
-                                        </div>
-                                        <div class="col">
-                                          <label class="form-label">Internal Port</label>
-                                          <input type="text" class="form-control" name="port_0_internal" value="${ports_data[0].internal}"/>
-                                        </div>
-                                        <div class="col-lg-2">
-                                          <label class="form-label">Protocol</label>
-                                          <select class="form-select" name="port_0_protocol">
-                                            <option value="${ports_data[0].protocol}" selected hidden>${ports_data[0].protocol}</option>
-                                            <option value="tcp">tcp</option>
-                                            <option value="udp">udp</option>
-                                          </select>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" name="port_1_check" type="checkbox" ${ports_data[1].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_1_external" value="${ports_data[1].external}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_1_internal" value="${ports_data[1].internal}"/>
-                                        </div>
-                                        <div class="col-lg-2">
-                                          <select class="form-select" name="port_1_protocol">
-                                            <option value="${ports_data[1].protocol}" selected hidden>${ports_data[1].protocol}</option>
-                                            <option value="tcp">tcp</option>
-                                            <option value="udp">udp</option>
-                                          </select>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" name="port_2_check" type="checkbox" ${ports_data[2].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_2_external" value="${ports_data[2].external}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_2_internal" value="${ports_data[2].internal}"/>
-                                        </div>
-                                        <div class="col-lg-2">
-                                          <select class="form-select" name="port_2_protocol">
-                                            <option value="${ports_data[2].protocol}" selected hidden>${ports_data[2].protocol}</option>
-                                            <option value="tcp">tcp</option>
-                                            <option value="udp">udp</option>
-                                          </select>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" name="port_3_check" type="checkbox" ${ports_data[3].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_3_external" value="${ports_data[3].external}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_3_internal" value="${ports_data[3].internal}"/>
-                                        </div>
-                                        <div class="col-lg-2">
-                                          <select class="form-select" name="port_3_protocol">
-                                            <option value="${ports_data[3].protocol}" selected hidden>${ports_data[3].protocol}</option>
-                                            <option value="tcp">tcp</option>
-                                            <option value="udp">udp</option>
-                                          </select>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" name="port_4_check" type="checkbox" ${ports_data[4].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_4_external" value="${ports_data[4].external}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_4_internal" value="${ports_data[4].internal}"/>
-                                        </div>
-                                        <div class="col-lg-2">
-                                          <select class="form-select" name="port_4_protocol">
-                                            <option value="${ports_data[4].protocol}" selected hidden>${ports_data[4].protocol}</option>
-                                            <option value="tcp">tcp</option>
-                                            <option value="udp">udp</option>
-                                          </select>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" name="port_5_check" type="checkbox" ${ports_data[5].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_5_external" value="${ports_data[5].external}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_5_internal" value="${ports_data[5].internal}"/>
-                                        </div>
-                                        <div class="col-lg-2">
-                                          <select class="form-select" name="port_5_protocol">
-                                            <option value="${ports_data[5].protocol}" selected hidden>${ports_data[5].protocol}</option>
-                                            <option value="tcp">tcp</option>
-                                            <option value="udp">udp</option>
-                                          </select>
-                                        </div>
-                                      </div>
-                    
-                    
-                                    </div>
-                                  </div>
-                                </div>
-                                <div class="accordion-item">
-                                  <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="#details_accordion">
-                                    <div class="accordion-body pt-0">
-                    
-                    
-                                    <div class="row mb-1 align-items-end">
-                                    <div class="col-auto">
-                                      <input class="form-check-input" name="volume_0_check" type="checkbox" ${volumes_data[0].check}>
-                                    </div>
-                                    <div class="col">
-                                      <input type="text" class="form-control" name="volume_0_bind" value="${volumes_data[0].bind}"/>
-                                    </div>
-                                    <div class="col">
-                                      <input type="text" class="form-control" name="volume_0_container" value="${volumes_data[0].container}"/>
-                                    </div>
-                                    <div class="col-lg-2">
-                                      <select class="form-select" name="volume_0_readwrite">
-                                        <option value="${volumes_data[0].readwrite}" selected hidden>${volumes_data[0].readwrite}</option>
-                                        <option value="rw">rw</option>
-                                        <option value="ro">ro</option>
-                                      </select>
-                                    </div>
-                                  </div>
-                    
-                                  <div class="row mb-1 align-items-end">
-                                    <div class="col-auto">
-                                      <input class="form-check-input" name="volume_1_check" type="checkbox" ${volumes_data[1].check}>
-                                    </div>
-                                    <div class="col">
-                                      <input type="text" class="form-control" name="volume_1_bind" value="${volumes_data[1].bind}"/>
-                                    </div>
-                                    <div class="col">
-                                      <input type="text" class="form-control" name="volume_1_container" value="${volumes_data[1].container}"/>
-                                    </div>
-                                    <div class="col-lg-2">
-                                      <select class="form-select" name="volume_1_readwrite">
-                                        <option value="${volumes_data[1].readwrite}" selected hidden>${volumes_data[1].readwrite}</option>
-                                        <option value="rw">rw</option>
-                                        <option value="ro">ro</option>
-                                      </select>
-                                    </div>
-                                  </div>
-                    
-                                  <div class="row mb-1 align-items-end">
-                                    <div class="col-auto">
-                                      <input class="form-check-input" name="volume_2_check" type="checkbox" ${volumes_data[2].check}>
-                                    </div>
-                                    <div class="col">
-                                      <input type="text" class="form-control" name="volume_2_bind" value="${volumes_data[2].bind}"/>
-                                    </div>
-                                    <div class="col">
-                                      <input type="text" class="form-control" name="volume_2_container" value="${volumes_data[2].container}"/>
-                                    </div>
-                                    <div class="col-lg-2">
-                                      <select class="form-select" name="volume_2_readwrite">
-                                        <option value="${volumes_data[2].readwrite}" selected hidden>${volumes_data[2].readwrite}</option>
-                                        <option value="rw">rw</option>
-                                        <option value="ro">ro</option>
-                                      </select>
-                                    </div>
-                                  </div>
-                    
-                                  <div class="row mb-1 align-items-end">
-                                    <div class="col-auto">
-                                      <input class="form-check-input" name="volume_3_check" type="checkbox" ${volumes_data[3].check}>
-                                    </div>
-                                    <div class="col">
-                                      <input type="text" class="form-control" name="volume_3_bind" value="${volumes_data[3].bind}"/>
-                                    </div>
-                                    <div class="col">
-                                      <input type="text" class="form-control" name="volume_3_container" value="${volumes_data[3].container}"/>
-                                    </div>
-                                    <div class="col-lg-2">
-                                      <select class="form-select" name="volume_3_readwrite">
-                                        <option value="${volumes_data[3].readwrite}" selected hidden>${volumes_data[3].readwrite}</option>
-                                        <option value="rw">rw</option>
-                                        <option value="ro">ro</option>
-                                      </select>
-                                    </div>
-                                  </div>
-                    
-                                  <div class="row mb-1 align-items-end">
-                                    <div class="col-auto">
-                                      <input class="form-check-input" name="volume_4_check" type="checkbox" ${volumes_data[4].check}>
-                                    </div>
-                                    <div class="col">
-                                      <input type="text" class="form-control" name="volume_4_bind" value="${volumes_data[4].bind}"/>
-                                    </div>
-                                    <div class="col">
-                                      <input type="text" class="form-control" name="volume_4_container" value="${volumes_data[4].container}"/>
-                                    </div>
-                                    <div class="col-lg-2">
-                                      <select class="form-select" name="volume_4_readwrite">
-                                        <option value="${volumes_data[4].readwrite}" selected hidden>${volumes_data[4].readwrite}</option>
-                                        <option value="rw">rw</option>
-                                        <option value="ro">ro</option>
-                                      </select>
-                                    </div>
-                                  </div>
-                    
-                                  <div class="row mb-1 align-items-end">
-                                  <div class="col-auto">
-                                    <input class="form-check-input" name="volume_5_check" type="checkbox" ${volumes_data[5].check}>
-                                  </div>
-                                  <div class="col">
-                                    <input type="text" class="form-control" name="volume_5_bind" value="${volumes_data[5].bind}"/>
-                                  </div>
-                                  <div class="col">
-                                    <input type="text" class="form-control" name="volume_5_container" value="${volumes_data[5].container}"/>
-                                  </div>
-                                  <div class="col-lg-2">
-                                    <select class="form-select" name="volume_5_readwrite">
-                                      <option value="${volumes_data[5].readwrite}" selected hidden>${volumes_data[5].readwrite}</option>
-                                      <option value="rw">rw</option>
-                                      <option value="ro">ro</option>
-                                    </select>
-                                  </div>
-                                </div>
-                    
-                    
-                                    </div>
-                                  </div>
-                                </div>
-                                <div class="accordion-item">
-                                  <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="#details_accordion">
-                                    <div class="accordion-body pt-0">
-                    
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" type="checkbox" name="env_0_check" ${env_data[0].check}>
-                                        </div>
-                                        <div class="col">
-                                          <label class="form-label">Variable</label>
-                                          <input type="text" class="form-control" name="env_0_name" value="${env_data[0].name}"/>
-                                        </div>
-                                        <div class="col">
-                                          <label class="form-label">Value</label>
-                                          <input type="text" class="form-control" name="env_0_default" value="${env_data[0].default}"/>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" type="checkbox" name="env_1_check" ${env_data[1].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_1_name" value="${env_data[1].name}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_1_default" value="${env_data[1].default}"/>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" type="checkbox" name="env_2_check" ${env_data[2].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_2_name" value="${env_data[2].name}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_2_default" value="${env_data[2].default}"/>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" type="checkbox" name="env_3_check" ${env_data[3].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_3_name" value="${env_data[3].name}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_3_default" value="${env_data[3].default}"/>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" type="checkbox" name="env_4_check" ${env_data[4].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_4_name" value="${env_data[4].name}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_4_default" value="${env_data[4].default}"/>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" type="checkbox" name="env_5_check" ${env_data[5].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_5_name" value="${env_data[5].name}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_5_default" value="${env_data[5].default}"/>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" type="checkbox" name="env_6_check" ${env_data[6].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_6_name" value="${env_data[6].name}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_6_default" value="${env_data[6].default}"/>
-                                        </div>
-                                      </div>
-                    
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" type="checkbox" name="env_7_check" ${env_data[7].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_7_name" value="${env_data[7].name}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_7_default" value="${env_data[7].default}"/>
-                                        </div>
-                                      </div>
-                    
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" type="checkbox" name="env_8_check" ${env_data[8].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_8_name" value="${env_data[8].name}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_8_default" value="${env_data[8].default}"/>
-                                        </div>
-                                      </div>
-                    
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" type="checkbox" name="env_9_check" ${env_data[9].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_9_name" value="${env_data[9].name}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_9_default" value="${env_data[9].default}"/>
-                                        </div>
-                                      </div>
-                    
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" type="checkbox" name="env_10_check" ${env_data[10].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_10_name" value="${env_data[10].name}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_10_default" value="${env_data[10].default}"/>
-                                        </div>
-                                      </div>
-                    
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" type="checkbox" name="env_11_check" ${env_data[11].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_11_name" value="${env_data[11].name}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="env_11_default" value="${env_data[11].default}"/>
-                                        </div>
-                                      </div>
-                    
-                    
-                    
-                    
-                                    </div>
-                                  </div>
-                                </div>
-                                <div class="accordion-item">
-                                  <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="#details_accordion">
-                                    <div class="accordion-body pt-0">
-                    
-                    
-                                    <div class="row mb-1 align-items-end">
-                                      <div class="col-auto">
-                                        <input class="form-check-input" type="checkbox" name="label_0_check" ${label_data[0].check}>
-                                      </div>
-                                      <div class="col">
-                                        <label class="form-label">Variable</label>
-                                        <input type="text" class="form-control" name="label_0_name" value="${label_data[0].name}"/>
-                                      </div>
-                                      <div class="col">
-                                        <label class="form-label">Value</label>
-                                        <input type="text" class="form-control" name="label_0_value" value="${label_data[0].value}"/>
-                                      </div>
-                                    </div>
-                    
-                                    <div class="row mb-1 align-items-end">
-                                      <div class="col-auto">
-                                        <input class="form-check-input" type="checkbox" name="label_1_check" ${label_data[1].check}>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_1_name" value="${label_data[1].name}"/>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_1_value" value="${label_data[1].value}"/>
-                                      </div>
-                                    </div>
-                    
-                                      
-                                    <div class="row mb-1 align-items-end">
-                                      <div class="col-auto">
-                                        <input class="form-check-input" type="checkbox" name="label_2_check" ${label_data[2].check}>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_2_name" value="${label_data[2].name}"/>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_2_value" value="${label_data[2].value}"/>
-                                      </div>
-                                    </div>
-                    
-                                    <div class="row mb-1 align-items-end">
-                                      <div class="col-auto">
-                                        <input class="form-check-input" type="checkbox" name="label_3_check" ${label_data[3].check}>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_3_name" value="${label_data[3].name}"/>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_3_value" value="${label_data[3].value}"/>
-                                      </div>
-                                    </div>
-                    
-                                    <div class="row mb-1 align-items-end">
-                                      <div class="col-auto">
-                                        <input class="form-check-input" type="checkbox" name="label_4_check" ${label_data[4].check}>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_4_name" value="${label_data[4].name}"/>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_4_value" value="${label_data[4].value}"/>
-                                      </div>
-                                    </div>
-        
-                                    <div class="row mb-1 align-items-end">
-                                      <div class="col-auto">
-                                        <input class="form-check-input" type="checkbox" name="label_5_check" ${label_data[5].check}>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_5_name" value="${label_data[5].name}"/>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_5_value" value="${label_data[5].value}"/>
-                                      </div>
-                                    </div>
-        
-                                    <div class="row mb-1 align-items-end">
-                                      <div class="col-auto">
-                                        <input class="form-check-input" type="checkbox" name="label_6_check" ${label_data[6].check}>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_6_name" value="${label_data[6].name}"/>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_6_value" value="${label_data[6].value}"/>
-                                      </div>
-                                    </div>
-        
-                                    <div class="row mb-1 align-items-end">
-                                      <div class="col-auto">
-                                        <input class="form-check-input" type="checkbox" name="label_7_check" ${label_data[7].check}>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_7_name" value="${label_data[7].name}"/>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_7_value" value="${label_data[7].value}"/>
-                                      </div>
-                                    </div>
-        
-                                    <div class="row mb-1 align-items-end">
-                                      <div class="col-auto">
-                                        <input class="form-check-input" type="checkbox" name="label_8_check" ${label_data[8].check}>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_8_name" value="${label_data[8].name}"/>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_8_value" value="${label_data[8].value}"/>
-                                      </div>
-                                    </div>
-        
-                                    <div class="row mb-1 align-items-end">
-                                      <div class="col-auto">
-                                        <input class="form-check-input" type="checkbox" name="label_9_check" ${label_data[9].check}>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_9_name" value="${label_data[9].name}"/>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_9_value" value="${label_data[9].value}"/>
-                                      </div>
-                                    </div>
-        
-                                    <div class="row mb-1 align-items-end">
-                                      <div class="col-auto">
-                                        <input class="form-check-input" type="checkbox" name="label_10_check" ${label_data[10].check}>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_10_name" value="${label_data[10].name}"/>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_10_value" value="${label_data[10].value}"/>
-                                      </div>
-                                    </div>
-        
-                                    <div class="row mb-1 align-items-end">
-                                      <div class="col-auto">
-                                        <input class="form-check-input" type="checkbox" name="label_11_check" ${label_data[11].check}>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_11_name" value="${label_data[11].name}"/>
-                                      </div>
-                                      <div class="col">
-                                        <input type="text" class="form-control" name="label_11_value" value="${label_data[11].value}"/>
-                                      </div>
-                                    </div>
-                    
-                    
-                                    </div>
-                                  </div>
-                                </div>
-        
-        
-                                <div class="accordion-item">
-                                  <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="#details_accordion">
-                                    <div class="accordion-body pt-0">
-                    
-        
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" name="port_0_check" type="checkbox" ${ports_data[0].check}>
-                                        </div>
-                                        <div class="col">
-                                          <label class="form-label">External Port</label>
-                                          <input type="text" class="form-control" name="port_0_external" value="${ports_data[0].external}"/>
-                                        </div>
-                                        <div class="col">
-                                          <label class="form-label">Internal Port</label>
-                                          <input type="text" class="form-control" name="port_0_internal" value="${ports_data[0].internal}"/>
-                                        </div>
-                                        <div class="col-lg-2">
-                                          <label class="form-label">Protocol</label>
-                                          <select class="form-select" name="port_0_protocol">
-                                            <option value="${ports_data[0].protocol}" selected hidden>${ports_data[0].protocol}</option>
-                                            <option value="tcp">tcp</option>
-                                            <option value="udp">udp</option>
-                                          </select>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" name="port_1_check" type="checkbox" ${ports_data[1].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_1_external" value="${ports_data[1].external}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_1_internal" value="${ports_data[1].internal}"/>
-                                        </div>
-                                        <div class="col-lg-2">
-                                          <select class="form-select" name="port_1_protocol">
-                                            <option value="${ports_data[1].protocol}" selected hidden>${ports_data[1].protocol}</option>
-                                            <option value="tcp">tcp</option>
-                                            <option value="udp">udp</option>
-                                          </select>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" name="port_2_check" type="checkbox" ${ports_data[2].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_2_external" value="${ports_data[2].external}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_2_internal" value="${ports_data[2].internal}"/>
-                                        </div>
-                                        <div class="col-lg-2">
-                                          <select class="form-select" name="port_2_protocol">
-                                            <option value="${ports_data[2].protocol}" selected hidden>${ports_data[2].protocol}</option>
-                                            <option value="tcp">tcp</option>
-                                            <option value="udp">udp</option>
-                                          </select>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" name="port_3_check" type="checkbox" ${ports_data[3].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_3_external" value="${ports_data[3].external}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_3_internal" value="${ports_data[3].internal}"/>
-                                        </div>
-                                        <div class="col-lg-2">
-                                          <select class="form-select" name="port_3_protocol">
-                                            <option value="${ports_data[3].protocol}" selected hidden>${ports_data[3].protocol}</option>
-                                            <option value="tcp">tcp</option>
-                                            <option value="udp">udp</option>
-                                          </select>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" name="port_4_check" type="checkbox" ${ports_data[4].check}>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_4_external" value="${ports_data[4].external}"/>
-                                        </div>
-                                        <div class="col">
-                                          <input type="text" class="form-control" name="port_4_internal" value="${ports_data[4].internal}"/>
-                                        </div>
-                                        <div class="col-lg-2">
-                                          <select class="form-select" name="port_4_protocol">
-                                            <option value="${ports_data[4].protocol}" selected hidden>${ports_data[4].protocol}</option>
-                                            <option value="tcp">tcp</option>
-                                            <option value="udp">udp</option>
-                                          </select>
-                                        </div>
-                                      </div>
-                    
-                                      <div class="row mb-1 align-items-end">
-                                        <div class="col-auto">
-                                          <input class="form-check-input" name="" type="checkbox" >
-                                        </div>
-                                        <div class="col">
-                                          <label class="form-label">External Port</label>
-                                          <input type="text" class="form-control" name="" value=""/>
-                                        </div>
-                                        <div class="col">
-                                          <label class="form-label">Internal Port</label>
-                                          <input type="text" class="form-control" name="" value=""/>
-                                        </div>
-                                        <div class="col-lg-2">
-                                          <label class="form-label">Protocol</label>
-                                          <select class="form-select" name="">
-                                            <option value="" selected hidden></option>
-                                            <option value="tcp">tcp</option>
-                                            <option value="udp">udp</option>
-                                          </select>
-                                        </div>
-                                      </div>
-                    
-                    
-                                    </div>
-                                  </div>
-                                </div>
-        
-        
-        
-                              </div>
-                    
-                    
-                              
-                              </form>
-                            </div>
-                            <div class="modal-footer">
-                              <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
-                              <input type="submit" form="${form_id}_install" class="btn btn-success" value="Install"/>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
+            <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">
@@ -1058,7 +238,7 @@
         },
         yaxis: {
           min: 0,
-          max: 100,
+          max: 102,
           labels: {
             padding: 4
           }

views/settings.html

@@ -29,7 +29,7 @@
 				<div class="row g-2 align-items-center">
 				<div class="col">
 					<h2 class="page-title">
-					Account Settings
+					Settings
 					</h2>
 				</div>
 				</div>
@@ -40,85 +40,70 @@
 				<div class="container-xl">
 				  <div class="card">
 					<div class="row g-0">
-					  <div class="col-3 d-none d-md-block border-end">
-						<div class="card-body">
-						  <h4 class="subheader">Business settings</h4>
-						  <div class="list-group list-group-transparent">
-						  <a href="/account" class="list-group-item list-group-item-action d-flex align-items-center">Account</a>
-						  <!-- <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">My Notifications</a>
-						  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">Connected Apps</a> -->
-						  <a href="/settings" class="list-group-item list-group-item-action d-flex align-items-center active">Settings</a>
-						  <!-- <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">Billing & Invoices</a> -->
-						  </div>
-						  <h4 class="subheader mt-4">Experience</h4>
-						  <div class="list-group list-group-transparent">
-						  <a href="#" class="list-group-item list-group-item-action">Credits</a>
-						  </div>
-						</div>
-					  </div>
-					  <div class="col d-flex flex-column">
+						<%- include('sidebar.html') %>
+					  	<div class="col d-flex flex-column">
 					  
-						<div class="card-body">
-						  <h2 class="mb-2">Settings</h2>
-						  <p class="text-muted mb-4">Configure server below</p>
-						  
-						  <div class="row align-items-center">
-							<div class="col">
-							  <a href="./QuickConnect.bat" class="btn" download="QuickConnect.bat">
-								<!-- Download SVG icon from https://tabler-icons.io/i/brand-tabler-->
-								<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-windows" 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> <path d="M17.8 20l-12 -1.5c-1 -.1 -1.8 -.9 -1.8 -1.9v-9.2c0 -1 .8 -1.8 1.8 -1.9l12 -1.5c1.2 -.1 2.2 .8 2.2 1.9v12.1c0 1.2 -1.1 2.1 -2.2 1.9z"></path> <path d="M12 5l0 14"></path> <path d="M4 12l16 0"></path> </svg>
-								Windows QuickConnect
-							  </a>
+							<div class="card-body">
+							<h2 class="mb-2">Settings</h2>
+							<p class="text-muted mb-4">Configure server below</p>
+							
+							<div class="row align-items-center">
+								<div class="col">
+								<a href="./QuickConnect.bat" class="btn" download="QuickConnect.bat">
+									<!-- Download SVG icon from https://tabler-icons.io/i/brand-tabler-->
+									<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-windows" 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> <path d="M17.8 20l-12 -1.5c-1 -.1 -1.8 -.9 -1.8 -1.9v-9.2c0 -1 .8 -1.8 1.8 -1.9l12 -1.5c1.2 -.1 2.2 .8 2.2 1.9v12.1c0 1.2 -1.1 2.1 -2.2 1.9z"></path> <path d="M12 5l0 14"></path> <path d="M4 12l16 0"></path> </svg>
+									Windows QuickConnect
+								</a>
+								</div>
 							</div>
-						  </div>
-						  
-						  <div class="row mt-4">
-							<div class="col-md">
-							  <div class="form-label">Full Name</div>
-							  <input type="text" class="form-control" value="" readonly="">
+							
+							<div class="row mt-4">
+								<div class="col-md">
+								<div class="form-label">Full Name</div>
+								<input type="text" class="form-control" value="" readonly="">
+								</div>
+								<div class="col-md">
+								<div class="form-label">First Name</div>
+								<input type="text" class="form-control" value="" readonly="">
+								</div>
+								<div class="col-md">
+								<div class="form-label">Last Name</div>
+								<input type="text" class="form-control" value="" readonly="">
+								</div>
 							</div>
-							<div class="col-md">
-							  <div class="form-label">First Name</div>
-							  <input type="text" class="form-control" value="" readonly="">
+							<h3 class="card-title mt-4">Email</h3>
+							<p class="card-subtitle">This contact will be shown to others publicly, so choose it carefully.</p>
+							<div>
+								<div class="row g-2">
+								<div class="col-auto">
+									<input type="text" class="form-control w-auto" value="" readonly="">
+								</div>
+								<div class="col-auto">
+									<a href="#" class="btn">Change</a>
+								</div>
+								</div>
 							</div>
-							<div class="col-md">
-							  <div class="form-label">Last Name</div>
-							  <input type="text" class="form-control" value="" readonly="">
+							<h3 class="card-title mt-4">Password</h3>
+							<p class="card-subtitle">You can set a permanent password if you don't want to use temporary login codes.</p>
+							<div>
+								<a href="#" class="btn">
+								Set new password
+								</a>
+							</div>
+							<h3 class="card-title mt-4">Public profile</h3>
+							<p class="card-subtitle">Making your profile public means that anyone on the Dashkit network will be able to find
+							you.</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">You're currently visible</span>
+								<span class="form-check-label form-check-label-off">You're
+								currently invisible</span>
+								</label>
 							</div>
-						  </div>
-						  <h3 class="card-title mt-4">Email</h3>
-						  <p class="card-subtitle">This contact will be shown to others publicly, so choose it carefully.</p>
-						  <div>
-							<div class="row g-2">
-							  <div class="col-auto">
-								<input type="text" class="form-control w-auto" value="" readonly="">
-							  </div>
-							  <div class="col-auto">
-								<a href="#" class="btn">Change</a>
-							  </div>
 							</div>
-						  </div>
-						  <h3 class="card-title mt-4">Password</h3>
-						  <p class="card-subtitle">You can set a permanent password if you don't want to use temporary login codes.</p>
-						  <div>
-							<a href="#" class="btn">
-							  Set new password
-							</a>
-						  </div>
-						  <h3 class="card-title mt-4">Public profile</h3>
-						  <p class="card-subtitle">Making your profile public means that anyone on the Dashkit network will be able to find
-						  you.</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">You're currently visible</span>
-							  <span class="form-check-label form-check-label-off">You're
-							  currently invisible</span>
-							</label>
-						  </div>
-						</div>
 	  
-					  </div>
+					  	</div>
 					  
 					</div>
 				  </div>

views/sidebar.html

@@ -0,0 +1,13 @@
+<div class="col-3 d-none d-md-block border-end">
+	<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="/settings" class="list-group-item list-group-item-action d-flex align-items-center">Settings</a>
+		</div>
+		<h4 class="subheader mt-4">Experience</h4>
+		<div class="list-group list-group-transparent">
+			<a href="/supporters" class="list-group-item list-group-item-action">Supporters</a>
+		</div>
+	</div>
+</div>

views/supporters.html

@@ -0,0 +1,70 @@
+	<!doctype html>
+	<html lang="en">
+	<head>
+		<meta charset="utf-8"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+		<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"/>
+		<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;
+			}
+			body {
+			  font-feature-settings: "cv03", "cv04", "cv11";
+			}
+		  </style>
+	</head>
+	<body >
+	<div class="page">
+		<!-- Navbar -->
+		<%- include('navbar.html') %>
+		<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">
+								Settings
+							</h2>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- Page body -->
+			<div class="page-body">
+				<div class="container-xl">
+					<div class="card">
+						<div class="row g-0">
+							<%- include('sidebar.html') %>
+							<div class="col d-flex flex-column">
+					
+								<div class="card-body">
+									<h2 class="mb-2">Supporters</h2>
+									<p class="text-muted mb-4">Awesome people below</p>
+									<div class="row align-items-center">
+										<div class="col">
+											<div class="avatar bg-green-lt" data-demo-color="" title="Micheal M" style="margin-right: 5px;">mm</div>
+											<div class="avatar bg-cyan-lt" data-demo-color="" title="Peter D" style="margin-right: 5px;">pd</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+				  	</div>
+				</div>
+			</div>
+
+				<%- include('footer.html') %>
+		</div>
+	</div>
+		<!-- Libs JS -->
+		<!-- Tabler Core -->
+		<script src="/js/tabler.min.js" defer></script>
+		<script src="/js/demo.min.js" defer></script>
+	</body>
+	</html>