path: root/js/app.ui.js

/*jslint devel: true*/
/*global $, TemplateManager */

/**
 * @class Ui
 */
function Ui() {
    'use strict';
}

(function () { // strict mode wrapper
    'use strict';
    Ui.prototype = {

        templateManager: null,

        /**
         * UI module initialisation
         */
        init: function UI_init(app) {
            console.log('Ui.init');
            this.app = app;
            this.templateManager = new TemplateManager();
            $(document).ready(this.domInit.bind(this));

            // init inner objects
            this.home.context = this;
            this.alarm.context = this;
            this.new_event.context = this;
        },

        /**
         * When DOM is ready, initialise it
         */
        domInit: function UI_domInit() {
            console.log("domInit()", this);

            this.templateManager.loadToCache(['home', 'alarm', 'new_event', 'event'], this.initPages.bind(this));

            // immediately load events for today
            //self.app.loadEvents(new Date());

        },

        /**
         * Append pages to body and initialise them
         */
        initPages: function UI_initPages() {
            console.log('initPages');
            var pages = [];

            pages.push(this.templateManager.get('home'));
            pages.push(this.templateManager.get('alarm'));
            pages.push(this.templateManager.get('new_event'));

            $('body').append(pages.join(''));

            this.home.init();
            this.alarm.init();
            this.new_event.init();

            console.log('changePage');
            $.mobile.changePage('#home', 'pop', false, true);
        },


        /**
         * Contains methods related to the #home page
         * @namespace
         */
        home: {
            init: function UI_home_init() {
                var app = this.context.app;

                $('#exit_btn').on('tap', app.exit.bind(app));

//                $('#date_search').bind("date-changed", this.loadEvents.bind(this));

                // buttons in the events list
                $('#events_list').on('tap', '.remove_event_btn', function () {
                    var eventId = $(this).parents('.event').data('eventid');
                    app.model.deleteEvent(eventId);
                });

                $('#newEventBtn').on('tap', function () {
					$('#des').val('');
                });

                this.loadEvents();
            },
            /**
             * Get start date value from the form (#demo-date-1 field)
             *
             * @returns {string}
             */
            getStartDate: function UI_home_getStartDate() {
				var startDate = $('#demo-date-1').attr('data-date');
				console.log('UI_home_getStartDate: ', startDate);
                return startDate;
            },
            /**
             * Get end date value from the form (#demo-date-2 field)
             *
             * @returns {string}
             */
            getEndDate: function UI_home_getEndDate() {
				var endDate = $('#demo-date-2').attr('data-date');
				console.log('UI_home_getEndDate: ', endDate);
                return endDate;
            },
            /**
             * Get the title from the form (#title field)
             *
             * @returns {string}
             */
            getTitle: function UI_home_getTitle() {
                return $('#title').val();
            },
            /**
             * Get the description from the form (#des field)
             *
             * @returns {string}
             */
            getDescription: function UI_home_getDescription() {
                return $('#des').val();
            },
            /**
             * Get the location from the form (#location field)
             *
             * @returns {string}
             */
            getLocation: function UI_home_getLocation() {
                return $('#location').val();
            },
            /**
             * Wrapper for app.loadEvents
             * @param {Object} e event
             * @param {Date} date selected date
             */
            loadEvents: function UI_home_loadEvents(e, date) {
//                date = $(':jqmData(role="datetimepicker")').data('datetimepicker').options.date;
                console.log('Ui.loadEvents', this);
                this.context.app.loadEvents(date);
            },

			/**
			 * Returns text for separating list items with events
			 * Skips repeated values
			 *
			 * @param {Object} event
			 * @returns {string}
			 */
			getSeparatorText: function UI_home_getSeparatorText(event) {
				var previous = '';

				// redefine itself
				this.getSeparatorText = function (event) {
					if (event === undefined) {
						previous = '';
						return undefined;
					}

					var startDate = event.startDate,
						str = this.formatDate(startDate);

					if (previous === str) {
						return ''; // skip it - already returned
					}
					previous = str; // store in the closure for future comparison

					return str;
				};

				return this.getSeparatorText(event);
			},

			formatDate: function UI_home_formatDate(date) {
				var monthNames = [
					"January", "February", "March", "April", "May", "June",
					"July", "August", "September", "October", "November", "December" ];

				this.formatDate = function UI_home_formatDate(date) {
					return date.getDate() + ". " + monthNames[date.getMonth()] + " " + date.getFullYear();
				};
				return this.formatDate(date);
			},

			/**
			 * Format hour
			 * @param {TZDate} date
			 * @returns {string}
			 */
			formatHour: function UI_home_formatHour(date) {
				return date.getHours() + ':' + this.pad(date.getMinutes());
			},

			/**
			 * Zero-pads a positive number to 2 digits
			 */
			pad: function UI_home_pad(number) {
				return number < 10 ? '0' + number : number;
			},

			/**
			 * Creates HTML representing the given array of alarms
			 *
			 * @param {Alarm[]} alarms
			 * @returns {string}
			 */
			getAlarmsHtml: function UI_home_getAlarmsHtml(alarms) {
				var alarm = '', j, len;

				len = alarms.length;

				if (len) {
					alarm += '<p class="ui-li-aside ui-li-desc"><img src="img/clock.png"/>';

					for (j = 0; j < len; j += 1) {
						alarm += alarms[j].before.length;
						alarm += ' ' + alarms[j].before.unit;
					}
					alarm += '</p>';
				}
				return alarm;
			},
            /**
             * Load the events into the #event_popup.
             *
             * Callback function for app.loadEvents.
             * @param {Array} events
             */
            onEventSearchSuccess: function UI_home_onEventSearchSuccess(events) {
                var i = 0, j = 0,
                    str = "",
                    event,
                    alarm = '',
                    dividerText = '',
                    templateParameters = {},
                    endDate = null;


                console.log('Ui.home.onEventSearchSuccess()', events);

                // content
                str = '';

                for (i = 0; i < events.length; i += 1) {
                    event = events[i];

                    dividerText = this.getSeparatorText(event);

                    if (dividerText) {
                        str += '<li data-role="list-divider">' + dividerText + '</li>';
                    }

                    alarm = this.getAlarmsHtml(event.alarms);

                    endDate = event.startDate.addDuration(event.duration);

                    console.log('[Event Loaded] Start Date:' + event.startDate);

                    templateParameters = {
                        uid: event.id.uid,
                        startDate: this.formatHour(event.startDate),
                        endDate: this.formatHour(endDate),
                        summary: event.summary || '[No title]',
                        location: event.location,
                        description: event.description,
                        alarm: alarm
                    };

                    str += this.context.templateManager.get('event', templateParameters);


                }
                this.getSeparatorText(); // clear the separator state

                $('#events_list ul').html(str);
                $('#events_list ul').listview();
                $('#events_list ul').data('listview').refresh();
                $('#events_list ul input.remove_event_btn').button();
            },

            /**
             * Error handler for event search
             */
            onEventSearchError: function UI_home_onEventSearchError() {
                console.error("event search error");
            }
        },

        /**
         * Contains methods related to the #alarm page
         * @namespace
         */
        alarm: {
            init: function UI_alarm_init() {
            },
            /**
             * Read alarm duration from the UI
             *
             * @returns {int} Alarm duration in minutes
             */
            getDuration: function UI_alarm_getDuration() {
                var radioValue = 0,
                    radiobutton = null;

                radiobutton = $('#new_alarm :jqmData(role=controlgroup) input:radio[checked]');

                radioValue = parseInt(radiobutton.val(), 10);

                switch (radioValue) {
                case 1: // no alarm
                    return 0;
                case 2: // 5 minutes before
                    return 5;
                case 3: // 30 minutes before
                    return 30;
                case 4: // 1 hour before
                    return 60;
                default:
                    console.warn('Unexpected value');
                    return 0;
                }
            }
        },

        /**
         * Contains methods related to the new event page
         * @namespace
         */
        new_event: {
            init: function UI_newEvent_init() {
                var app = this.context.app;

				$("#demo-date-1").bind("date-changed", function UI_newEvent_onDateChanged(e, newStartDate) {
					var startOptions = $("#demo-date-1").data('datetimepicker').options,
						endData = $("#demo-date-2").data('datetimepicker'),
						endOptions = typeof endData === 'object' ? endData.options : null,
						oldStartDate,
						diff,
						endDate;
					// get the old date
					oldStartDate = startOptions.oldDate;
					startOptions.oldDate = newStartDate;

					if (!oldStartDate) {
						console.warn('date-changed handler: old date empty');
						return;
					}

					// calculate time difference in minutes
					diff = (newStartDate.getTime() - oldStartDate.getTime()) / 1000 / 60;

					endDate = endOptions.date;

					// move the end date by 'diff'
					endDate.setMinutes(endDate.getMinutes() + diff);

					$("#demo-date-2").datetimepicker('value', endDate);
				});

				$('#new_event').on('pageshow', function UI_newEvent_onPageShow(event) {
					var options = $("#demo-date-1").data('datetimepicker').options,
						tmpDate;
					// get the start date
					tmpDate = new Date(options.date.getTime());

					// store it for future use
					options.oldDate = new Date(options.date.getTime());

					// add 1 hour
					tmpDate.setHours(tmpDate.getHours() + 1);

					if (typeof $("#demo-date-2").datetimepicker === 'function') {
						// set end date
						console.log('pageinit: set default end time' + tmpDate);
						$("#demo-date-2").datetimepicker('value', tmpDate);
					} else {
						console.log('pageinit: cant set end time');
					}
				});

                $('#switch-1').bind('changed', app.switchFullDay.bind(app));

                $('#add-event-btn').bind('tap', app.addEvent.bind(app));

                $('#add-alarm').bind('tap', app.switchAlarm.bind(app));
            }
        }
    };

}());