From 17ffdbc89e462a701ce4bda02b1cba13a980b56d Mon Sep 17 00:00:00 2001
From: Mark McDowall <markus.mcd5@gmail.com>
Date: Thu, 18 Jul 2013 18:49:04 -0700
Subject: [PATCH] Toggle episode monitored status from episode details

---
 UI/Episode/Layout.js                     | 44 ++++++++++++++++++++----
 UI/Episode/LayoutTemplate.html           | 15 +++++---
 UI/Series/Details/SeasonLayout.js        |  6 ++--
 UI/Series/Details/SeriesDetailsLayout.js |  2 +-
 4 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/UI/Episode/Layout.js b/UI/Episode/Layout.js
index 6e51c6670..585f43dd8 100644
--- a/UI/Episode/Layout.js
+++ b/UI/Episode/Layout.js
@@ -16,21 +16,24 @@ define(
             },
 
             ui: {
-                summary : '.x-episode-summary',
-                activity: '.x-episode-activity',
-                search  : '.x-episode-search'
+                summary  : '.x-episode-summary',
+                activity : '.x-episode-activity',
+                search   : '.x-episode-search',
+                monitored: '.x-episode-monitored'
             },
 
             events: {
 
-                'click .x-episode-summary' : '_showSummary',
-                'click .x-episode-activity': '_showActivity',
-                'click .x-episode-search'  : '_showSearch'
+                'click .x-episode-summary'  : '_showSummary',
+                'click .x-episode-activity' : '_showActivity',
+                'click .x-episode-search'   : '_showSearch',
+                'click .x-episode-monitored': '_toggleMonitored'
             },
 
             onShow: function () {
                 this._showSummary();
                 this.searchLayout = new SearchLayout({ model: this.model });
+                this._setMonitoredState();
             },
 
 
@@ -59,6 +62,35 @@ define(
 
                 this.ui.search.tab('show');
                 this.search.show(this.searchLayout);
+            },
+
+            _toggleMonitored: function () {
+                var self = this;
+                var name = 'monitored';
+                this.model.set(name, !this.model.get(name), { silent: true });
+
+                this.ui.monitored.addClass('icon-spinner icon-spin');
+
+                var promise = this.model.save();
+
+                promise.always(function () {
+                    self._setMonitoredState();
+                });
+            },
+
+            _setMonitoredState: function () {
+                var monitored = this.model.get('monitored');
+
+                this.ui.monitored.removeClass('icon-spin icon-spinner');
+
+                if (this.model.get('monitored')) {
+                    this.ui.monitored.addClass('icon-bookmark');
+                    this.ui.monitored.removeClass('icon-bookmark-empty');
+                }
+                else {
+                    this.ui.monitored.addClass('icon-bookmark-empty');
+                    this.ui.monitored.removeClass('icon-bookmark');
+                }
             }
 
         });
diff --git a/UI/Episode/LayoutTemplate.html b/UI/Episode/LayoutTemplate.html
index 6feb72a83..7fd09cef6 100644
--- a/UI/Episode/LayoutTemplate.html
+++ b/UI/Episode/LayoutTemplate.html
@@ -2,11 +2,16 @@
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
-        {{#if episodeTitle}}
-            <h3>{{episodeTitle}} - {{EpisodeNumber}}</h3>
-        {{else}}
-            <h3>{{title}} - {{EpisodeNumber}}</h3>
-        {{/if}}
+        <h3>
+            <i class="icon-bookmark x-episode-monitored" title="Toggle monitored status" />
+            {{#if episodeTitle}}
+                {{episodeTitle}}
+            {{else}}
+                {{title}}
+            {{/if}}
+            -  {{EpisodeNumber}}
+        </h3>
+
     </div>
     <div class="modal-body">
         <ul class="nav nav-tabs" id="myTab">
diff --git a/UI/Series/Details/SeasonLayout.js b/UI/Series/Details/SeasonLayout.js
index 4bc643852..9e9c1f6c5 100644
--- a/UI/Series/Details/SeasonLayout.js
+++ b/UI/Series/Details/SeasonLayout.js
@@ -72,6 +72,10 @@ define(
                 _.each(this.episodeCollection.models, function (episode) {
                     episode.set({ hideSeriesLink: true, series: options.series });
                 });
+
+                this.episodeCollection.on('sync', function () {
+                    this.render();
+                }, this);
             },
 
             onRender: function () {
@@ -137,8 +141,6 @@ define(
             },
 
             _setSeasonMonitoredState: function () {
-                var monitored = this.model.get('monitored');
-
                 this.ui.seasonMonitored.removeClass('icon-spinner icon-spin');
 
                 if (this.model.get('monitored')) {
diff --git a/UI/Series/Details/SeriesDetailsLayout.js b/UI/Series/Details/SeriesDetailsLayout.js
index d46686066..07b0a589f 100644
--- a/UI/Series/Details/SeriesDetailsLayout.js
+++ b/UI/Series/Details/SeriesDetailsLayout.js
@@ -103,7 +103,7 @@ define(
             _setMonitoredState: function () {
                 var monitored = this.model.get('monitored');
 
-                this.ui.monitored.removeClass('icon-spin');
+                this.ui.monitored.removeClass('icon-spin icon-spinner');
 
                 if (this.model.get('monitored')) {
                     this.ui.monitored.addClass('icon-bookmark');