confirmation modal before deleting bookmarks

htdocs/css/admin.css

@@ -80,7 +80,7 @@ h1 {
     padding-right: 15px;
 }
 
-table.bookmarks .frequency {
+.bookmarks table .frequency {
     text-align: right;
 }
 

htdocs/lib/settings/BookmarkTable.js

@@ -215,19 +215,37 @@ $.fn.bookmarktable = function() {
             };
         });
 
-        $table.on('click', '.bookmark-delete', function(e) {
+        var $modal = $('#deleteModal').modal({show:false});
-            var $button = $(e.target);
+
-            $button.prop('disabled', true);
+        $modal.on('hidden.bs.modal', function() {
-            var $row = $button.parents('tr');
+            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;
 

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>

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>