Lidarr/NzbDrone.Web/Views/Series/Index.cshtml

354 lines
15 KiB
Plaintext

@using NzbDrone.Common
@using NzbDrone.Web.Helpers
@using NzbDrone.Web.Models;
@model string
@{ViewBag.Title = "NzbDrone";}
@section HeaderContent
{
@Html.IncludeCss("Settings.css")
@Html.IncludeCss("Grid.css")
}
<style>
.ui-progressbar
{
position:relative;
width: 125px;
height: 20px;
background-color: transparent;
border: 1px solid #065EFE;
margin: 2px;
}
.progressBarText
{
position: absolute;
display: block;
width: 100%;
text-align: center;
}
.ui-progressbar-value
{
overflow: hidden;
border: 1px solid #065EFE;
}
.ui-progressbar-value .progressBarText
{
position: relative;
font-weight: normal;
color: white;
}
/* Set the row height so it won't resize when the progress bar is created */
.seriesTable tr
{
height: 28px;
}
.editButton, .deleteButton
{
width: 18px;
height: 18px;
padding: 3px 1px;
margin: 0px;
vertical-align: middle;
}
.editButton:hover, .deleteButton:hover
{
background-color: #065EFE;
}
.commandsColumn, .statusColumn
{
text-align: center;
}
.ui-dialog-buttonpane .ui-dialog-buttonset .ui-delete-button
{
margin-right: 445px;
}
</style>
@section ActionMenu{
<ul class="sub-menu">
<li>@Html.ActionLink("Add Series", "Index", "AddSeries")</li>
<li>@Ajax.ActionLink("Start RSS Sync", "RssSync", "Command", null)</li>
</ul>
}
<table id="seriesGrid" class="dataTablesGrid hidden-grid">
<thead>
<tr>
<th style="width: 10px">Status</th>
<th style="width: auto">Title</th>
<th style="width: 100px">Seasons</th>
<th style="width: 100px">Quality</th>
<th style="width: 140px">Next Airing</th>
<th style="width: 100px">Episodes</th>
@*Commands Column*@
<th style="width: 80px">
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div style="visibility: hidden">
<div id="seriesEditor" title="Edit Series">
</div>
<div id="seriesDelete" title="Delete Series">
<input class="seriesId" type="hidden" value="" />
Are you sure you want to delete '<span class="seriesTitle"></span>'?
</div>
</div>
@section Scripts{
<script type="text/javascript">
var seriesEditorUrl = './Series/SeriesEditor';
var saveSeriesEditorUrl = './Series/SaveSeriesEditor';
var seriesDeleteUrl = './Series/DeleteSeries';
var pauseImage = '<img src="../../Content/Images/pause.png" width="24" height="24" alt="Paused" title="Not monitored" />';
var stopImage = '<img src="../../Content/Images/stop.png" width="24" height="24" alt="Ended" title="Ended" />';
var playImage = '<img src="../../Content/Images/play.png" width="24" height="24" alt="Active" title="Continuing" />';
$(document).ready(function () {
$('#seriesGrid').removeClass('hidden-grid');
oTable = $('.dataTablesGrid').dataTable({
"bShowAll": false,
"aaData": @Html.Raw(Model),
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"bStateSave": true,
"iCookieDuration": 60 * 60 *24 * 365, //1 year
"aoColumns": [
{ sWidth: '70px',
"sClass": "statusColumn",
"mDataProp": function (source, type, val) {
// 'display' and 'filter' use our fancy naming
if (type === 'display' || type === 'filter') {
var monitored = source["Monitored"];
var status = source["Status"];
if (!monitored) {
return pauseImage;
}
else {
if (status === "Ended"){
return stopImage;
}
else {
return playImage;
}
}
}
// 'sort' and 'type' both just use the raw data
return source["Status"];
}
}, //Status
{ 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["Title"] + "</a>";
}
// 'sort' and 'type' both just use the raw data
return source["TitleSorter"];
}
}, //Title
{ sWidth: '100px', "mDataProp": "SeasonsCount", "bSortable": false }, //Seasons
{ sWidth: '100px', "mDataProp": "QualityProfileName" }, //Quality
{ sWidth: '120px', "mDataProp": function (source, type, val) {
// 'display' and 'filter' use our fancy naming
if (type === 'display' || type === 'filter') {
return source["NextAiring"];
}
// 'sort' and 'type' both just use the raw data
return source["NextAiringSorter"];
}
}, //Next Airing
{ sWidth: '140px', "mDataProp": "Episodes", "bSortable": false, "fnRender": function (row) {
var progress = row.aData["EpisodeFileCount"] / row.aData["EpisodeCount"] * 100;
var result = "<div class='progressBar' rel='" + progress + "'>" +
"<span class='progressBarText'>" + row.aData["EpisodeFileCount"] + " / " + row.aData["EpisodeCount"] +"</span>" +
"</div>";
return result;
}
}, //Episodes
{ sWidth: '50px', "mDataProp": "HasBanner", "bSortable": false, "fnRender": function (row) {
return "<img src='../../Content/Images/settings.png' class='editButton' value='" + row.aData["SeriesId"] + "' rel='" + row.aData["Title"] + "' />" +
"<img src='../../Content/Images/close.png' class='deleteButton' value='" + row.aData["SeriesId"] + "' rel='" + row.aData["Title"] + "'/>";
}
}, //Commands
{ sWidth: '60px', "mDataProp": "Details", "bSortable": false, "bVisible": false, "fnRender": function (row) {
var result = "<b>Airs Day of Week: </b>" + row.aData["AirsDayOfWeek"] + "<br/>" +
"<b>Overview: </b>" + row.aData["Overview"] + "<br/>";
return result;
}
} //Details
],
"aaSorting": [[1, 'asc']],
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
$(nRow).addClass(aData["SeriesId"].toString());
}
});
$(".progressBar").each(function () {
var element = this;
var progressbar = $(element).progressbar({
value: parseInt($(element).attr("rel"))
});
var label = progressbar.find('.progressBarText').clone().width(progressbar.width());
progressbar.find('.ui-progressbar-value').append(label);
});
});
$("#seriesEditor").dialog({
autoOpen: false,
height: 'auto',
width: 670,
resizable: false,
modal: true,
buttons: {
"Delete": {
text: "Delete",
class: "ui-delete-button",
click: function () {
var answer = confirm("Are you sure you want to delete this series?");
if (answer) {
var seriesId = $('#SeriesId').val();
$.ajax({
type: "POST",
url: seriesDeleteUrl,
data: { seriesId: seriesId },
success: function (data) {
//Remove the row from the grid... along with the details row
$('.' + seriesId).hide();
$('.details_' + seriesId).hide();
}
});
$(this).dialog("close");
}
}
},
"Save": function () {
//Save the form
$('#SeriesEditorForm').submit();
updateStatus();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#seriesDelete").dialog({
autoOpen: false,
resizable: false,
height: 'auto',
width: 450,
modal: true,
buttons: {
"Delete": function () {
var seriesId = $('.seriesId').val();
$.ajax({
type: "POST",
url: seriesDeleteUrl,
data: { seriesId: seriesId },
success: function (data) {
//Remove the row from the grid... along with the details row
$('.' + seriesId).hide();
$('.details_' + seriesId).hide();
}
});
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$(".editButton")
.live('click', function () {
//Get the SeriesId and Title
var seriesId = parseInt($(this).attr("value"));
var title = $(this).attr("rel");
//Set the title of the dialog
$("#seriesEditor").dialog("option", "title", title);
//Pre-populate the view with ajax
$('#seriesEditor').html('<div style="text-align: center; width: 100%; height: 100%;"><img src="../../Content/Images/ajax-loader.gif" style="padding-top: 120px;" /></div>');
//Get the view
$.ajax({
url: seriesEditorUrl,
data: { seriesId: seriesId },
success: function (data) {
$('#seriesEditor').html(data);
}
});
//Open the dialog
$("#seriesEditor").dialog("open");
});
$(".deleteButton")
.live('click', function () {
//Get the SeriesId and Title
var seriesId = parseInt($(this).attr("value"));
var title = $(this).attr("rel");
//Set the title of the dialog
//$("#seriesDelete").dialog("option", "title", "Delete Series: " + title);
//Fill in the view
$('#seriesDelete').children('.seriesId').val(seriesId);
$('#seriesDelete').children('.seriesTitle').html(title);
//Open the dialog
$("#seriesDelete").dialog("open");
});
function updateStatus() {
var monitored = $('#Monitored').attr('checked');
var seriesId = $('#SeriesId').val();
var status = $('#Status').val();
var imgContainer = $('.' + seriesId).children('.statusColumn');
if (!monitored) {
imgContainer.html(pauseImage);
}
else {
if (status === "Ended"){
imgContainer.html(stopImage);
}
else {
imgContainer.html(playImage);
}
}
}
</script>
}