From c04dc9d5e98ef62f01d1a54fd4edc402bf1aa358 Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Thu, 6 Jun 2013 22:33:01 -0700 Subject: [PATCH] Calendar moved to layout --- UI/Calendar/CalendarCollectionTemplate.html | 8 -- UI/Calendar/CalendarItemView.js | 12 -- UI/Calendar/CalendarLayout.js | 37 ++++++ UI/Calendar/CalendarLayoutTemplate.html | 9 ++ ...endarCollectionView.js => CalendarView.js} | 27 ++-- UI/Calendar/Collection.js | 13 ++ ...darCollection.js => UpcomingCollection.js} | 2 +- UI/Calendar/UpcomingCollectionView.js | 7 + ...emplate.html => UpcomingItemTemplate.html} | 0 UI/Calendar/UpcomingItemView.js | 12 ++ UI/Calendar/calendar.less | 121 ++++++++++++++++++ UI/Content/theme.less | 105 --------------- UI/Controller.js | 6 +- UI/Index.html | 1 + 14 files changed, 211 insertions(+), 149 deletions(-) delete mode 100644 UI/Calendar/CalendarCollectionTemplate.html delete mode 100644 UI/Calendar/CalendarItemView.js create mode 100644 UI/Calendar/CalendarLayout.js create mode 100644 UI/Calendar/CalendarLayoutTemplate.html rename UI/Calendar/{CalendarCollectionView.js => CalendarView.js} (78%) create mode 100644 UI/Calendar/Collection.js rename UI/Calendar/{CalendarCollection.js => UpcomingCollection.js} (84%) create mode 100644 UI/Calendar/UpcomingCollectionView.js rename UI/Calendar/{CalendarItemTemplate.html => UpcomingItemTemplate.html} (100%) create mode 100644 UI/Calendar/UpcomingItemView.js create mode 100644 UI/Calendar/calendar.less diff --git a/UI/Calendar/CalendarCollectionTemplate.html b/UI/Calendar/CalendarCollectionTemplate.html deleted file mode 100644 index a333dd69a..000000000 --- a/UI/Calendar/CalendarCollectionTemplate.html +++ /dev/null @@ -1,8 +0,0 @@ -
-
-

Upcoming

-
-
-
-
-
\ No newline at end of file diff --git a/UI/Calendar/CalendarItemView.js b/UI/Calendar/CalendarItemView.js deleted file mode 100644 index a831616e1..000000000 --- a/UI/Calendar/CalendarItemView.js +++ /dev/null @@ -1,12 +0,0 @@ -'use strict'; - -define([ - 'app', - 'Calendar/CalendarCollection' - -], function () { - NzbDrone.Calendar.CalendarItemView = Backbone.Marionette.ItemView.extend({ - template : 'Calendar/CalendarItemTemplate', - tagName : 'div' - }); -}); \ No newline at end of file diff --git a/UI/Calendar/CalendarLayout.js b/UI/Calendar/CalendarLayout.js new file mode 100644 index 000000000..18796aecf --- /dev/null +++ b/UI/Calendar/CalendarLayout.js @@ -0,0 +1,37 @@ +"use strict"; +define([ + 'app', + 'Calendar/UpcomingCollectionView', + 'Calendar/CalendarView', + 'Shared/Toolbar/ToolbarLayout' +], + function () { + NzbDrone.Calendar.CalendarLayout = Backbone.Marionette.Layout.extend({ + template: 'Calendar/CalendarLayoutTemplate', + + regions: { + upcoming: '#x-upcoming', + calendar: '#x-calendar' + }, + + initialize: function () { + this.upcomingCollection = new NzbDrone.Calendar.UpcomingCollection(); + this.upcomingCollection.fetch(); + }, + + onShow: function () { + this._showUpcoming(); + this._showCalendar(); + }, + + _showUpcoming: function () { + this.upcoming.show(new NzbDrone.Calendar.UpcomingCollectionView({ + collection: this.upcomingCollection + })); + }, + + _showCalendar: function () { + this.calendar.show(new NzbDrone.Calendar.CalendarView()); + } + }); + }); diff --git a/UI/Calendar/CalendarLayoutTemplate.html b/UI/Calendar/CalendarLayoutTemplate.html new file mode 100644 index 000000000..cf5e9a475 --- /dev/null +++ b/UI/Calendar/CalendarLayoutTemplate.html @@ -0,0 +1,9 @@ +
+
+

Upcoming

