converting template literals into plain html.

components/containerCard.js

@@ -1,314 +0,0 @@
-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, '');
-
-  // 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';
-  } else if (state == 'paused') {
-      state_indicator = 'orange';
-  }
-
-  let noChart = 'hx-swap="none"';
-  if (state == 'running') { noChart = ''; }
-
-  let ports_data = [];
-  if (ports) {
-    ports_data = ports;
-  } else {
-    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
-      });
-    }
-  }
-
-
-  return `
-    <div class="col-sm-6 col-lg-3 pt-1">
-      <div class="card">
-        <div class="card-body">
-          <div class="card-stamp card-stamp-sm">
-            <img width="100px" src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI-Icons/main/${service}.png" onerror="this.onerror=null;this.src='https://raw.githubusercontent.com/lllllllillllllillll/DweebUI-Icons/main/docker.png';"></img>
-          </div>
-          <div class="d-flex align-items-center">
-            <div class="subheader text-yellow">${external_port}:${internal_port}</div>
-            <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-post="/start" data-hx-trigger="click" data-hx-target="#${name}state" name="${name}" id="${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-post="/stop" data-hx-trigger="click" data-hx-target="#${name}state" name="${name}" id="${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-post="/pause" data-hx-trigger="click" data-hx-target="#${name}state" name="${name}" id="${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-post="/restart" data-hx-trigger="click" data-hx-target="#${name}state" name="${name}" id="${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">
-                    <a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle><circle cx="12" cy="5" r="1"></circle></svg>
-                    </a>
-                    <div class="dropdown-menu dropdown-menu-end">
-                      <button class="dropdown-item text-secondary" 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">Edit</button>
-                      <button class="dropdown-item text-primary" name="${name}" id="update" disabled="">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>
-                  <div class="dropdown">
-                    <a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="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-post="/hide" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="hide" value="hide">Hide</button>
-                      <button class="dropdown-item text-secondary" data-hx-post="/reset" data-hx-trigger="click" data-hx-swap="none" name="${name}" id="reset" value="reset">Reset View</button>
-                      <button class="dropdown-item text-secondary" name="${name}" id="permissions" data-hx-get="/modal" data-hx-target="#modals-here" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">Permissions</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="d-flex align-items-baseline">
-            <div class="h1 me-2" title="${name}" style="margin-bottom: 0;">
-              <a href="http://${link}:${external_port}" target="_blank">
-                ${wrapped}
-              </a>
-            </div>
-            <div class="ms-auto">
-              <label id="${name}state">
-                <span class="text-${state_indicator} align-items-center lh-1">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler icon-tabler-point-filled" 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="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z" stroke-width="0" fill="currentColor"></path></svg>
-                    ${state}
-                </span>
-              </label>
-            </div>
-          </div>
-          
-          <script>
-              var ${chartName}chart = new ApexCharts(document.querySelector("#${chartName}_chart"), options);
-          </script>
-
-          <div class="chart-sm">
-            <div id="${chartName}_chart" data-hx-trigger="load, every 2s" data-hx-get="/chart" name="${chartName}" ${noChart}>
-              <script>
-                ${chartName}chart.render();
-              </script>
-            </div>
-            
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="modal modal-blur fade" id="${name}_uninstall_modal" tabindex="-1" style="display: none;" aria-hidden="true">
-      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
-        <div class="modal-content">
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-          <div class="modal-status bg-danger"></div>
-          <div class="modal-body text-center py-3">
-            <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" 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="M12 9v2m0 4v.01"></path><path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path></svg>
-            <h3>Remove ${name}?</h3>
-            <form action="/uninstall" id="${name}_uninstall" method="POST">
-            <input type="text" class="form-control" name="service_name" value="${name}" hidden/>
-            <div class="mb-3"> </div>
-            
-            <div class="mb-2">
-              <div class="divide-y">
-                <div class="row">
-                  <div class="col-9">
-                    <label class="row text-start">
-                      <span class="col">Remove Volumes</span>
-                    </label>
-                  </div>
-                  <div class="col-3">
-                    <label class="form-check form-check-single form-switch text-end">
-                      <input class="form-check-input" type="checkbox" name="remove_volumes" disabled="">
-                    </label>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="col-9">
-                    <label class="row text-start">
-                      <span class="col">
-                        Remove Image
-                      </span>
-                    </label>
-                  </div>
-                  <div class="col-3">
-                    <label class="form-check form-check-single form-switch text-end">
-                      <input class="form-check-input" type="checkbox" name="remove_image" disabled="">
-                    </label>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="col-9">
-                    <label class="row text-start">
-                      <span class="col">
-                        Remove Backups
-                      </span>
-                    </label>
-                  </div>
-                  <div class="col-3">
-                    <label class="form-check form-check-single form-switch text-end">
-                      <input class="form-check-input" type="checkbox" name="remove_backups" disabled="">
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="mt-1"> </div>
-            <div class="text-muted">Enter "Yes" below to remove the container.</div>
-            <input type="text" class="form-control mb-2" name="confirm" autocomplete="off">
-            </form>
-          </div>
-          <div class="modal-footer">
-            <div class="w-100">
-              <div class="row">
-                <div class="col">
-                  <a href="#" class="btn w-100" data-bs-dismiss="modal">
-                    Cancel
-                  </a>
-                </div>
-                <div class="col">
-                  <input type="submit" form="${name}_uninstall" class="btn btn-danger w-100" value="Uninstall"/>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="modal modal-blur fade" id="${name}_permissions" tabindex="-1" style="display: none;" aria-hidden="true">
-      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
-        <div class="modal-content">
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-          <div class="modal-status bg-cyan"></div>
-          <div class="modal-body text-center py-3">
-            <h3>${name} permissions</h3>
-            <form action="#" id="${name}_permissions" method="POST">
-            <input type="text" class="form-control" name="service_name" value="${name}" hidden/>
-
-
-            <div class="mb-2">
-              <div class="divide-y">
-                
-                <div class="row">
-                  <div class="col-9">
-                    <div class="d-flex align-items-center">
-                      User:
-                      <select class="form-select ms-2">
-                        <option value="john_doe" selected hidden>John Doe</option>
-                        <option value="john_doe">John Doe</option>
-                        <option value="jane_doe">Jane Doe</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="row">
-                  <div class="col-9">
-                    <label class="row text-start">
-                      <span class="col">
-                        View
-                      </span>
-                    </label>
-                  </div>
-                  <div class="col-3">
-                    <label class="form-check form-check-single form-switch text-end">
-                      <input class="form-check-input" type="checkbox" name="remove_image">
-                    </label>
-                  </div>
-                </div>
-
-                <div class="row">
-                  <div class="col-9">
-                    <label class="row text-start">
-                      <span class="col">
-                        Uninstall
-                      </span>
-                    </label>
-                  </div>
-                  <div class="col-3">
-                    <label class="form-check form-check-single form-switch text-end">
-                      <input class="form-check-input" type="checkbox" name="remove_image">
-                    </label>
-                  </div>
-                </div>
-
-                <div class="row">
-                  <div class="col-9">
-                    <label class="row text-start">
-                      <span class="col">
-                        Edit
-                      </span>
-                    </label>
-                  </div>
-                  <div class="col-3">
-                    <label class="form-check form-check-single form-switch text-end">
-                      <input class="form-check-input" type="checkbox" name="remove_backups">
-                    </label>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="col-9">
-                    <label class="row text-start">
-                      <span class="col">
-                        Upgrade
-                      </span>
-                    </label>
-                  </div>
-                  <div class="col-3">
-                    <label class="form-check form-check-single form-switch text-end">
-                      <input class="form-check-input" type="checkbox" name="remove_backups">
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="mt-1"> </div>
-            </form>
-          </div>
-          <div class="modal-footer">
-            <div class="w-100">
-              <div class="row">
-                <div class="col">
-                  <a href="#" class="btn w-100" data-bs-dismiss="modal">
-                    Cancel
-                  </a>
-                </div>
-                <div class="col">
-                  <input type="submit" form="${name}_permissions" class="btn btn-primary w-100" value="Update"/>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>`;
-}

