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 @@