+
+
+
+
+
+
\ No newline at end of file diff --git a/UI/Calendar/CalendarCollectionView.js b/UI/Calendar/CalendarView.js similarity index 78% rename from UI/Calendar/CalendarCollectionView.js rename to UI/Calendar/CalendarView.js index 2c1bdc9d5..e14786893 100644 --- a/UI/Calendar/CalendarCollectionView.js +++ b/UI/Calendar/CalendarView.js @@ -1,21 +1,12 @@ 'use strict'; -define(['app', 'Calendar/CalendarItemView'], function () { - NzbDrone.Calendar.CalendarCollectionView = Backbone.Marionette.CompositeView.extend({ - itemView : NzbDrone.Calendar.CalendarItemView, - itemViewContainer: '#events', - template : 'Calendar/CalendarCollectionTemplate', - - ui: { - calendar: '#calendar' - }, - +define(['app', 'Calendar/Collection'], function () { + NzbDrone.Calendar.CalendarView = Backbone.Marionette.ItemView.extend({ initialize : function () { - //should use this.collection? - this.calendar = new NzbDrone.Calendar.CalendarCollection(); + this.collection = new NzbDrone.Calendar.Collection(); }, - onCompositeCollectionRendered: function () { - $(this.ui.calendar).empty().fullCalendar({ + render: function () { + $(this.$el).empty().fullCalendar({ defaultView : 'basicWeek', allDayDefault : false, ignoreTimezone: false, @@ -55,22 +46,20 @@ define(['app', 'Calendar/CalendarItemView'], function () { } }); - NzbDrone.Calendar.CalendarCollectionView.Instance = this; + NzbDrone.Calendar.CalendarView.Instance = this; }, - onShow: function () { this.$('.fc-button-today').click(); }, - getEvents: function (start, end, callback) { - var bbView = NzbDrone.Calendar.CalendarCollectionView.Instance; + var bbView = NzbDrone.Calendar.CalendarView.Instance; var startDate = Date.create(start).format(Date.ISO8601_DATETIME); var endDate = Date.create(end).format(Date.ISO8601_DATETIME); - bbView.calendar.fetch({ + bbView.collection.fetch({ data : { start: startDate, end: endDate }, success: function (calendarCollection) { _.each(calendarCollection.models, function (element) { diff --git a/UI/Calendar/Collection.js b/UI/Calendar/Collection.js new file mode 100644 index 000000000..ec977b3e6 --- /dev/null +++ b/UI/Calendar/Collection.js @@ -0,0 +1,13 @@ +"use strict"; +define(['app', 'Series/EpisodeModel'], function () { + NzbDrone.Calendar.Collection = Backbone.Collection.extend({ + url : NzbDrone.Constants.ApiRoot + '/calendar', + model : NzbDrone.Series.EpisodeModel, + + comparator: function(model) { + var date = new Date(model.get('airDate')); + var time = date.getTime(); + return time; + } + }); +}); \ No newline at end of file diff --git a/UI/Calendar/CalendarCollection.js b/UI/Calendar/UpcomingCollection.js similarity index 84% rename from UI/Calendar/CalendarCollection.js rename to UI/Calendar/UpcomingCollection.js index 3309dde8c..de535c897 100644 --- a/UI/Calendar/CalendarCollection.js +++ b/UI/Calendar/UpcomingCollection.js @@ -1,6 +1,6 @@ "use strict"; define(['app', 'Series/EpisodeModel'], function () { - NzbDrone.Calendar.CalendarCollection = Backbone.Collection.extend({ + NzbDrone.Calendar.UpcomingCollection = Backbone.Collection.extend({ url : NzbDrone.Constants.ApiRoot + '/calendar', model : NzbDrone.Series.EpisodeModel, diff --git a/UI/Calendar/UpcomingCollectionView.js b/UI/Calendar/UpcomingCollectionView.js new file mode 100644 index 000000000..9cccbb165 --- /dev/null +++ b/UI/Calendar/UpcomingCollectionView.js @@ -0,0 +1,7 @@ +'use strict'; + +define(['app', 'Calendar/UpcomingItemView'], function () { + NzbDrone.Calendar.UpcomingCollectionView = Backbone.Marionette.CollectionView.extend({ + itemView: NzbDrone.Calendar.UpcomingItemView + }); +}); diff --git a/UI/Calendar/CalendarItemTemplate.html b/UI/Calendar/UpcomingItemTemplate.html similarity index 100% rename from UI/Calendar/CalendarItemTemplate.html rename to UI/Calendar/UpcomingItemTemplate.html diff --git a/UI/Calendar/UpcomingItemView.js b/UI/Calendar/UpcomingItemView.js new file mode 100644 index 000000000..78995d063 --- /dev/null +++ b/UI/Calendar/UpcomingItemView.js @@ -0,0 +1,12 @@ +'use strict'; + +define([ + 'app', + 'Calendar/UpcomingCollection' + +], function () { + NzbDrone.Calendar.UpcomingItemView = Backbone.Marionette.ItemView.extend({ + template : 'Calendar/UpcomingItemTemplate', + tagName : 'div' + }); +}); \ No newline at end of file diff --git a/UI/Calendar/calendar.less b/UI/Calendar/calendar.less new file mode 100644 index 000000000..0c4e1e7ae --- /dev/null +++ b/UI/Calendar/calendar.less @@ -0,0 +1,121 @@ +.calendar { + th, td { + border-color: #eeeeee; + } + + .primary { + border-color: #007ccd; + background-color: #007ccd; + } + + .fc-event-skin { + background-color: #007ccd; + border: 1px solid #007ccd; + border-radius: 4px; + text-align: center; + } + + .info { + border-color: #14b8d4; + background-color: #14b8d4; + } + + .inverse { + border-color: #333333; + background-color: #333333; + } + + .warning { + border-color: #ffa93c; + background-color: #ffa93c; + } + + .danger { + border-color: #ea494a; + background-color: #ea494a; + } + + th { + background-color: #eeeeee; + } + + .purple { + border-color: #7932ea; + background-color: #7932ea; + } + + .success { + border-color: #4cb158; + background-color: #4cb158; + } + h2 { + font-size: 17.5px; + } +} + +.event { + display: inline-block; + width: 100%; + margin-bottom: 10px; + border-top: 1px solid #eeeeee; + padding-top: 10px; + + .primary { + border-color: #007ccd; + } + + .info { + border-color: #14b8d4; + } + + h4 { + text-transform: none !important; + font-weight: 500; + color: #008dcd; + margin: 5px 0px; + } + + .inverse { + border-color: #333333; + } + + .warning { + border-color: #ffa93c; + } + + p { + color: #999999; + } + + .danger { + border-color: #ea494a; + } + + .date { + text-align: center; + display: inline-block; + border-left: 4px solid #eeeeee; + padding-left: 16px; + float: left; + margin-right: 20px; + + h4 { + line-height: 1em; + color: #555555; + font-weight: 300; + } + + h1 { + font-weight: 500; + line-height: 0.8em; + } + } + + .purple { + border-color: #7932ea; + } + + .success { + border-color: #4cb158; + } +} \ No newline at end of file diff --git a/UI/Content/theme.less b/UI/Content/theme.less index d1c4c9482..9193efa49 100644 --- a/UI/Content/theme.less +++ b/UI/Content/theme.less @@ -30,10 +30,6 @@ } } -#calendar th, #calendar td { - border-color: #eeeeee; -} - .panel .success, .panel .success h6 { background-color: #4cb158; } @@ -143,107 +139,6 @@ body { border-radius: 4px; } -#calendar { - .primary { - border-color: #007ccd; - background-color: #007ccd; - } - .fc-event-skin { - background-color: #007ccd; - border: 1px solid #007ccd; - border-radius: 4px; - text-align: center; - } - .info { - border-color: #14b8d4; - background-color: #14b8d4; - } - .fc-state-highlight { - background: rgba(20, 184, 212, .2); - } - .inverse { - border-color: #333333; - background-color: #333333; - } - .warning { - border-color: #ffa93c; - background-color: #ffa93c; - } - .danger { - border-color: #ea494a; - background-color: #ea494a; - } - th { - background-color: #eeeeee; - } - .purple { - border-color: #7932ea; - background-color: #7932ea; - } - .success { - border-color: #4cb158; - background-color: #4cb158; - } - h2 { - font-size: 17.5px; - } -} - -.event { - display: inline-block; - width: 100%; - margin-bottom: 10px; - border-top: 1px solid #eeeeee; - padding-top: 10px; - .primary { - border-color: #007ccd; - } - .info { - border-color: #14b8d4; - } - h4 { - text-transform: none !important; - font-weight: 500; - color: #008dcd; - margin: 5px 0px; - } - .inverse { - border-color: #333333; - } - .warning { - border-color: #ffa93c; - } - p { - color: #999999; - } - .danger { - border-color: #ea494a; - } - .date { - text-align: center; - display: inline-block; - border-left: 4px solid #eeeeee; - padding-left: 16px; - float: left; - margin-right: 20px; - h4 { - line-height: 1em; - color: #555555; - font-weight: 300; - } - h1 { - font-weight: 500; - line-height: 0.8em; - } - } - .purple { - border-color: #7932ea; - } - .success { - border-color: #4cb158; - } -} - .profile-sidebar { ul { margin: 0; diff --git a/UI/Controller.js b/UI/Controller.js index 5c22854ef..6d99ccb3a 100644 --- a/UI/Controller.js +++ b/UI/Controller.js @@ -3,7 +3,7 @@ define(['app', 'Form/FormBuilder', 'AddSeries/AddSeriesLayout', 'Series/Index/SeriesIndexLayout', - 'Calendar/CalendarCollectionView', + 'Calendar/CalendarLayout', 'Shared/NotificationView', 'Shared/NotFoundView', 'MainMenuView', @@ -43,9 +43,7 @@ define(['app', calendar: function () { this._setTitle('Calendar'); - var calendarCollection = new NzbDrone.Calendar.CalendarCollection(); - calendarCollection.fetch(); - NzbDrone.mainRegion.show(new NzbDrone.Calendar.CalendarCollectionView({collection: calendarCollection})); + NzbDrone.mainRegion.show(new NzbDrone.Calendar.CalendarLayout()); }, diff --git a/UI/Index.html b/UI/Index.html index 868809a8e..ebfd120b9 100644 --- a/UI/Index.html +++ b/UI/Index.html @@ -21,6 +21,7 @@ +