Kaynağa Gözat

updating apps.js to use html templates

lllllllillllllillll 1 yıl önce
ebeveyn
işleme
974d32e350

+ 233 - 42
controllers/apps.js

@@ -48,6 +48,7 @@ export const Apps = (req, res) => {
           categories += CatagoryColor(templates[i].categories[c]);
           categories += CatagoryColor(templates[i].categories[c]);
         }
         }
 
 
+        appCard = appCard.replace(/AppName/g, name);
         appCard = appCard.replace(/AppShortName/g, name);
         appCard = appCard.replace(/AppShortName/g, name);
         appCard = appCard.replace(/AppDesc/g, desc);
         appCard = appCard.replace(/AppDesc/g, desc);
         appCard = appCard.replace(/AppLogo/g, logo);
         appCard = appCard.replace(/AppLogo/g, logo);
@@ -122,46 +123,236 @@ export const appSearch = async (req, res) => {
 
 
 
 
 function CatagoryColor(category) {
 function CatagoryColor(category) {
-    switch (category) {
-      case 'Other':
-        return '<span class="badge bg-blue-lt">Other</span> ';
-      case 'Productivity':
-        return '<span class="badge bg-blue-lt">Productivity</span> ';
-      case 'Tools':
-        return '<span class="badge bg-blue-lt">Tools</span> ';
-      case 'Dashboard':
-        return '<span class="badge bg-blue-lt">Dashboard</span> ';
-      case 'Communication':
-        return '<span class="badge bg-azure-lt">Communication</span> ';
-      case 'Media':
-        return '<span class="badge bg-azure-lt">Media</span> ';
-      case 'CMS':
-        return '<span class="badge bg-azure-lt">CMS</span> ';
-      case 'Monitoring':
-        return '<span class="badge bg-indigo-lt">Monitoring</span> ';
-      case 'LDAP':
-        return '<span class="badge bg-purple-lt">LDAP</span> ';
-      case 'Arr':
-        return '<span class="badge bg-purple-lt">Arr</span> ';
-      case 'Database':
-        return '<span class="badge bg-red-lt">Database</span> ';
-      case 'Paid':
-        return '<span class="badge bg-red-lt" title="This is a paid product or contains paid features.">Paid</span> ';
-      case 'Gaming':
-        return '<span class="badge bg-pink-lt">Gaming</span> ';
-      case 'Finance':
-        return '<span class="badge bg-orange-lt">Finance</span> ';
-      case 'Networking':
-        return '<span class="badge bg-yellow-lt">Networking</span> ';
-      case 'Authentication':
-        return '<span class="badge bg-lime-lt">Authentication</span> ';
-      case 'Development':
-        return '<span class="badge bg-green-lt">Development</span> ';
-      case 'Media Server':
-        return '<span class="badge bg-teal-lt">Media Server</span> ';
-      case 'Downloaders':
-        return '<span class="badge bg-cyan-lt">Downloaders</span> ';
-      default:
-        return ''; // default to other if the category is not recognized
+  switch (category) {
+    case 'Other':
+      return '<span class="badge bg-blue-lt">Other</span> ';
+    case 'Productivity':
+      return '<span class="badge bg-blue-lt">Productivity</span> ';
+    case 'Tools':
+      return '<span class="badge bg-blue-lt">Tools</span> ';
+    case 'Dashboard':
+      return '<span class="badge bg-blue-lt">Dashboard</span> ';
+    case 'Communication':
+      return '<span class="badge bg-azure-lt">Communication</span> ';
+    case 'Media':
+      return '<span class="badge bg-azure-lt">Media</span> ';
+    case 'CMS':
+      return '<span class="badge bg-azure-lt">CMS</span> ';
+    case 'Monitoring':
+      return '<span class="badge bg-indigo-lt">Monitoring</span> ';
+    case 'LDAP':
+      return '<span class="badge bg-purple-lt">LDAP</span> ';
+    case 'Arr':
+      return '<span class="badge bg-purple-lt">Arr</span> ';
+    case 'Database':
+      return '<span class="badge bg-red-lt">Database</span> ';
+    case 'Paid':
+      return '<span class="badge bg-red-lt" title="This is a paid product or contains paid features.">Paid</span> ';
+    case 'Gaming':
+      return '<span class="badge bg-pink-lt">Gaming</span> ';
+    case 'Finance':
+      return '<span class="badge bg-orange-lt">Finance</span> ';
+    case 'Networking':
+      return '<span class="badge bg-yellow-lt">Networking</span> ';
+    case 'Authentication':
+      return '<span class="badge bg-lime-lt">Authentication</span> ';
+    case 'Development':
+      return '<span class="badge bg-green-lt">Development</span> ';
+    case 'Media Server':
+      return '<span class="badge bg-teal-lt">Media Server</span> ';
+    case 'Downloaders':
+      return '<span class="badge bg-cyan-lt">Downloaders</span> ';
+    default:
+      return ''; // default to other if the category is not recognized
+  }
+}
+
+export const InstallModal = async (req, res) => {
+  let input = req.header('hx-trigger-name');
+  let result = templates.find(t => t.name == input);
+
+  let name = result.name || result.title.toLowerCase();
+  let short_name = name.slice(0, 25) + "...";
+  let desc = result.description.replaceAll(". ", ".\n") || "no description available";
+  let short_desc = desc.slice(0, 60) + "...";
+  let modal_name = name.replaceAll(" ", "-");
+  let form_id = name.replaceAll("-", "_");
+  let note = result.note ? result.note.replaceAll(". ", ".\n") : "no notes available";
+  let command = result.command ? result.command : "";
+  let command_check = command ? "checked" : "";
+  let privileged = result.privileged || "";
+  let privileged_check = privileged ? "checked" : "";
+  let repository = result.repository || "";
+  let image = result.image || "";
+  let net_host, net_bridge, net_docker = '';
+  let net_name = 'AppBridge';
+  let restart_policy = result.restart_policy || 'unless-stopped';
+  
+  switch (result.network) {
+    case 'host':
+      net_host = 'checked';
+      break;
+    case 'bridge':
+      net_bridge = 'checked';
+      net_name = result.network;
+      break;
+    default:
+      net_docker = 'checked';
+  }
+
+  if (repository != "") {
+    image = (`${repository.url}/raw/master/${repository.stackfile}`);
+  }
+
+  let [ports_data, volumes_data, env_data, label_data] = [[], [], [], []];
+
+  for (let i = 0; i < 12; i++) {
+    
+    // Get port details
+    try {
+      let ports = result.ports[i];
+      let port_check = ports ? "checked" : "";
+      let port_external = ports.split(":")[0] ? ports.split(":")[0] : ports.split("/")[0];
+      let port_internal = ports.split(":")[1] ? ports.split(":")[1].split("/")[0] : ports.split("/")[0];
+      let port_protocol = ports.split("/")[1] ? ports.split("/")[1] : "";
+
+      // remove /tcp or /udp from port_external if it exists
+      if (port_external.includes("/")) {
+        port_external = port_external.split("/")[0];
+      }
+      
+      ports_data.push({
+        check: port_check,
+        external: port_external,
+        internal: port_internal,
+        protocol: port_protocol
+      });
+    } catch {
+        ports_data.push({
+          check: "",
+          external: "",
+          internal: "",
+          protocol: ""
+        });
+    }
+
+    // Get volume details
+    try {
+      let volumes = result.volumes[i];
+      let volume_check = volumes ? "checked" : "";
+      let volume_bind = volumes.bind ? volumes.bind : "";
+      let volume_container = volumes.container ? volumes.container.split(":")[0] : "";
+      let volume_readwrite = "rw";
+
+      if (volumes.readonly == true) {
+        volume_readwrite = "ro";
+      }
+
+      volumes_data.push({
+        check: volume_check,
+        bind: volume_bind,
+        container: volume_container,
+        readwrite: volume_readwrite
+      });
+    } catch {
+      volumes_data.push({
+        check: "",
+        bind: "",
+        container: "",
+        readwrite: ""
+      });
+    }
+
+    // Get environment details
+    try {
+      let env = result.env[i];
+      let env_check = "";
+      let env_default = env.default ? env.default : "";
+      if (env.set) { env_default = env.set;}
+      let env_description = env.description ? env.description : "";
+      let env_label = env.label ? env.label : "";
+      let env_name = env.name ? env.name : "";
+
+      env_data.push({
+        check: env_check,
+        default: env_default,
+        description: env_description,
+        label: env_label,
+        name: env_name
+      });
+    } catch {
+      env_data.push({
+        check: "",
+        default: "",
+        description: "",
+        label: "",
+        name: ""
+      });
+    }
+
+    // Get label details
+    try {
+      let label = result.labels[i];
+      let label_check = "";
+      let label_name = label.name ? label.name : "";
+      let label_value = label.value ? label.value : "";
+
+      label_data.push({
+        check: label_check,
+        name: label_name,
+        value: label_value
+      });
+    } catch {
+      label_data.push({
+        check: "",
+        name: "",
+        value: ""
+      });
     }
     }
-  }
+
+  }
+  
+  let modal = readFileSync('./views/modals/install.html', 'utf8');
+  modal = modal.replace(/AppName/g, name);
+  modal = modal.replace(/AppNote/g, note);
+  modal = modal.replace(/AppImage/g, image);
+  modal = modal.replace(/RestartPolicy/g, restart_policy);
+  modal = modal.replace(/NetHost/g, net_host);
+  modal = modal.replace(/NetBridge/g, net_bridge);
+  modal = modal.replace(/NetDocker/g, net_docker);
+  modal = modal.replace(/NetName/g, net_name);
+  modal = modal.replace(/ModalName/g, modal_name);
+
+
+  for (let i = 0; i < 12; i++) {
+    modal = modal.replaceAll(`Port${i}Check`, ports_data[i].check);
+    modal = modal.replaceAll(`Port${i}External`, ports_data[i].external);
+    modal = modal.replaceAll(`Port${i}Internal`, ports_data[i].internal);
+    modal = modal.replaceAll(`Port${i}Protocol`, ports_data[i].protocol);
+
+    modal = modal.replaceAll(`Volume${i}Check`, volumes_data[i].check);
+    modal = modal.replaceAll(`Volume${i}Bind`, volumes_data[i].bind);
+    modal = modal.replaceAll(`Volume${i}Container`, volumes_data[i].container);
+    modal = modal.replaceAll(`Volume${i}RW`, volumes_data[i].readwrite);
+    
+    modal = modal.replaceAll(`Env${i}Check`, env_data[i].check);
+    modal = modal.replaceAll(`Env${i}Default`, env_data[i].default);
+    modal = modal.replaceAll(`Env${i}Description`, env_data[i].description);
+    modal = modal.replaceAll(`Env${i}Label`, env_data[i].label);
+    modal = modal.replaceAll(`Env${i}Name`, env_data[i].name);
+
+    modal = modal.replaceAll(`Label${i}Check`, label_data[i].check);
+    modal = modal.replaceAll(`Label${i}Name`, label_data[i].name);
+    modal = modal.replaceAll(`Label${i}Value`, label_data[i].value);
+  }
+  res.send(modal);
+}
+
+
+export const LearnMore = async (req, res) => {
+  let name = req.header('hx-trigger-name');
+  let id = req.header('hx-trigger');
+
+  let modal = readFileSync('./views/modals/learnmore.html', 'utf8');
+  res.send(modal);
+}

+ 5 - 0
controllers/dashboard.js

@@ -358,4 +358,9 @@ export const Modals = async (req, res) => {
     modal = modal.replace(/AppName/g, details.name);
     modal = modal.replace(/AppName/g, details.name);
     modal = modal.replace(/AppImage/g, details.image);
     modal = modal.replace(/AppImage/g, details.image);
     res.send(modal);
     res.send(modal);
+}
+
+export const Action = async (req, res) => {
+    let action = req.params.action;
+    console.log(action);
 }
 }

