@ -1,53 +1,63 @@
@using NzbDrone.Common
@using NzbDrone.Web.Helpers
@using NzbDrone.Web.Models;
@model IEnumerable<NzbDrone.Core.Repository.Series >
@model IEnumerable<NzbDrone.Web.Models.SeriesModel >
@{ViewBag.Title = "NzbDrone";}
@section HeaderContent
{
@Html.IncludeCss("Settings.css")
}
<style>
/* progress bar container */
.progressbar
<style>
.ui-progressbar
{
border: 1px solid #065EFE ;
width: 125px;
position:relative ;
width: 125px;
height: 20px;
position: relative;
color: black;
background-color: transparent;
border: 1px solid #065EFE;
margin: 2px;
}
/* color bar */
.progressbar div.progress
.progressBarText
{
position: absolute;
width: 0;
height: 100%;
display: block;
width: 100%;
text-align: center;
}
.ui-progressbar-value
{
overflow: hidden;
background-color: #065EFE;
border: 1px solid #065EFE;
}
/* text on bar */
.progressbar div.progress .progressText
.ui-progressbar-value .progressBar Text
{
position: absolut e;
text-align: center ;
position: relativ e;
font-weight: normal ;
color: white;
}
/* text off bar */
.progressbar div.progressText
/* Set the row height so it won't resize when the progress bar is created */
.seriesTable tr
{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
height: 28px;
}
.editButton, .deleteButton
{
width: 18px;
height: 18px;
padding: 3px 1px;
margin: 0px;
vertical-align: middle;
}
.t-grid .t-alt
.editButton:hover, .deleteButton:hover
{
background: #E5ECF9;
background-color: #065EFE ;
}
</style>
@section ActionMenu{
@ -56,90 +66,147 @@
<li>@Ajax.ActionLink("Start RSS Sync", "RssSync", "Command", null)</li>
</ul>
}
@{Html.Telerik().Grid<SeriesModel>().Name("Grid")
.DataKeys(keys => keys.Add(p => p.SeriesId))
.DataBinding(data => data.Ajax()
.Select("_AjaxSeriesGrid", "Series")
.Update("_SaveAjaxSeriesEditing", "Series")
.Delete("_DeleteAjaxSeriesEditing", "Series"))
.Columns(columns =>
{
columns.Bound(o => o.Title)
.ClientTemplate("<a href=" +
Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
"><#= Title #></a>");
columns.Bound(o => o.SeasonsCount).Title("Seasons");
columns.Bound(o => o.QualityProfileName).Title("Quality");
columns.Bound(o => o.Status);
//columns.Bound(o => o.AirsDayOfWeek);
columns.Bound(o => o.NextAiring);
columns.Bound(o => o.Episodes).Title("Episodes").Width(125)
.ClientTemplate("<div id=\"progressbar_<#= SeriesId #>\" class=\"progressbar\">" +
"<div class=\"progressText\"></div>" +
"<div class=\"progress\">" +
"<span class=\"progressText\" style=\"width: 125px;\"></span>" +
"</div>" +
"</div>");
columns.Command(commands =>
{
commands.Edit().ButtonType(GridButtonType.Image);
commands.Delete().ButtonType(GridButtonType.Image);
}).Title("Actions").Width(90);
})
.Editable(editor => editor.Mode(GridEditMode.PopUp))
.DetailView(detailView => detailView.ClientTemplate(
"<b>Airs Day of Week:</b> " + "<#= AirsDayOfWeek #>" +
"<br />" +
"<b>Overview:</b> " +
"<#= Overview #>"
))
.ClientEvents(clientEvents =>
{
clientEvents.OnEdit("grid_edit");
clientEvents.OnSave("grid_save");
clientEvents.OnRowDataBound("grid_rowBound");
if(EnviromentProvider.IsProduction)
clientEvents.OnError("grid_onError");
})
.Render();}
<table class="seriesTable">
<colgroup>
<col/>
<col style="width:100px" />
<col style="width:100px" />
<col style="width:100px" />
<col style="width:100px" />
<col style="width:140px" />
<col style="width:100px" />
</colgroup>
<tr>
<th>Title</th>
<th>Seasons</th>
<th>Quality</th>
<th>Status</th>
<th>Next Airing</th>
<th>Episodes</th>
@*Commands Column*@
<th>
Commands
</th>
</tr>
@foreach (var series in Model)
{
Html.RenderPartial("Series", series);
}
</table>
<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>
@section Scripts{
<script type="text/javascript">
var windowElement;
function grid_edit(args) {
$(args.form)
.closest(".t-window")
.data("tWindow")
.center();
}
function grid_save(e) {
$('#ajaxSaveWheel').show();
}
function grid_rowBound(e) {
var dataItem = e.dataItem;
var seriesId = dataItem.SeriesId;
var episodeCount = dataItem.EpisodeCount;
var episodeFileCount = dataItem.EpisodeFileCount;
$("#progressbar_" + seriesId).episodeProgress(episodeFileCount, episodeCount);
}
(function ($) {
$.fn.episodeProgress = function (episodes, totalEpisodes) {
return this.each(
function () {
var div = $(this);
var progressBar = div.find(".progress");
var width = Math.round(episodes / totalEpisodes * 100);
progressBar.css("width", width + "%");
div.find(".progressText").html(episodes + " / " + totalEpisodes);
var seriesEditorUrl = './Series/SeriesEditor';
var saveSeriesEditorUrl = './Series/SaveSeriesEditor';
var seriesDeleteUrl = './Series/DeleteSeries';
$(document).ready(function () {
$(".progressBar").each(function () {
var element = this;
var progressbar = $(element).progressbar({
value: parseInt($(element).attr("value"))
});
};
})(jQuery);
var label = progressbar.find('.progressBarText').clone().width(progressbar.width());
progressbar.find('.ui-progressbar-value').append(label);
});
});
$("#seriesEditor").dialog({
autoOpen: false,
height: 350,
width: 670,
resizable: false,
modal: true,
buttons: {
"Save": function () {
//Save the form
$('#SeriesEditorForm').submit();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#seriesDelete").dialog({
autoOpen: false,
resizable: false,
height: 170,
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")
//.button()
.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", "Edit Series: " + 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")
//.button()
.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");
});
</script>
}
Mark McDowall
13 years ago
