sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

update manage places / manage events

Browse source
This commit is contained in:
rlx 2012-02-20 18:31:45 +00:00
commit e4b60c83c2
8 changed files with 676 additions and 482 deletions
Download patch file Download diff file Expand all files Collapse all files

433
source/Ox.UI/js/Calendar/Ox.ListCalendar.js
View file

@ -12,27 +12,72 @@ Ox.ListCalendar = function(options, self) {
var that = Ox.Element({}, self)
.defaults({
addEvent: null,
editPlace: null,
collapsible: false,
editEvent: null,
events: [],
hasMatches: false,
height: 256,
mode: 'add',
pageLength: 100,
removePlace: null,
selected: [],
removeEvent: null,
selected: '',
showControls: false,
sort: [{key: 'name', operator: '+'}],
width: 256
})
.options(options || {})
.addClass('OxListCalendar')
.css({
width: self.options.width + 'px',
height: self.options.height + 'px'
});
Ox.print('LCO', self.options)
self.durationCache = {};
self.durationSize = {
86400: 10,
31622400: 12
};
self.columns = [
{
format: function(value, data) {
var eventDuration = (Ox.parseDate(data.end) - Ox.parseDate(data.start)) / 1000,
iconSize = 8;
Ox.forEach(self.durationSize, function(size, duration) {
if (eventDuration >= duration) {
iconSize = size;
} else {
return false;
}
});
return data.type
? $('<div>')
.addClass('OxEvent Ox' + Ox.toTitleCase(data.type))
.css({
width: iconSize + 'px',
height: iconSize + 'px',
margin: [0, 0, 0, -3].map(function(v) {
return v + (14 - iconSize) / 2 + 'px';
}).join(' '),
borderRadius: '2px'
})
: '';
},
id: 'type',
operator: '+',
title: 'Type',
titleImage: 'icon',
visible: true,
width: 16
},
{
format: function(value, data) {
Ox.print('format', value, data)
return data.type
? value
: $('<span>').addClass('OxWarning').html(value);
},
id: 'name',
operator: '+',
removable: false,
@ -51,16 +96,6 @@ Ox.ListCalendar = function(options, self) {
visible: true,
width: 144
},
{
format: function(value) {
return Ox.toTitleCase(value);
},
id: 'type',
operator: '+',
title: 'Type',
visible: true,
width: 64
},
{
id: 'start',
map: function(value) {
@ -128,17 +163,18 @@ Ox.ListCalendar = function(options, self) {
title: 'Date Modified',
visible: false,
width: 128,
},
{
align: 'right',
id: 'matches',
operator: '-',
title: 'Matches',
visible: false,
width: 64,
}
];
self.options.hasMatches && self.columns.push({
align: 'right',
id: 'matches',
operator: '-',
title: 'Matches',
visible: true,
width: 64,
});
self.$listToolbar = Ox.Bar({
size: 24
});
@ -176,11 +212,6 @@ Ox.ListCalendar = function(options, self) {
]
})
.css({float: 'right', margin: '4px'})
.bindEvent({
change: function(data) {
}
})
.appendTo(self.$listToolbar);
self.$list = Ox.TextList({
@ -191,8 +222,12 @@ Ox.ListCalendar = function(options, self) {
// self.$list.options({items: self.options.events}) still
// registers as a change
items: Ox.clone(self.options.events, true),
keys: ['matches'],
max: 1,
min: 0,
pageLength: self.options.pageLength,
scrollbarVisible: true,
selected: self.options.selected ? [self.options.selected] : [],
sort: self.options.sort
})
.bindEvent({
@ -208,7 +243,7 @@ Ox.ListCalendar = function(options, self) {
self.$calendar.zoom(-1);
},
key_shift_0: function() {
self.$calendar.zoomToPlace();
self.$calendar.zoomToEvent();
},
load: function() {
that.triggerEvent('loadlist');
@ -231,25 +266,25 @@ Ox.ListCalendar = function(options, self) {
.appendTo(self.$listStatusbar);
self.$calendar = Ox.Calendar({
date: new Date(0),
//events: Ox.clone(self.options.events, true),
events: self.options.events.filter(function(event) {
return !!event.start;
}),
height: self.options.height,
showControls: self.options.showControls,
showToolbar: true,
showZoombar: true,
width: self.options.width - 514,
zoom: 4
})
.bindEvent({
resize: function(data) {
// triggered by SplitPanel
self.$calendar.resizeCalendar();
},
select: selectEvent
});
date: new Date(0),
//events: Ox.clone(self.options.events, true),
events: self.options.events.filter(function(event) {
return !!event.type;
}),
height: self.options.height,
showControls: self.options.showControls,
showToolbar: true,
showZoombar: true,
width: self.options.width - 514,
zoom: 4
})
.bindEvent({
resize: function(data) {
// triggered by SplitPanel
self.$calendar.resizeCalendar();
},
select: selectEvent
});
self.$eventTitlebar = Ox.Bar({
size: 24
@ -279,11 +314,15 @@ Ox.ListCalendar = function(options, self) {
.css({float: 'left', margin: '4px 4px 4px 0'})
.bindEvent({
click: function() {
self.$calendar.options({selected: null});
self.$list.options({selected: []});
// FIXME: list doesn't fire select event
selectItem({ids: []});
}
})
.appendTo(self.$eventTitle);
self.$eventData = Ox.Element();
self.$eventForm = Ox.Form({
items: [
self.$nameInput = Ox.Input({
@ -345,8 +384,11 @@ Ox.ListCalendar = function(options, self) {
Ox.forEach(self.options.events, function(event) {
Ox.forEach(values, function(value) {
if (
event.name == data.data.value
|| event.alternativeNames.indexOf(data.data.value) > -1
event.type
&& (
event.name == data.data.value
|| event.alternativeNames.indexOf(data.data.value) > -1
)
) {
exists = value;
return false;
@ -376,7 +418,21 @@ Ox.ListCalendar = function(options, self) {
editEvent('end', data.data.value);
}
}
});
})
.appendTo(self.$eventData);
if (self.options.hasMatches) {
self.$matchesInput = Ox.Input({
disabled: true,
id: 'matches',
label: 'Matches',
labelWidth: 64,
type: 'int',
width: 240
})
.css({margin: '8px'})
.appendTo(self.$eventData);
}
self.$eventStatusbar = Ox.Bar({
size: 24
@ -384,9 +440,9 @@ Ox.ListCalendar = function(options, self) {
self.$newEventButton = Ox.Button({
title: 'New Event',
width: 96
width: 70
})
.css({float: 'left', margin: '4px 2px 4px 4px'})
.css({float: 'left', margin: '4px'})
.bindEvent({
click: addEvent
})
@ -394,76 +450,101 @@ Ox.ListCalendar = function(options, self) {
self.$removeEventButton = Ox.Button({
title: 'Remove Event',
width: 96
width: 90
})
.css({float: 'right', margin: '4px 4px 4px 2px'})
.css({float: 'right', margin: '4px'})
.bindEvent({
click: removeEvent
})
.hide()
.appendTo(self.$eventStatusbar);
that.$element = Ox.SplitPanel({
elements: [
{
collapsible: true,
element: Ox.SplitPanel({
elements: [
{
element: self.$listToolbar,
size: 24
},
{
element: self.$list
},
{
element: self.$listStatusbar,
size: 16
}
],
orientation: 'vertical'
}),
resizable: true,
resize: [256, 384, 512],
size: 256
},
{
element: self.$calendar,
},
{
collapsible: true,
element: Ox.SplitPanel({
elements: [
{
element: self.$eventTitlebar,
size: 24
},
{
element: self.$eventForm
},
{
element: self.$eventStatusbar,
size: 24
}
],
orientation: 'vertical'
})
.bindEvent({
resize: function(data) {
self.$placeTitleName.options({width: data.size - 48});
// fixme: pass width through form
self.$placeFormItems.forEach(function($item) {
$item.options({width: data.size - 16});
});
if (self.options.mode == 'define') {
self.$defineEventButton = Ox.Button({
title: 'Define Event',
width: 80
})
.css({float: 'right', margin: '4px 0 4px 0'})
.bindEvent({
click: function() {
if (this.options('title') == 'Define Event') {
defineEvent();
} else {
clearEvent();
}
}),
resizable: true,
resize: [204, 256, 384],
size: 256
}
],
orientation: 'horizontal'
});
}
})
.hide()
.appendTo(self.$eventStatusbar);
}
that.$element.replaceWith(
that.$element = Ox.SplitPanel({
elements: [
{
collapsible: self.options.collapsible,
element: Ox.SplitPanel({
elements: [
{
element: self.$listToolbar,
size: 24
},
{
element: self.$list
},
{
element: self.$listStatusbar,
size: 16
}
],
orientation: 'vertical'
}),
resizable: true,
resize: [256, 384, 512],
size: 256
},
{
element: self.$calendar,
},
{
collapsible: self.options.collapsible,
element: Ox.SplitPanel({
elements: [
{
element: self.$eventTitlebar,
size: 24
},
{
element: self.$eventData
},
{
element: self.$eventStatusbar,
size: 24
}
],
orientation: 'vertical'
})
.bindEvent({
resize: function(data) {
self.$eventTitleName.options({width: data.size - 48});
// fixme: pass width through form
/*
self.$eventFormItems.forEach(function($item) {
$item.options({width: data.size - 16});
});
*/
}
}),
resizable: true,
resize: [256, 384],
size: 256
}
],
orientation: 'horizontal'
})
.addClass('OxListMap')
.$element
);
function addEvent() {
Ox.Log('Calendar', 'ADD', self.$calendar.getBounds())
@ -494,17 +575,53 @@ Ox.ListCalendar = function(options, self) {
self.$nameInput.focusInput(true);
} else {
// FIXME
alert(result.status.text);
// alert(result.status.text);
}
});
}
function clearEvent() {
var event = Ox.getObjectById(self.options.events, self.options.selected),
values = {
id: self.options.selected,
alternativeNames: [], type: '',
start: '', end: ''
};
self.$defineEventButton.options({disabled: true, title: 'Clear Event'});
self.options.editEvent(values, function() {
Ox.forEach(values, function(value, key) {
self.$list.value(self.options.selected, key, value);
});
self.$list.reloadList();
self.$calendar.removeEvent();
self.$eventForm.hide();
self.$defineEventButton.options({disabled: false, title: 'Define Event'});
});
}
function defineEvent() {
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 = Ox.getObjectById(self.options.events, self.options.selected);
event.name = self.$list.value(self.options.selected, 'name');
event.alternativeNames = [];
event.type = 'other';
event.start = Ox.formatDate(startTime, '%Y-%m-%d %H:%M:%S', true);
event.end = Ox.formatDate(endTime, '%Y-%m-%d %H:%M:%S', true);
self.$list.options({items: Ox.clone(self.options.events, true)});
self.$calendar.addEvent(event);
self.$defineEventButton.options({title: 'Clear Event'});
}
function editEvent(key, value) {
var id = self.selectedEvent,
index = Ox.getIndexById(self.options.events, id),
data = {id: id};
data[key] = value;
self.options.editEvent(data, function(result) {
Ox.print('EDIT EVENT::', result.data)
if (result.status.code == 200) {
self.options.events[index][key] = value;
self.$list.value(id, key, value);
@ -521,6 +638,11 @@ Ox.ListCalendar = function(options, self) {
)
);
}
self.$list.value(id, 'matches', result.data.matches);
self.$matchesInput.value(result.data.matches);
self.options.mode == 'define' && self.$removeEventButton.options({
disabled: !!result.data.matches
});
} else {
// ...
}
@ -566,39 +688,72 @@ Ox.ListCalendar = function(options, self) {
self.$calendar.removeEvent();
selectEvent({});
} else {
alert(result.status.text);
// FIXME
// alert(result.status.text);
}
});
}
function selectEvent(event) {
self.$list.options({
selected: event.id ? [event.id] : []
});
if (event.id) {
var end = event
self.selectedEvent = event.id;
self.$eventName.options({title: event.name});
self.$eventTitle.show();
Ox.print('VALUES:', Ox.extend({}, event, {
end: event.current ? '' : event.end
}))
self.$eventForm.values(Ox.extend({}, event, {
end: event.current ? '' : event.end
})).show();
self.$removeEventButton.show();
// Select event on calendar
var isUndefined = !!self.options.selected
&& !self.$list.value(self.options.selected, 'type');
self.selectedEvent = event.id || '';
if (!self.selectedPlace && isUndefined) {
// deselect triggered by selecting an undefined item,
// so do nothing
} else {
self.selectedEvent = null;
self.$eventTitle.hide();
self.$eventForm.hide();
self.$removeEventButton.hide();
self.options.selected = self.selectedEvent;
self.$list.options({
selected: self.options.selected ? [self.options.selected] : []
});
selectItem({ids: self.$list.options('selected')});
}
}
function selectItem(data) {
var id = data.ids.length ? data.ids[0] : null;
self.$calendar.options({selected: id});
id && self.$calendar.panToEvent();
// Select item in list
Ox.print('selectItem', data);
var event, isUndefined, selectedEvent;
self.options.selected = data.ids.length ? data.ids[0] : '';
event = self.options.selected
? self.$list.value(self.options.selected) : {};
isUndefined = !!self.options.selected
&& !self.$list.value(self.options.selected, 'type');
selectedEvent = self.options.selected && !isUndefined
? self.options.selected : '';
self.$calendar.options({selected: selectedEvent});
selectedEvent && self.$calendar.panToEvent();
Ox.print('EVENT', event, self.options.hasMatches)
if (self.options.selected) {
self.$eventName.options({title: event.name || ''});
self.$eventTitle.show();
if (!isUndefined) {
self.$eventForm.values(Ox.extend({}, event, {
end: event.current ? '' : event.end
})).show();
} else {
self.$eventForm.hide();
}
self.options.hasMatches && self.$matchesInput.value(event.matches || 0).show();
self.options.mode == 'define' && self.$defineEventButton.options({
title: isUndefined ? 'Define Event' : 'Clear Event'
}).show();
self.$defineEventButton.options({
disabled: !event.matches,
title: isUndefined ? 'Define Event' : 'Clear Event'
}).show();
self.$removeEventButton.options({
disabled: self.options.mode == 'define' && !!event.matches
}).show();
} else {
self.$eventTitle.hide();
self.$eventForm.hide();
self.options.hasMatches && self.$matchesInput.hide();
self.options.mode == 'define' && self.$defineEventButton.hide();
self.$removeEventButton.hide();
}
return;
}
function updateList(key, value) {