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/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'
-    ], function (vent, Marionette, Backgrid, ToggleCell, EpisodeTitleCell, RelativeDateCell, EpisodeStatusCell, EpisodeActionsCell, CommandController, Moment, _) {
+        'underscore',
+        '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;
+    }
+  }
 }