Update history table to show grouped items

data/interfaces/default/css/plexpy.css

@@ -2351,3 +2351,39 @@ a .home-platforms-instance-list-oval:hover,
         width: 100%;
     }
 }
+
+table.display tr.shown + tr div.slider {
+    display: none;
+}
+table.display tr.shown + tr > td {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+table.display tr.shown + tr:hover {
+    background-color: rgba(255,255,255,0);
+}
+table.display tr.shown + tr:hover a,
+table.display tr.shown + tr td:hover a,
+table.display tr.shown + tr .pagination > .active > a,
+table.display tr.shown + tr .pagination > .active > a:hover {
+    color: #fff;
+}
+table.display tr.shown + tr table[id^='history_child'] td:hover a {
+    color: #F9AA03;
+}
+table.display tr.shown + tr .pagination > .disabled > a {
+    color: #444444;
+}
+table.display tr.shown + tr .pagination > li > a:hover {
+    color: #23527c;
+}
+table[id^='history_child'] {
+    margin-top: 0;
+    margin-left: -4px;
+    opacity: .6;
+}
+table[id^='history_child'] thead th {
+    line-height: 0;
+    height: 0 !important;
+    overflow: hidden;
+}

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

@@ -46,13 +46,17 @@ history_table_options = {
             "createdCell": function (td, cellData, rowData, row, col) {
                 if (rowData['stopped'] === null) {
                     $(td).html('Currently watching...');
+                } else if (rowData['group_count'] > 1) {
+                    date = moment(cellData, "X").format(date_format);
+                    expand_history = '<span class="expand-history-tooltip" data-toggle="tooltip" title="Show Detailed History"><i class="fa fa-info-circle fa-fw"></i></span>';
+                    $(td).html('<div><a href="#"><div style="float: left;">' + expand_history + '&nbsp;' + date + '</div></a></div>');
                 } else {
                     $(td).html(moment(cellData, "X").format(date_format));
                 }
             },
             "searchable": false,
             "width": "8%",
-            "className": "no-wrap"
+            "className": "no-wrap expand-history"
         },
         {
             "targets": [2],
@@ -83,7 +87,8 @@ history_table_options = {
                             $(td).html('n/a');
                         }
                     } else {
-                        $(td).html('<a href="javascript:void(0)" data-toggle="modal" data-target="#ip-info-modal"><i class="fa fa-map-marker"></i>&nbsp' + cellData + '</a>');
+                        external_ip = '<span class="external-ip-tooltip" data-toggle="tooltip" title="External IP"><i class="fa fa-map-marker fa-fw"></i></span>';
+                        $(td).html('<a href="javascript:void(0)" data-toggle="modal" data-target="#ip-info-modal">'+ external_ip + cellData + '</a>');
                     }
                 } else {
                     $(td).html('n/a');
@@ -105,7 +110,7 @@ history_table_options = {
                     } 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>';
                     }
-                    $(td).html('<div><a href="#" data-target="#info-modal" data-toggle="modal"><div style="float: left;">' + transcode_dec + '&nbsp' + cellData + '</div></a></div>');
+                    $(td).html('<div><a href="#" data-target="#info-modal" data-toggle="modal"><div style="float: left;">' + transcode_dec + '&nbsp;' + cellData + '</div></a></div>');
                 }
             },
             "width": "15%",