components/permissions_modal.js

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

controllers/dashboard.js

@@ -1,11 +1,10 @@
 import { Readable } from 'stream';
 import { Permission, Container } from '../database/models.js';
-import { permissionsModal } from '../components/permissions_modal.js';
 import { setEvent, cpu, ram, tx, rx, disk, docker } from '../server.js';
 import { dockerContainerStats } from 'systeminformation';
 import { readFileSync } from 'fs';
 
-let containerCard = readFileSync('./views/components/containerCard.html', 'utf8');
+let containerCard = readFileSync('./views/partials/containerCard.html', 'utf8');
 
 let [ hidden, cardList ] = [ '', '' ];
 
@@ -57,6 +56,13 @@ export const Modal = async (req, res) => {
         return;
     }
 
+    if (id == 'remove') {
+        let containerPermissions = await Permission.findAll({ where: {containerName: name}});
+        let remove = readFileSync('./views/modals/remove.html', 'utf8');
+        res.send(remove);
+        return;
+    }
+
     let containerId = docker.getContainer(name);
     let containerInfo = await containerId.inspect();
     let ports_list = [];
@@ -87,8 +93,6 @@ export const Modal = async (req, res) => {
     let details = readFileSync('./views/modals/details.html', 'utf8');
     details = details.replace(/AppName/g, containerInfo.Name.slice(1));
     details = details.replace(/AppImage/g, containerInfo.Config.Image);
-    
-
     res.send(details);
 }
 