+ 9 - 4
router/index.js

@@ -4,8 +4,8 @@ export const router = express.Router();
 // Controllers
 // Controllers
 import { Login, submitLogin, Logout } from "../controllers/login.js";
 import { Login, submitLogin, Logout } from "../controllers/login.js";
 import { Register, submitRegister } from "../controllers/register.js";
 import { Register, submitRegister } from "../controllers/register.js";
-import { Dashboard, Start, Stop, Pause, Restart, Logs, Modals, Stats, Hide, Reset, Chart, Installs, SSE, Card, updateCards, Containers } from "../controllers/dashboard.js";
-import { Apps, appSearch } from "../controllers/apps.js";
+import { Dashboard, Start, Stop, Pause, Restart, Logs, Modals, Stats, Hide, Reset, Chart, Installs, SSE, Card, updateCards, Containers, Action } from "../controllers/dashboard.js";
+import { Apps, appSearch, InstallModal, LearnMore } from "../controllers/apps.js";
 import { Users } from "../controllers/users.js";
 import { Users } from "../controllers/users.js";
 import { Images, removeImage } from "../controllers/images.js";
 import { Images, removeImage } from "../controllers/images.js";
 import { Networks, removeNetwork } from "../controllers/networks.js";
 import { Networks, removeNetwork } from "../controllers/networks.js";
