Delete modal wired up, more formatting

NzbDrone.Api/Series/SeriesModule.cs

@@ -16,17 +16,16 @@ namespace NzbDrone.Api.Series
     {
         private readonly SeriesProvider _seriesProvider;
         private readonly JobProvider _jobProvider;
-        private readonly ConfigProvider _configProvider;
 
-        public SeriesModule(SeriesProvider seriesProvider, JobProvider jobProvider,
-                            ConfigProvider configProvider)
+        public SeriesModule(SeriesProvider seriesProvider, JobProvider jobProvider)
             : base("/Series")
         {
             _seriesProvider = seriesProvider;
             _jobProvider = jobProvider;
-            _configProvider = configProvider;
             Get["/"] = x => AllSeries();
+            Get["/{id}"] = x => GetSeries((int)x.id);
             Post["/"] = x => AddSeries();
+            Delete["/{id}"] = x => DeleteSeries((int)x.id);
         }
 
         private Response AllSeries()
@@ -37,6 +36,14 @@ namespace NzbDrone.Api.Series
             return seriesModels.AsResponse();
         }
 
+        private Response GetSeries(int id)
+        {
+            var series = _seriesProvider.GetSeries(id);
+            var seriesModels = Mapper.Map<Core.Repository.Series, SeriesModel>(series);
+
+            return seriesModels.AsResponse();
+        }
+
         private Response AddSeries()
         {
             var request = Request.Body.FromJson<Core.Repository.Series>();
@@ -51,6 +58,12 @@ namespace NzbDrone.Api.Series
 
             return new Response { StatusCode = HttpStatusCode.Created };
         }
+
+        private Response DeleteSeries(int id)
+        {
+            //_seriesProvider.DeleteSeries(id);
+            return new Response { StatusCode = HttpStatusCode.OK };
+        }
     }
 
     public class SeriesValidator : AbstractValidator<Core.Repository.Series>

NzbDrone.Web/NzbDrone.Web.csproj

@@ -409,12 +409,15 @@
     <Content Include="_backboneApp\JsLibraries\backbone.js" />
     <Content Include="_backboneApp\JsLibraries\backbone.marionette.js" />
     <Content Include="_backboneApp\AddSeries\addSeriesLayoutTemplate.html" />
+    <Content Include="_backboneApp\Shared\ModalRegion.js" />
+    <Content Include="_backboneApp\Series\DeleteSeriesTemplate.html" />
     <Content Include="_backboneApp\Series\Index\SeriesCollectionTemplate.html" />
     <Content Include="_backboneApp\Series\Index\IndexLayoutTemplate.html" />
     <Content Include="_backboneApp\Series\Index\IndexLayout.js" />
     <Content Include="_backboneApp\Series\Index\SeriesItemTemplate.html" />
     <Content Include="_backboneApp\Series\Index\SeriesItemView.js" />
     <Content Include="_backboneApp\Series\SeriesCollection.js" />
+    <Content Include="_backboneApp\Series\DeleteSeriesView.js" />
     <Content Include="_backboneApp\Series\SeriesModel.js" />
     <Content Include="_backboneApp\Shared\AutoComplete.js" />
     <Content Include="_backboneApp\Shared\NotificationModel.js" />

NzbDrone.Web/Scripts/jquery-1.8.2.js

