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

// vim: et:ts=4:sw=4:sts=4:ft=javascript

/*@
Ox.ListCalendar <f> ListCalendar object
@*/

Ox.ListCalendar = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            events: [],
            height: 256,
            pageLength: 100,
            selected: [],
            sort: [{key: 'name', operator: '+'}],
            width: 256
        })
        .options(options || {})
        .addClass('OxListCalendar')
        .css({
            width: self.options.width + 'px',
            height: self.options.height + 'px'
        });

    self.columns = [
        {
            addable: false, // fixme: implement
            id: 'id',
            title: 'Id',
            unique: true,
            visible: false,
            width: 64
        },
        {
            id: 'name',
            operator: '+',
            removable: false,
            title: 'Name',
            visible: true,
            width: 144
        },
        {
            editable: false,
            format: function(value) {
                return value.join('; ');
            },
            id: 'alternativeNames',
            operator: '+',
            title: 'Alternative Names',
            visible: true,
            width: 144
        },
        {
            format: function(value) {
                return Ox.toTitleCase(value);
            },
            id: 'type',
            operator: '+',
            title: 'Type',
            visible: true,
            width: 64
        },
        {
            id: 'start',
            operator: '-',
            title: 'Start',
            visible: true,
            width: 144
        },
        {
            id: 'end',
            operator: '-',
            title: 'End',
            visible: true,
            width: 144
        },
        {
            id: 'duration',
            operator: '-',
            title: 'Duration',
            visible: true,
            width: 144
        },
        {
            id: 'user',
            operator: '+',
            title: 'User',
            visible: false,
            width: 96
        },
        {
            format: function(value) {
                return value.replace('T', ' ').replace('Z', '');
            },
            id: 'created',
            operator: '-',
            title: 'Date Created',
            visible: false,
            width: 128,
        },
        {
            format: function(value) {
                return value.replace('T', ' ').replace('Z', '');
            },
            id: 'modified',
            operator: '-',
            title: 'Date Modified',
            visible: false,
            width: 128,
        },
        {
            align: 'right',
            id: 'matches',
            operator: '-',
            title: 'Matches',
            visible: false,
            width: 64,
        }
    ];

    self.$listToolbar = Ox.Bar({
        size: 24
    });

    self.$findElement = Ox.FormElementGroup({
            elements: [
                self.$findSelect = Ox.Select({
                        items: [
                            {id: 'all', title: 'Find: All'},
                            {id: 'name', title: 'Find: Name'},
                            {id: 'alternativeNames', title: 'Find: Alternative Names'},
                        ],
                        overlap: 'right',
                        type: 'image'
                    })
                    .bindEvent({
                        change: function(data) {
                            var key = data.selected[0].id,
                                value = self.$findInput.value();
                            value && updateList(key, value);
                        }
                    }),
                self.$findInput = Ox.Input({
                        clear: true,
                        placeholder: 'Find in List',
                        width: 234
                    })
                    .bindEvent({
                        submit: function(data) {
                            var key = self.$findSelect.value(),
                                value = data.value;
                            updateList(key, value);
                        }
                    })
            ]
        })
        .css({float: 'right', margin: '4px'})
        .bindEvent({
            change: function(data) {

            }
        })
        .appendTo(self.$listToolbar);

    self.$list = Ox.TextList({
            columns: self.columns,
            columnsRemovable: true,
            columnsVisible: true,
            //items: Ox.clone(self.options.places),
            items: self.options.events,
            pageLength: self.options.pageLength,
            scrollbarVisible: true,
            sort: self.options.sort
        })
        .bindEvent({
            'delete': removeItem,
            init: initList, // fixme: won't fire from static list
            key_0: function() {
                self.$calendar.panToEvent();
            },
            key_equal: function() {
                self.$calendar.zoom(1);
            },
            key_minus: function() {
                self.$calendar.zoom(-1);
            },
            key_shift_0: function() {
                self.$calendar.zoomToPlace();
            },
            load: function() {
                that.triggerEvent('loadlist');
            },
            open: openItem,
            select: selectItem
        });

    self.$listStatusbar = Ox.Bar({
        size: 16
    });

    self.$status = Ox.Element()
        .css({paddingTop: '2px', margin: 'auto', fontSize: '9px', textAlign: 'center'})
        .html(
            Ox.formatNumber(self.options.events.length) + ' Event' + (
                self.options.events.length == 1 ? '' : 's'
            )
        )
        .appendTo(self.$listStatusbar);

    self.$calendar = Ox.Element();

    self.$placeTitlebar = Ox.Bar({
        size: 24
    });

    self.$placeForm = Ox.Form({
            items: [],
            width: 240
        })
        .css({margin: '8px'})
        .hide();

    self.$placeStatusbar = Ox.Bar({
        size: 24
    });

    that.$element.replaceWith(
        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.$placeTitlebar,
                                size: 24
                            },
                            {
                                element: self.$placeForm
                            },
                            {
                                element: self.$placeStatusbar,
                                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});
                            });
                        }
                    }),
                    resizable: true,
                    resize: [204, 256, 384],
                    size: 256
                }
            ],
            orientation: 'horizontal'
        }).$element
    );


    function initList(data) {
        self.$status.html(
            Ox.formatNumber(data.items) + ' Event' + (
                data.items == 1 ? '' : 's'
            )
        );
    }

    function openItem() {
        
    }

    function removeItem() {
        
    }

    function selectItem() {
        
    }

    function updateList(key, value) {
        var query = {
                conditions: Ox.merge(
                    ['all', 'name'].indexOf(key) > -1
                        ? [{key: 'name', value: value, operator: '='}] : [],
                    ['all', 'alternativeNames'].indexOf(key) > -1
                        ? [{key: 'alternativeNames', value: value, operator: '='}] : []
                ),
                operator: key == 'all' ? '|' : '&'
            };
        self.$list.options({
            items: function(data, callback) {
                return pandora.api.findEvents(Ox.extend(data, {
                    query: query
                }), callback);
            }
        });
    }

    return that;

};