converting /components into html

controllers/dashboard.js

@@ -1,10 +1,8 @@
 import { Readable } from 'stream';
 import { Permission, Container } from '../database/models.js';
-import { modal } from '../components/modal.js';
 import { permissionsModal } from '../components/permissions_modal.js';
 import { setEvent, cpu, ram, tx, rx, disk, docker } from '../server.js';
 import { dockerContainerStats } from 'systeminformation';
-// import { containerCard } from '../components/containerCard.js';
 import { readFileSync } from 'fs';
 
 let containerCard = readFileSync('./views/components/containerCard.html', 'utf8');
@@ -51,12 +49,14 @@ export const Logs = (req, res) => {
 export const Modal = async (req, res) => {
     let name = req.header('hx-trigger-name');
     let id = req.header('hx-trigger');
+
     if (id == 'permissions') {
         let containerPermissions = await Permission.findAll({ where: {containerName: name}});
-        let form = permissionsModal();
-        res.send(form);
+        let permissions = readFileSync('./views/modals/permissions.html', 'utf8');
+        res.send(permissions);
         return;
     }
+
     let containerId = docker.getContainer(name);
     let containerInfo = await containerId.inspect();
     let ports_list = [];
@@ -83,8 +83,13 @@ export const Modal = async (req, res) => {
         ports: ports_list,
         link: 'localhost',
     }
-    let form = modal(container_info);
-    res.send(form);
+
+    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);
 }
 
 export const Stats = async (req, res) => {

server.js

@@ -88,7 +88,6 @@ router.get('/sse_event', (req, res) => {
             });
         });
         if ((all_containers != sent_list) || (event == true)) {
-            console.log('event triggered');
             sent_list = all_containers;
             event = false;
             res.write(`event: ${eventType}\n`);

views/components/containerCard.html

@@ -26,7 +26,7 @@
                     <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="AppName" 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="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="edit">Edit</button>
                     <button class="dropdown-item text-primary" name="AppName" id="update" disabled="">Update</button>
@@ -40,7 +40,7 @@
                   <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="AppName" 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="AppName" id="reset" value="reset">Reset View</button>
-                    <button class="dropdown-item text-secondary" name="AppName" 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>
+                    <button class="dropdown-item text-secondary" name="AppName" id="permissions" 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">Permissions</button>
                   </div>
                 </div>
               </div>

views/modals/details.html

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

views/modals/permissions.html

@@ -0,0 +1,364 @@
+<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>