@@ -7985,8 +7985,8 @@ jQuery.extend({
 
 	// Last-Modified header cache for next request
 	lastModified: {},
-	etag: {}
-
+	etag: {},
+	destroy: function(p) { throw new Error("Not implemented"); }
 });
 
 /* Handles responses to an ajax request:

NzbDrone.Web/Views/V2/Index.cshtml

@@ -58,6 +58,7 @@
                     <div id="main-region" class="span20 nz-center">
                     </div>
                 </div>
+                <div id="modal-region"></div>
             </div>
         </div>
         <div id="footer" class="row nz-center">

NzbDrone.Web/_backboneApp/Content/base.css

@@ -78,10 +78,32 @@ body {
     line-height: 4em;
 }
 
-    .line > [class^="icon-"], .line > [class*=" icon-"] {
-        margin-top: 1em;
-        height: 1em;
-        line-height: 1em;
-    }
+.line > [class^="icon-"], .line > [class*=" icon-"] {
+    margin-top: 1em;
+    height: 1em;
+    line-height: 1em;
+}
 
+.progress {
+    width: 125px;
+    position: relative;
+    margin-bottom: 2px;
+}
 
+.progress .bar {
+    position: absolute;
+    overflow: hidden;
+}
+.progress .progressbar-back-text {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    font-size: 12px;
+    text-align: center;
+}
+.progress .progressbar-front-text {
+    display: block;
+    width: 125px;
+    font-size: 12px;
+    text-align: center;
+}

NzbDrone.Web/_backboneApp/Series/DeleteSeriesTemplate.html

@@ -0,0 +1,10 @@
+<div class="modal-header">
+    <h2>Delete {{title}}</h2>
+</div>
+<div class="modal-body">
+    <p>Are you sure you want to delete '{{title}}'? </p>
+</div>
+<div class="modal-footer">
+    <button class="btn" data-dismiss="modal">cancel</button>
+    <button class="btn btn-danger x-confirm-delete">Ok</button>
+</div>

NzbDrone.Web/_backboneApp/Series/DeleteSeriesView.js

@@ -0,0 +1,28 @@
+'use strict';
+/*global NzbDrone, Backbone*/
+/// <reference path="../app.js" />
+/// <reference path="SeriesModel.js" />
+
+NzbDrone.Series.DeleteSeriesView = Backbone.Marionette.ItemView.extend({
+    template: 'Series/DeleteSeriesTemplate',
+    tagName: 'div',
+    className: "modal",
+
+    ui: {
+        'progressbar': '.progress .bar',
+    },
+
+    events: {
+        'click .x-confirm-delete': 'removeSeries',
+    },
+
+    onRender: function () {
+        NzbDrone.ModelBinder.bind(this.model, this.el);
+    },
+    
+    removeSeries: function () {
+        this.model.destroy({ wait: true });
+        this.model.collection.remove(this.model);
+        this.$el.parent().modal('hide');
+    },
+});

NzbDrone.Web/_backboneApp/Series/Index/IndexLayout.js

@@ -13,7 +13,7 @@ NzbDrone.Series.IndexLayout = Backbone.Marionette.Layout.extend({
     },
 
     regions: {
-        main: '#series',
+        seriesRegion: '#series'
     },
 
     collection: new NzbDrone.Series.SeriesCollection(),
@@ -26,8 +26,7 @@ NzbDrone.Series.IndexLayout = Backbone.Marionette.Layout.extend({
         console.log('binding auto complete');
         
         this.collection.fetch();
-        //Show things
         
-        this.main.show(new NzbDrone.Series.Index.SeriesCollectionView({ collection: this.collection }));
+        this.seriesRegion.show(new NzbDrone.Series.Index.SeriesCollectionView({ collection: this.collection }));
     },
 });

NzbDrone.Web/_backboneApp/Series/Index/SeriesItemTemplate.html

@@ -1,15 +1,10 @@
-<td name="status"></td>
-<td name="title"></td>
+<td>{{{formatStatus status monitored}}}</td>
+<td><a href="/series/details/{{id}}">{{title}}</a></td>
 <td name="seasonCount"></td>
 <td name="qualityProfileName"></td>
 <td name="network"></td>
