Add group delete feature to history table

* This helps to prevent accidental row deletes

data/interfaces/default/history.html

@@ -14,7 +14,11 @@
             <span><i class="fa fa-history"></i> History</span>
         </div>
         <div class="button-bar">
-            <button class="btn btn-danger" data-toggle="button" aria-pressed="false" autocomplete="off" id="row-edit-mode"><i class="fa fa-trash-o"></i> Delete mode</button>&nbsp
+            <span data-toggle="popover" data-placement="left" data-content="Data deleting does not occur until after exiting delete mode." id="delete-message">
+                <button class="btn btn-danger" data-toggle="button" aria-pressed="false" autocomplete="off" id="row-edit-mode">
+                    <i class="fa fa-trash-o"></i> Delete mode
+                </button>&nbsp
+            </span>
             <div class="colvis-button-bar hidden-xs"></div>
         </div>
     </div>
@@ -42,6 +46,24 @@
         </div>
         <div class="modal fade" id="ip-info-modal" tabindex="-1" role="dialog" aria-labelledby="ip-info-modal">
         </div>
+        <div class="modal fade" id="confirm-modal" tabindex="-1" role="dialog" aria-labelledby="confirm-modal">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
+                        <h4 class="modal-title" id="myModalLabel">Confirm Purge</h4>
+                    </div>
+                    <div class="modal-body" style="text-align: center;">
+                        <p>Are you REALLY sure you want to delete this history?</p>
+                        <p>This is permanent and cannot be undone!</p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-dark" data-dismiss="modal">Cancel</button>
+                        <button type="button" class="btn btn-danger btn-ok" data-dismiss="modal" id="confirm-delete">Purge</button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 </%def>
@@ -68,18 +90,53 @@
 
         clearSearchButton('history_table', history_table);
 
-        $('#row-edit-mode').click(function() {
+        var history_to_purge = [];
+        $('#row-edit-mode').on('click', function() {
+            $('#delete-message').popover();
+
             if ($(this).hasClass('active')) {
-                $('.delete-control').each(function() {
+                history_to_purge = [];
+                $('.delete-control button.btn-danger').map(function () {
+                    history_to_purge.push($(this).attr('data-id'));
+                });
+                if (history_to_purge.length > 0) {
+                    $('#confirm-modal').modal();
+                    $('#confirm-modal').one('click', '#confirm-delete', function () {
+                        for (var i = 0; i < history_to_purge.length; i++) {
+                            $.ajax({
+                                url: 'delete_history_rows',
+                                data: { row_id: history_to_purge[i] },
+                                async: true,
+                                success: function (data) {
+                                    var msg = "User history purged";
+                                    showMsg(msg, false, true, 2000);
+                                }
+                            });
+                        }
+                        history_table.draw();
+                    });
+                }
+
+                $('.delete-control').each(function () {
+                    $(this).find('button.btn-danger').toggleClass('btn-warning').toggleClass('btn-danger');
                     $(this).addClass('hidden');
                 });
+
             } else {
                 $('.delete-control').each(function() {
                     $(this).removeClass('hidden');
                 });
             }
         });
-    });
 
+        $(window).resize(function () {
+            if ($('.popover').popover().is(':visible')) {
+                var popover = $('.popover');
+                popover.addClass("noTransition");
+                $('#delete-message').popover('show');
+                popover.removeClass("noTransition");
+            }
+        });
+    });
 </script>
 </%def>

data/interfaces/default/js/tables/history_table.js

@@ -32,7 +32,7 @@ history_table_options = {
             "targets": [0],
             "data": null,
             "createdCell": function (td, cellData, rowData, row, col) {
-                $(td).html('<button class="btn btn-xs btn-danger" data-id="' + rowData['id'] + '"><i class="fa fa-trash-o"></i> Delete</button>');
+                $(td).html('<button class="btn btn-xs btn-warning" data-id="' + rowData['id'] + '"><i class="fa fa-trash-o fa-fw"></i> Delete</button>');
             },
             "width": "5%",
             "className": "delete-control no-wrap hidden",
@@ -98,11 +98,11 @@ history_table_options = {
                 if (cellData !== '') {
                     var transcode_dec = '';
                     if (rowData['video_decision'] === 'transcode') {
-                        transcode_dec = '<span class="transcode-tooltip" data-toggle="tooltip" title="Transcode"><i class="fa fa-server fa-fw"></i></span>&nbsp';
+                        transcode_dec = '<span class="transcode-tooltip" data-toggle="tooltip" title="Transcode"><i class="fa fa-server fa-fw"></i></span>';
                     } else if (rowData['video_decision'] === 'copy') {
-                        transcode_dec = '<span class="transcode-tooltip" data-toggle="tooltip" title="Direct Stream"><i class="fa fa-video-camera fa-fw"></i></span>&nbsp';
+                        transcode_dec = '<span class="transcode-tooltip" data-toggle="tooltip" title="Direct Stream"><i class="fa fa-video-camera fa-fw"></i></span>';
                     } else if (rowData['video_decision'] === 'direct play' || rowData['video_decision'] === '') {
-                        transcode_dec = '<span class="transcode-tooltip" data-toggle="tooltip" title="Direct Play"><i class="fa fa-play-circle fa-fw"></i></span>&nbsp';
+                        transcode_dec = '<span class="transcode-tooltip" data-toggle="tooltip" title="Direct Play"><i class="fa fa-play-circle fa-fw"></i></span>';
                     }
                     $(td).html('<div><a href="#" data-target="#info-modal" data-toggle="modal"><div style="float: left;">' + transcode_dec + '&nbsp' + cellData + '</div></a></div>');
                 }
@@ -287,16 +287,9 @@ $('#history_table').on('click', 'td.delete-control > button', function () {
     var row = history_table.row( tr );
     var rowData = row.data();
 
-    $(this).prop('disabled', true);
+    if ($(this).hasClass('active')) {
-    $(this).html('<i class="fa fa-spin fa-refresh"></i> Delete');
+        $(this).toggleClass('btn-warning').toggleClass('btn-danger');
-
+    } else {
-    $.ajax({
+        $(this).toggleClass('btn-danger').toggleClass('btn-warning');
-        url: 'delete_history_rows',
+    }
-        data: {row_id: rowData['id']},
-        async: true,
-        success: function(data) {
-            history_table.ajax.reload(null, false);
-        }
-    });
-
 });

data/interfaces/default/js/tables/users.js

@@ -271,7 +271,6 @@ $('#users_list_table').on('click', 'td.edit-control > .edit-user-toggles > butto
     var row = users_list_table.row(tr);
     var rowData = row.data();
 
-    //$(this).prop('disabled', true);
     if ($(this).hasClass('active')) {
         $(this).toggleClass('btn-warning').toggleClass('btn-danger');
     } else {

data/interfaces/default/users.html

@@ -97,7 +97,6 @@
                     users_to_purge.push($(this).attr('data-id'));
                     ul.append('<li>' + $('div[data-id=' + $(this).attr('data-id') + '] > input').val() + '</li>')
                 });
-                console.log(users_to_purge);
                 if (users_to_purge.length > 0) {
                     $('#users-to-delete').append
                     $('#confirm-modal').modal();