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

@model String
@using NzbDrone.Web.Helpers
@{ViewBag.Title = "History";}
@section ActionMenu{
    <ul class="sub-menu">
        <li>@Ajax.ActionLink("Trim History", "Trim", "History", null, new AjaxOptions{ OnSuccess = "reloadGrid" })</li>
        <li>@Ajax.ActionLink("Purge History", "Purge", "History", null, new AjaxOptions{ OnSuccess = "reloadGrid" })</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>

@section Scripts{
    <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 = $('#historyGrid').dataTable({
                "sAjaxSource": "History/AjaxBinding",
                "bServerSide": false,
                "bProcessing": true,
                "bShowAll": false,
                "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": function (source, type, val) {
                                        // 'display' and 'filter' use our fancy naming
                                        if (type === 'display' || type === 'filter') {
                                            return "<a href='/Series/Details?seriesId=" + source["SeriesId"] + "'>" + source["SeriesTitle"] + "</a>";
                                        }
                                        // 'sort' and 'type' both just use the raw data
                                        return source["SeriesTitleSorter"];
                                    }
                                }, //Series Title
                                { sWidth: '80px', "mDataProp": "EpisodeNumbering", "bSortable": false }, //EpisodeNumbering
                                { sWidth: 'auto', "mDataProp": "EpisodeTitle", "bSortable": false }, //Episode Title
                                { sWidth: '70px', "mDataProp": "Quality", "bSortable": false }, //Quality
                                { sWidth: '150px', "mDataProp": function (source, type, val) {
                                        // 'display' and 'filter' use our fancy naming
                                        if (type === 'display' || type === 'filter') {
                                            return source["Date"];
                                        }
                                        // 'sort' and 'type' both just use the raw data
                                        return source["DateSorter"];
                                    }
                                }, //Date
                                { sWidth: '40px', "mDataProp": "HistoryId", "bSortable": false, "fnRender": function (row) {
                                    var deleteImage = "<img src=\"../../Content/Images/X.png\" alt=\"Delete\" title=\"Delete from History\" class=\"gridAction\" onclick=\"deleteHistory(this.parentNode.parentNode, " + row.aData["HistoryId"] + ")\">";
                                    var redownloadImage = "<img src=\"../../Content/Images/redownload.png\" alt=\"Redownload\" title=\Redownload Episode\" class=\"gridAction\" onclick=\"redownloadHistory(this.parentNode.parentNode, " + row.aData["HistoryId"] + ", " + row.aData["EpisodeId"] + ")\">";

                                    return deleteImage + redownloadImage;
                                }
                                }, //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>
}