-<td name="nextAiring"></td>
-<td name="EpisodeCount">
-{{#if episodeFileCount}}
-    {{episodeFileCount}}
-{{else}}
-    0
-{{/if}}
- / {{episodeCount}}
+<td>{{formatBestDate nextAiring}}</td>
 <td>
-<td>Edit/Delete</td>
+{{{formatProgress episodeFileCount episodeCount}}}
+<td>
+<td>Edit/<i class="icon-remove x-remove" title="Delete Series"></i></td>

NzbDrone.Web/_backboneApp/Series/Index/SeriesItemView.js

@@ -3,11 +3,16 @@
 /// <reference path="../../app.js" />
 /// <reference path="../SeriesModel.js" />
 /// <reference path="../SeriesCollection.js" />
+/// <reference path="../DeleteSeriesView.js" />
 
 NzbDrone.Series.Index.SeriesItemView = Backbone.Marionette.ItemView.extend({
     template: 'Series/Index/SeriesItemTemplate',
     tagName: 'tr',
 
+    ui: {
+        'progressbar': '.progress .bar',
+    },
+
     events: {
         'click .x-remove': 'removeSeries',
     },
@@ -17,8 +22,11 @@ NzbDrone.Series.Index.SeriesItemView = Backbone.Marionette.ItemView.extend({
     },
 
     removeSeries: function () {
-        this.model.destroy({ wait: true });
-        this.model.collection.remove(this.model);
+        //this.model.destroy({ wait: true });
+        //this.model.collection.remove(this.model);
+
+        var view = new NzbDrone.Series.DeleteSeriesView({ model: this.model });
+        NzbDrone.modalRegion.show(view);
     },
 });
 

NzbDrone.Web/_backboneApp/Shared/ModalRegion.js

@@ -0,0 +1,24 @@
+ModalRegion = Backbone.Marionette.Region.extend({
+    el: "#modal-region",
+
+    constructor: function () {
+        _.bindAll(this);
+        Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
+        this.on("show", this.showModal, this);
+    },
+
+    getEl: function (selector) {
+        var $el = $(selector);
+        $el.on("hidden", this.close);
+        return $el;
+    },
+
+    showModal: function (view) {
+        view.on("close", this.hideModal, this);
+        this.$el.modal('show');
+    },
+
+    hideModal: function () {
+        this.$el.modal('hide');
+    }
+});

NzbDrone.Web/_backboneApp/Shared/NotificationView.js

@@ -17,8 +17,6 @@ NzbDrone.Shared.NotificationItemView = Backbone.Marionette.ItemView.extend({
         }).done(function () {
             self.model.destroy();
         });
-
-
     }
 });
 

NzbDrone.Web/_backboneApp/app.js

@@ -11,6 +11,7 @@
 /// <reference path="JsLibraries/backbone.marionette.viewswapper.js" />
 /// <reference path="JsLibraries/backbone.modelbinder.js" />
 /// <reference path="JsLibraries/bootstrap.js" />
+/// <reference path="Shared/ModalRegion.js" />
 
 if (typeof console === undefined) {
     window.console = { log: function () { } };
@@ -73,11 +74,52 @@ NzbDrone.addInitializer(function (options) {
 
     console.log('starting application');
 
+    NzbDrone.registerHelpers();
+
     NzbDrone.addRegions({
         mainRegion: '#main-region',
-        notificationRegion: '#notification-region'
+        notificationRegion: '#notification-region',
+        modalRegion: ModalRegion
     });
 
     NzbDrone.Router = new NzbDrone.Router();
     Backbone.history.start();
-});
+});
+
+NzbDrone.registerHelpers = function() {
+    Handlebars.registerHelper("formatStatus", function (status, monitored) {
+        if (!monitored) return '<i class="icon-pause grid-icon" title="Not Monitored"></i>';
+        if (status === 'Continuing') return '<i class="icon-play grid-icon" title="Continuing"></i>';
+
+        return '<i class="icon-stop grid-icon" title="Ended"></i>';
+    });
+
+    Handlebars.registerHelper("formatBestDate", function (dateSource) {
+        if (!dateSource) return '';
+
+        var date = Date.create(dateSource);
+
+        if (date.isYesterday()) return 'Yesterday';
+        if (date.isToday()) return 'Today';
+        if (date.isTomorrow()) return 'Tomorrow';
+        if (date.isToday()) return 'Today';
+        if (date.isBefore(Date.create().addDays(7))) return date.format('{Weekday}');
+
+        return date.format('{MM}/{dd}/{yyyy}');
+    });
+
+    Handlebars.registerHelper("formatProgress", function (episodeFileCount, episodeCount) {
+        var percent = 100;
+
+        if (!episodeFileCount) episodeFileCount = 0;
+        if (!episodeCount) episodeCount = 0;
+
+        if (episodeCount > 0)
+            percent = episodeFileCount / episodeCount * 100;
+
+        var result = '<div class="progress">';
+        result += '<span class="progressbar-back-text">' + episodeFileCount + ' / ' + episodeCount + '</span>';
+        result += '<div class="bar" style="width: ' + percent + '%"><span class="progressbar-front-text">' + episodeFileCount + ' / ' + episodeCount + '</span></div>';
+        return result + '</div>';
+    });
+}