Added seasons to top of series details (toggling and jump to)

UI/Content/base.less

@@ -115,8 +115,13 @@ th {
   display  : block;
 }
 
-a {
+a, .btn {
   i {
     cursor: pointer;
   }
+}
+
+.label-white {
+  color: black;
+  background-color: white;
 }

UI/Series/Details/SeasonLayout.js

@@ -78,6 +78,10 @@ define(
                     episode.set({ hideSeriesLink: true, series: options.series });
                 });
 
+                this.model.on('sync', function () {
+                    this._afterSeasonMonitored();
+                }, this);
+
                 this.episodeCollection.on('sync', function () {
                     this.render();
                 }, this);

UI/Series/Details/SeasonLayoutTemplate.html

@@ -1,4 +1,4 @@
-<div class="series-season">
+<div class="series-season" id="season-{{seasonNumber}}">
     <h2>
         <i class="x-season-monitored clickable" title="Toggle season monitored status"/>
         {{#if seasonNumber}}

UI/Series/Details/SeasonMenu/CollectionView.js

@@ -0,0 +1,31 @@
+'use strict';
+define(
+    [
+        'marionette',
+        'Series/Details/SeasonMenu/ItemView'
+    ], function (Marionette, ItemView) {
+        return Marionette.CollectionView.extend({
+
+            itemView: ItemView,
+
+            initialize: function (options) {
+
+                if (!options.episodeCollection) {
+                    throw 'episodeCollection is needed';
+                }
+
+                this.episodeCollection = options.episodeCollection;
+            },
+
+            itemViewOptions: function () {
+                return {
+                    episodeCollection: this.episodeCollection,
+                };
+            },
+
+            appendHtml: function(collectionView, itemView, index){
+                var childrenContainer = $(collectionView.childrenContainer || collectionView.el);
+                childrenContainer.prepend(itemView.el);
+            }
+        });
+    });

UI/Series/Details/SeasonMenu/ItemView.js

@@ -0,0 +1,88 @@
+'use strict';
+define(
+    [
+        'marionette',
+        'Shared/Actioneer'
+    ], function (Marionette, Actioneer) {
+        return Marionette.ItemView.extend({
+            template: 'Series/Details/SeasonMenu/ItemViewTemplate',
+            tagName : 'span',
+
+            ui: {
+                seasonMonitored: '.x-season-monitored'
+            },
+
+            events: {
+                'click .x-season-monitored': '_seasonMonitored',
+                'click .x-text': '_gotoSeason'
+            },
+
+            initialize: function (options) {
+
+                if (!options.episodeCollection) {
+                    throw 'episodeCollection is needed';
+                }
+
+                this.episodeCollection = options.episodeCollection.bySeason(this.model.get('seasonNumber'));
+
+                var allDownloaded = _.all(this.episodeCollection.models, function (model) {
+                    var hasFile = model.get('hasFile');
+                    return hasFile;
+                });
+
+                this.model.set({
+                   allFilesDownloaded: allDownloaded
+                });
+
+                this.model.on('sync', function () {
+                    this.render();
+                }, this);
+            },
+
+            onRender: function () {
+                this._setSeasonMonitoredState();
+            },
+
+            _seasonSearch: function () {
+                Actioneer.ExecuteCommand({
+                    command     : 'seasonSearch',
+                    properties  : {
+                        seriesId    : this.model.get('seriesId'),
+                        seasonNumber: this.model.get('seasonNumber')
+                    },
+                    element     : this.ui.seasonSearch,
+                    failMessage : 'Search for season {0} failed'.format(this.model.get('seasonNumber')),
+                    startMessage: 'Search for season {0} started'.format(this.model.get('seasonNumber'))
+                });
+            },
+
+            _seasonMonitored: function (e) {
+                e.preventDefault();
+
+                var name = 'monitored';
+                this.model.set(name, !this.model.get(name));
+
+                Actioneer.SaveModel({
+                    context       : this,
+                    element       : this.ui.seasonMonitored
+                });
+            },
+
+            _setSeasonMonitoredState: function () {
+                this.ui.seasonMonitored.removeClass('icon-spinner icon-spin');
+
+                if (this.model.get('monitored')) {
+                    this.ui.seasonMonitored.addClass('icon-bookmark');
+                    this.ui.seasonMonitored.removeClass('icon-bookmark-empty');
+                }
+                else {
+                    this.ui.seasonMonitored.addClass('icon-bookmark-empty');
+                    this.ui.seasonMonitored.removeClass('icon-bookmark');
+                }
+            },
+
+            _gotoSeason: function () {
+                window.location.hash = '#season-' + this.model.get('seasonNumber');
+            }
+        });
+    });

UI/Series/Details/SeasonMenu/ItemViewTemplate.html

@@ -0,0 +1,14 @@
+{{#if allFilesDownloaded}}
+<span class="label label-info season-menu-item">
+{{else}}
+<span class="label label-white season-menu-item">
+{{/if}}
+    <i class="x-season-monitored clickable" title="Toggle season monitored status"/>
+    <span class="x-text text" title="Go to season">
+        {{#if_eq seasonNumber compare=0}}
+            Specials
+        {{else}}
+            S{{Pad2 seasonNumber}}
+        {{/if_eq}}
+    </span>
+</span>

UI/Series/Details/SeriesDetailsLayout.js

@@ -6,17 +6,19 @@ define(
         'Series/EpisodeCollection',
         'Series/SeasonCollection',
         'Series/Details/SeasonCollectionView',
+        'Series/Details/SeasonMenu/CollectionView',
         'Shared/LoadingView',
         'Shared/Actioneer',
         'backstrech'
-    ], function (App, Marionette, EpisodeCollection, SeasonCollection, SeasonCollectionView, LoadingView, Actioneer) {
+    ], function (App, Marionette, EpisodeCollection, SeasonCollection, SeasonCollectionView, SeasonMenuCollectionView, LoadingView, Actioneer) {
         return Marionette.Layout.extend({
 
             itemViewContainer: '.x-series-seasons',
             template         : 'Series/Details/SeriesDetailsTemplate',
 
             regions: {
-                seasons: '#seasons'
+                seasonMenu: '#season-menu',
+                seasons   : '#seasons'
             },
 
             ui: {
@@ -69,6 +71,11 @@ define(
                         episodeCollection: self.episodeCollection,
                         series           : self.model
                     }));
+
+                    self.seasonMenu.show(new SeasonMenuCollectionView({
+                        collection: self.seasonCollection,
+                        episodeCollection: self.episodeCollection
+                    }));
                 });
 
                 this._setMonitoredState();

UI/Series/Details/SeriesDetailsTemplate.html

@@ -36,6 +36,9 @@
                 {{/if}}
             </span>
         </div>
+        <div class="row">
+            <div id="season-menu" class="season-menu"></div>
+        </div>
     </div>
 </div>
-<div id="seasons"/>
+<div id="seasons"></div>

UI/Series/series.less

@@ -53,6 +53,25 @@
   .opacity(0.9);
 }
 
+.season-menu {
+  margin-top: 5px;
+
+  .season-menu-item {
+
+    .text {
+      .clickable;
+    }
+
+    a:hover {
+      text-decoration: none;
+    }
+
+    i:before {
+      width: 10px;
+    }
+  }
+}
+
 .series-posters {
   list-style-type : none;