@@ -121,16 +126,16 @@ history_table_options = {
                     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=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>');
+                        $(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=300&height=450&fallback=poster" data-height="120">' + cellData + ' \
                             (S' + rowData['parent_media_index'] + '&middot; E' + rowData['media_index'] + ')</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>');
+                        $(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=300&height=300&fallback=poster" data-height="80">' + cellData + ' (' + rowData['parent_title'] + ')</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>');
+                        $(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 {
                         $(td).html('<a href="info?item_id=' + rowData['id'] + '">' + cellData + '</a>');
                     }
@@ -218,6 +223,8 @@ history_table_options = {
         $('#ajaxMsg').fadeOut();
 
         // Create the tooltips.
+        $('.expand-history-tooltip').tooltip({ container: 'body' });
+        $('.external-ip-tooltip').tooltip();
         $('.transcode-tooltip').tooltip();
         $('.media-type-tooltip').tooltip();
         $('.watched-tooltip').tooltip();
@@ -235,20 +242,53 @@ history_table_options = {
                 $(this).removeClass('hidden');
             });
         }
+
+        history_table.rows().every(function () {
+            var rowData = this.data();
+            if (rowData['group_count'] != 1 && rowData['group_start_id'] in history_child_table) {
+                // if grouped row and a child table was already created
+                this.child(childTableFormat(rowData)).show();
+                createChildTable(this, rowData)
+            }
+        });
     },
     "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) {
+    "rowCallback": function (row, rowData, rowIndex) {
+        if (rowData['group_count'] == 1) {
+            // if no grouped rows simply toggle the delete button
             if ($.inArray(rowData['id'], history_to_delete) !== -1) {
                 $(row).find('button[data-id="' + rowData['id'] + '"]').toggleClass('btn-warning').toggleClass('btn-danger');
             }
+        } else {
+            // if grouped rows
+            // toggle the parent button to danger
+            $(row).find('button[data-id="' + rowData['id'] + '"]').toggleClass('btn-warning').toggleClass('btn-danger');
+            // check if any child rows are not selected
+            for (var i = rowData['group_start_id']; i <= rowData['id']; i++) {
+                var index = $.inArray(i, history_to_delete);
+                if (index == -1) {
+                    // if any child row is not selected, toggle parent button to warning
+                    $(row).find('button[data-id="' + rowData['id'] + '"]').toggleClass('btn-warning').toggleClass('btn-danger');
+                    break;
+                }
             }
         }
 
-$('#history_table').on('click', 'td.modal-control', function () {
+        if (rowData['group_count'] != 1 && rowData['group_start_id'] in history_child_table) {
-    var tr = $(this).parents('tr');
+            // if grouped row and a child table was already created
+            $(row).addClass('shown')
+            history_table.row(row).child(childTableFormat(rowData)).show();
+        }
+
+    }
+}
+
+// Parent table platform modal
+$('#history_table').on('click', '> tbody > tr > td.modal-control', function () {
+    var tr = $(this).closest('tr');
     var row = history_table.row( tr );
     var rowData = row.data();
 
@@ -266,8 +306,9 @@ $('#history_table').on('click', 'td.modal-control', function () {
     showStreamDetails();
 });
 
-$('#history_table').on('click', 'td.modal-control-ip', function () {
+// Parent table ip address modal
-    var tr = $(this).parents('tr');
+$('#history_table').on('click', '> tbody > tr > td.modal-control-ip', function () {
+    var tr = $(this).closest('tr');
     var row = history_table.row( tr );
     var rowData = row.data();
 
@@ -288,11 +329,14 @@ $('#history_table').on('click', 'td.modal-control-ip', function () {
     getUserLocation(rowData['ip_address']);
 });
 
-$('#history_table').on('click', 'td.delete-control > button', function () {
+// Parent table delete mode
-    var tr = $(this).parents('tr');
+$('#history_table').on('click', '> tbody > tr > td.delete-control > button', function () {
+    var tr = $(this).closest('tr');
     var row = history_table.row( tr );
     var rowData = row.data();
 
+    if (rowData['group_count'] == 1) {
+        // if no grouped rows simply add or remove row from history_to_delete
         var index = $.inArray(rowData['id'], history_to_delete);
         if (index === -1) {
             history_to_delete.push(rowData['id']);
@@ -300,4 +344,219 @@ $('#history_table').on('click', 'td.delete-control > button', function () {
             history_to_delete.splice(index, 1);
         }
         $(this).toggleClass('btn-warning').toggleClass('btn-danger');
+    } else {
+        // if grouped rows
+        if ($(this).hasClass('btn-warning')) {
+            // add all grouped rows to history_to_delete
+            for (var i = rowData['group_start_id']; i <= rowData['id']; i++) {
+                var index = $.inArray(i, history_to_delete);
+                if (index == -1) {
+                    history_to_delete.push(i);
+                }
+            }
+            $(this).toggleClass('btn-warning').toggleClass('btn-danger');
+            if (row.child.isShown()) {
+                // if child table is visible, toggle all child buttons to danger
+                tr.next().find('td.delete-control > button.btn-warning').toggleClass('btn-warning').toggleClass('btn-danger');
+            }
+        } else {
+            // remove all grouped rows to history_to_delete
+            for (var i = rowData['group_start_id']; i <= rowData['id']; i++) {
+                var index = $.inArray(i, history_to_delete);
+                if (index != -1) {
+                    history_to_delete.splice(index, 1);
+                }
+            }
+            $(this).toggleClass('btn-warning').toggleClass('btn-danger');
+            if (row.child.isShown()) {
+                // if child table is visible, toggle all child buttons to warning
+                tr.next().find('td.delete-control > button.btn-danger').toggleClass('btn-warning').toggleClass('btn-danger');
+            }
+        }
+    }
 });
+
+// Parent table expand detailed history
+$('#history_table').on('click', '> tbody > tr > td.expand-history a', function () {
+    var tr = $(this).closest('tr');
+    var row = history_table.row(tr);
+    var rowData = row.data();
+
+    if (row.child.isShown()) {
+        $('div.slider', row.child()).slideUp(function () {
+            row.child.hide();
+            tr.removeClass('shown');
+            delete history_child_table[rowData['group_start_id']];
+        });
+    } else {
+        tr.addClass('shown');
+        row.child(childTableFormat(rowData)).show();
+        createChildTable(row, rowData);
+    }
+});
+
+
+// Initialize the detailed history child table options using the parent table options
+function childTableOptions(rowData) {
+    history_child_options = history_table_options;
+    // Remove settings that are not necessary
+    history_child_options.searching = false;
+    history_child_options.lengthChange = false;
+    history_child_options.info = false;
+    history_child_options.pageLength = 10;
+    history_child_options.bStateSave = false;
+    history_child_options.ajax = {
+        "url": "get_history",
+        type: "post",
+        data: function (d) {
+            return {
+                'json_data': JSON.stringify(d),
+                'grouping': false,
+                'group_start_id': rowData['group_start_id']
+            };
+        }
+    }
+    history_child_options.fnDrawCallback = function (settings) {
+        $('#ajaxMsg').fadeOut();
+
+        // Create the tooltips.
+        $('.expand-history-tooltip').tooltip({ container: 'body' });
+        $('.external-ip-tooltip').tooltip();
+        $('.transcode-tooltip').tooltip();
+        $('.media-type-tooltip').tooltip();
+        $('.watched-tooltip').tooltip();
+        $('.thumb-tooltip').popover({
+            html: true,
+            trigger: 'hover',
+            placement: 'right',
+            content: function () {
+                return '<div class="history-thumbnail" style="background-image: url(' + $(this).data('img') + '); height: ' + $(this).data('height') + 'px;" />';
+            }
+        });
+
+        if ($('#row-edit-mode').hasClass('active')) {
+            $('.delete-control').each(function () {
+                $(this).removeClass('hidden');
+            });
+        }
+
+        $(this).closest('div.slider').slideDown();
+    }
+
+    return history_child_options;
+}
+
+// Format the detailed history child table
+function childTableFormat(rowData) {
+    return '<div class="slider">' +
+            '<table id="history_child-' + rowData['group_start_id'] + '">' +
+            '<thead>' +
+            '<tr>' +
+                '<th align="left" id="delete_row">Delete</th>' +
+                '<th align="left" id="time">Time</th>' +
+                '<th align="left" id="friendly_name">User</th>' +
+                '<th align="left" id="ip_address">IP Address</th>' +
+                '<th align="left" id="platform">Platform</th>' +
+                '<th align="left" id="title">Title</th>' +
+                '<th align="left" id="started">Started</th>' +
+                '<th align="left" id="paused_counter">Paused</th>' +
+                '<th align="left" id="stopped">Stopped</th>' +
+                '<th align="left" id="duration">Duration</th>' +
+                '<th align="left" id="percent_complete"></th>' +
+            '</tr>' +
+            '</thead>' +
+            '<tbody>' +
+            '</tbody>' +
+            '</table>' +
+            '</div>';
+}
+
+// Create the detailed history child table
+history_child_table = {};
+function createChildTable(row, rowData) {
+    history_child_options = childTableOptions(rowData);
+    // initialize the child table
+    history_child_table[rowData['group_start_id']] = $('#history_child-' + rowData['group_start_id']).DataTable(history_child_options);
+
+    // Set child table column visibility to match parent table
+    var visibility = history_table.columns().visible();
+    for (var i = 0; i < visibility.length; i++) {
+        if (!(visibility[i])) { history_child_table[rowData['group_start_id']].column(i).visible(visibility[i]); }
+    }
+    history_table.on('column-visibility', function (e, settings, colIdx, visibility) {
+        if (row.child.isShown()) {
+            history_child_table[rowData['group_start_id']].column(colIdx).visible(visibility);
+        }
+    });
+
+    // Child table platform modal
+    $('#history_child-' + rowData['group_start_id']).on('click', 'td.modal-control', function () {
+        var tr = $(this).closest('tr');
+        var childRow = history_child_table[rowData['group_start_id']].row(tr);
+        var childRowData = childRow.data();
+
+        function showStreamDetails() {
+            $.ajax({
+                url: 'get_stream_data',
+                data: { row_id: childRowData['id'], user: childRowData['friendly_name'] },
+                cache: false,
+                async: true,
+                complete: function (xhr, status) {
+                    $("#info-modal").html(xhr.responseText);
+                }
+            });
+        }
+        showStreamDetails();
+    });
+
+    // Child table ip address modal
+    $('#history_child-' + rowData['group_start_id']).on('click', 'td.modal-control-ip', function () {
+        var tr = $(this).closest('tr');
+        var childRow = history_child_table[rowData['group_start_id']].row(tr);
+        var childRowData = childRow.data();
+
+        function getUserLocation(ip_address) {
+            if (isPrivateIP(ip_address)) {
+                return "n/a"
+            } else {
+                $.ajax({
+                    url: 'get_ip_address_details',
+                    data: { ip_address: ip_address },
+                    async: true,
+                    complete: function (xhr, status) {
+                        $("#ip-info-modal").html(xhr.responseText);
+                    }
+                });
+            }
+        }
+        getUserLocation(childRowData['ip_address']);
+    });
+
+    // Child table delete mode
+    $('#history_child-' + rowData['group_start_id']).on('click', 'td.delete-control > button', function () {
+        var tr = $(this).closest('tr');
+        var childRow = history_child_table[rowData['group_start_id']].row(tr);
+        var childRowData = childRow.data();
+
+        // add or remove row from history_to_delete
+        var index = $.inArray(childRowData['id'], history_to_delete);
+        if (index === -1) {
+            history_to_delete.push(childRowData['id']);
+        } else {
+            history_to_delete.splice(index, 1);
+        }
+        $(this).toggleClass('btn-warning').toggleClass('btn-danger');
+
+        tr.parents('tr').prev().find('td.delete-control > button.btn-warning').toggleClass('btn-warning').toggleClass('btn-danger');
+        // check if any child rows are not selected
+        for (var i = rowData['group_start_id']; i <= rowData['id']; i++) {
+            var index = $.inArray(i, history_to_delete);
+            if (index == -1) {
+                // if any child row is not selected, toggle parent button to warning
+                tr.parents('tr').prev().find('td.delete-control > button.btn-danger').toggleClass('btn-warning').toggleClass('btn-danger');
+                break;
+            }
+        }
+    });
+}
+