Series monitored visible on seasons/episodes on details page and episode details modal

New: Visual indication on season/episode when series is not monitored
New: Prevent changing monitored state when series is not monitored

src/UI/Cells/EpisodeMonitoredCell.js

@@ -0,0 +1,31 @@
+'use strict';
+
+define(
+    [
+        'Cells/ToggleCell',
+        'Series/SeriesCollection',
+        'Shared/Messenger'
+    ], function (ToggleCell, SeriesCollection, Messenger) {
+        return ToggleCell.extend({
+
+            className: 'toggle-cell episode-monitored',
+
+            _originalOnClick: ToggleCell.prototype._onClick,
+
+            _onClick: function () {
+                var series = SeriesCollection.get(this.model.get('seriesId'));
+
+                if (!series.get('monitored')) {
+
+                    Messenger.show({
+                        message: 'Unable to change monitored state when series is not monitored',
+                        type   : 'error'
+                    });
+
+                    return;
+                }
+
+                this._originalOnClick.apply(this, arguments);
+            }
+        });
+    });

src/UI/Episode/EpisodeDetailsLayout.js

@@ -5,8 +5,9 @@ define(
         'Episode/Summary/EpisodeSummaryLayout',
         'Episode/Search/EpisodeSearchLayout',
         'Episode/Activity/EpisodeActivityLayout',
-        'Series/SeriesCollection'
+        'Series/SeriesCollection',
-    ], function (Marionette, SummaryLayout, SearchLayout, EpisodeActivityLayout, SeriesCollection) {
+        'Shared/Messenger'
+    ], function (Marionette, SummaryLayout, SearchLayout, EpisodeActivityLayout, SeriesCollection, Messenger) {
 
         return Marionette.Layout.extend({
             template: 'Episode/EpisodeDetailsLayoutTemplate',
@@ -37,7 +38,7 @@ define(
             initialize: function (options) {
                 this.templateHelpers.hideSeriesLink = options.hideSeriesLink;
 
-                this.series = SeriesCollection.find({ id: this.model.get('seriesId') });
+                this.series = SeriesCollection.get(this.model.get('seriesId'));
                 this.templateHelpers.series = this.series.toJSON();
                 this.openingTab = options.openingTab || 'summary';
 
@@ -57,6 +58,14 @@ define(
                 }
 
                 this._setMonitoredState();
+
+                if (this.series.get('monitored')) {
+                    this.$el.removeClass('series-not-monitored');
+                }
+
+                else {
+                    this.$el.addClass('series-not-monitored');
+                }
             },
 
             _showSummary: function (e) {
@@ -87,6 +96,16 @@ define(
             },
 
             _toggleMonitored: function () {
+                if (!this.series.get('monitored')) {
+
+                    Messenger.show({
+                        message: 'Unable to change monitored state when series is not monitored',
+                        type   : 'error'
+                    });
+
+                    return;
+                }
+
                 var name = 'monitored';
                 this.model.set(name, !this.model.get(name), { silent: true });
 

src/UI/Episode/EpisodeDetailsLayoutTemplate.html

@@ -3,7 +3,7 @@
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
         <h3>
-            <i class="icon-bookmark x-episode-monitored" title="Toggle monitored status" />
+            <i class="icon-bookmark x-episode-monitored episode-monitored" title="Toggle monitored status" />
             {{series.title}} - {{EpisodeNumber}} - {{title}}
         </h3>
 

src/UI/Series/Details/SeasonLayout.js

@@ -4,15 +4,27 @@ define(
         'vent',
         'marionette',
         'backgrid',
-        'Cells/ToggleCell',
+        'Cells/EpisodeMonitoredCell',
         'Cells/EpisodeTitleCell',
         'Cells/RelativeDateCell',
         'Cells/EpisodeStatusCell',
         'Cells/EpisodeActionsCell',
         'Commands/CommandController',
         'moment',
-        'underscore'
+        'underscore',
-    ], function (vent, Marionette, Backgrid, ToggleCell, EpisodeTitleCell, RelativeDateCell, EpisodeStatusCell, EpisodeActionsCell, CommandController, Moment, _) {
+        'Shared/Messenger'
+    ], function (vent,
+                Marionette,
+                Backgrid,
+                ToggleCell,
+                EpisodeTitleCell,
+                RelativeDateCell,
+                EpisodeStatusCell,
+                EpisodeActionsCell,
+                CommandController,
+                Moment,
+                _,
+                Messenger) {
         return Marionette.Layout.extend({
             template: 'Series/Details/SeasonLayoutTemplate',
 
@@ -95,7 +107,6 @@ define(
 
             onRender: function () {
 
-
                 if (this.showingEpisodes) {
                     this._showEpisodes();
                 }
@@ -135,6 +146,16 @@ define(
             },
 
             _seasonMonitored: function () {
+                if (!this.series.get('monitored')) {
+
+                    Messenger.show({
+                        message: 'Unable to change monitored state when series is not monitored',
+                        type   : 'error'
+                    });
+
+                    return;
+                }
+
                 var name = 'monitored';
                 this.model.set(name, !this.model.get(name));
                 this.series.setSeasonMonitored(this.model.get('seasonNumber'));

src/UI/Series/Details/SeasonLayoutTemplate.html

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

src/UI/Series/Details/SeriesDetailsLayout.js

@@ -141,10 +141,12 @@ define(
                 if (monitored) {
                     this.ui.monitored.addClass('icon-nd-monitored');
                     this.ui.monitored.removeClass('icon-nd-unmonitored');
+                    this.$el.removeClass('series-not-monitored');
                 }
                 else {
                     this.ui.monitored.addClass('icon-nd-unmonitored');
                     this.ui.monitored.removeClass('icon-nd-monitored');
+                    this.$el.addClass('series-not-monitored');
                 }
             },
 

src/UI/Series/series.less

@@ -310,4 +310,17 @@
   .selected-count {
     margin-right: 10px;
   }
+}
+
+//Series Details
+
+.series-not-monitored {
+  .season-monitored, .episode-monitored {
+    color: #888888;
+    cursor: not-allowed;
+
+    i {
+      cursor: not-allowed;
+    }
+  }
 }

src/UI/app.js

@@ -23,7 +23,7 @@ require.config({
         'signalR'                 : 'JsLibraries/jquery.signalR',
         'jquery-ui'               : 'JsLibraries/jquery-ui',
         'jquery.knob'             : 'JsLibraries/jquery.knob',
-        'jquery.easypiechart' : 'JsLibraries/jquery.easypiechart',
+        'jquery.easypiechart'     : 'JsLibraries/jquery.easypiechart',
         'jquery.dotdotdot'        : 'JsLibraries/jquery.dotdotdot',
         'messenger'               : 'JsLibraries/messenger',
         'jquery'                  : 'JsLibraries/jquery',