New: Filter visible series on season pass

New: Filter visible series on series editor

src/UI/SeasonPass/SeasonPassLayout.js

@@ -5,29 +5,93 @@ define(
         'Series/SeriesCollection',
         'Series/SeasonCollection',
         'SeasonPass/SeriesCollectionView',
-        'Shared/LoadingView'
+        'Shared/LoadingView',
+        'Shared/Toolbar/ToolbarLayout',
+        'Mixins/backbone.signalr.mixin'
     ], function (Marionette,
                  SeriesCollection,
                  SeasonCollection,
                  SeriesCollectionView,
-                 LoadingView) {
+                 LoadingView,
+                 ToolbarLayout) {
         return Marionette.Layout.extend({
             template: 'SeasonPass/SeasonPassLayoutTemplate',
 
             regions: {
-                series: '#x-series'
+                toolbar : '#x-toolbar',
+                series  : '#x-series'
             },
 
-            onShow: function () {
-                var self = this;
+            initialize: function () {
 
-                this.series.show(new LoadingView());
+                this.seriesCollection = SeriesCollection.clone();
+                this.seriesCollection.shadowCollection.bindSignalR();
 
-                this.seriesCollection = SeriesCollection;
+                this.listenTo(this.seriesCollection, 'sync', this.render);
 
-                self.series.show(new SeriesCollectionView({
-                    collection: self.seriesCollection
+                this.filteringOptions = {
+                    type         : 'radio',
+                    storeState   : true,
+                    menuKey      : 'seasonpass.filterMode',
+                    defaultAction: 'all',
+                    items        :
+                        [
+                            {
+                                key     : 'all',
+                                title   : '',
+                                tooltip : 'All',
+                                icon    : 'icon-circle-blank',
+                                callback: this._setFilter
+                            },
+                            {
+                                key     : 'monitored',
+                                title   : '',
+                                tooltip : 'Monitored Only',
+                                icon    : 'icon-nd-monitored',
+                                callback: this._setFilter
+                            },
+                            {
+                                key     : 'continuing',
+                                title   : '',
+                                tooltip : 'Continuing Only',
+                                icon    : 'icon-play',
+                                callback: this._setFilter
+                            },
+                            {
+                                key     : 'ended',
+                                title   : '',
+                                tooltip : 'Ended Only',
+                                icon    : 'icon-stop',
+                                callback: this._setFilter
+                            }
+                        ]
+                };
+            },
+
+            onRender: function () {
+
+                this.series.show(new SeriesCollectionView({
+                    collection: this.seriesCollection
                 }));
+
+                this._showToolbar();
+            },
+
+            _showToolbar: function () {
+
+                this.toolbar.show(new ToolbarLayout({
+                    right  :
+                        [
+                            this.filteringOptions
+                        ],
+                    context: this
+                }));
+            },
+
+            _setFilter: function(buttonContext) {
+                var mode = buttonContext.model.get('key');
+
+                this.seriesCollection.setFilterMode(mode);
             }
         });
     });

src/UI/SeasonPass/SeasonPassLayoutTemplate.html

@@ -1,4 +1,6 @@
-<div class="row">
+<div id="x-toolbar"></div>
+
+<div class="row">
     <div class="col-md-12">
         <div class="alert alert-info">Season Pass allows you to quickly change the monitored status of seasons for all your series in one place</div>
     </div>

src/UI/SeasonPass/SeriesLayoutTemplate.html

@@ -3,14 +3,14 @@
         <div class="col-md-12">
             <i class="icon-chevron-right x-expander expander pull-left"/>
             <i class="x-series-monitored series-monitor-toggle pull-left" title="Toggle monitored state for entire series"/>
-            <span class="title col-md-5">
+            <div class="title col-md-5">
                 <a href="{{route}}">
                     {{title}}
                 </a>
-            </span>
+            </div>
 
-            <span class="col-md-3">
-                <select class="x-season-select season-select">
+            <div class="col-md-2">
+                <select class="form-control x-season-select season-select">
                     <option value="-1">Select season...</option>
                     {{#each seasons}}
                         {{#if_eq seasonNumber compare="0"}}
@@ -20,11 +20,13 @@
                         {{/if_eq}}
                     {{/each}}
                 </select>
+            </div>
 
+            <div class="col-md-1">
                 <span class="help-inline">
                     <i class="icon-nd-form-info" title="Selecting a season will unmonitor all previous seasons"/>
                 </span>
-            </span>
+            </div>
 
             <span class="season-pass-button">
                 <button class="btn x-latest last">Latest Season Only</button>