@@ -28,15 +28,18 @@ const auth = (req, res, next) => {
 
 
 // Admin routes
 // Admin routes
 router.get("/", auth, Dashboard);
 router.get("/", auth, Dashboard);
+router.get("/action/:action", auth, Action);
+
 router.post("/start", auth, Start);
 router.post("/start", auth, Start);
 router.post("/stop", auth, Stop);
 router.post("/stop", auth, Stop);
 router.post("/pause", auth, Pause);
 router.post("/pause", auth, Pause);
 router.post("/restart", auth, Restart);
 router.post("/restart", auth, Restart);
+router.post("/hide", auth, Hide);
+router.post("/reset", auth, Reset);
+
 router.get("/logs", auth, Logs);
 router.get("/logs", auth, Logs);
 router.get ("/modals", auth, Modals);
 router.get ("/modals", auth, Modals);
 router.get("/stats", auth, Stats);
 router.get("/stats", auth, Stats);
-router.post("/hide", auth, Hide);
-router.post("/reset", auth, Reset);
 router.get("/chart", auth, Chart);
 router.get("/chart", auth, Chart);
 router.get("/installs", auth, Installs);
 router.get("/installs", auth, Installs);
 router.get("/sse_event", auth, SSE);
 router.get("/sse_event", auth, SSE);
@@ -56,6 +59,8 @@ router.post("/removeNetwork", auth, removeNetwork);
 router.get("/apps", auth, Apps);
 router.get("/apps", auth, Apps);
 router.get("/apps/:page", auth, Apps);
 router.get("/apps/:page", auth, Apps);
 router.post("/apps", auth, appSearch);
 router.post("/apps", auth, appSearch);
+router.get("/install_modal", auth, InstallModal)
+router.get("/learn_more", auth, LearnMore)
 
 
 router.get("/users", auth, Users);
 router.get("/users", auth, Users);
 router.get("/syslogs", auth, Syslogs);
 router.get("/syslogs", auth, Syslogs);

+ 1 - 0
views/apps.html

@@ -8,6 +8,7 @@
     <!-- CSS files -->
     <!-- CSS files -->
     <link href="/css/tabler.min.css" rel="stylesheet"/>
     <link href="/css/tabler.min.css" rel="stylesheet"/>
     <link href="/css/demo.min.css" rel="stylesheet"/>
     <link href="/css/demo.min.css" rel="stylesheet"/>
+    <script src="/js/htmx.min.js"></script>
     <style>
     <style>
 			@import url('/fonts/inter.css');
 			@import url('/fonts/inter.css');
 			:root {
 			:root {

+ 1 - 1
views/dashboard.html

@@ -148,7 +148,7 @@
 
 
             <!-- HTMX -->
             <!-- HTMX -->
             <div class="col-12">
             <div class="col-12">
-              <div class="row row-cards" data-hx-get="/new_cards" data-hx-trigger="sse:update" data-hx-swap="beforeend" hx-target="#containers">
+              <div class="row row-cards" data-hx-get="/new_cards" data-hx-trigger="sse:update" data-hx-swap="afterbegin" hx-target="#containers">
               </div>
               </div>
             </div>
             </div>
             
             

+ 136 - 137
views/modals/install.html

@@ -1,15 +1,15 @@
-<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-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
         <div class="modal-content">
         <div class="modal-content">
             <div class="modal-header">
             <div class="modal-header">
-            <h5 class="modal-title">Install ${data.title}</h5>
+            <h5 class="modal-title">Install AppName</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             </div>
 
 
             
             
             <div class="modal-body">
             <div class="modal-body">
             
             
-                <pre class="text-secondary">${note}</pre>
+                <pre class="text-secondary">AppNote</pre>
                 
                 
                 <form action="/install" name="${form_id}_install" id="${form_id}_install" method="POST">
                 <form action="/install" name="${form_id}_install" id="${form_id}_install" method="POST">
                 
                 
@@ -17,17 +17,17 @@
                     
                     
                     <div class="col-lg-6">
                     <div class="col-lg-6">
                     <label class="form-label">Container Name: </label>
                     <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}"/>
+                    <input type="text" class="form-control" name="service_name" value="AppName" hidden/>
+                    <input type="text" class="form-control" name="name" value="AppName"/>
                     </div>
                     </div>
                     <div class="col-lg-3">
                     <div class="col-lg-3">
                     <label class="form-label">Image: </label>
                     <label class="form-label">Image: </label>
-                    <input type="text" class="form-control" name="image" value="${source}"/>
+                    <input type="text" class="form-control" name="image" value="AppImage"/>
                     </div>
                     </div>
                     <div class="col-lg-3">
                     <div class="col-lg-3">
                     <label class="form-label">Restart Policy: </label>
                     <label class="form-label">Restart Policy: </label>
                     <select class="form-select" name="restart_policy">
                     <select class="form-select" name="restart_policy">
-                        <option value="${data.restart_policy}" selected hidden>${data.restart_policy}</option>
+                        <option value="RestartPolicy" selected hidden>RestartPolicy</option>
                         <option value="unless-stopped">unless-stopped</option>
                         <option value="unless-stopped">unless-stopped</option>
                         <option value="on-failure">on-failure</option>
                         <option value="on-failure">on-failure</option>
                         <option value="never">never</option>
                         <option value="never">never</option>
@@ -40,7 +40,7 @@
                 <div class="form-selectgroup-boxes row mb-3">
                 <div class="form-selectgroup-boxes row mb-3">
                 <div class="col">
                 <div class="col">
                     <label class="form-selectgroup-item">
                     <label class="form-selectgroup-item">
-                    <input type="radio" name="net_mode" value="host" class="form-selectgroup-input" ${net_host}>
+                    <input type="radio" name="net_mode" value="host" class="form-selectgroup-input" NetHost>
                     <span class="form-selectgroup-label d-flex align-items-center p-3">
                     <span class="form-selectgroup-label d-flex align-items-center p-3">
                         <span class="me-3">
                         <span class="me-3">
                         <span class="form-selectgroup-check"></span>
                         <span class="form-selectgroup-check"></span>
@@ -54,7 +54,7 @@
                 </div>
                 </div>
                 <div class="col">
                 <div class="col">
                     <label class="form-selectgroup-item">
                     <label class="form-selectgroup-item">
-                    <input type="radio" name="net_mode" value="${net_name}" class="form-selectgroup-input" ${net_bridge}>
+                    <input type="radio" name="net_mode" value="NetName" class="form-selectgroup-input" NetBridge>
                     <span class="form-selectgroup-label d-flex align-items-center p-3">
                     <span class="form-selectgroup-label d-flex align-items-center p-3">
                         <span class="me-3">
                         <span class="me-3">
                         <span class="form-selectgroup-check"></span>
                         <span class="form-selectgroup-check"></span>
@@ -68,7 +68,7 @@
                 </div>
                 </div>
                 <div class="col">
                 <div class="col">
                     <label class="form-selectgroup-item">
                     <label class="form-selectgroup-item">
-                    <input type="radio" name="net_mode" value="docker" class="form-selectgroup-input" ${net_docker}>
+                    <input type="radio" name="net_mode" value="docker" class="form-selectgroup-input" NetDocker>
                     <span class="form-selectgroup-label d-flex align-items-center p-3">
                     <span class="form-selectgroup-label d-flex align-items-center p-3">
                     <span class="me-3">
                     <span class="me-3">
                         <span class="form-selectgroup-check"></span>
                         <span class="form-selectgroup-check"></span>
@@ -82,33 +82,33 @@
                 </div>
                 </div>
             </div>
             </div>
 
 
-            <div class="accordion" id="${modal}-accordion">
+            <div class="accordion" id="ModalName-accordion">
                 <div class="accordion-item">
                 <div class="accordion-item">
                 <h2 class="accordion-header" id="heading-1">
                 <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">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false">
                     Ports
                     Ports
                     </button>
                     </button>
                 </h2>
                 </h2>
-                <div id="collapse-1" class="accordion-collapse collapse" data-bs-parent="#${modal}-accordion">
+                <div id="collapse-1" class="accordion-collapse collapse" data-bs-parent="#ModalName-accordion">
                     <div class="accordion-body pt-0">
                     <div class="accordion-body pt-0">
 
 
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" name="port0" type="checkbox" ${ports_data[0].check}>
+                        <input class="form-check-input" name="port0" type="checkbox" Port0Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
                         <label class="form-label">External Port</label>
                         <label class="form-label">External Port</label>
-                        <input type="text" class="form-control" name="port_0_external" value="${ports_data[0].external}"/>
+                        <input type="text" class="form-control" name="port_0_external" value="Port0External"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
                         <label class="form-label">Internal Port</label>
                         <label class="form-label">Internal Port</label>
-                        <input type="text" class="form-control" name="port_0_internal" value="${ports_data[0].internal}"/>
+                        <input type="text" class="form-control" name="port_0_internal" value="Port0Internal"/>
                         </div>
                         </div>
                         <div class="col-lg-2">
                         <div class="col-lg-2">
                         <label class="form-label">Protocol</label>
                         <label class="form-label">Protocol</label>
                         <select class="form-select" name="port_0_protocol">
                         <select class="form-select" name="port_0_protocol">
-                            <option value="${ports_data[0].protocol}" selected hidden>${ports_data[0].protocol}</option>
+                            <option value="Port0Protocol" selected hidden>Port0Protocol</option>
                             <option value="tcp">tcp</option>
                             <option value="tcp">tcp</option>
                             <option value="udp">udp</option>
                             <option value="udp">udp</option>
                         </select>
                         </select>
@@ -117,17 +117,17 @@
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" name="port1" type="checkbox" ${ports_data[1].check}>
+                        <input class="form-check-input" name="port1" type="checkbox" Port1Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="port_1_external" value="${ports_data[1].external}"/>
+                        <input type="text" class="form-control" name="port_1_external" value="Port1External"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="port_1_internal" value="${ports_data[1].internal}"/>
+                        <input type="text" class="form-control" name="port_1_internal" value="Port1Internal"/>
                         </div>
                         </div>
                         <div class="col-lg-2">
                         <div class="col-lg-2">
                         <select class="form-select" name="port_1_protocol">
                         <select class="form-select" name="port_1_protocol">
-                            <option value="${ports_data[1].protocol}" selected hidden>${ports_data[1].protocol}</option>
+                            <option value="Port1Protocol" selected hidden>Port1Protocol</option>
                             <option value="tcp">tcp</option>
                             <option value="tcp">tcp</option>
                             <option value="udp">udp</option>
                             <option value="udp">udp</option>
                         </select>
                         </select>
@@ -136,17 +136,17 @@
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" name="port2" type="checkbox" ${ports_data[2].check}>
+                        <input class="form-check-input" name="port2" type="checkbox" Port2Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="port_2_external" value="${ports_data[2].external}"/>
+                        <input type="text" class="form-control" name="port_2_external" value="Port2External"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="port_2_internal" value="${ports_data[2].internal}"/>
+                        <input type="text" class="form-control" name="port_2_internal" value="Port2Internal"/>
                         </div>
                         </div>
                         <div class="col-lg-2">
                         <div class="col-lg-2">
                         <select class="form-select" name="port_2_protocol">
                         <select class="form-select" name="port_2_protocol">
-                            <option value="${ports_data[2].protocol}" selected hidden>${ports_data[2].protocol}</option>
+                            <option value="Port2Protocol" selected hidden>Port2Protocol</option>
                             <option value="tcp">tcp</option>
                             <option value="tcp">tcp</option>
                             <option value="udp">udp</option>
                             <option value="udp">udp</option>
                         </select>
                         </select>
@@ -155,17 +155,17 @@
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" name="port3" type="checkbox" ${ports_data[3].check}>
+                        <input class="form-check-input" name="port3" type="checkbox" Port3Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="port_3_external" value="${ports_data[3].external}"/>
+                        <input type="text" class="form-control" name="port_3_external" value="Port3External"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="port_3_internal" value="${ports_data[3].internal}"/>
+                        <input type="text" class="form-control" name="port_3_internal" value="Port3Internal"/>
                         </div>
                         </div>
                         <div class="col-lg-2">
                         <div class="col-lg-2">
                         <select class="form-select" name="port_3_protocol">
                         <select class="form-select" name="port_3_protocol">
-                            <option value="${ports_data[3].protocol}" selected hidden>${ports_data[3].protocol}</option>
+                            <option value="Port3Protocol" selected hidden>Port3Protocol</option>
                             <option value="tcp">tcp</option>
                             <option value="tcp">tcp</option>
                             <option value="udp">udp</option>
                             <option value="udp">udp</option>
                         </select>
                         </select>
@@ -174,17 +174,17 @@
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" name="port4" type="checkbox" ${ports_data[4].check}>
+                        <input class="form-check-input" name="port4" type="checkbox" Port4Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="port_4_external" value="${ports_data[4].external}"/>
+                        <input type="text" class="form-control" name="port_4_external" value="Port4External"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="port_4_internal" value="${ports_data[4].internal}"/>
+                        <input type="text" class="form-control" name="port_4_internal" value="Port4Internal"/>
                         </div>
                         </div>
                         <div class="col-lg-2">
                         <div class="col-lg-2">
                         <select class="form-select" name="port_4_protocol">
                         <select class="form-select" name="port_4_protocol">
-                            <option value="${ports_data[4].protocol}" selected hidden>${ports_data[4].protocol}</option>
+                            <option value="Port4Protocol" selected hidden>Port4Protocol</option>
                             <option value="tcp">tcp</option>
                             <option value="tcp">tcp</option>
                             <option value="udp">udp</option>
                             <option value="udp">udp</option>
                         </select>
                         </select>
@@ -193,17 +193,17 @@
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" name="port5" type="checkbox" ${ports_data[5].check}>
+                        <input class="form-check-input" name="port5" type="checkbox" Port5Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="port_5_external" value="${ports_data[5].external}"/>
+                        <input type="text" class="form-control" name="port_5_external" value="Port5External"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="port_5_internal" value="${ports_data[5].internal}"/>
+                        <input type="text" class="form-control" name="port_5_internal" value="Port5Internal"/>
                         </div>
                         </div>
                         <div class="col-lg-2">
                         <div class="col-lg-2">
                         <select class="form-select" name="port_5_protocol">
                         <select class="form-select" name="port_5_protocol">
-                            <option value="${ports_data[5].protocol}" selected hidden>${ports_data[5].protocol}</option>
+                            <option value="Port5Protocol" selected hidden>Port5Protocol</option>
                             <option value="tcp">tcp</option>
                             <option value="tcp">tcp</option>
                             <option value="udp">udp</option>
                             <option value="udp">udp</option>
                         </select>
                         </select>
@@ -220,23 +220,23 @@
                     Volumes
                     Volumes
                     </button>
                     </button>
                 </h2>
                 </h2>
-                <div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#${modal}-accordion">
+                <div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#ModalName-accordion">
                     <div class="accordion-body pt-0">
                     <div class="accordion-body pt-0">
 
 
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                    <input class="form-check-input" name="volume0" type="checkbox" ${volumes_data[0].check}>
+                    <input class="form-check-input" name="volume0" type="checkbox" Volume0Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                    <input type="text" class="form-control" name="volume_0_bind" value="${volumes_data[0].bind}"/>
+                    <input type="text" class="form-control" name="volume_0_bind" value="Volume0Bind"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                    <input type="text" class="form-control" name="volume_0_container" value="${volumes_data[0].container}"/>
+                    <input type="text" class="form-control" name="volume_0_container" value="Volume0Container"/>
                     </div>
                     </div>
                     <div class="col-lg-2">
                     <div class="col-lg-2">
                     <select class="form-select" name="volume_0_readwrite">
                     <select class="form-select" name="volume_0_readwrite">
-                        <option value="${volumes_data[0].readwrite}" selected hidden>${volumes_data[0].readwrite}</option>
+                        <option value="Volume0RW" selected hidden>Volume0RW</option>
                         <option value="rw">rw</option>
                         <option value="rw">rw</option>
                         <option value="ro">ro</option>
                         <option value="ro">ro</option>
                     </select>
                     </select>
@@ -245,17 +245,17 @@
 
 
                 <div class="row mb-1 align-items-end">
                 <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                    <input class="form-check-input" name="volume1" type="checkbox" ${volumes_data[1].check}>
+                    <input class="form-check-input" name="volume1" type="checkbox" Volume1Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                    <input type="text" class="form-control" name="volume_1_bind" value="${volumes_data[1].bind}"/>
+                    <input type="text" class="form-control" name="volume_1_bind" value="Volume1Bind"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                    <input type="text" class="form-control" name="volume_1_container" value="${volumes_data[1].container}"/>
+                    <input type="text" class="form-control" name="volume_1_container" value="Volume1Container"/>
                     </div>
                     </div>
                     <div class="col-lg-2">
                     <div class="col-lg-2">
                     <select class="form-select" name="volume_1_readwrite">
                     <select class="form-select" name="volume_1_readwrite">
-                        <option value="${volumes_data[1].readwrite}" selected hidden>${volumes_data[1].readwrite}</option>
+                        <option value="Volume1RW" selected hidden>Volume1RW</option>
                         <option value="rw">rw</option>
                         <option value="rw">rw</option>
                         <option value="ro">ro</option>
                         <option value="ro">ro</option>
                     </select>
                     </select>
@@ -264,17 +264,17 @@
 
 
                 <div class="row mb-1 align-items-end">
                 <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                    <input class="form-check-input" name="volume2" type="checkbox" ${volumes_data[2].check}>
+                    <input class="form-check-input" name="volume2" type="checkbox" Volume2Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                    <input type="text" class="form-control" name="volume_2_bind" value="${volumes_data[2].bind}"/>
+                    <input type="text" class="form-control" name="volume_2_bind" value="Volume2Bind"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                    <input type="text" class="form-control" name="volume_2_container" value="${volumes_data[2].container}"/>
+                    <input type="text" class="form-control" name="volume_2_container" value="Volume2Container"/>
                     </div>
                     </div>
                     <div class="col-lg-2">
                     <div class="col-lg-2">
                     <select class="form-select" name="volume_2_readwrite">
                     <select class="form-select" name="volume_2_readwrite">
-                        <option value="${volumes_data[2].readwrite}" selected hidden>${volumes_data[2].readwrite}</option>
+                        <option value="Volume2RW" selected hidden>Volume2RW</option>
                         <option value="rw">rw</option>
                         <option value="rw">rw</option>
                         <option value="ro">ro</option>
                         <option value="ro">ro</option>
                     </select>
                     </select>
@@ -283,17 +283,17 @@
 
 
                 <div class="row mb-1 align-items-end">
                 <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                    <input class="form-check-input" name="volume3" type="checkbox" ${volumes_data[3].check}>
+                    <input class="form-check-input" name="volume3" type="checkbox" Volume3Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                    <input type="text" class="form-control" name="volume_3_bind" value="${volumes_data[3].bind}"/>
+                    <input type="text" class="form-control" name="volume_3_bind" value="Volume3Bind"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                    <input type="text" class="form-control" name="volume_3_container" value="${volumes_data[3].container}"/>
+                    <input type="text" class="form-control" name="volume_3_container" value="Volume3Container"/>
                     </div>
                     </div>
                     <div class="col-lg-2">
                     <div class="col-lg-2">
                     <select class="form-select" name="volume_3_readwrite">
                     <select class="form-select" name="volume_3_readwrite">
-                        <option value="${volumes_data[3].readwrite}" selected hidden>${volumes_data[3].readwrite}</option>
+                        <option value="Volume3RW" selected hidden>Volume3RW</option>
                         <option value="rw">rw</option>
                         <option value="rw">rw</option>
                         <option value="ro">ro</option>
                         <option value="ro">ro</option>
                     </select>
                     </select>
@@ -302,17 +302,17 @@
 
 
                 <div class="row mb-1 align-items-end">
                 <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                    <input class="form-check-input" name="volume4" type="checkbox" ${volumes_data[4].check}>
+                    <input class="form-check-input" name="volume4" type="checkbox" Volume4Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                    <input type="text" class="form-control" name="volume_4_bind" value="${volumes_data[4].bind}"/>
+                    <input type="text" class="form-control" name="volume_4_bind" value="Volume4Bind"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                    <input type="text" class="form-control" name="volume_4_container" value="${volumes_data[4].container}"/>
+                    <input type="text" class="form-control" name="volume_4_container" value="Volume4Container"/>
                     </div>
                     </div>
                     <div class="col-lg-2">
                     <div class="col-lg-2">
                     <select class="form-select" name="volume_4_readwrite">
                     <select class="form-select" name="volume_4_readwrite">
-                        <option value="${volumes_data[4].readwrite}" selected hidden>${volumes_data[4].readwrite}</option>
+                        <option value="Volume4RW" selected hidden>Volume4RW</option>
                         <option value="rw">rw</option>
                         <option value="rw">rw</option>
                         <option value="ro">ro</option>
                         <option value="ro">ro</option>
                     </select>
                     </select>
@@ -321,17 +321,17 @@
 
 
                 <div class="row mb-1 align-items-end">
                 <div class="row mb-1 align-items-end">
                 <div class="col-auto">
                 <div class="col-auto">
-                    <input class="form-check-input" name="volume5" type="checkbox" ${volumes_data[5].check}>
+                    <input class="form-check-input" name="volume5" type="checkbox" Volume5Check>
                 </div>
                 </div>
                 <div class="col">
                 <div class="col">
-                    <input type="text" class="form-control" name="volume_5_bind" value="${volumes_data[5].bind}"/>
+                    <input type="text" class="form-control" name="volume_5_bind" value="Volume5Bind"/>
                 </div>
                 </div>
                 <div class="col">
                 <div class="col">
-                    <input type="text" class="form-control" name="volume_5_container" value="${volumes_data[5].container}"/>
+                    <input type="text" class="form-control" name="volume_5_container" value="Volume5Container"/>
                 </div>
                 </div>
                 <div class="col-lg-2">
                 <div class="col-lg-2">
                     <select class="form-select" name="volume_5_readwrite">
                     <select class="form-select" name="volume_5_readwrite">
-                    <option value="${volumes_data[5].readwrite}" selected hidden>${volumes_data[5].readwrite}</option>
+                    <option value="Volume5RW" selected hidden>Volume5RW</option>
                     <option value="rw">rw</option>
                     <option value="rw">rw</option>
                     <option value="ro">ro</option>
                     <option value="ro">ro</option>
                     </select>
                     </select>
@@ -348,158 +348,158 @@
                     Environment Variables
                     Environment Variables
                     </button>
                     </button>
                 </h2>
                 </h2>
-                <div id="collapse-3" class="accordion-collapse collapse" data-bs-parent="#${modal}-accordion">
+                <div id="collapse-3" class="accordion-collapse collapse" data-bs-parent="#ModalName-accordion">
                     <div class="accordion-body pt-0">
                     <div class="accordion-body pt-0">
 
 
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="env0" ${env_data[0].check}>
+                        <input class="form-check-input" type="checkbox" name="env0" Env0Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
                         <label class="form-label">Variable</label>
                         <label class="form-label">Variable</label>
-                        <input type="text" class="form-control" name="env_0_name" value="${env_data[0].name}"/>
+                        <input type="text" class="form-control" name="env_0_name" value="Env0Name"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
                         <label class="form-label">Value</label>
                         <label class="form-label">Value</label>
-                        <input type="text" class="form-control" name="env_0_default" value="${env_data[0].default}"/>
+                        <input type="text" class="form-control" name="env_0_default" value="Env0Default"/>
                         </div>
                         </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="env1" ${env_data[1].check}>
+                        <input class="form-check-input" type="checkbox" name="env1" Env1Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_1_name" value="${env_data[1].name}"/>
+                        <input type="text" class="form-control" name="env_1_name" value="Env1Name"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_1_default" value="${env_data[1].default}"/>
+                        <input type="text" class="form-control" name="env_1_default" value="Env1Default"/>
                         </div>
                         </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="env2" ${env_data[2].check}>
+                        <input class="form-check-input" type="checkbox" name="env2" Env2Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_2_name" value="${env_data[2].name}"/>
+                        <input type="text" class="form-control" name="env_2_name" value="Env2Name"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_2_default" value="${env_data[2].default}"/>
+                        <input type="text" class="form-control" name="env_2_default" value="Env2Default"/>
                         </div>
                         </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="env3" ${env_data[3].check}>
+                        <input class="form-check-input" type="checkbox" name="env3" Env3Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_3_name" value="${env_data[3].name}"/>
+                        <input type="text" class="form-control" name="env_3_name" value="Env3Name"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_3_default" value="${env_data[3].default}"/>
+                        <input type="text" class="form-control" name="env_3_default" value="Env3Default"/>
                         </div>
                         </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="env4" ${env_data[4].check}>
+                        <input class="form-check-input" type="checkbox" name="env4" Env4Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_4_name" value="${env_data[4].name}"/>
+                        <input type="text" class="form-control" name="env_4_name" value="Env4Name"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_4_default" value="${env_data[4].default}"/>
+                        <input type="text" class="form-control" name="env_4_default" value="Env4Default"/>
                         </div>
                         </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="env5" ${env_data[5].check}>
+                        <input class="form-check-input" type="checkbox" name="env5" Env5Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_5_name" value="${env_data[5].name}"/>
+                        <input type="text" class="form-control" name="env_5_name" value="Env5Name"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_5_default" value="${env_data[5].default}"/>
+                        <input type="text" class="form-control" name="env_5_default" value="Env5Default"/>
                         </div>
                         </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="env6" ${env_data[6].check}>
+                        <input class="form-check-input" type="checkbox" name="env6" Env6Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_6_name" value="${env_data[6].name}"/>
+                        <input type="text" class="form-control" name="env_6_name" value="Env6Name"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_6_default" value="${env_data[6].default}"/>
+                        <input type="text" class="form-control" name="env_6_default" value="Env6Default"/>
                         </div>
                         </div>
                     </div>
                     </div>
 
 
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="env7" ${env_data[7].check}>
+                        <input class="form-check-input" type="checkbox" name="env7" Env7Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_7_name" value="${env_data[7].name}"/>
+                        <input type="text" class="form-control" name="env_7_name" value="Env7Name"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_7_default" value="${env_data[7].default}"/>
+                        <input type="text" class="form-control" name="env_7_default" value="Env7Default"/>
                         </div>
                         </div>
                     </div>
                     </div>
 
 
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="env8" ${env_data[8].check}>
+                        <input class="form-check-input" type="checkbox" name="env8" Env8Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_8_name" value="${env_data[8].name}"/>
+                        <input type="text" class="form-control" name="env_8_name" value="Env8Name"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_8_default" value="${env_data[8].default}"/>
+                        <input type="text" class="form-control" name="env_8_default" value="Env8Default"/>
                         </div>
                         </div>
                     </div>
                     </div>
 
 
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="env9" ${env_data[9].check}>
+                        <input class="form-check-input" type="checkbox" name="env9" Env9Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_9_name" value="${env_data[9].name}"/>
+                        <input type="text" class="form-control" name="env_9_name" value="Env9Name"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_9_default" value="${env_data[9].default}"/>
+                        <input type="text" class="form-control" name="env_9_default" value="Env9Default"/>
                         </div>
                         </div>
                     </div>
                     </div>
 
 
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="env10" ${env_data[10].check}>
+                        <input class="form-check-input" type="checkbox" name="env10" Env10Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_10_name" value="${env_data[10].name}"/>
+                        <input type="text" class="form-control" name="env_10_name" value="Env10Name"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_10_default" value="${env_data[10].default}"/>
+                        <input type="text" class="form-control" name="env_10_default" value="Env10Default"/>
                         </div>
                         </div>
                     </div>
                     </div>
 
 
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                         <div class="col-auto">
                         <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="env11" ${env_data[11].check}>
+                        <input class="form-check-input" type="checkbox" name="env11" Env11Check>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_11_name" value="${env_data[11].name}"/>
+                        <input type="text" class="form-control" name="env_11_name" value="Env11Name"/>
                         </div>
                         </div>
                         <div class="col">
                         <div class="col">
-                        <input type="text" class="form-control" name="env_11_default" value="${env_data[11].default}"/>
+                        <input type="text" class="form-control" name="env_11_default" value="Env11Default"/>
                         </div>
                         </div>
                     </div>
                     </div>
 
 
@@ -515,154 +515,154 @@
                     Labels
                     Labels
                     </button>
                     </button>
                 </h2>
                 </h2>
-                <div id="collapse-4" class="accordion-collapse collapse" data-bs-parent="#${modal}-accordion">
+                <div id="collapse-4" class="accordion-collapse collapse" data-bs-parent="#ModalName-accordion">
                     <div class="accordion-body pt-0">
                     <div class="accordion-body pt-0">
 
 
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="label0" ${label_data[0].check}>
+                        <input class="form-check-input" type="checkbox" name="label0" Label0Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
                         <label class="form-label">Variable</label>
                         <label class="form-label">Variable</label>
-                        <input type="text" class="form-control" name="label_0_name" value="${label_data[0].name}"/>
+                        <input type="text" class="form-control" name="label_0_name" value="Label0Name"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
                         <label class="form-label">Value</label>
                         <label class="form-label">Value</label>
-                        <input type="text" class="form-control" name="label_0_value" value="${label_data[0].value}"/>
+                        <input type="text" class="form-control" name="label_0_value" value="Label0Value"/>
                     </div>
                     </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="label1" ${label_data[1].check}>
+                        <input class="form-check-input" type="checkbox" name="label1" Label1Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_1_name" value="${label_data[1].name}"/>
+                        <input type="text" class="form-control" name="label_1_name" value="Label1Name"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_1_value" value="${label_data[1].value}"/>
+                        <input type="text" class="form-control" name="label_1_value" value="Label1Value"/>
                     </div>
                     </div>
                     </div>
                     </div>
 
 
                     
                     
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="label2" ${label_data[2].check}>
+                        <input class="form-check-input" type="checkbox" name="label2" Label2Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_2_name" value="${label_data[2].name}"/>
+                        <input type="text" class="form-control" name="label_2_name" value="Label2Name"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_2_value" value="${label_data[2].value}"/>
+                        <input type="text" class="form-control" name="label_2_value" value="Label2Value"/>
                     </div>
                     </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="label3" ${label_data[3].check}>
+                        <input class="form-check-input" type="checkbox" name="label3" Label3Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_3_name" value="${label_data[3].name}"/>
+                        <input type="text" class="form-control" name="label_3_name" value="Label3Name"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_3_value" value="${label_data[3].value}"/>
+                        <input type="text" class="form-control" name="label_3_value" value="Label3Value"/>
                     </div>
                     </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="label4" ${label_data[4].check}>
+                        <input class="form-check-input" type="checkbox" name="label4" Label4Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_4_name" value="${label_data[4].name}"/>
+                        <input type="text" class="form-control" name="label_4_name" value="Label4Name"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_4_value" value="${label_data[4].value}"/>
+                        <input type="text" class="form-control" name="label_4_value" value="Label4Value"/>
                     </div>
                     </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="label5" ${label_data[5].check}>
+                        <input class="form-check-input" type="checkbox" name="label5" Label5Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_5_name" value="${label_data[5].name}"/>
+                        <input type="text" class="form-control" name="label_5_name" value="Label5Name"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_5_value" value="${label_data[5].value}"/>
+                        <input type="text" class="form-control" name="label_5_value" value="Label5Value"/>
                     </div>
                     </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="label6" ${label_data[6].check}>
+                        <input class="form-check-input" type="checkbox" name="label6" Label6Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_6_name" value="${label_data[6].name}"/>
+                        <input type="text" class="form-control" name="label_6_name" value="Label6Name"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_6_value" value="${label_data[6].value}"/>
+                        <input type="text" class="form-control" name="label_6_value" value="Label6Value"/>
                     </div>
                     </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="label7" ${label_data[7].check}>
+                        <input class="form-check-input" type="checkbox" name="label7" Label7Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_7_name" value="${label_data[7].name}"/>
+                        <input type="text" class="form-control" name="label_7_name" value="Label7Name"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_7_value" value="${label_data[7].value}"/>
+                        <input type="text" class="form-control" name="label_7_value" value="Label7Value"/>
                     </div>
                     </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="label8" ${label_data[8].check}>
+                        <input class="form-check-input" type="checkbox" name="label8" Label8Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_8_name" value="${label_data[8].name}"/>
+                        <input type="text" class="form-control" name="label_8_name" value="Label8Name"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_8_value" value="${label_data[8].value}"/>
+                        <input type="text" class="form-control" name="label_8_value" value="Label8Value"/>
                     </div>
                     </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="label9" ${label_data[9].check}>
+                        <input class="form-check-input" type="checkbox" name="label9" Label9Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_9_name" value="${label_data[9].name}"/>
+                        <input type="text" class="form-control" name="label_9_name" value="Label9Name"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_9_value" value="${label_data[9].value}"/>
+                        <input type="text" class="form-control" name="label_9_value" value="Label9Value"/>
                     </div>
                     </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="label10" ${label_data[10].check}>
+                        <input class="form-check-input" type="checkbox" name="label10" Label10Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_10_name" value="${label_data[10].name}"/>
+                        <input type="text" class="form-control" name="label_10_name" value="Label10Name"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_10_value" value="${label_data[10].value}"/>
+                        <input type="text" class="form-control" name="label_10_value" value="Label10Value"/>
                     </div>
                     </div>
                     </div>
                     </div>
 
 
                     <div class="row mb-1 align-items-end">
                     <div class="row mb-1 align-items-end">
                     <div class="col-auto">
                     <div class="col-auto">
-                        <input class="form-check-input" type="checkbox" name="label11" ${label_data[11].check}>
+                        <input class="form-check-input" type="checkbox" name="label11" Label11Check>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_11_name" value="${label_data[11].name}"/>
+                        <input type="text" class="form-control" name="label_11_name" value="Label11Name"/>
                     </div>
                     </div>
                     <div class="col">
                     <div class="col">
-                        <input type="text" class="form-control" name="label_11_value" value="${label_data[11].value}"/>
+                        <input type="text" class="form-control" name="label_11_value" value="Label11Value"/>
                     </div>
                     </div>
                     </div>
                     </div>
 
 
@@ -678,7 +678,7 @@
                     Extras
                     Extras
                     </button>
                     </button>
                 </h2>
                 </h2>
-                <div id="collapse-5" class="accordion-collapse collapse" data-bs-parent="#${modal}-accordion">
+                <div id="collapse-5" class="accordion-collapse collapse" data-bs-parent="#ModalName-accordion">
                     <div class="accordion-body pt-0">
                     <div class="accordion-body pt-0">
 
 
 
 
@@ -726,4 +726,3 @@
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>
-</div>

+ 1 - 2
views/modals/learnmore.html

@@ -1,4 +1,4 @@
-<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-dialog modal-sm modal-dialog-centered" role="document">
         <div class="modal-content">
         <div class="modal-content">
             <div class="modal-body">
             <div class="modal-body">
@@ -11,4 +11,3 @@
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>
-</div>

+ 2 - 2
views/partials/appCard.html

@@ -9,11 +9,11 @@
             </div>
             </div>
         </div>
         </div>
         <div class="d-flex">
         <div class="d-flex">
-            <a href="#" class="card-btn" data-bs-toggle="modal" data-bs-target="#${modal}-info">
+            <a href="#" class="card-btn" data-hx-get="/learn_more" data-hx-target="#modals-here" hx-swap="innerHTML" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">
             <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>
             <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
               Learn More
             </a>
             </a>
-            <a href="" class="card-btn" name="AppName" id="install" data-hx-get="" data-hx-target="#modals-here" hx-swap="innerHTML" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">
+            <a href="" class="card-btn" name="AppName" id="install" data-hx-get="/install_modal" data-hx-target="#modals-here" hx-swap="innerHTML" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">
             <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>
             <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
               Install
             </a>
             </a>

+ 4 - 4
views/partials/containerCard.html

@@ -9,16 +9,16 @@
           <div class="ms-auto lh-1">
           <div class="ms-auto lh-1">
             <div class="card-actions btn-actions">
             <div class="card-actions btn-actions">
               <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="#AppNameState" name="AppName" id="AppState" ${disable}>
+                <button class="btn-action" title="Start" data-hx-post="/action/start" data-hx-trigger="click" data-hx-target="#AppNameState" name="AppName" id="AppState" ${disable}>
                   <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>
                   <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>
-                <button class="btn-action" title="Stop" data-hx-post="/stop" data-hx-trigger="click" data-hx-target="#AppNameState" name="AppName" id="AppState" ${disable}>
+                <button class="btn-action" title="Stop" data-hx-post="/action/stop" data-hx-trigger="click" data-hx-target="#AppNameState" name="AppName" id="AppState" ${disable}>
                   <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>
                   <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>
-                <button class="btn-action" title="Pause" data-hx-post="/pause" data-hx-trigger="click" data-hx-target="#AppNameState" name="AppName" id="AppState" ${disable}>
+                <button class="btn-action" title="Pause" data-hx-post="/action/pause" data-hx-trigger="click" data-hx-target="#AppNameState" name="AppName" id="AppState" ${disable}>
                   <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>
                   <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>
-                <button class="btn-action" title="Restart" data-hx-post="/restart" data-hx-trigger="click" data-hx-target="#AppNameState" name="AppName" id="AppState" ${disable}>
+                <button class="btn-action" title="Restart" data-hx-post="/action/restart" data-hx-trigger="click" data-hx-target="#AppNameState" name="AppName" id="AppState" ${disable}>
                   <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>                          
                   <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>
                 </button>
                 <div class="dropdown">
                 <div class="dropdown">