Calendar view selection now persistent.
This commit is contained in:
parent
794c09c17a
commit
b10f8a6d3f
|
@ -8,25 +8,24 @@ define(
|
||||||
'Calendar/Collection',
|
'Calendar/Collection',
|
||||||
'System/StatusModel',
|
'System/StatusModel',
|
||||||
'History/Queue/QueueCollection',
|
'History/Queue/QueueCollection',
|
||||||
|
'Config',
|
||||||
'Mixins/backbone.signalr.mixin',
|
'Mixins/backbone.signalr.mixin',
|
||||||
'fullcalendar',
|
'fullcalendar',
|
||||||
'jquery.easypiechart'
|
'jquery.easypiechart'
|
||||||
], function (vent, Marionette, moment, CalendarCollection, StatusModel, QueueCollection) {
|
], function (vent, Marionette, moment, CalendarCollection, StatusModel, QueueCollection, Config) {
|
||||||
|
|
||||||
var _instance;
|
|
||||||
|
|
||||||
return Marionette.ItemView.extend({
|
return Marionette.ItemView.extend({
|
||||||
|
storageKey: 'calendar.view',
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
this.collection = new CalendarCollection().bindSignalR({ updateOnly: true });
|
this.collection = new CalendarCollection().bindSignalR({ updateOnly: true });
|
||||||
this.listenTo(this.collection, 'change', this._reloadCalendarEvents);
|
this.listenTo(this.collection, 'change', this._reloadCalendarEvents);
|
||||||
this.listenTo(QueueCollection, 'sync', this._reloadCalendarEvents);
|
this.listenTo(QueueCollection, 'sync', this._reloadCalendarEvents);
|
||||||
},
|
},
|
||||||
|
|
||||||
render : function () {
|
render : function () {
|
||||||
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
this.$el.empty().fullCalendar({
|
this.$el.empty().fullCalendar({
|
||||||
defaultView : 'basicWeek',
|
defaultView : Config.getValue(this.storageKey, 'basicWeek'),
|
||||||
allDayDefault : false,
|
allDayDefault : false,
|
||||||
ignoreTimezone: false,
|
ignoreTimezone: false,
|
||||||
weekMode : 'variable',
|
weekMode : 'variable',
|
||||||
|
@ -41,54 +40,62 @@ define(
|
||||||
prev: '<i class="icon-arrow-left"></i>',
|
prev: '<i class="icon-arrow-left"></i>',
|
||||||
next: '<i class="icon-arrow-right"></i>'
|
next: '<i class="icon-arrow-right"></i>'
|
||||||
},
|
},
|
||||||
viewRender : this._getEvents,
|
viewRender : this._viewRender.bind(this),
|
||||||
eventRender : function (event, element) {
|
eventRender : this._eventRender.bind(this),
|
||||||
self.$(element).addClass(event.statusLevel);
|
|
||||||
self.$(element).children('.fc-event-inner').addClass(event.statusLevel);
|
|
||||||
|
|
||||||
if (event.progress > 0) {
|
|
||||||
self.$(element).find('.fc-event-time')
|
|
||||||
.after('<span class="chart pull-right" data-percent="{0}"></span>'.format(event.progress));
|
|
||||||
|
|
||||||
self.$(element).find('.chart').easyPieChart({
|
|
||||||
barColor : '#ffffff',
|
|
||||||
trackColor: false,
|
|
||||||
scaleColor: false,
|
|
||||||
lineWidth : 2,
|
|
||||||
size : 14,
|
|
||||||
animate : false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
eventClick : function (event) {
|
eventClick : function (event) {
|
||||||
vent.trigger(vent.Commands.ShowEpisodeDetails, {episode: event.model});
|
vent.trigger(vent.Commands.ShowEpisodeDetails, {episode: event.model});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
_instance = this;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onShow: function () {
|
onShow: function () {
|
||||||
this.$('.fc-button-today').click();
|
this.$('.fc-button-today').click();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_viewRender: function (view) {
|
||||||
|
if (Config.getValue(this.storageKey) !== view.name) {
|
||||||
|
Config.setValue(this.storageKey, view.name);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._getEvents(view);
|
||||||
|
},
|
||||||
|
|
||||||
|
_eventRender: function (event, element) {
|
||||||
|
this.$(element).addClass(event.statusLevel);
|
||||||
|
this.$(element).children('.fc-event-inner').addClass(event.statusLevel);
|
||||||
|
|
||||||
|
if (event.progress > 0) {
|
||||||
|
this.$(element).find('.fc-event-time')
|
||||||
|
.after('<span class="chart pull-right" data-percent="{0}"></span>'.format(event.progress));
|
||||||
|
|
||||||
|
this.$(element).find('.chart').easyPieChart({
|
||||||
|
barColor : '#ffffff',
|
||||||
|
trackColor: false,
|
||||||
|
scaleColor: false,
|
||||||
|
lineWidth : 2,
|
||||||
|
size : 14,
|
||||||
|
animate : false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
_getEvents: function (view) {
|
_getEvents: function (view) {
|
||||||
var start = moment(view.visStart).toISOString();
|
var start = moment(view.visStart).toISOString();
|
||||||
var end = moment(view.visEnd).toISOString();
|
var end = moment(view.visEnd).toISOString();
|
||||||
|
|
||||||
_instance.$el.fullCalendar('removeEvents');
|
this.$el.fullCalendar('removeEvents');
|
||||||
|
|
||||||
_instance.collection.fetch({
|
this.collection.fetch({
|
||||||
data : { start: start, end: end },
|
data : { start: start, end: end },
|
||||||
success: function (collection) {
|
success: this._setEventData.bind(this)
|
||||||
_instance._setEventData(collection);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
_setEventData: function (collection) {
|
_setEventData: function (collection) {
|
||||||
var events = [];
|
var events = [];
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
collection.each(function (model) {
|
collection.each(function (model) {
|
||||||
var seriesTitle = model.get('series').title;
|
var seriesTitle = model.get('series').title;
|
||||||
var start = model.get('airDateUtc');
|
var start = model.get('airDateUtc');
|
||||||
|
@ -100,15 +107,15 @@ define(
|
||||||
start : start,
|
start : start,
|
||||||
end : end,
|
end : end,
|
||||||
allDay : false,
|
allDay : false,
|
||||||
statusLevel : _instance._getStatusLevel(model, end),
|
statusLevel : self._getStatusLevel(model, end),
|
||||||
progress : _instance._getDownloadProgress(model),
|
progress : self._getDownloadProgress(model),
|
||||||
model : model
|
model : model
|
||||||
};
|
};
|
||||||
|
|
||||||
events.push(event);
|
events.push(event);
|
||||||
});
|
});
|
||||||
|
|
||||||
_instance.$el.fullCalendar('addEventSource', events);
|
this.$el.fullCalendar('addEventSource', events);
|
||||||
},
|
},
|
||||||
|
|
||||||
_getStatusLevel: function (element, endTime) {
|
_getStatusLevel: function (element, endTime) {
|
||||||
|
|
Loading…
Reference in New Issue