Radarr/NzbDrone.Web/Views/History/Index.cshtml

@model String
@using NzbDrone.Common
@using NzbDrone.Web.Models
@using NzbDrone.Web.Helpers
@{ViewBag.Title = "History";}
@section ActionMenu{
    <ul class="sub-menu">
        <li>@Ajax.ActionLink("Trim History", "Trim", "History", new AjaxOptions { OnSuccess = "reloadHistoryGrid" })</li>
        <li>@Ajax.ActionLink("Purge History", "Purge", "History", new AjaxOptions { OnSuccess = "reloadHistoryGrid" })</li>
    </ul>
}
@section HeaderContent
{
    @Html.IncludeCss("Grid.css")
}

<div class="grid-container">
    <table id="historyGrid" class="dataTablesGrid hidden-grid">
        <thead>
            <tr>
                <th></th>
                <th>Series Title</th>
                <th>Episode</th>
                <th>Episode Title</th>
                <th>Quality</th>
                <th>Grabbed On</th>
        
                @*Commands Column*@
                <th>Actions</th>
            
                @*Details Column*@
                <th style="display: none;">Details</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    deleteHistoryRowUrl = '../History/Delete';
    redownloadUrl = '../History/Redownload';

    function reloadHistoryGrid() {
        var grid = $('#history').data('tGrid');
        grid.ajaxRequest();
    }

    $(document).ready(function () {
        $('#historyGrid').removeClass('hidden-grid');

        oTable = $('.dataTablesGrid').dataTable({
            //"sAjaxSource": "History/AjaxBinding",
            //"bProcessing": true,
            "bShowAll": false,
            "aaData": @Html.Raw(Model),
            "bPaginate": true,
            "bLengthChange": false,
            "bFilter": true,
            "bSort": true,
            "bInfo": true,
            "bAutoWidth": false,
            "iDisplayLength": 20,
            "sPaginationType": "four_button",
            "aoColumns": [
                            { sWidth: '20px', "bSortable": false, "mDataProp": "Indexer", "fnRender": function (row) {
                                    return "<img src=\"/Content/Images/Indexers/" + row.aData["Indexer"] + ".png\" alt=\"" + row.aData["Indexer"] + "\">";
                                }
                            }, //Image
                            { sWidth: 'auto', "mDataProp": "SeriesTitle" }, //Series Title
                            { sWidth: '80px', "mDataProp": "EpisodeNumbering", "bSortable": false }, //EpisodeNumbering
                            { sWidth: 'auto', "mDataProp": "EpisodeTitle", "bSortable": false }, //Episode Title
                            { sWidth: '70px', "mDataProp": "Quality", "bSoratble": false }, //Quality
                            { sWidth: '150px', "mDataProp": "Date" }, //Grabbed On
                            { sWidth: '40px', "mDataProp": "HistoryId", "bSortable": false, "fnRender": function (row) {
                                var deleteImage = "<img src=\"../../Content/Images/X.png\" alt=\"Delete\" title=\"Delete from History\" class=\"searchImage\" onclick=\"deleteHistory(this.parentNode.parentNode, " + row.aData["HistoryId"] + ")\">";
                                var redownloadImage = "<img src=\"../../Content/Images/Downloading.png\" alt=\"Redownload\" title=\Redownload Episode\" class=\"searchImage\" onclick=\"redownloadHistory(this.parentNode.parentNode, " + row.aData["HistoryId"] + ", " + row.aData["EpisodeId"] + ")\">";

                                return deleteImage + redownloadImage;
                                    //return createImageAjaxLink('/History/Delete?historyId=' + row.aData["HistoryId"], '../../Content/Images/X.png', 'Delete', 'Delete from History', 'searchImage');
                                }
                            }, //Actions
                            { sWidth: 'auto', "mDataProp": "Details", "bSortable": false, "bVisible": false, "fnRender": function (row) {
                                    var result = "<b>Overview: </b>" + row.aData["EpisodeOverview"] + "<br/>" +
                                        "<b>NZB Title: </b>" + row.aData["NzbTitle"] + "<br/>" +
                                            "<b>Proper: </b>" + row.aData["IsProper"];
                                    return result;
                                }
                            } //Details
                        ],
            "aaSorting": [[5, 'desc']]
        });
    });
    
    function deleteHistory(row, historyId) {
        //Delete from DB
        $.ajax({
                    type: "POST",
                    url: deleteHistoryRowUrl,
                    data: { historyId: historyId },
                    success: function () {
                        oTable.fnDeleteRow(oTable.fnGetPosition(row));
                    }
                });
        
    }
    
    function redownloadHistory(row, historyId, episodeId) {
        $.ajax({
                    type: "POST",
                    url: redownloadUrl,
                    data: { historyId: historyId, episodeId: episodeId },
                    success: function () {
                        oTable.fnDeleteRow(oTable.fnGetPosition(row));
                    }
                });
    }
</script>