Calendar moved to layout

UI/Calendar/CalendarCollectionTemplate.html

@@ -1,8 +0,0 @@
-<div class="row">
-    <div id="events" class="span3">
-        <h4>Upcoming</h4>
-    </div>
-    <div class=span9>
-        <div id="calendar"></div>
-    </div>
-</div>

UI/Calendar/CalendarItemView.js

@@ -1,12 +0,0 @@
-'use strict';
-
-define([
-    'app',
-    'Calendar/CalendarCollection'
-
-], function () {
-    NzbDrone.Calendar.CalendarItemView = Backbone.Marionette.ItemView.extend({
-        template : 'Calendar/CalendarItemTemplate',
-        tagName  : 'div'
-    });
-});

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());
+            }
+        });
+    });

UI/Calendar/CalendarLayoutTemplate.html

@@ -0,0 +1,9 @@
+<div class="row">
+    <div class="span3">
+        <h4>Upcoming</h4>
+        <div id="x-upcoming"></div>
+    </div>
+    <div class=span9>
+        <div id="x-calendar" class="calendar"></div>
+    </div>
+</div>

UI/Calendar/CalendarView.js

@@ -1,21 +1,12 @@
 'use strict';
 
-define(['app', 'Calendar/CalendarItemView'], function () {
+define(['app', 'Calendar/Collection'], function () {
-    NzbDrone.Calendar.CalendarCollectionView = Backbone.Marionette.CompositeView.extend({
+    NzbDrone.Calendar.CalendarView = Backbone.Marionette.ItemView.extend({
-        itemView         : NzbDrone.Calendar.CalendarItemView,
-        itemViewContainer: '#events',
-        template         : 'Calendar/CalendarCollectionTemplate',
-
-        ui: {
-            calendar: '#calendar'
-        },
-
         initialize                   : function () {
-            //should use this.collection?
+            this.collection = new NzbDrone.Calendar.Collection();
-            this.calendar = new NzbDrone.Calendar.CalendarCollection();
         },
-        onCompositeCollectionRendered: function () {
+        render: function () {
-            $(this.ui.calendar).empty().fullCalendar({
+            $(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) {

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;
+        }
+    });
+});

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,
 

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
+    });
+});

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'
+    });
+});

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;
+  }
+}

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;

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();
+                NzbDrone.mainRegion.show(new NzbDrone.Calendar.CalendarLayout());
-                calendarCollection.fetch();
-                NzbDrone.mainRegion.show(new NzbDrone.Calendar.CalendarCollectionView({collection: calendarCollection}));
             },
 
 

UI/Index.html

@@ -21,6 +21,7 @@
     <link href="/content/base.css" rel='stylesheet' type='text/css'/>
     <link href="/settings/notifications/notifications.css" rel='stylesheet' type='text/css'/>
     <link href="/settings/indexers/indexers.css" rel='stylesheet' type='text/css'/>
+    <link href="/calendar/calendar.css" rel='stylesheet' type='text/css'/>
 </head>
 <body>
 <div id="in-sub-nav">