From 605e30c368a5d688c62dadd01a73d954abae7c5d Mon Sep 17 00:00:00 2001
From: Raven Scott <raven@ssh.surf>
Date: Mon, 2 Dec 2024 05:58:22 -0500
Subject: [PATCH] update

---
 app.js                 | 35 ++++++++-----------
 index.html             | 78 +++++++++++++++++++++++++-----------------
 libs/templateDeploy.js |  2 +-
 3 files changed, 61 insertions(+), 54 deletions(-)

diff --git a/app.js b/app.js
index a4e8421..d930c52 100644
--- a/app.js
+++ b/app.js
@@ -266,33 +266,26 @@ function hideStatusIndicator() {
   }
 }
 // Show Alert
+// Show alert message
 function showAlert(type, message) {
-  const alertContainer = document.getElementById('alert-container');
+  const alertBox = document.createElement('div');
+  alertBox.className = `alert alert-${type}`;
+  alertBox.textContent = message;
 
-  // Create alert element
-  const alert = document.createElement('div');
-  alert.className = `alert ${type}`;
-  alert.innerHTML = `
-    <span>${message}</span>
-    <button class="close-btn" aria-label="Close">&times;</button>
-  `;
+  const container = document.querySelector('#alert-container');
+  if (container) {
+      container.appendChild(alertBox);
 
-  // Add close button functionality
-  const closeButton = alert.querySelector('.close-btn');
-  closeButton.addEventListener('click', () => {
-    alert.remove(); // Remove alert on close
-  });
-
-  // Append alert to container
-  alertContainer.appendChild(alert);
-
-  // Automatically remove alert after 5 seconds
-  setTimeout(() => {
-    alert.remove();
-  }, 5000);
+      setTimeout(() => {
+          container.removeChild(alertBox);
+      }, 5000);
+  } else {
+      console.warn('[WARN] Alert container not found.');
+  }
 }
 
 
+
 // Collapse Sidebar Functionality
 const collapseSidebarBtn = document.getElementById('collapse-sidebar-btn');
 collapseSidebarBtn.addEventListener('click', () => {
diff --git a/index.html b/index.html
index d1c44ba..64e33a9 100644
--- a/index.html
+++ b/index.html
@@ -252,39 +252,52 @@
     }
 
     #alert-container {
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-      z-index: 1055;
-      /* Ensure it overlays important elements only */
-      display: flex;
-      flex-direction: column-reverse;
-      /* Stack alerts upwards */
-      gap: 10px;
-      /* Add space between alerts */
-      pointer-events: none;
-      /* Prevent container from blocking clicks */
-    }
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1055;
+  /* Ensure it overlays important elements only */
+  display: flex;
+  flex-direction: column-reverse;
+  /* Stack alerts upwards */
+  gap: 10px;
+  /* Add space between alerts */
+  pointer-events: none;
+  /* Prevent container from blocking clicks */
+}
 
-    .alert {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      max-width: 80%;
-      padding: 12px 20px;
-      background-color: #2b2b2b;
-      color: #e0e0e0;
-      border-radius: 6px;
-      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
-      font-family: Arial, sans-serif;
-      font-size: 14px;
-      animation: fadeIn 0.3s ease-out, fadeOut 4.5s ease-in forwards;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      pointer-events: auto;
-      /* Allow alerts to be interactive */
-    }
+#alert-container {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1055;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 10px;
+  pointer-events: none;
+  /* Prevent container from blocking clicks */
+}
+
+.alert {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px;
+  background-color: #2b2b2b;
+  color: #e0e0e0;
+  border-radius: 6px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  animation: fadeIn 0.3s ease-out, fadeOut 4.5s ease-in forwards;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: auto;
+  /* Allow alerts to be interactive */
+}
 
     .alert.success {
       border-left: 6px solid #28a745;
@@ -673,6 +686,7 @@
   <div id="alert-container" class="position-fixed top-0 start-50 translate-middle-x mt-3"
     style="z-index: 1051; max-width: 90%;"></div>
 
+
   <!-- xterm.js -->
   <script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script>
 
diff --git a/libs/templateDeploy.js b/libs/templateDeploy.js
index 22732fb..22d34c6 100644
--- a/libs/templateDeploy.js
+++ b/libs/templateDeploy.js
@@ -230,7 +230,7 @@ deployForm.addEventListener('submit', async (e) => {
         // Wait for deployment to complete
         const successResponse = await deployDockerContainer(deployPayload);
         hideStatusIndicator();
-        showAlert('success', successResponse.message);
+        // showAlert('success', successResponse.message);
     } catch (error) {
         console.error('[ERROR] Failed to deploy container:', error.message);
         hideStatusIndicator();