From af211739fb51aa5f10807c1c1964df5d95eb2e23 Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Sun, 28 Mar 2021 16:51:34 +0200
Subject: [PATCH] confirmation modal before deleting bookmarks

---
 htdocs/css/admin.css                   |  2 +-
 htdocs/lib/settings/BookmarkTable.js   | 26 ++++++++++++++++++++++----
 htdocs/settings/bookmarks.html         | 19 +++++++++++++++++++
 owrx/controllers/settings/bookmarks.py |  2 +-
 4 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/htdocs/css/admin.css b/htdocs/css/admin.css
index 0369d72..fc2bfe6 100644
--- a/htdocs/css/admin.css
+++ b/htdocs/css/admin.css
@@ -80,7 +80,7 @@ h1 {
     padding-right: 15px;
 }
 
-table.bookmarks .frequency {
+.bookmarks table .frequency {
     text-align: right;
 }
 
diff --git a/htdocs/lib/settings/BookmarkTable.js b/htdocs/lib/settings/BookmarkTable.js
index e98c0c5..c01f3dc 100644
--- a/htdocs/lib/settings/BookmarkTable.js
+++ b/htdocs/lib/settings/BookmarkTable.js
@@ -215,19 +215,37 @@ $.fn.bookmarktable = function() {
             };
         });
 
-        $table.on('click', '.bookmark-delete', function(e) {
-            var $button = $(e.target);
-            $button.prop('disabled', true);
-            var $row = $button.parents('tr');
+        var $modal = $('#deleteModal').modal({show:false});
+
+        $modal.on('hidden.bs.modal', function() {
+            var $row = $modal.data('row');
+            if (!$row) return;
+            $row.find('.bookmark-delete').prop('disabled', false);
+            $modal.removeData('row');
+        });
+
+        $modal.on('click', '.confirm', function() {
+            var $row = $modal.data('row');
+            if (!$row) return;
             $.ajax(document.location.href + "/" + $row.data('id'), {
                 data: "{}",
                 contentType: 'application/json',
                 method: 'DELETE'
             }).done(function(){
                 $row.remove();
+                $modal.modal('hide');
             });
         });
 
+        $table.on('click', '.bookmark-delete', function(e) {
+            var $button = $(e.target);
+            $button.prop('disabled', true);
+
+            var $row = $button.parents('tr');
+            $modal.data('row', $row);
+            $modal.modal('show');
+        });
+
         $(this).on('click', '.bookmark-add', function() {
             if ($table.find('tr[data-id="new"]').length) return;
 
diff --git a/htdocs/settings/bookmarks.html b/htdocs/settings/bookmarks.html
index 27ad28c..1a25d23 100644
--- a/htdocs/settings/bookmarks.html
+++ b/htdocs/settings/bookmarks.html
@@ -24,4 +24,23 @@ ${header}
         </div>
     </div>
 </div>
+<div class="modal" id="deleteModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5>Please confirm</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>Do you really want to delete this bookmark?</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary cancel" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-danger confirm">Delete</button>
+            </div>
+        </div>
+    </div>
+</div>
 </body>
\ No newline at end of file
diff --git a/owrx/controllers/settings/bookmarks.py b/owrx/controllers/settings/bookmarks.py
index 2a4fb3a..38de38a 100644
--- a/owrx/controllers/settings/bookmarks.py
+++ b/owrx/controllers/settings/bookmarks.py
@@ -20,7 +20,7 @@ class BookmarksController(AuthorizationMixin, WebpageController):
         bookmarks = Bookmarks.getSharedInstance()
 
         return """
-            <table class="table bookmarks" data-modes='{modes}'>
+            <table class="table" data-modes='{modes}'>
                 <tr>
                     <th>Name</th>
                     <th class="frequency">Frequency</th>