Calendar moved to layout

This commit is contained in:
Mark McDowall 2013-06-06 22:33:01 -07:00
parent 60e28140ab
commit c04dc9d5e9
14 changed files with 211 additions and 149 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

13
UI/Calendar/Collection.js Normal file
View File

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

View File

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

View File

@ -0,0 +1,7 @@
'use strict';
define(['app', 'Calendar/UpcomingItemView'], function () {
NzbDrone.Calendar.UpcomingCollectionView = Backbone.Marionette.CollectionView.extend({
itemView: NzbDrone.Calendar.UpcomingItemView
});
});

View File

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

121
UI/Calendar/calendar.less Normal file
View File

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

View File

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

View File

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

View File

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