Piotr Wronski <p.wronski at samsung dot com>
Artur Kobylinski <a.kobylinski at samsung dot com>
Tomasz Paciorek <t.paciorek at samsung dot com>
+Karol Surma <k.surma at samsung dot com>
--- /dev/null
+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.
+
<?xml version="1.0" encoding="UTF-8"?>
-<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://sample-web-application.tizen.org/EventManager" version="2.0.0" viewmodes="maximized">
- <tizen:application id="zdFoL1Ufrq" required_version="1.0"/>
- <content src="index.html"/>
- <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
- <tizen:privilege name="http://tizen.org/privilege/application.read"/>
- <tizen:privilege name="http://tizen.org/privilege/calendar.read"/>
- <tizen:privilege name="http://tizen.org/privilege/calendar.write"/>
- <tizen:privilege name="http://tizen.org/privilege/time"/>
- <tizen:privilege name="http://tizen.org/privilege/tizen"/>
- <icon src="icon.png"/>
- <name>EventManager</name>
- <tizen:setting screen-orientation="portrait" context-menu="enable"/>
+<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://sample-web-application.tizen.org/EventManager" version="2.1.0" viewmodes="maximized">
+ <tizen:application id="VJTVhzmnwf.EventManager" package="VJTVhzmnwf" required_version="2.1"/>
+ <content src="index.html"/>
+ <icon src="icon.png"/>
+ <name>EventManager</name>
+ <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
+ <tizen:privilege name="http://tizen.org/privilege/application.read"/>
+ <tizen:privilege name="http://tizen.org/privilege/calendar.read"/>
+ <tizen:privilege name="http://tizen.org/privilege/calendar.write"/>
+ <tizen:privilege name="http://tizen.org/privilege/time"/>
+ <tizen:setting screen-orientation="portrait" context-menu="disable" background-support="enable" encryption="disable" install-location="auto"/>
</widget>
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 {
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');
}
}
.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
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8"/>
- <meta name="description" content="A Tizen Web UI FW multi-page template generated by Tizen Web IDE"/>
- <meta name="viewport" content="width=device-width, initial-scale=1"/>
- <title>EventManager</title>
- <script src="/usr/share/tizen-web-ui-fw/latest/js/jquery.js"></script>
- <script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
- <script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
- data-framework-theme="tizen-white" data-framework-viewport-scale="false"></script>
- <script type="text/javascript" src="./js/main.js"></script>
- <link rel="stylesheet" type="text/css" href="./css/style.css"/>
+ <meta charset="utf-8"/>
+ <meta name="description" content="EventManager"/>
+ <meta name="viewport" content="width=360, user-scalable=no"/>
+
+ <title>Event Manager</title>
+
+ <script src="/usr/share/tizen-web-ui-fw/latest/js/jquery.min.js" defer="defer"></script>
+ <script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js" defer="defer"></script>
+ <script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js" defer="defer"
+ data-framework-theme="tizen-white" data-framework-viewport-scale="false"></script>
+
+ <script type="text/javascript" src="./js/main.js" defer="defer"></script>
+ <link rel="stylesheet" type="text/css" href="./css/style.css"/>
</head>
<body>
- <div data-role="page" id="mock" data-title="mock" data-add-back-btn="false">
- </div>
+ <div data-role="page" id="mock" data-title="mock" data-add-back-btn="false"></div>
</body>
</html>
-/*jslint devel: true*/
/*global tizen */
/**
-/*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
-/*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();
+ }
+ };
}());
/*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
}
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;
+ /**
+ * 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 += '<li data-role="list-divider">' + dividerText + '</li>';
+ }
+
+ 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,
$("#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);
+ }
+ }
+ };
}());
-/*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
* Loader init - load the App constructor
*/
init: function init() {
- console.log('Loader init()');
var self = this;
$.getScript('js/app.js')
.done(function onAppLoaded() {
* 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);
});
});
}
<!-- Start of second page: #alarm -->
- <div data-role="page" id="new_alarm">
+ <div data-role="page" id="new_alarm" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
+ <h1>Set Alarm</h1>
</div><!-- /header -->
- <div data-role="content">
+ <div data-role="content" data-scroll="none">
<fieldset data-role="controlgroup">
<input type="radio" name="radio-choice" id="radio-choice-1" value=1 checked="checked" />
<label for="radio-choice-1">Off</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value=4 />
<label for="radio-choice-4">1 hour before</label>
</fieldset>
- <a href="#new_event" id="add-alarm" data-role="button">Add alarm</a>
+ <a href="#new_event" id="add-alarm" data-role="button">Save</a>
</div><!-- /content -->
<div data-role="footer" data-position ="fixed">
</div><!-- /footer -->
- </div><!-- /page alarm -->
\ No newline at end of file
+ </div><!-- /page alarm -->
<div class="green_dot"></div>%startDate%<br/>
<div class="red_dot"></div>%endDate%<br/>
</div>
- <div class="ul-li-desc"><span class="description">%description%</span></div>
+ <div class="ul-li-desc"><span class="description">%summary%</span></div>
+ <div class="editEvent"><form><input type="button" class="edit_event_btn" data-inline="true" value="edit"/></form></div>
<div class="deleteEvent"><form><input type="button" class="remove_event_btn" data-inline="true" value="delete"/></form></div>
</li>
- <!-- Start of first page: #home -->
- <div data-role="page" id="home" data-add-back-btn="false">
- <div data-role="content">
- <!--
- Select a date to view events
+ <!-- Start of first page: #home -->
+ <div data-role="page" id="home" data-add-back-btn="false">
+ <div data-role="header">
+ <h1>EVENT MANAGER</h1>
+ </div>
+ <div data-role="content">
+ <div id="events_list">
+ <ul data-role="listview" data-inset="true">
+ </ul>
+ </div>
- <div data-role="button">
- <span class="ui-li-text-main">
- <input data-role="datetimepicker" data-inline="false" type="datetime" id="date_search" data-enhance="false" data-format="MMMM dd yyyy"/>
- </span>
- </div>
- -->
- <div id="events_list">
- <h3>EventManager</h3>
- <ul data-role="listview" data-inset="true">
- </ul>
- </div>
+ </div><!-- /content -->
- </div><!-- /content -->
+ <div data-role="footer" data-position="fixed">
+ <div data-role="tabbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#new_event" id="newEventBtn">Add New Event</a></li>
+ <li><a href="javascript:void(0)" id="exit_btn">Exit</a></li>
+ </ul>
+ </div>
+ </div><!-- /footer -->
- <div data-role="footer" data-position="fixed">
- <div data-role="tabbar" data-style="tabbar" >
- <ul>
- <li><a href="#new_event" id="newEventBtn">Add New Event</a></li>
- <li><a href="#new_event" id="exit_btn">Exit</a></li>
- </ul>
- </div>
- </div><!-- /footer -->
-
- </div><!-- /home -->
+ </div><!-- /home -->
- <!-- Start of the new event form: #new_event -->
- <div data-role="page" id="new_event">
-
- <div data-role="header" data-position="fixed">
- <h1>New Event</h1>
- </div><!-- /header -->
-
- <div data-role="content">
-
- <fieldset>
- <!--
- <label for="title">Title</label>
- <div><input type="text" id="title" /></div>
- -->
-
- <label for="des">Description</label>
- <div><input type="text" id="des" maxlength="10"></textarea></div>
-
- <!--
- <label for="location">Location</label>
- <div><input type="text" id="location" value="location" /></div>
- -->
-
- <label for="demo-date-1">Start</label>
- <div>
- <span class="ui-li-text-main">
- <input type="datetime" id="demo-date-1" data-format="MMM dd yyyy HH:mm"/>
- </span>
- </div>
-
- <label for="demo-date-2">End</label>
- <div>
- <span class="ui-li-text-main">
- <input type="datetime" name="demo-date-2" id="demo-date-2" data-format="MMM dd yyyy HH:mm"/>
- </span>
- </div>
- </fieldset>
-
- <!--
- <fieldset class="ui-grid-a">
- <div class="ui-block-a"><label for="switch-1">Full Day Event</label></div>
- <div class="ui-block-b">
- <div id="switch-1" data-role="toggleswitch" data-checked="false"></div>
- </div>
- </fieldset>
- -->
-
- <a id="add_alarm" href="#new_alarm" data-role="button">Add alarm</a>
- </div><!-- /content -->
-
- <div data-role="footer" data-position="fixed">
- <div data-role="tabbar" data-style="tabbar" >
- <ul>
- <li><a href="#home" id="add-event-btn" data-inline="true" data-icon="ctrlbar-check">OK</a></li>
- <li><a href="#home" data-inline="true" data-icon="ctrlbar-back">Cancel</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div><!-- /footer -->
-
- <div id="center_info" data-role="popupwindow" data-style="center_info">
- <div data-role="text"><p>
- Pop-up dialog box, a child
- window that blocks user inter-
- act to the parent windows
- </p></div>
- </div>
-
- </div><!-- /new_event -->
+ <!-- Start of the new event form: #new_event -->
+ <div data-role="page" id="new_event">
+
+ <div data-role="header" data-position="fixed">
+ <h1>New Event</h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <fieldset>
+ <label for="title">Title</label>
+ <div><input type="text" name="summary" id="title" maxlength="10"/></div>
+
+ <label for="demo-date-1">Start</label>
+ <div id="date-1">
+ <span class="ui-li-text-main">
+ <input type="datetime" name="startDate" id="demo-date-1" data-format="MMM dd yyyy HH:mm"/>
+ </span>
+ </div>
+
+ <label for="demo-date-2">End</label>
+ <div id="date-2">
+ <span class="ui-li-text-main">
+ <input type="datetime" name="endDate" id="demo-date-2" data-format="MMM dd yyyy HH:mm"/>
+ </span>
+ </div>
+ <label for="title">Alarm</label>
+ <div>
+ <span id="alarm">-</span> <a id="add_alarm" href="#new_alarm" data-inline="true" data-role="button">change</a>
+ </div>
+ </fieldset>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" data-position="fixed">
+ <div data-role="tabbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#home" id="add-event-btn" data-inline="true" data-icon="ctrlbar-check">OK</a></li>
+ <li><a href="#home" id="add-event-cancel-btn" data-inline="true" data-icon="ctrlbar-back">Cancel</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div><!-- /footer -->
+
+ <div id="center_info" data-role="popupwindow" data-style="center_info">
+ <div data-role="text"><p>
+ Pop-up dialog box, a child
+ window that blocks user inter-
+ act to the parent windows
+ </p></div>
+ </div>
+
+ </div><!-- /new_event -->
projects / samples / web / EventManager.git / commitdiff