Merge pull request #126 from JonnyWong16/history-tables

History tables

data/interfaces/default/css/plexpy.css

@@ -1722,6 +1722,11 @@ a .home-platforms-instance-box:hover {
 .history-title .popover.right .popover-content {
     padding: 5px 8px;
 }
+.history-thumbnail {
+    background-position: center;
+    background-size: cover;
+    width: 80px;
+}
 .edit-user-toggles {
     padding-right: 10px;
 }

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="Select rows to delete. Data is deleted upon 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 Delete</h4>
+                    </div>
+                    <div class="modal-body" style="text-align: center;">
+                        <p>Are you REALLY sure you want to delete <strong><span id="deleteCount"></span></strong> history item(s)?</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">Delete</button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 </%def>
@@ -68,18 +90,50 @@
 
         clearSearchButton('history_table', history_table);
 
-        $('#row-edit-mode').click(function() {
+        $('#row-edit-mode').on('click', function() {
+            $('#delete-message').popover();
+
             if ($(this).hasClass('active')) {
-                $('.delete-control').each(function() {
+                if (history_to_delete.length > 0) {
+                    $('#deleteCount').text(history_to_delete.length);
+                    $('#confirm-modal').modal();
+                    $('#confirm-modal').one('click', '#confirm-delete', function () {
+                        for (var i = 0; i < history_to_delete.length; i++) {
+                            $.ajax({
+                                url: 'delete_history_rows',
+                                data: { row_id: history_to_delete[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 {
+                history_to_delete = [];
                 $('.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/info.html

@@ -185,7 +185,11 @@ DOCUMENTATION :: END
                     <span>Watch History for <strong>${data['title']}</strong></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="Select rows to delete. Data is deleted upon 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>
@@ -214,6 +218,24 @@ DOCUMENTATION :: END
             </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 Delete</h4>
+                        </div>
+                        <div class="modal-body" style="text-align: center;">
+                            <p>Are you REALLY sure you want to delete <strong><span id="deleteCount"></span></strong> history item(s)?</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">Delete</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </div>
@@ -281,12 +303,36 @@ DOCUMENTATION :: END
         
         clearSearchButton('history_table', history_table);
 
-        $('#row-edit-mode').click(function() {
+        $('#row-edit-mode').on('click', function() {
+            $('#delete-message').popover();
+
             if ($(this).hasClass('active')) {
-                $('.delete-control').each(function() {
+                if (history_to_delete.length > 0) {
+                    $('#deleteCount').text(history_to_delete.length);
+                    $('#confirm-modal').modal();
+                    $('#confirm-modal').one('click', '#confirm-delete', function () {
+                        for (var i = 0; i < history_to_delete.length; i++) {
+                            $.ajax({
+                                url: 'delete_history_rows',
+                                data: { row_id: history_to_delete[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 {
+                history_to_delete = [];
                 $('.delete-control').each(function() {
                     $(this).removeClass('hidden');
                 });

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

@@ -1,5 +1,6 @@
 var date_format = 'YYYY-MM-DD';
 var time_format = 'hh:mm a';
+var history_to_delete = [];
 
 $.ajax({
     url: 'get_date_formats',
@@ -18,7 +19,7 @@ history_table_options = {
         "info":"Showing _START_ to _END_ of _TOTAL_ history items",
         "infoEmpty":"Showing 0 to 0 of 0 entries",
         "infoFiltered":"(filtered from _MAX_ total entries)",
-        "emptyTable": "No data in table",
+        "emptyTable": "No data in table"
     },
     "pagingType": "bootstrap",
     "stateSave": true,
@@ -32,7 +33,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 +99,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>');
                 }
@@ -119,16 +120,16 @@ history_table_options = {
                     var thumb_popover = '';
                     if (rowData['media_type'] === 'movie') {
                         media_type = '<span class="media-type-tooltip" data-toggle="tooltip" title="Movie"><i class="fa fa-film fa-fw"></i></span>';
-                        thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="pms_image_proxy?img=' + rowData['thumb'] + '&width=80&height=120&fallback=poster" data-height="120">' + cellData + ' (' + rowData['year'] + ')</span>'
+                        thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="pms_image_proxy?img=' + rowData['thumb'] + '&width=300&height=450&fallback=poster" data-height="120">' + cellData + ' (' + rowData['year'] + ')</span>'
                         $(td).html('<div class="history-title"><a href="info?source=history&item_id=' + rowData['id'] + '"><div style="float: left;">' + media_type + '&nbsp' + thumb_popover + '</div></a></div>');
                     } else if (rowData['media_type'] === 'episode') {
                         media_type = '<span class="media-type-tooltip" data-toggle="tooltip" title="Episode"><i class="fa fa-television fa-fw"></i></span>';
-                        thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="pms_image_proxy?img=' + rowData['thumb'] + '&width=80&height=120&fallback=poster" data-height="120">' + cellData + ' \
+                        thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="pms_image_proxy?img=' + rowData['thumb'] + '&width=300&height=450&fallback=poster" data-height="120">' + cellData + ' \
                             (S' + ('00' + rowData['parent_media_index']).slice(-2) + 'E' + ('00' + rowData['media_index']).slice(-2) + ')</span>'
                         $(td).html('<div class="history-title"><a href="info?source=history&item_id=' + rowData['id'] + '"><div style="float: left;" >' + media_type + '&nbsp' + thumb_popover + '</div></a></div>');
                     } else if (rowData['media_type'] === 'track') {
                         media_type = '<span class="media-type-tooltip" data-toggle="tooltip" title="Track"><i class="fa fa-music fa-fw"></i></span>';
-                        thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="pms_image_proxy?img=' + rowData['thumb'] + '&width=80&height=80&fallback=poster" data-height="80">' + cellData + ' (' + rowData['parent_title'] + ')</span>'
+                        thumb_popover = '<span class="thumb-tooltip" data-toggle="popover" data-img="pms_image_proxy?img=' + rowData['thumb'] + '&width=300&height=300&fallback=poster" data-height="80">' + cellData + ' (' + rowData['parent_title'] + ')</span>'
                         $(td).html('<div class="history-title"><div style="float: left;">' + media_type + '&nbsp' + thumb_popover + '</div></div>');
                     } else {
                         $(td).html('<a href="info?item_id=' + rowData['id'] + '">' + cellData + '</a>');
@@ -225,7 +226,7 @@ history_table_options = {
             trigger: 'hover',
             placement: 'right',
             content: function () {
-                return '<div style="background-image: url(' + $(this).data('img') + '); width: 80px; height: ' + $(this).data('height') + 'px;" />';
+                return '<div class="history-thumbnail" style="background-image: url(' + $(this).data('img') + '); height: ' + $(this).data('height') + 'px;" />';
             }
         });
 
@@ -238,6 +239,11 @@ history_table_options = {
     "preDrawCallback": function(settings) {
         var msg = "<div class='msg'><i class='fa fa-refresh fa-spin'></i>&nbspFetching rows...</div>";
         showMsg(msg, false, false, 0)
+    },
+    "rowCallback": function (row, rowData) {
+        if ($.inArray(rowData['id'], history_to_delete) !== -1) {
+            $(row).find('button[data-id="' + rowData['id'] + '"]').toggleClass('btn-warning').toggleClass('btn-danger');
+        }
     }
 }
 
@@ -287,16 +293,11 @@ $('#history_table').on('click', 'td.delete-control > button', function () {
     var row = history_table.row( tr );
     var rowData = row.data();
 
-    $(this).prop('disabled', true);
-    $(this).html('<i class="fa fa-spin fa-refresh"></i> Delete');
-
-    $.ajax({
-        url: 'delete_history_rows',
-        data: {row_id: rowData['id']},
-        async: true,
-        success: function(data) {
-            history_table.ajax.reload(null, false);
+    var index = $.inArray(rowData['id'], history_to_delete);
+    if (index === -1) {
+        history_to_delete.push(rowData['id']);
+    } else {
+        history_to_delete.splice(index, 1);
     }
-    });
-
+    $(this).toggleClass('btn-warning').toggleClass('btn-danger');
 });

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/user.html

@@ -154,7 +154,11 @@ from plexpy import helpers
                             </strong></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="Select rows to delete. Data is deleted upon 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" id="button-bar-history">
                         </div>
                         </div>
@@ -226,6 +230,24 @@ from plexpy import helpers
     </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 Delete</h4>
+                </div>
+                <div class="modal-body" style="text-align: center;">
+                    <p>Are you REALLY sure you want to delete <strong><span id="deleteCount"></span></strong> history item(s)?</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">Delete</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 <footer></footer>
 </%def>
@@ -367,13 +389,36 @@ from plexpy import helpers
             });
         });
 
-        // Delete mode button
-        $('#row-edit-mode').click(function() {
+        $('#row-edit-mode').on('click', function() {
+            $('#delete-message').popover();
+
             if ($(this).hasClass('active')) {
-                $('.delete-control').each(function() {
+                if (history_to_delete.length > 0) {
+                    $('#deleteCount').text(history_to_delete.length);
+                    $('#confirm-modal').modal();
+                    $('#confirm-modal').one('click', '#confirm-delete', function () {
+                        for (var i = 0; i < history_to_delete.length; i++) {
+                            $.ajax({
+                                url: 'delete_history_rows',
+                                data: { row_id: history_to_delete[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 {
+                history_to_delete = [];
                 $('.delete-control').each(function() {
                     $(this).removeClass('hidden');
                 });

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();