router/index.js

@@ -74,8 +74,8 @@ router.get("/logout", Logout);
 
 
 // Functions
-import { Install } from "../functions/install.js"
+// import { Install } from "../functions/install.js"
 import { Uninstall } from "../functions/uninstall.js"
 
-router.post("/install", auth, Install);
+// router.post("/install", auth, Install);
 router.post("/uninstall", auth, Uninstall);

views/apps.html

@@ -71,6 +71,15 @@
             <div class="row row-cards">
 
               <%- apps_list %>
+
+
+            <!-- HTMX Target-->
+            <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>
             <div class="d-flex mt-4">

views/dashboard.html

@@ -144,21 +144,25 @@
             <!-- HTMX -->
             <div class="col-12">
               <div class="row row-cards" id="containerCards" data-hx-get="/containers" data-hx-trigger="load" data-hx-swap="beforeend">
-
               </div>
             </div>
 
             <!-- HTMX -->
             <div class="col-12">
               <div class="row row-cards" data-hx-get="/installs" data-hx-trigger="" data-hx-swap="beforeend" hx-target="#containerCards">
-
               </div>
             </div>
             
             <!-- HTMX Target-->
             <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-dialog modal-sm modal-dialog-centered modal-dialog-scrollables">
                 <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">Loading</h5>
+                  </div>
+                  <div class="modal-body text-center">
+                    <div class="spinner-border"></div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -172,14 +176,12 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                   </div>
                   <div class="modal-body">
-                    
-                  <div class="card-body">
-                        <h4>Logs:</h4>
+                    <div class="card-body">
+                      <h4>Logs:</h4>
                         <div id="logView">
                           <pre>No logs available</pre>
                         </div>
-                  </div>
-        
+                    </div>
                   </div>
                   <div class="modal-footer">
                     <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
@@ -192,8 +194,6 @@
               </div>
             </div>
 
-            
-
           </div>
         </div>
       </div>
@@ -261,6 +261,8 @@
         }
     }
   </script>
