more functionality for ListCalendar
This commit is contained in:
rlx
parent
96d03fc386
commit
d2972cd526
5 changed files with 61 additions and 53 deletions
|
|
@ -586,7 +586,7 @@ Ox.Calendar = function(options, self) {
|
|||
event.rangeText = Ox.formatDateRange(event.start, event.end, true);
|
||||
event.durationText = Ox.formatDateRangeDuration(event.start, event.end, true);
|
||||
if (event.current) {
|
||||
event.rangeText = event.rangeText.split(' - ').shift() + ' - ...';
|
||||
event.rangeText = event.rangeText.split(' - ').shift() + ' - now';
|
||||
}
|
||||
return event;
|
||||
}
|
||||
|
|
@ -1068,6 +1068,7 @@ Ox.Calendar = function(options, self) {
|
|||
|
||||
that.addEvent = function(event) {
|
||||
Ox.print('CALENDAR ADD EVENT', event)
|
||||
event = getEventData(event);
|
||||
self.options.events.push(event);
|
||||
getLines();
|
||||
renderCalendar();
|
||||
|
|
@ -1106,6 +1107,7 @@ Ox.Calendar = function(options, self) {
|
|||
if ($element) {
|
||||
getLines();
|
||||
renderCalendar();
|
||||
panToSelected();
|
||||
}
|
||||
});
|
||||
return that;
|
||||
|
|
|
|||
|
|
@ -29,14 +29,6 @@ Ox.ListCalendar = function(options, self) {
|
|||
Ox.print('EVENT[0]', self.options.events[0])
|
||||
|
||||
self.columns = [
|
||||
{
|
||||
addable: false, // fixme: implement
|
||||
id: 'id',
|
||||
title: 'Id',
|
||||
unique: true,
|
||||
visible: false,
|
||||
width: 64
|
||||
},
|
||||
{
|
||||
id: 'name',
|
||||
operator: '+',
|
||||
|
|
@ -67,25 +59,48 @@ Ox.ListCalendar = function(options, self) {
|
|||
width: 64
|
||||
},
|
||||
{
|
||||
/*
|
||||
format: function(value, data) {
|
||||
return Ox.formatDateRange(data.start, data.end, true).split(' - ')[0];
|
||||
},
|
||||
*/
|
||||
id: 'start',
|
||||
map: function(value) {
|
||||
return Ox.parseDate(value);
|
||||
},
|
||||
operator: '-',
|
||||
title: 'Start',
|
||||
visible: true,
|
||||
width: 144
|
||||
},
|
||||
{
|
||||
/*
|
||||
format: function(value, data) {
|
||||
return Ox.formatDateRange(data.start, data.end, true).split(' - ')[1];
|
||||
},
|
||||
*/
|
||||
id: 'end',
|
||||
map: function(value) {
|
||||
return Ox.parseDate(value);
|
||||
},
|
||||
operator: '-',
|
||||
title: 'End',
|
||||
visible: true,
|
||||
width: 144
|
||||
},
|
||||
{
|
||||
id: 'duration',
|
||||
format: function(value, data) {
|
||||
return Ox.formatDateRangeDuration(data.start, data.end, true);
|
||||
},
|
||||
id: 'id',
|
||||
map: function(value, data) {
|
||||
return Ox.parseDate(data.end) - Ox.parseDate(data.start);
|
||||
},
|
||||
operator: '-',
|
||||
title: 'Duration',
|
||||
unique: true,
|
||||
visible: true,
|
||||
width: 144
|
||||
width: 256
|
||||
},
|
||||
{
|
||||
id: 'user',
|
||||
|
|
@ -172,14 +187,16 @@ Ox.ListCalendar = function(options, self) {
|
|||
columns: self.columns,
|
||||
columnsRemovable: true,
|
||||
columnsVisible: true,
|
||||
//items: Ox.clone(self.options.places),
|
||||
items: self.options.events,
|
||||
// we have to clone so that when self.options.events changes,
|
||||
// self.$list.options({items: self.options.events}) still
|
||||
// registers as a change
|
||||
items: Ox.clone(self.options.events, true),
|
||||
pageLength: self.options.pageLength,
|
||||
scrollbarVisible: true,
|
||||
sort: self.options.sort
|
||||
})
|
||||
.bindEvent({
|
||||
'delete': removeItem,
|
||||
'delete': removeEvent,
|
||||
init: initList, // fixme: won't fire from static list
|
||||
key_0: function() {
|
||||
self.$calendar.panToEvent();
|
||||
|
|
@ -215,7 +232,7 @@ Ox.ListCalendar = function(options, self) {
|
|||
|
||||
self.$calendar = Ox.Calendar({
|
||||
date: new Date(0),
|
||||
events: self.options.events,
|
||||
events: Ox.clone(self.options.events, true),
|
||||
height: self.options.height,
|
||||
width: self.options.width - 514,
|
||||
zoom: 4
|
||||
|
|
@ -446,6 +463,8 @@ Ox.ListCalendar = function(options, self) {
|
|||
Ox.print('ADD', self.$calendar.getBounds())
|
||||
var bounds = self.$calendar.getBounds(),
|
||||
middle = +self.$calendar.options('date'),
|
||||
startTime = +new Date((+bounds.startTime + middle) / 2),
|
||||
endTime = +new Date((+bounds.endTime + middle) / 2),
|
||||
event = {},
|
||||
i = 1;
|
||||
event.name = 'Untitled';
|
||||
|
|
@ -454,32 +473,25 @@ Ox.ListCalendar = function(options, self) {
|
|||
};
|
||||
event.alternativeNames = [];
|
||||
event.type = 'other';
|
||||
event.startTime = +new Date((+bounds.startTime + middle) / 2);
|
||||
event.endTime = +new Date((+bounds.endTime + middle) / 2);
|
||||
event.start = Ox.formatDate(event.startTime, '%Y-%m-%d %H:%M:%S', true);
|
||||
event.end = Ox.formatDate(event.endTime, '%Y-%m-%d %H:%M:%S', true);
|
||||
event.start = Ox.formatDate(startTime, '%Y-%m-%d %H:%M:%S', true);
|
||||
event.end = Ox.formatDate(endTime, '%Y-%m-%d %H:%M:%S', true);
|
||||
Ox.print(event);
|
||||
self.options.addEvent(event, function(result) {
|
||||
event.id = result.data.id;
|
||||
self.options.events.push(event);
|
||||
self.$list.options({
|
||||
items: Ox.clone(self.options.events),
|
||||
selected: [event.id]
|
||||
});
|
||||
self.$list.options({items: Ox.clone(self.options.events, true)});
|
||||
self.$calendar.addEvent(event);
|
||||
// fixme: duplicated
|
||||
self.selectedEvent = event.id;
|
||||
self.$eventName.options({title: event.name});
|
||||
self.$eventTitle.show();
|
||||
self.$eventForm.values(Ox.extend({}, event, {
|
||||
end: event.current ? '' : event.end
|
||||
})).show();
|
||||
self.$removeEventButton.show();
|
||||
selectEvent(event);
|
||||
});
|
||||
}
|
||||
|
||||
function editEvent(key, value) {
|
||||
var data = {id: self.selectedEvent};
|
||||
var id = self.selectedEvent,
|
||||
index = Ox.getPositionById(self.options.events, id),
|
||||
data = {id: id};
|
||||
self.options.events[index][key] = value;
|
||||
//Ox.print('EQUAL?', Ox.isEqual(self.$list.options('items'), self.options.events));
|
||||
//alert(self.options.events[index][key] + '\n' + self.$list.options('items')[index][key]);
|
||||
data[key] = value;
|
||||
if (['start', 'end'].indexOf(key) > -1) {
|
||||
self.$durationInput.options({
|
||||
|
|
@ -491,8 +503,9 @@ Ox.ListCalendar = function(options, self) {
|
|||
)
|
||||
});
|
||||
}
|
||||
self.$list.options({items: Ox.clone(self.options.events, true)});
|
||||
if (['name', 'type', 'start', 'end'].indexOf(key) > -1) {
|
||||
self.$calendar.editEvent(self.selectedEvent, key, value);
|
||||
self.$calendar.editEvent(id, key, value);
|
||||
}
|
||||
self.options.editEvent(data, function(result) {
|
||||
// ...
|
||||
|
|
@ -528,26 +541,17 @@ Ox.ListCalendar = function(options, self) {
|
|||
}
|
||||
|
||||
function removeEvent() {
|
||||
self.options.removeEvent({id: self.selectedEvent}, function(result) {
|
||||
var index = Ox.getPositionById(self.options.events, self.selectedEvent);
|
||||
var id = self.selectedEvent,
|
||||
index = Ox.getPositionById(self.options.events, id);
|
||||
self.options.events.splice(index, 1);
|
||||
self.$list.options({items: Ox.clone(self.options.events)});
|
||||
self.$list.options({items: Ox.clone(self.options.events, true)});
|
||||
self.$calendar.removeEvent();
|
||||
// fixme: duplicated
|
||||
self.selectedEvent = null;
|
||||
self.$eventTitle.hide();
|
||||
self.$eventForm.hide();
|
||||
self.$removeEventButton.hide();
|
||||
selectEvent({});
|
||||
self.options.removeEvent({id: id}, function(result) {
|
||||
// ...
|
||||
});
|
||||
}
|
||||
|
||||
function removeItem(data) {
|
||||
var id = data.ids[0];
|
||||
// fixme: events or callback functions??
|
||||
that.triggerEvent('removeevent', {id: id});
|
||||
self.$calendar.removeEvent(id);
|
||||
}
|
||||
|
||||
function selectEvent(event) {
|
||||
self.$list.options({
|
||||
selected: event.id ? [event.id] : []
|
||||
|
|
|
|||
|
|
@ -1345,7 +1345,7 @@ Ox.List = function(options, self) {
|
|||
if (!self.isAsync) {
|
||||
selectedIds = getSelectedIds();
|
||||
self.options.items.forEach(function(item) {
|
||||
sort[item.id] = map ? map(item[key]) : item[key];
|
||||
sort[item.id] = map ? map(item[key], item) : item[key];
|
||||
});
|
||||
self.options.items.sort(function(a, b) {
|
||||
var aValue = sort[a.id],
|
||||
|
|
|
|||
|
|
@ -92,8 +92,8 @@ Ox.ListMap = function(options, self) {
|
|||
},
|
||||
{
|
||||
id: 'geoname',
|
||||
map: function(v) {
|
||||
var names = v.split(', ');
|
||||
map: function(value) {
|
||||
var names = value.split(', ');
|
||||
if (!Ox.getCountryByGeoname(names[names.length - 1])) {
|
||||
names.push('~');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -279,6 +279,7 @@ Ox.formatDateRange <f> Formats a date range as a string
|
|||
'Sun, Jan 1, 50 BC, 00:00:00 - 23:59:59'
|
||||
@*/
|
||||
Ox.formatDateRange = function(start, end, utc) {
|
||||
end = end || Ox.formatDate(new Date(), '%Y-%m-%d');
|
||||
var isOneUnit = false,
|
||||
range = [start, end],
|
||||
strings,
|
||||
|
|
@ -370,6 +371,7 @@ Ox.formatDateRangeDuration <f> Formats the duration of a date range as a string
|
|||
'1 month'
|
||||
@*/
|
||||
Ox.formatDateRangeDuration = function(start, end, utc) {
|
||||
end = end || Ox.formatDate(new Date(), '%Y-%m-%d');
|
||||
var date = Ox.parseDate(start, utc),
|
||||
dates = [start, end].map(function(str) {
|
||||
return Ox.parseDate(str, utc);
|
||||
|
|
|
|||
Loading…
Reference in a new issue