more functionality for ListCalendar

source/Ox.UI/js/Calendar/Ox.Calendar.js

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

source/Ox.UI/js/Calendar/Ox.ListCalendar.js

@@ -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);
-            self.options.events.splice(index, 1);
-            self.$list.options({items: Ox.clone(self.options.events)});
-            self.$calendar.removeEvent();
-            // fixme: duplicated
-            self.selectedEvent = null;
-            self.$eventTitle.hide();
-            self.$eventForm.hide();
-            self.$removeEventButton.hide();
+        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, true)});
+        self.$calendar.removeEvent();
+        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] : []

source/Ox.UI/js/List/Ox.List.js

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

source/Ox.UI/js/Map/Ox.ListMap.js

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

source/Ox/js/Format.js

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