+  
+  <!-- SelectAll for the permissions modal -->
   <script>
     function selectAll(group) {
       

views/modals/install.html

@@ -0,0 +1,729 @@
+<div class="modal modal-blur fade" id="${modal}-install" 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">Install ${data.title}</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="/install" name="${form_id}_install" id="${form_id}_install" 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="${source}"/>
+                    </div>
+                    <div class="col-lg-3">
+                    <label class="form-label">Restart Policy: </label>
+                    <select class="form-select" name="restart_policy">
+                        <option value="${data.restart_policy}" selected hidden>${data.restart_policy}</option>
+                        <option value="unless-stopped">unless-stopped</option>
+                        <option value="on-failure">on-failure</option>
+                        <option value="never">never</option>
+                        <option value="always">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="net_mode" value="host" class="form-selectgroup-input" ${net_host}>
+                    <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="net_mode" value="${net_name}" class="form-selectgroup-input" ${net_bridge}>
+                    <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="net_mode" value="docker" class="form-selectgroup-input" ${net_docker}>
+                    <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="port0" 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="port1" 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="port2" 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="port3" 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="port4" 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="port5" 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="volume0" 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="volume1" 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="volume2" 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="volume3" 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="volume4" 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="volume5" 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="env0" ${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="env1" ${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="env2" ${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="env3" ${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="env4" ${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="env5" ${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="env6" ${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="env7" ${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="env8" ${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="env9" ${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="env10" ${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="env11" ${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="label0" ${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="label1" ${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="label2" ${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="label3" ${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="label4" ${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="label5" ${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="label6" ${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="label7" ${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="label8" ${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="label9" ${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="label10" ${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="label11" ${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="command_check" type="checkbox" ${command_check}>
+                        </div>
+                        <div class="col">
+                        <label class="form-label">Command</label>
+                        <input type="text" class="form-control" name="command" value="${command}"/>
+                        </div>
+                    </div>
+
+
+                    <div class="row mb-1 align-items-end">
+                        <div class="col-auto">
+                        <input class="form-check-input" name="privileged" type="checkbox" ${privileged_check}>
+                        </div>
+                        <div class="col">
+                        <label class="form-label">Privileged Mode</label>
+                        </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>

views/modals/learnmore.html

@@ -0,0 +1,14 @@
+<div class="modal modal-blur fade" id="${modal}-info" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-body">
+            <div class="modal-title">${data.title}</div>
+            <div>${description}</div>
+            </div>
+            <div class="modal-footer">
+            <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
+            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Okay</button>
+            </div>
+        </div>
+    </div>
+</div>

views/modals/permissions.html

@@ -172,179 +172,6 @@
             </div>
 
 
-            <div class="accordion-item mb-3" style="border: 1px solid grey;">
-                <h2 class="accordion-header" id="heading-2">
-                <button class="accordion-button collapsed row" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false">
-                    <span class="avatar avatar-sm bg-cyan-lt col-3 text-start">JD</span>
-                    <div class="col text-end" style="margin-right: 10px;">John Doe</div>
-                </button>
-                </h2>
-                <div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
-                <div class="accordion-body pt-0">
-
-
-                    <div class="">
-                    <div class="">
-
-                        <div class="row mb-3">
-                        <div class="col-9">
-                            <label class="row text-start">
-                            <span class="col">
-                                All
-                            </span>
-                            </label>
-                        </div>
-                        <div class="col-3">
-                            <label class="form-check form-check-single form-switch text-end">
-                            <input class="form-check-input" type="checkbox" name="remove_image">
-                            </label>
-                        </div>
-                        </div>
-
-                        <div class="row mb-2">
-                        <div class="col-9">
-                            <label class="row text-start">
-                            <span class="col">
-                                View
-                            </span>
-                            </label>
-                        </div>
-                        <div class="col-3">
-                            <label class="form-check form-check-single form-switch text-end">
-                            <input class="form-check-input" type="checkbox" name="remove_image">
-                            </label>
-                        </div>
-                        </div>
-        
-                        <div class="row mb-2">
-                        <div class="col-9">
-                            <label class="row text-start">
-                            <span class="col">
-                                Uninstall
-                            </span>
-                            </label>
-                        </div>
-                        <div class="col-3">
-                            <label class="form-check form-check-single form-switch text-end">
-                            <input class="form-check-input" type="checkbox" name="remove_image">
-                            </label>
-                        </div>
-                        </div>
-        
-                        <div class="row mb-2">
-                        <div class="col-9">
-                            <label class="row text-start">
-                            <span class="col">
-                                Edit
-                            </span>
-                            </label>
-                        </div>
-                        <div class="col-3">
-                            <label class="form-check form-check-single form-switch text-end">
-                            <input class="form-check-input" type="checkbox" name="remove_backups">
-                            </label>
-                        </div>
-                        </div>
-
-                        <div class="row mb-2">
-                        <div class="col-9">
-                            <label class="row text-start">
-                            <span class="col">
-                                Upgrade
-                            </span>
-                            </label>
-                        </div>
-                        <div class="col-3">
-                            <label class="form-check form-check-single form-switch text-end">
-                            <input class="form-check-input" type="checkbox" name="remove_backups">
-                            </label>
-                        </div>
-                        </div>
-
-                        <div class="row mb-2">
-                        <div class="col-9">
-                            <label class="row text-start">
-                            <span class="col">
-                                Start
-                            </span>
-                            </label>
-                        </div>
-                        <div class="col-3">
-                            <label class="form-check form-check-single form-switch text-end">
-                            <input class="form-check-input" type="checkbox" name="remove_backups">
-                            </label>
-                        </div>
-                        </div>
-
-                        <div class="row mb-2">
-                        <div class="col-9">
-                            <label class="row text-start">
-                            <span class="col">
-                                Stop
-                            </span>
-                            </label>
-                        </div>
-                        <div class="col-3">
-                            <label class="form-check form-check-single form-switch text-end">
-                            <input class="form-check-input" type="checkbox" name="remove_backups">
-                            </label>
-                        </div>
-                        </div>
-
-                        <div class="row mb-2">
-                        <div class="col-9">
-                            <label class="row text-start">
-                            <span class="col">
-                                Pause
-                            </span>
-                            </label>
-                        </div>
-                        <div class="col-3">
-                            <label class="form-check form-check-single form-switch text-end">
-                            <input class="form-check-input" type="checkbox" name="remove_backups">
-                            </label>
-                        </div>
-                        </div>
-
-                        <div class="row mb-2">
-                        <div class="col-9">
-                            <label class="row text-start">
-                            <span class="col">
-                                Restart
-                            </span>
-                            </label>
-                        </div>
-                        <div class="col-3">
-                            <label class="form-check form-check-single form-switch text-end">
-                            <input class="form-check-input" type="checkbox" name="remove_backups">
-                            </label>
-                        </div>
-                        </div>
-
-
-                        <div class="row mb-2">
-                        <div class="col-9">
-                            <label class="row text-start">
-                            <span class="col">
-                                Logs
-                            </span>
-                            </label>
-                        </div>
-                        <div class="col-3">
-                            <label class="form-check form-check-single form-switch text-end">
-                            <input class="form-check-input" type="checkbox" name="remove_backups">
-                            </label>
-                        </div>
-                        </div>
-
-
-                    </div>
-                    </div>
-
-                </div>
-                </div>
-            </div>
-
 
             </div>
             </form>

views/modals/remove.html

@@ -0,0 +1,77 @@
+
+    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <div class="modal-status bg-danger"></div>
+            <div class="modal-body text-center py-3">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" 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="M12 9v2m0 4v.01"></path><path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path></svg>
+            <h3>Remove AppName?</h3>
+            <form action="/uninstall" id="AppName_uninstall" method="POST">
+            <input type="text" class="form-control" name="service_name" value="AppName" hidden/>
+            <div class="mb-3"> </div>
+            
+            <div class="mb-2">
+                <div class="divide-y">
+                <div class="row">
+                    <div class="col-9">
+                    <label class="row text-start">
+                        <span class="col">Remove Volumes</span>
+                    </label>
+                    </div>
+                    <div class="col-3">
+                    <label class="form-check form-check-single form-switch text-end">
+                        <input class="form-check-input" type="checkbox" name="remove_volumes" disabled="">
+                    </label>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-9">
+                    <label class="row text-start">
+                        <span class="col">
+                        Remove Image
+                        </span>
+                    </label>
+                    </div>
+                    <div class="col-3">
+                    <label class="form-check form-check-single form-switch text-end">
+                        <input class="form-check-input" type="checkbox" name="remove_image" disabled="">
+                    </label>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-9">
+                    <label class="row text-start">
+                        <span class="col">
+                        Remove Backups
+                        </span>
+                    </label>
+                    </div>
+                    <div class="col-3">
+                    <label class="form-check form-check-single form-switch text-end">
+                        <input class="form-check-input" type="checkbox" name="remove_backups" disabled="">
+                    </label>
+                    </div>
+                </div>
+                </div>
+            </div>
+            <div class="mt-1"> </div>
+            <div class="text-muted">Enter "Yes" below to remove the container.</div>
+            <input type="text" class="form-control mb-2" name="confirm" autocomplete="off">
+            </form>
+            </div>
+            <div class="modal-footer">
+            <div class="w-100">
+                <div class="row">
+                <div class="col">
+                    <a href="#" class="btn w-100" data-bs-dismiss="modal">
+                    Cancel
+                    </a>
+                </div>
+                <div class="col">
+                    <input type="submit" form="AppName_uninstall" class="btn btn-danger w-100" value="Uninstall"/>
+                </div>
+                </div>
+            </div>
+            </div>
+        </div>
+    </div>

views/navbar.html

@@ -78,7 +78,7 @@
           <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /> <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /> </svg>
         </button>
 
-        <div class="nav-item dropdown d-none d-md-flex me-3">
+        <div class="nav-item dropdown d-none d-md-flex me-2">
           <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
             <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
             <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /> <path d="M9 17v1a3 3 0 0 0 6 0v-1" /> </svg>
@@ -138,7 +138,7 @@
       </div>
       <div class="nav-item dropdown">
         <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
-          <span class="avatar avatar-sm"><%- avatar %></span>
+          <span class="avatar avatar-sm bg-green-lt" name="JD" title="JD">JD</span></span>
           <div class="d-none d-xl-block ps-2">
             <div>
               <%= name %>

views/partials/appCard.html

@@ -0,0 +1,22 @@
+<div class="col-md-6 col-lg-3">
+    <div class="card">
+        <div class="card-body p-4 text-center">
+            <span class="avatar avatar-xlplus mb-3 rounded"><img src='${data.logo}' width="144px" height="144px" loading="lazy"/></span>
+            <h3 class="m-0 mb-1"><a href="#">${shortened_name}</a></h3>
+            <div class="text-secondary">${shortened_desc}</div>
+            <div class="mt-3">
+            ${categories}
+            </div>
+        </div>
+        <div class="d-flex">
+            <a href="#" class="card-btn" data-bs-toggle="modal" data-bs-target="#${modal}-info">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-article" 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="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path> <path d="M7 8h10"></path> <path d="M7 12h10"></path> <path d="M7 16h10"></path></svg>
+              Learn More
+            </a>
+            <a href="#" class="card-btn" data-bs-toggle="modal" data-bs-target="#${modal}-install">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-bar-to-down" 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="M4 20l16 0"></path> <path d="M12 14l0 -10"></path> <path d="M12 14l4 -4"></path> <path d="M12 14l-4 -4"></path></svg>
+              Install
+            </a>
+        </div>
+    </div>
+</div>

views/components/containerCard.html → views/partials/containerCard.html

@@ -27,10 +27,10 @@
                   </a>
                   <div class="dropdown-menu dropdown-menu-end">
                     <button class="dropdown-item text-secondary" name="AppName" id="details" data-hx-get="/modal" data-hx-target="#modals-here" hx-swap="innerHTML" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">Details</button>
-                    <button class="dropdown-item text-secondary" name="AppName" 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="AppName" id="logs" data-hx-get="/logs" hx-swap="innerHTML" data-hx-target="#logView" data-bs-toggle="modal" data-bs-target="#log_view">Logs</button>
                     <button class="dropdown-item text-secondary" name="AppName" id="edit">Edit</button>
                     <button class="dropdown-item text-primary" name="AppName" id="update" disabled="">Update</button>
-                    <button class="dropdown-item text-danger" name="AppName" id="remove" data-bs-toggle="modal" data-bs-target="#AppName_uninstall_modal" href="#">Remove</button>
+                    <button class="dropdown-item text-danger" name="AppName" id="remove" hx-trigger="click" data-hx-get="/modal" hx-swap="innerHTML" data-bs-toggle="modal" data-hx-target="#modals-here" data-bs-target="#modals-here">Remove</button>
                   </div>
                 </div>
                 <div class="dropdown">