From 956b7ee056cd65f79c285e6c5ae5e0d78163ecd1 Mon Sep 17 00:00:00 2001
From: Raven Scott <raven@ssh.surf>
Date: Fri, 29 Nov 2024 20:17:53 -0500
Subject: [PATCH] edit: add modal asking user if they really want to delete a
 container

---
 app.js     | 12 ++++++++++--
 index.html | 19 +++++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/app.js b/app.js
index 01cdc5e..86540a6 100644
--- a/app.js
+++ b/app.js
@@ -341,7 +341,6 @@ function renderContainers(containers) {
   });
 }
 
-// Add event listeners to action buttons
 function addActionListeners(row, container) {
   const startBtn = row.querySelector('.action-start');
   const stopBtn = row.querySelector('.action-stop');
@@ -357,7 +356,16 @@ function addActionListeners(row, container) {
   });
 
   removeBtn.addEventListener('click', () => {
-    sendCommand('removeContainer', { id: container.Id });
+    // Show the delete confirmation modal
+    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
+    deleteModal.show();
+
+    // Handle confirmation button
+    const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
+    confirmDeleteBtn.onclick = () => {
+      sendCommand('removeContainer', { id: container.Id }); // Remove the container
+      deleteModal.hide(); // Close the modal
+    };
   });
 
   terminalBtn.addEventListener('click', () => {
diff --git a/index.html b/index.html
index 928804c..f500631 100644
--- a/index.html
+++ b/index.html
@@ -267,6 +267,25 @@
     <div id="terminal-resize-handle"></div> <!-- Resize handle -->
   </div>
 
+  <!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content bg-dark text-white">
+      <div class="modal-header">
+        <h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        Are you sure you want to delete this container?
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button type="button" id="confirm-delete-btn" class="btn btn-danger">Delete</button>
+      </div>
+    </div>
+  </div>
+</div>
+
   <div id="tray"></div>
 
   <!-- xterm.js -->