From 8708084f84f6157de366759571db54c39a6e9419 Mon Sep 17 00:00:00 2001 From: "gs86.lee" Date: Fri, 12 Apr 2013 15:29:26 +0900 Subject: [PATCH] [EventManager]update EventManager(tizen_2.1) Change-Id: Ib8faf41ec0541a318690cc7bd041dc73a5548b10 --- AUTHORS | 1 + NOTICE | 4 + config.xml | 23 +- css/style.css | 28 +- index.html | 26 +- js/app.config.js | 1 - js/app.js | 414 ++++++++++++++------------- js/app.model.js | 325 +++++++++++----------- js/app.ui.js | 645 ++++++++++++++++++++++++++----------------- js/app.ui.templateManager.js | 203 +++++++------- js/main.js | 6 - templates/alarm.tpl | 9 +- templates/event.tpl | 3 +- templates/home.tpl | 47 ++-- templates/new_event.tpl | 120 ++++---- 15 files changed, 1000 insertions(+), 855 deletions(-) create mode 100644 NOTICE diff --git a/AUTHORS b/AUTHORS index 410ea3b..fdb46b2 100644 --- a/AUTHORS +++ b/AUTHORS @@ -3,3 +3,4 @@ Tomasz Lukawski Piotr Wronski Artur Kobylinski Tomasz Paciorek +Karol Surma diff --git a/NOTICE b/NOTICE new file mode 100644 index 0000000..85044e4 --- /dev/null +++ b/NOTICE @@ -0,0 +1,4 @@ +Copyright (c) 2012 Samsung Electronics Co., Ltd. All rights reserved. +Except as noted, this software is licensed under Flora License, Version 1. +Please, see the LICENSE.Flora file for Flora License terms and conditions. + diff --git a/config.xml b/config.xml index 24bbc15..b96b4f0 100644 --- a/config.xml +++ b/config.xml @@ -1,14 +1,13 @@ - - - - - - - - - - - EventManager - + + + + + EventManager + + + + + + diff --git a/css/style.css b/css/style.css index 9537107..f1714a7 100644 --- a/css/style.css +++ b/css/style.css @@ -16,17 +16,24 @@ body { li.event { font-size: 0.8rem; + height: 40px; } .ul-li-desc { display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + margin-top: 10px; + text-overflow: ellipsis; + width: 40%; } li.event .ui-li-aside { - display: inline-block; margin-right: 10px; font-size: 0.8rem; font-weight: bold; + float: left; } .green_dot, .red_dot { @@ -37,13 +44,18 @@ li.event .ui-li-aside { margin-top:3px; } -.deleteEvent { +.deleteEvent, +.editEvent { display: inline-block; position: absolute; right: 0px; top: 46%; } +.editEvent { + right: 95px; +} + .green_dot { background-image: url('/img/green_point.png'); } @@ -52,4 +64,16 @@ li.event .ui-li-aside { } .ui-btn-icon-top .ui-btn-inner { padding-top: 0 !important; /* overwrite broken tizen-white settings */ +} + +.ui-btn.disabled { + background: -webkit-linear-gradient(top, #D2D2C8 0%, #F6F8EF 100%); +} + +.ui-listview li.ui-li-divider { + height: 1rem; +} +/** workaround to prevent hiding footer caused by broken softkeyboardupdate event**/ +[data-role="footer"] { + display: block !important; } \ No newline at end of file diff --git a/index.html b/index.html index f789ff9..8bd1c16 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,21 @@ - - - - EventManager - - - - - + + + + + Event Manager + + + + + + + -
-
+
diff --git a/js/app.config.js b/js/app.config.js index a2bd848..6003509 100644 --- a/js/app.config.js +++ b/js/app.config.js @@ -1,4 +1,3 @@ -/*jslint devel: true*/ /*global tizen */ /** diff --git a/js/app.js b/js/app.js index 49612a5..e046b5c 100644 --- a/js/app.js +++ b/js/app.js @@ -1,201 +1,223 @@ -/*jslint devel: true*/ +/*jslint devel:true*/ /*global Config, Model, Ui*/ var App = null; (function () { // strict mode wrapper - 'use strict'; - - /** - * Creates a new application object - * - * @class Application - */ - App = function App() {}; - - App.prototype = { - /** - * @type Array - */ - requires: ['js/app.config.js', 'js/app.model.js', 'js/app.ui.js', 'js/app.ui.templateManager.js'], - /** - * @type Config - */ - config: null, - /** - * @type Model - */ - model: null, - /** - * @type Ui - */ - ui: null, - /** - * @type bool - */ - fullDay: false, - /** - * @type bool - */ - alarm: false, - /** - * @type CalendarAlarm - */ - alarmN: null, - - /** - * @type Date - */ - lastDateLoaded: null, - - /** - * Initialisation function - */ - init: function init() { - // instantiate the libs - this.config = new Config(); - this.model = new Model(); - this.ui = new Ui(); - - // initialise the modules - this.model.init(this); - this.ui.init(this); - - return this; - }, - - /** - * Application exit from model - */ - exit: function exit() { - console.log('app.exit()'); - this.model.exit(); - }, - - /** - * Toggle this.fullDay - * @returns {boolean} variable state after the toggle - */ - switchFullDay: function switchFullDay() { - console.log('switchFullDay()'); - this.fullDay = !this.fullDay; - return this.fullDay; - }, - - /** - * Read the radio buttons and set this.alarm and this.alarmN accordingly - */ - switchAlarm: function switchAlarm() { - var duration = 0; - duration = this.ui.alarm.getDuration(); - - if (duration) { - this.alarmN = this.model.getCalendarAlarm(duration, "EventManager Reminder"); - this.alarm = true; - } else { - this.alarm = false; - } - }, - - /** - * Create a new event in the default calendar, - * based on values found in #title, #des, #location - * and this.fullDay variable - */ - addEvent: function addEvent() { - var selectedDate = '', - eventDate = null, - duration = 0, - calendarItemInit = null, - fullDay = false; - - fullDay = this.fullDay; - selectedDate = this.ui.home.getStartDate(); - - duration = this.calculateDuration( - selectedDate, - this.ui.home.getEndDate(), - fullDay - ); - - eventDate = this.createTZDateFromString(selectedDate); - - calendarItemInit = { - startDate: eventDate, - isAllDay: fullDay, - duration: duration, - summary: this.ui.home.getTitle(), - description: this.ui.home.getDescription(), - location: this.ui.home.getLocation() - }; - - this.calendarItemInit = calendarItemInit; - - if (this.alarmN) { - calendarItemInit.alarms = [this.alarmN]; - }/* - else{ - ev.alarms = null; - }*/ - try { - this.model.addEventToDefaultCalendar(calendarItemInit); - } catch (e) { - console.error(e); - } - this.loadEvents(eventDate); - }, - - /** - * Calculates time duration - * - * If fullDay, then duration The duration must be n*60*24 minutes for an event lasting n days. - * - * @param {string} startDate - * @param {string} endDate - * @param {bool=} fullDay 'false' by default - * @returns {TimeDuration} - */ - calculateDuration: function calculateDuration(startDate, endDate, fullDay) { - var duration = 0; - - if (fullDay === undefined) { - fullDay = false; - } - - startDate = new Date(startDate); - endDate = new Date(endDate); - - duration = Math.round((endDate.getTime() - startDate.getTime()) / 60000); // needs duration in minutes; - - return this.model.getTimeDuration(duration); - }, - - /** - * Create a TZDate object for the given date string, all assuming - * using the local timezone - * - * @param {string} dateString Local date/datetime - */ - createTZDateFromString: function (dateString) { - var date = null, - tzDate = null; - date = new Date(dateString); - tzDate = this.model.createTZDateFromDate(date); - return tzDate; - }, - - /** - * Load all scheduled events - */ - loadEvents: function loadEvents() { - console.log("App.loadEvents()"); - - this.model.getEventsFromDefaultCalendar( - undefined, // we always load all events now - this.ui.home.onEventSearchSuccess.bind(this.ui.home), // Load events into the UI - this.ui.home.onEventSearchError.bind(this.ui.home) - ); - } - - }; -}()); + 'use strict'; + + /** + * Creates a new application object + * + * @class Application + */ + App = function App() {}; + + App.prototype = { + /** + * @type Array + */ + requires: ['js/app.config.js', 'js/app.model.js', 'js/app.ui.js', 'js/app.ui.templateManager.js'], + /** + * @type Config + */ + config: null, + /** + * @type Model + */ + model: null, + /** + * @type Ui + */ + ui: null, + /** + * @type bool + */ + fullDay: false, + /** + * @type bool + */ + alarm: false, + /** + * @type CalendarAlarm + */ + alarmN: null, + /** + * @type Date + */ + lastDateLoaded: null, + /** + * @type Integer + */ + eventId: 0, + + /** + * Initialisation function + */ + init: function init() { + // instantiate the libs + this.config = new Config(); + this.model = new Model(); + this.ui = new Ui(); + + // initialise the modules + this.model.init(this); + this.ui.init(this); + + return this; + }, + + /** + * Application exit from model + */ + exit: function exit() { + this.model.exit(); + }, + + /** + * Toggle this.fullDay + * @returns {boolean} variable state after the toggle + */ + switchFullDay: function switchFullDay() { + this.fullDay = !this.fullDay; + return this.fullDay; + }, + + /** + * Read the radio buttons and set this.alarm and this.alarmN accordingly + */ + switchAlarm: function switchAlarm() { + var duration = 0; + duration = this.ui.alarm.getDuration(); + + if (duration) { + this.alarmN = this.model.getCalendarAlarm(duration, "EventManager Reminder"); + this.alarm = true; + } else { + this.alarm = false; + } + app.ui.alarm.updateDurationLabel(); + }, + + /** + * Create a new event in the default calendar, + * based on values found in #title, #des, #location + * and this.fullDay variable + */ + addEvent: function addEvent(e) { + var selectedDate = '', + eventDate = null, + duration = 0, + calendarItemInit = null, + fullDay = false; + + fullDay = this.fullDay; + selectedDate = this.ui.home.getStartDate(); + + duration = this.calculateDuration( + selectedDate, + this.ui.home.getEndDate(), + fullDay + ); + + eventDate = this.createTZDateFromString(selectedDate); + + calendarItemInit = { + startDate: eventDate, + isAllDay: fullDay, + duration: duration, + summary: this.ui.home.getTitle() + }; + + this.calendarItemInit = calendarItemInit; + + if (this.alarmN) { + calendarItemInit.alarms = [this.alarmN]; + } + try { + this.model.addEventToDefaultCalendar(calendarItemInit); + } catch (ex) { + console.error(ex.message); + } + this.loadEvents(eventDate); + }, + + updateEvent: function() { + var new_values, selectedDate, duration; + + selectedDate = this.ui.home.getStartDate(); + + duration = this.calculateDuration( + selectedDate, + this.ui.home.getEndDate(), + false + ); + + new_values = { + startDate: this.createTZDateFromString(selectedDate), + duration: duration, + summary: this.ui.home.getTitle(), + } + + if (this.alarmN) { + // blocked by api issue + //new_values.alarms = [this.alarmN]; + } + + this.model.updateEvent(app.eventId, new_values); + this.loadEvents(); + }, + + /** + * Calculates time duration + * + * If fullDay, then duration The duration must be n*60*24 minutes for an event lasting n days. + * + * @param {string} startDate + * @param {string} endDate + * @param {bool=} fullDay 'false' by default + * @returns {TimeDuration} + */ + calculateDuration: function calculateDuration(startDate, endDate, fullDay) { + var duration = 0; + + if (fullDay === undefined) { + fullDay = false; + } + + startDate = new Date(startDate); + endDate = new Date(endDate); + + duration = Math.round((endDate.getTime() - startDate.getTime()) / 60000); // needs duration in minutes; + + return this.model.getTimeDuration(duration); + }, + + /** + * Create a TZDate object for the given date string, all assuming + * using the local timezone + * + * @param {string} dateString Local date/datetime + */ + createTZDateFromString: function (dateString) { + var date = null, + tzDate = null; + date = new Date(dateString); + tzDate = this.model.createTZDateFromDate(date); + return tzDate; + }, + + /** + * Load all scheduled events + */ + loadEvents: function loadEvents() { + + this.model.getEventsFromDefaultCalendar( + undefined, // we always load all events now + this.ui.home.onEventSearchSuccess.bind(this.ui.home), // Load events into the UI + this.ui.home.onEventSearchError.bind(this.ui.home) + ); + } + + }; +}()); \ No newline at end of file diff --git a/js/app.model.js b/js/app.model.js index b3f0b97..b9c8c8b 100644 --- a/js/app.model.js +++ b/js/app.model.js @@ -1,186 +1,181 @@ -/*jslint devel: true*/ +/*jslint devel:true*/ /*global tizen */ /** * @class Model */ var Model = function Model() { - 'use strict'; + 'use strict'; }; (function () { // strict mode wrapper - 'use strict'; - Model.prototype = { - - /** - * Model module initialisation - */ - init: function Model_init(app) { - console.log('Model.init'); - this.app = app; - }, - - /** - * Creates a TimeDuration object corresponding to the given duration - * in minutes - * - * @param {int} mins Duration in minutes - * @return {TimeDuration} - */ - getTimeDuration: function Model_getTimeDuration(mins) { - return new tizen.TimeDuration(mins, "MINS"); - }, - - /** - * Creates a CalendarAlarm with the given duration - * - * @param {int} minutes Alarm duration in minutes - * @returns {CalendarAlarm} - */ - getCalendarAlarm: function Model_getCalendarAlarm(minutes, description) { - var timeDuration, - calendarAlarm; - - timeDuration = this.getTimeDuration(minutes); - calendarAlarm = new tizen.CalendarAlarm(timeDuration, "DISPLAY", description); - - return calendarAlarm; - }, - - /** - * Create a new event and add it to the default calendar - * - * @param {Object} calendarItemInit - * @config {TZDate} [startDate] - * @config {bool} [isAllDay] - * @config {TimeDuration} [duration] - * @config {string} [summary] - * @config {string} [description] - * @config {string} [location] - */ - addEventToDefaultCalendar: function Model_addEventToDefaultCalendar(calendarItemInit) { - var calendar = null, - event = null; - - console.log('Model.addEventToDefaultCalendar()'); - console.log(calendarItemInit); - - calendar = this.getCalendar(); - event = new tizen.CalendarEvent(calendarItemInit); - calendar.add(event); - }, - - getCalendar: function Model_getCalendar() { - return tizen.calendar.getDefaultCalendar("EVENT"); // get the default calendar - }, - - /** - * Find all events in the default calendar on the given date - * - * @param {string} date date (in local time) - * @param {function} onSuccess success callback - * @param {function} onError error callback - */ - getEventsFromDefaultCalendar: function Model_getEventsFromDefaultCalendar(date, onSuccess, onError) { - var - /** - * @type {Calendar} - */ - calendar = null, - /** - * @type {AttributeRangeFilter} - */ - filter = null; - - console.log('Model.getEventsFromDefaultCalendar'); - - calendar = this.getCalendar(); - - if (date) { - // events on 'date'' - filter = this.getStartDateFilter(new Date(date)); - } else { - // all future events - filter = this.getStartDateFilter(new Date(), true); - } - - calendar.find(onSuccess, onError, filter); - }, - - /** - * Create a startDate attribute range filter for the given day - * - * @param {Date} date - * @param {bool} noEndDate - * @returns {AttributeRangeFilter} - */ - getStartDateFilter: function Model_getStartDateFilter(date, noEndDate) { - var tzDate = null, - endTzDate = null, - filter = null; - - // calculate start date for the filter - console.log('Filter1: ' + date.toString()); - tzDate = new tizen.TZDate(date.getFullYear(), date.getMonth(), date.getDate()); - console.log('Filter2: ' + tzDate.toString()); - if (noEndDate) { - endTzDate = undefined; - } else { - endTzDate = tzDate.addDuration(new tizen.TimeDuration("1", "DAYS")); // calculate end date - console.log('Filter3: ' + endTzDate.toString()); - } - filter = new tizen.AttributeRangeFilter("startDate", tzDate, endTzDate); - console.log("Start Date filter: ", filter); - return filter; - }, + 'use strict'; + Model.prototype = { + + /** + * Model module initialisation + */ + init: function Model_init(app) { + this.app = app; + }, + + /** + * Creates a TimeDuration object corresponding to the given duration + * in minutes + * + * @param {int} mins Duration in minutes + * @return {TimeDuration} + */ + getTimeDuration: function Model_getTimeDuration(mins) { + return new tizen.TimeDuration(mins, "MINS"); + }, + + /** + * Creates a CalendarAlarm with the given duration + * + * @param {int} minutes Alarm duration in minutes + * @returns {CalendarAlarm} + */ + getCalendarAlarm: function Model_getCalendarAlarm(minutes, description) { + var timeDuration, + calendarAlarm; + + timeDuration = this.getTimeDuration(minutes); + calendarAlarm = new tizen.CalendarAlarm(timeDuration, "DISPLAY", description); + + return calendarAlarm; + }, + + /** + * Create a new event and add it to the default calendar + * + * @param {Object} calendarItemInit + * @config {TZDate} [startDate] + * @config {bool} [isAllDay] + * @config {TimeDuration} [duration] + * @config {string} [summary] + * @config {string} [description] + * @config {string} [location] + */ + addEventToDefaultCalendar: function Model_addEventToDefaultCalendar(calendarItemInit) { + var calendar = null, + event = null; + + + calendar = this.getCalendar(); + event = new tizen.CalendarEvent(calendarItemInit); + calendar.add(event); + }, + + getCalendar: function Model_getCalendar() { + return tizen.calendar.getDefaultCalendar("EVENT"); // get the default calendar + }, + + /** + * Find all events in the default calendar on the given date + * + * @param {string} date date (in local time) + * @param {function} onSuccess success callback + * @param {function} onError error callback + */ + getEventsFromDefaultCalendar: function Model_getEventsFromDefaultCalendar(date, onSuccess, onError) { + var + /** + * @type {Calendar} + */ + calendar = null, + /** + * @type {AttributeRangeFilter} + */ + filter = null; + + + calendar = this.getCalendar(); + + if (date) { + // events on 'date'' + filter = this.getStartDateFilter(new Date(date)); + } else { + // all future events + filter = this.getStartDateFilter(new Date(), true); + } + + calendar.find(onSuccess, onError, filter); + }, + + /** + * Create a startDate attribute range filter for the given day + * + * @param {Date} date + * @param {bool} noEndDate + * @returns {AttributeRangeFilter} + */ + getStartDateFilter: function Model_getStartDateFilter(date, noEndDate) { + var tzDate = null, + endTzDate = null, + filter = null; + + // calculate start date for the filter + tzDate = new tizen.TZDate(date.getFullYear(), date.getMonth(), date.getDate()); + + if (noEndDate) { + endTzDate = undefined; + } else { + endTzDate = tzDate.addDuration(new tizen.TimeDuration("1", "DAYS")); // calculate end date + } + filter = new tizen.AttributeRangeFilter("startDate", tzDate, endTzDate); + return filter; + }, + + /** + * @param {string} event_id + */ + deleteEvent: function Model_deleteEvent(event_id) { + var myCalendar = this.getCalendar(); + myCalendar.remove(new tizen.CalendarEventId(event_id)); + this.app.loadEvents(); // reload the list + }, /** * @param {string} event_id */ - deleteEvent: function Model_deleteEvent(event_id) { - var myCalendar = this.getCalendar(); - myCalendar.remove(new tizen.CalendarEventId(event_id)); - this.app.loadEvents(); // reload the list - }, + editEvent: function Model_editEvent (event_id) { + var myCalendar = this.getCalendar(); + return myCalendar.get(new tizen.CalendarEventId(event_id)); + }, /** * @param {string} event_id * @param {Object} new_values */ - updateEvent: function Model_updateEvent(event_id, new_values) { - var myCalendar = this.getCalendar(), - event, - prop = ''; - - event = myCalendar.get(new tizen.CalendarEventId(event_id)); - - console.log(event); - - for (prop in new_values) { - if (new_values.hasOwnProperty(prop)) { - event[prop] = new_values[prop]; // copy new values into the event object - } - } - - myCalendar.update(event); // save to myCalendar - }, - - /** - * @param {Date} date - * @returns {TZDate} date with timezone info - */ - createTZDateFromDate: function Model_createTZDateFromDate(date) { - console.log(" [Creating TZDate] from " + date); - return new tizen.TZDate(date); - }, - - /** - * Exit from the application - */ - exit: function () { - tizen.application.getCurrentApplication().exit(); - } - }; + updateEvent: function Model_updateEvent(event_id, new_values) { + var myCalendar = this.getCalendar(), new_event + event = myCalendar.get(new tizen.CalendarEventId(event_id)); + + for (var prop in new_values) { + if (new_values.hasOwnProperty(prop)) { + event[prop] = new_values[prop]; // copy new values into the event object + } + } + + myCalendar.update(event, false); // save to myCalendar + }, + + /** + * @param {Date} date + * @returns {TZDate} date with timezone info + */ + createTZDateFromDate: function Model_createTZDateFromDate(date) { + return new tizen.TZDate(date); + }, + + /** + * Exit from the application + */ + exit: function () { + tizen.application.getCurrentApplication().exit(); + } + }; }()); diff --git a/js/app.ui.js b/js/app.ui.js index 3b4be96..3382358 100644 --- a/js/app.ui.js +++ b/js/app.ui.js @@ -1,147 +1,184 @@ /*jslint devel: true*/ -/*global $, TemplateManager */ +/*global $, app, TemplateManager */ /** * @class Ui */ function Ui() { - 'use strict'; + '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() { + 'use strict'; + Ui.prototype = { + + templateManager: null, + + /** + * UI module initialisation + */ + init: function UI_init(app) { + 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() { + this.templateManager.loadToCache(['home', 'alarm', 'new_event', 'event'], this.initPages.bind(this)); + // Disable text selection + $.mobile.tizen.disableSelection(document); + }, + + /** + * Append pages to body and initialise them + */ + initPages: function UI_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(); + + $.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, self = this, alarm = this.context.alarm; + + $('#exit_btn').on('tap', app.exit.bind(app)); + $("input:radio").checkboxradio(); + alarm.selectOption(); + + // buttons in the events list + $('#events_list').on('tap', '.remove_event_btn', function () { + var eventId = $(this).parents('.event').data('eventid'); + app.model.deleteEvent(eventId); + }); + + $('#events_list').on('click', '.edit_event_btn', function () { + var eventId = $(this).parents('.event').data('eventid'), + event = app.model.editEvent(eventId), field, date, duration, key; + + app.ui.new_event.dateResetLock(true); + app.eventId = eventId; + for (key in event) { + if (event.hasOwnProperty(key)) { + field = $('#new_event input[name="' + key + '"]'); + if (field.length !== 0) { + if (field.attr('type') === 'datetime') { + date = self.TZD2Date(event[key]); + field.datetimepicker('value', date); + } else { + field.val(event[key]); + } + } + } + } + + $('#new_event h1').text('Edit Event'); + $('#add_alarm').hide(); + + if (event.alarms.length !== 0) { + duration = event.alarms[0].before.length; + } + alarm.selectOption(alarm.getValue(duration || 0)); + $.mobile.changePage("#new_event"); + }); + + $('#newEventBtn').on('tap', function () { + app.ui.new_event.dateResetLock(false); + app.eventId = 0; + $('#new_event h1').text('New Event'); + $('#title').val(''); + $('#add_alarm').css('display', 'inline-block'); + alarm.selectOption(); + }); + + this.loadEvents(); + }, + + TZD2Date: function (tzdate) { + return new Date( + tzdate.getFullYear(), + tzdate.getMonth(), + tzdate.getDate(), + tzdate.getHours(), + tzdate.getMinutes(), + tzdate.getSeconds(), + tzdate.getMilliseconds() + ); + }, + + /** + * 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() { + 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); - }, + 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) { + this.context.app.loadEvents(date); + }, /** * Returns text for separating list items with events @@ -223,118 +260,135 @@ function Ui() { } 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 += '
  • ' + dividerText + '
    • '; - } - - 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; + /** + * 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 = {}; + + // content + str = ''; + + for (i = 0; i < events.length; i += 1) { + event = events[i]; + + dividerText = this.getSeparatorText(event); + + if (dividerText) { + str += '
  • ' + dividerText + '
    • '; + } + + alarm = this.getAlarmsHtml(event.alarms); + + templateParameters = { + uid: event.id.uid, + startDate: this.formatHour(event.startDate), + endDate: this.formatHour(event.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.edit_event_btn').button(); + $('#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 + */ + selectOption: function (val) { + val = val || 1; + $.each($('#new_alarm input:radio'), function () { + $(this).attr('checked', parseInt($(this).val(), 10) === val) + .checkboxradio('refresh'); + }); + this.updateDurationLabel(); + }, + 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 duration value'); + return 0; + } + }, + getValue: function (duration) { + var table = {0: 1, 5: 2, 30: 3, 60: 4}; + return table[duration]; + }, + + /** + * Read and set alarm duration label + * + * @returns {string} Label + */ + updateDurationLabel: function () { + var label = $('#new_alarm input:radio[checked]').next().text(); + $('#alarm').text(label); + return label; + } + }, + + /** + * Contains methods related to the new event page + * @namespace + */ + new_event: { + init: function UI_newEvent_init() { + var app = this.context.app, + self = this; + $("#demo-date-1, #demo-date-2").datetimepicker(); $("#demo-date-1").bind("date-changed", function UI_newEvent_onDateChanged(e, newStartDate) { - var startOptions = $("#demo-date-1").data('datetimepicker').options, + var startOptions = $(this).data('datetimepicker').options, endData = $("#demo-date-2").data('datetimepicker'), endOptions = typeof endData === 'object' ? endData.options : null, oldStartDate, @@ -360,34 +414,107 @@ function Ui() { $("#demo-date-2").datetimepicker('value', endDate); }); + $("#demo-date-2").bind("date-changed", function (e, newEndDate) { + var endOptions = $(this).data('datetimepicker').options, + self = $(this), + stardDate = $("#demo-date-1").data('datetimepicker').options.date, + oldEndDate; + + oldEndDate = endOptions.oldDate; + + if (newEndDate - stardDate < 0) { + $("#date-2 .ui-datefield span").animationComplete(function () { + alert('End date cannot be earlier than initial date'); + self.datetimepicker('value', oldEndDate); + self.datetimepicker(); + }); + } else { + endOptions.oldDate = newEndDate; + } + }); + $('#new_event').on('pageshow', function UI_newEvent_onPageShow(event) { - var options = $("#demo-date-1").data('datetimepicker').options, + var startOptions = $("#demo-date-1").data('datetimepicker').options, + date2 = $("#demo-date-2"), tmpDate; // get the start date - tmpDate = new Date(options.date.getTime()); + tmpDate = new Date(startOptions.date.getTime()); // store it for future use - options.oldDate = new Date(options.date.getTime()); + startOptions.oldDate = new Date(startOptions.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'); + if (self.dateResetLock() !== true) { + if (typeof date2.datetimepicker === 'function') { + // set end date + date2.datetimepicker('value', tmpDate); + } else { + console.warn('pageinit: cant set end time'); + } } + + // enable OK button + $('#add-event-btn').removeClass('disabled'); + }); + + $('#switch-1').bind('changed', app.switchFullDay.bind(app)); + + $('#add-event-btn').bind('tap', this.addEvent.bind(this)); + + $('#new-event-cancel-btn').bind('tap', this.cancel.bind(this)); + + //alarm selection confirm + $('#add-alarm').bind('tap', app.switchAlarm.bind(app)); + + // go to alarm selection + $('#add_alarm').bind('tap', this.dateResetLock.bind(this, true)); + + $('#new_event').on('tap', '[data-role="content"]', function (e) { + e.stopPropagation(); }); + }, - $('#switch-1').bind('changed', app.switchFullDay.bind(app)); + /** + * Select an alarm value + */ + switchAlarm: function Ui_newEvent_switchAlarm(e) { + console.log('Ui_newEvent_switchAlarm'); + this.dateResetLock(false); + this.context.app.switchAlarm(e); + }, - $('#add-event-btn').bind('tap', app.addEvent.bind(app)); + /** + * Set reset lock (true - locked, false - unlocked) + * If no or undefined value given, return the current value + * @param {bool} value + * @returns {bool} + */ + dateResetLock: function Ui_newEvent_dateResetLock(value) { + if (value === undefined) { + return $("#demo-date-2").data('resetLock'); + } + $("#demo-date-2").data('resetLock', value); + return value; + }, + + addEvent: function Ui_newEvent_addEvent(e) { + var button = $('#add-event-btn'); + this.dateResetLock(false); + if (!button.hasClass('disabled')) { + button.addClass('disabled'); + if (app.eventId === 0) { + this.context.app.addEvent(e); + } else { + this.context.app.updateEvent(e); + } + } + }, - $('#add-alarm').bind('tap', app.switchAlarm.bind(app)); - } - } - }; + cancel: function Ui_newEvent_cancel(e) { + this.dateResetLock(false); + } + } + }; }()); diff --git a/js/app.ui.templateManager.js b/js/app.ui.templateManager.js index f62f7f0..68c6678 100644 --- a/js/app.ui.templateManager.js +++ b/js/app.ui.templateManager.js @@ -1,112 +1,111 @@ -/*jslint devel: true*/ /*global tizen, $, app */ /** * @class TemplateManager */ function TemplateManager() { - 'use strict'; - this.init(); + 'use strict'; + this.init(); } (function () { // strict mode wrapper - 'use strict'; - TemplateManager.prototype = { - - /** - * Template cache - */ - cache: {}, - - /** - * UI module initialisation - */ - init: function init() { - - }, - - /** - * Returns template html (from cache) - */ - get: function TemplateManager_get(tplName, tplParams) { - console.log('TemplateManager_get:' + tplName); - - if (this.cache[tplName] !== undefined) { - return this.getCompleted(this.cache[tplName], tplParams); - } else { - console.warn('Template "' + tplName + '" not found in cache'); - return ''; - } - }, - - /** - * Load templates to cache - */ - loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess) { - var self = this, - cachedTemplates = 0, - tplName, - tplPath; - - if ($.isArray(tplNames)) { - - // for each template - $.each(tplNames, function (index, fileName) { - - // cache template html - if (typeof self.cache[fileName] === 'undefined') { - tplName = [fileName, app.config.get('templateExtension')].join(''); - tplPath = [app.config.get('templateDir'), tplName].join('/'); - - $.ajax({ - url: tplPath, - cache: true, - dataType: 'html', - async: true, - success: function (data) { - // increase counter - cachedTemplates += 1; - - // save to cache - self.cache[fileName] = data; - console.log('Cached template: ' + fileName); - - // if all templates are cached launch callback - if (cachedTemplates >= tplNames.length && typeof onSuccess === 'function') { - onSuccess(); - } - }, - error: function (jqXHR, textStatus, errorThrown) { - alert(errorThrown); - } - }); - } else { - // template is already cached - cachedTemplates += 1; - // if all templates are cached launch callback - if (cachedTemplates >= tplNames.length && typeof onSuccess === 'function') { - onSuccess(); - } - } - }); - - } - }, - - /** - * Returns template completed by specified params - */ - getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams) { - var tplParam, replaceRegExp; - - for (tplParam in tplParams) { - if (tplParams.hasOwnProperty(tplParam)) { - replaceRegExp = new RegExp(['%', tplParam, '%'].join(''), 'g'); - tplHtml = tplHtml.replace(replaceRegExp, tplParams[tplParam]); - } - } - - return tplHtml; - } - }; + 'use strict'; + TemplateManager.prototype = { + + /** + * Template cache + */ + cache: {}, + + /** + * UI module initialisation + */ + init: function init() { + }, + + /** + * Returns template html (from cache) + * @param {string} tplName + * @param {string} tplParams + */ + get: function TemplateManager_get(tplName, tplParams) { + if (this.cache[tplName] !== undefined) { + return this.getCompleted(this.cache[tplName], tplParams); + } + return ''; + }, + + /** + * Load templates to cache + * @param {string} tplNames + * @param {function} onSuccess + */ + loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess) { + var self = this, + cachedTemplates = 0, + tplName, + tplPath; + + if ($.isArray(tplNames)) { + + // for each template + $.each(tplNames, function (index, fileName) { + + // cache template html + if (self.cache[fileName] === undefined) { + tplName = [fileName, app.config.get('templateExtension')].join(''); + tplPath = [app.config.get('templateDir'), tplName].join('/'); + + $.ajax({ + url: tplPath, + cache: true, + dataType: 'html', + async: true, + success: function (data) { + // increase counter + cachedTemplates += 1; + + // save to cache + self.cache[fileName] = data; + + // if all templates are cached launch callback + if (cachedTemplates >= tplNames.length && typeof onSuccess === 'function') { + onSuccess(); + } + }, + error: function (jqXHR, textStatus, errorThrown) { + console.error('templateManagerError: ' + errorThrown); + } + }); + } else { + // template is already cached + cachedTemplates += 1; + // if all templates are cached launch callback + if (cachedTemplates >= tplNames.length && typeof onSuccess === 'function') { + onSuccess(); + } + } + }); + + } + }, + + /** + * Returns template completed by specified params + * @param {string} tplHtml + * @param {string} tplParams + */ + getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams) { + var tplParam, replaceRegExp; + + for (tplParam in tplParams) { + if (tplParams.hasOwnProperty(tplParam)) { + replaceRegExp = new RegExp(['%', tplParam, '%'].join(''), 'g'); + tplHtml = tplHtml.replace(replaceRegExp, tplParams[tplParam]); + } + } + + return tplHtml; + } + }; }()); \ No newline at end of file diff --git a/js/main.js b/js/main.js index ef27b68..358c53b 100644 --- a/js/main.js +++ b/js/main.js @@ -37,7 +37,6 @@ var app = null; * Loader init - load the App constructor */ init: function init() { - console.log('Loader init()'); var self = this; $.getScript('js/app.js') .done(function onAppLoaded() { @@ -52,24 +51,19 @@ var app = null; * Load dependencies */ loadLibs: function loadLibs() { - console.log('Loader loadLibs()'); var loadedLibs = 0; if ($.isArray(app.requires)) { $.each(app.requires, function onLibLoaded(index, filename) { - console.log('Trying to load ' + filename + '...'); $.getScript(filename) .done(function () { loadedLibs += 1; - console.log(loadedLibs + ' libs loaded'); if (loadedLibs >= app.requires.length) { // All dependencies are loaded - initialise the app - console.log('App.init()'); app.init(); } }) .fail(function (e) { console.error('Loading libs failed'); - console.log(e); }); }); } diff --git a/templates/alarm.tpl b/templates/alarm.tpl index 0c22f6e..4f31534 100644 --- a/templates/alarm.tpl +++ b/templates/alarm.tpl @@ -1,10 +1,11 @@ -
    +
    +

    Set Alarm

    -
    +
    @@ -18,9 +19,9 @@
    - Add alarm + Save
    -
    \ No newline at end of file +
    diff --git a/templates/event.tpl b/templates/event.tpl index a0f536a..4838344 100644 --- a/templates/event.tpl +++ b/templates/event.tpl @@ -3,6 +3,7 @@
    %startDate%
    %endDate%
    -
    %description%
    +
    %summary%
    +
    diff --git a/templates/home.tpl b/templates/home.tpl index e277dad..048a0c0 100644 --- a/templates/home.tpl +++ b/templates/home.tpl @@ -1,30 +1,23 @@ - -
    -
    - +
    +
    +

    EVENT MANAGER

    +
    +
    +
    +
      +
    +
    -
    - - - -
    - --> -
    -

    EventManager

    -
      -
    -
    +
    -
    +
    +
    + +
    +
    -
    -
    - -
    -
    - -
    +
    diff --git a/templates/new_event.tpl b/templates/new_event.tpl index f27a9fd..84893be 100644 --- a/templates/new_event.tpl +++ b/templates/new_event.tpl @@ -1,68 +1,52 @@ - -
    - -
    -

    New Event

    -
    - -
    - -
    - - - -
    - - - - -
    - - - -
    - - -
    - - - -
    -
    - - - - Add alarm -
    - -
    -
    - -
    -
    - -
    -

    - Pop-up dialog box, a child - window that blocks user inter- - act to the parent windows -

    -
    - -
    + +
    + +
    +

    New Event

    +
    + +
    + +
    + +
    + + +
    + + + +
    + + +
    + + + +
    + +
    + - change +
    +
    + +
    + +
    +
    + +
    +
    + +
    +

    + Pop-up dialog box, a child + window that blocks user inter- + act to the parent windows +

    +
    + +
    -- 2.7.4