[CallLog]update CallLog(tizen_2.1)
authorgs86.lee <gs86.lee@samsung.com>
Fri, 12 Apr 2013 06:29:13 +0000 (15:29 +0900)
committergs86.lee <gs86.lee@samsung.com>
Fri, 12 Apr 2013 06:45:17 +0000 (15:45 +0900)
Change-Id: If94a49f8d9189f4eda01028f0ff2987958461fed

16 files changed:
NOTICE [new file with mode: 0644]
config.xml
css/style.css
index.html
js/app.config.js
js/app.helpers.js
js/app.js
js/app.model.js
js/app.ui.js
js/app.ui.templateManager.js
js/main.js
signature1.xml
templates/callItemRow.tpl
templates/callView.tpl
templates/callerHistory.tpl
templates/messageWindow.tpl

diff --git a/NOTICE b/NOTICE
new file mode 100644 (file)
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.
+
index 64d84d6..0472a52 100644 (file)
@@ -1,14 +1,13 @@
 <?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/CallLog" version="2.0.0" viewmodes="maximized">
-    <tizen:application id="ao3z9xqamz" required_version="1.0"/>
-    <content src="index.html"/>
-    <tizen:privilege name="http://tizen.org/privilege/application.read"/>
-    <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
-    <tizen:privilege name="http://tizen.org/privilege/callhistory.read"/>
-    <tizen:privilege name="http://tizen.org/privilege/callhistory.write"/>
-    <tizen:privilege name="http://tizen.org/privilege/contact.read"/>
-    <tizen:privilege name="http://tizen.org/privilege/tizen"/>
-    <icon src="icon.png"/>
-    <name>CallLog</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/CallLog" version="2.1.0" viewmodes="maximized">
+       <tizen:application id="1I49ZSFY56.CallLog" package="1I49ZSFY56" required_version="2.1"/>
+       <content src="index.html"/>
+       <icon src="icon.png"/>
+       <name>CallLog</name>
+       <tizen:privilege name="http://tizen.org/privilege/application.read"/>
+       <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
+       <tizen:privilege name="http://tizen.org/privilege/callhistory.read"/>
+       <tizen:privilege name="http://tizen.org/privilege/callhistory.write"/>
+       <tizen:privilege name="http://tizen.org/privilege/contact.read"/>
+       <tizen:setting screen-orientation="portrait" context-menu="disable" background-support="enable" encryption="disable" install-location="auto"/>
 </widget>
index 3d338ec..3c04709 100644 (file)
@@ -1,6 +1,5 @@
 html,body {
        margin: 0px 0px;
-       background-color: #000;
        width: 100%;
        height: 100%;
        color: #fff;
@@ -26,8 +25,6 @@ ul {
        /*float: left;*/
 }
 
-
-
 li {
        border-bottom: 1px solid #5A99BA;
        padding: 8px 8px 6px 8px;
@@ -41,6 +38,10 @@ li {
 }
 
 .call .numberOrName {
+       white-space: nowrap;
+       text-overflow: ellipsis;
+       width: 95%;
+       overflow: hidden;
        font-size: 20px;
 }
 
@@ -104,6 +105,10 @@ li {
 }
 
 .contact .name {
+       white-space: nowrap;
+       text-overflow: ellipsis;
+       width: 75%;
+       overflow: hidden;
        font-size: 20px;
        padding-top: 10px;
        color: #555;
@@ -222,7 +227,7 @@ li {
        background-image: url('../images/logs_list_missed_icon.png');
 }
 
-.call.dir_missed-new .iconStatus {
+.call.dir_missednew .iconStatus {
        background-image: url('../images/logs_list_missed_unchecked_icon.png');
 }
 
@@ -275,14 +280,6 @@ li {
        width: 40px;
        padding-left: 10px;
 }
-/*
-.selectAllBox input {
-       float: left;
-       width: 25px;
-       height: 25px;
-       margin-left: -3px;
-       margin-top: -2px;
-}*/
 
 .selectAllBox p {
        float: left;
@@ -310,7 +307,7 @@ li {
 
 .find input {
        width: 200px;
-       float: left:
+       float: left;
 }
 
 .ui-image-search {
@@ -367,7 +364,32 @@ li {
        /*width: 100px; // this property changed back button width*/
 }
 
-.ui-popupwindow .center_basic_1btn .popup-button-bg .ui-btn {
-       width: 7rem;
-       margin: 0px 10px;
+.ui-popupwindow {
+       color: black;
+       padding:0.4em;
+}
+
+#popupCancelActionBtn {
+       width: 80px;
+}
+
+#popupSubmitActionBtn {
+       width: 80px;
+}
+
+#popupMessage {
+       margin-bottom: 10px;
+}
+
+#page-header a {
+       text-decoration: none;
+}
+#page-content-scroll {
+       margin-top: 102px;
+       overflow: hidden;
+       overflow-y: auto;
+}
+
+.ui-footer .ui-btn-text {
+       text-transform: uppercase;
 }
\ No newline at end of file
index c7d0684..79ac138 100644 (file)
@@ -1,17 +1,19 @@
 <!DOCTYPE html>
 <html>
-
 <head>
-<meta charset="utf-8" />
-<meta name="description" content="CallLog Web Sample App" />
-<title>CallLog</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" />
-</head>
+       <meta charset="utf-8"/>
+       <meta name="description" content="CallLog Web Sample App"/>
+       <meta name="viewport" content="width=360, user-scalable=no"/>
+
+       <title>CallLog</title>
 
+       <script src="/usr/share/tizen-web-ui-fw/latest/js/jquery.min.js"></script>
+       <script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+       <script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.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"/>
+</head>
 <body>
        <div data-role="page" data-footer-Exist="false" id="callView" data-add-back-btn="header"></div>
 </body>
index d981544..03eb992 100644 (file)
@@ -1,5 +1,4 @@
-/*jslint devel: true*/
-/*global tizen  */
+/*global tizen*/
 
 /**
  * @class Config
index f5d7494..594f1f8 100644 (file)
@@ -1,4 +1,4 @@
-/*jslint devel: true */
+/*jslint devel: true*/
 /*global $ */
 
 /**
@@ -18,7 +18,6 @@ function Helpers() {
                 * @returns {String} formatted
                 */
                getShortDate: function Helpers_getShortDate(dateObj) {
-                       console.log('getShortDate', dateObj);
                        var dd, mm, yyyy;
 
                        try {
@@ -39,7 +38,6 @@ function Helpers() {
                 * @returns {string}
                 */
                secondsToHours: function Helpers_secondsToHours(seconds) {
-                       console.log('secondsToHours', seconds);
                        var str = '';
                        str = ((seconds % 60 < 10) ? '0' : '') + (seconds % 60);
                        seconds = parseInt(seconds / 60, 10);
index 1b59cf1..f20c1c1 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -45,7 +45,6 @@ var App = null;
                 * Initialisation function
                 */
                init: function App_init() {
-                       console.log('App_init');
                        // instantiate the libs
                        this.config = new Config();
                        this.model = new Model();
@@ -60,7 +59,7 @@ var App = null;
                 * Updates call history and caller detailed history lists
                 */
                updateCallLists: function App_updateCallLists() {
-                       console.log('App_updateCallLists', this);
+                       // workaround;
                        setTimeout(this.showHistoryForCaller(this.lastViewedCaller), 500);
                        this.showCallHistory();
                },
@@ -69,7 +68,6 @@ var App = null;
                 * Renders call history view
                 */
                showCallHistory: function App_showCallHistory() {
-                       console.log('App_showCallHistory');
                        this.model.getCallHistory(this.ui.showCallHistory.bind(this.ui));
                },
 
@@ -78,7 +76,6 @@ var App = null;
                 * @param {string} phoneNumber
                 */
                showHistoryForCaller: function App_showHistoryForCaller(phoneNumber) {
-                       console.log('App_showHistoryForCaller', phoneNumber);
                        this.lastViewedCaller = phoneNumber;
                        this.model.getCallHistoryForCaller(phoneNumber, this.ui.showHistoryForCaller.bind(this.ui, phoneNumber));
                },
@@ -89,7 +86,6 @@ var App = null;
                 * @returns {string} photoURI Photo URI for specified contact
                 */
                getPhotoURIForContact: function App_getPhotoURIForContact(addressBookId, contactId) {
-                       console.log('App_getPhotoURIForContact', addressBookId, contactId);
                        return this.model.getPhotoURIForContact(addressBookId, contactId);
                },
 
@@ -98,17 +94,14 @@ var App = null;
                 * @param {string} phoneNumber
                 */
                makeCall: function App_makeCall(phoneNumber) {
-                       console.log('App_call', phoneNumber);
                        var appControl = new tizen.ApplicationControl(
-                                       'http://tizen.org/appcontrol/operation/dial',
+                                       'http://tizen.org/appcontrol/operation/call',
                                        'tel:' + phoneNumber
                                );
-
                        tizen.application.launchAppControl(
                                appControl,
                                null,
                                function () {
-                                       console.log('launch app service ...');
                                },
                                function (e) {
                                        console.error('App_makeCall: CALL service failure', e);
@@ -116,7 +109,6 @@ var App = null;
                                },
                                {
                                        onsuccess: function () {
-                                               console.log('CALL to ' + phoneNumber + ' successfull');
                                        },
                                        onfailure: function (er) {
                                                console.error('Error during call to ' + phoneNumber, er);
@@ -131,7 +123,6 @@ var App = null;
                 * @param {string} phoneNumber
                 */
                sendSms: function App_sendSms(phoneNumber) {
-                       console.log('App_sendSms', phoneNumber);
 
                        var appControl = new tizen.ApplicationControl(
                                        'http://tizen.org/appcontrol/operation/send_text',
@@ -142,7 +133,6 @@ var App = null;
                                appControl,
                                null,
                                function () {
-                                       console.log('launch app service ...');
                                },
                                function (e) {
                                        console.error('Message launch error: ', e);
@@ -150,7 +140,6 @@ var App = null;
                                },
                                {
                                        onsuccess: function () {
-                                               console.log('Message service launch success');
                                        },
                                        onfailure: function (er) {
                                                console.error('Message service launch error: ', er);
@@ -171,7 +160,9 @@ var App = null;
                /**
                 * App exit
                 */
-               exit: function App_exit() {
+               exit: function App_exit(event) {
+                       event.preventDefault();
+                       event.stopPropagation();
                        tizen.application.getCurrentApplication().exit();
                }
        };
index 3afcc50..c565892 100644 (file)
@@ -18,7 +18,6 @@ function Model() {
                 * API module initialisation
                 */
                init: function Model_init() {
-
                },
 
                /**
@@ -26,7 +25,6 @@ function Model() {
                 * @param {onSuccessCallback} function
                 */
                registerChangeListener: function Model_registerChangeListener(onSuccessCallback) {
-                       console.log('Model_registerChangeListener');
 
                        var callHistoryListener = {
                                onadded: onSuccessCallback,
@@ -41,7 +39,6 @@ function Model() {
                 * @param {function} onError callback
                 */
                getCallHistory: function Model_getCallHistory(onSuccess, onError) {
-                       console.log('Model_getCallHistory');
                        if (typeof onError !== 'function') {
                                onError = function (e) {
                                        console.error('Model_getCallHistory error', e);
@@ -56,7 +53,6 @@ function Model() {
                 * @param {function} onSuccess Callback
                 */
                getCallHistoryForCaller: function Model_getCallHistoryForCaller(phoneNumber, onSuccess) {
-                       console.log('Model_getCallHistoryForCaller', phoneNumber);
 
                        tizen.callhistory.find(onSuccess, undefined, // error is ignored
                                new tizen.AttributeFilter('remoteParties.remoteParty', 'EXACTLY', phoneNumber),
@@ -69,12 +65,10 @@ function Model() {
                 * @param {CallHistoryEntry} entry
                 */
                deleteLog: function Model_deleteLog(entry) {
-                       console.log('deleteLog', entry);
                        try {
                                tizen.callhistory.remove(entry);
                        } catch (e) {
-                               console.error('error', e);
-                               console.log('Error occurred on entry delete.');
+                               console.error('Error on entry delete: ' + e.message);
                        }
                },
 
@@ -93,8 +87,9 @@ function Model() {
                                        return contact.photoURI || false;
                                }
                        } catch (e) {
-                               console.error('updatePhotoByContactId error:', e.message);
+                               console.error('updatePhotoByContactId error:' + e.message);
                        }
+                       return false;
                }
 
        };
index 011db17..81f1799 100644 (file)
@@ -28,7 +28,6 @@ function Ui(contacts) {
                 * UI Initializer
                 */
                init: function Ui_init() {
-                       console.log('Ui_init');
                        this.templateManager = new TemplateManager();
                        this.helpers = new Helpers();
                        $(document).ready(this.domInit.bind(this));
@@ -38,7 +37,6 @@ function Ui(contacts) {
                 * When DOM is ready, initialise it (bind events)
                 */
                domInit: function Ui_domInit() {
-                       console.log('Ui_domInit');
                        this.templateManager.loadToCache(['callView', 'callerHistory', 'callItemRow', 'callerCallItemRow', 'messageWindow', 'dateRow'], this.initPages.bind(this));
                },
 
@@ -46,13 +44,12 @@ function Ui(contacts) {
                 * UI pages initializer
                 */
                initPages: function Ui_initPages() {
-                       console.log('Ui_initPages');
-                       var pages = [];
+                       var pages = [], body = $('body');
 
+                       body.append(this.templateManager.get('messageWindow')).trigger('create');
                        $('#callView').append($(this.templateManager.get('callView')).children()).trigger('pagecreate');
-
                        pages.push(this.templateManager.get('callerHistory'));
-                       $('body').append(pages.join(''));
+                       body.append(pages.join(''));
                        this.removeSearchBarToHeader();
 
                        this.addEvents();
@@ -63,15 +60,20 @@ function Ui(contacts) {
                 * Add UI events
                 */
                addEvents: function Ui_addEvents() {
-                       console.log('Ui_addEvents');
                        var self = this;
 
-                       $('#callView .ui-btn-back').on('tap', app.exit.bind(app));
+                       $('#callView').on('tap', '.ui-btn-back', app.exit.bind(app));
 
                        $('#callView').on('pagebeforeshow', function () {
                                app.showCallHistory();
                        });
 
+                       $('#historyForCallerView').on('tap', '.ui-btn-back', function (event) {
+                               event.preventDefault();
+                               event.stopPropagation();
+                               $.mobile.changePage('#callView');
+                       });
+
                        $('#historyForCallerView').on('pagebeforeshow', function () {
                                self.hideCheckboxes();
                                $('#historyForCallerView .ui-content')
@@ -84,7 +86,6 @@ function Ui(contacts) {
                        });
 
                        $('#historyForCallerView').on('pageshow', function () {
-                               console.log('(event) #historyForCallerView:pageshow');
                                $('#content').css('top', '160px');
                                $('#header').css('height', '160px');
                                $('#delete-toolbar').css('width', '70px');
@@ -104,27 +105,44 @@ function Ui(contacts) {
                        });
 
                        $('#calllogList').on('click', '.call', function onCalllogEntryClick(event) {
-                               console.log('onclick', $(this).data('entries'));
-                               app.showHistoryForCaller($(this).data('entries')[0].remoteParties[0].remoteParty);
-                               $.mobile.changePage('#historyForCallerView');
+                               if ($(this).data('entries')[0].remoteParties[0].remoteParty !== "") {
+                                       app.showHistoryForCaller($(this).data('entries')[0].remoteParties[0].remoteParty);
+                                       $.mobile.changePage('#historyForCallerView');
+                               }
                        });
 
+                       //FIXME - remove this code after change alert popup to tizen popup
                        $('#smsActionBtn').on('tap', function () {
+                               $(this).removeClass('ui-btn-down-s');
+                       });
+
+                       $('#smsActionBtn').on('click', function () {
                                self.hideCheckboxes();
                                app.sendSms($('#forCallerList').data('remoteParty'));
                        });
 
-                       $('#callActionBtn').on('tap', function () {
+                       $('#callActionBtn').on("tap", function (e) {
+                               var $this = jQuery(this);
+                               if ($this.data('activated')) {
+                                       return false;
+                               }
+
+                               $this.data('activated', true);
+                               setTimeout(function () {
+                                       $this.data('activated', false);
+                               }, 1000);
+
                                self.hideCheckboxes();
                                app.makeCall($('#forCallerList').data('remoteParty'));
+
+                               return false;
                        });
 
-                       $('#deleteActionBtn').on('tap', function () {
+                       $('#deleteActionBtn').on('click', function () {
                                self.changeDetailsToRemoveState();
                        });
 
                        $('#forCallerList').on('tap', 'li', function () {
-                               console.log('handle click', this.removeMode);
                                var checkbox = $(this).find(':checkbox');
                                if (self.removeMode === true) {
                                        if (checkbox.attr('checked')) {
@@ -139,10 +157,13 @@ function Ui(contacts) {
                                        self.setSelectAllDetails();
                                }
                        });
+
+                       $('#popup')
+                               .on('click', '#popupCancelActionBtn', this.closePopup.bind(this))
+                               .on('click', '#popupSubmitActionBtn', this.deleteCheckedLogs.bind(this));
                },
 
                addEventsForCallerListCheckboxes: function Ui_addEventsForCallerListCheckboxes() {
-                       console.log('Ui_addEventsForCallerListCheckboxes');
                        var self = this;
                        $('#forCallerList :checkbox').on('change', function (event) {
                                if ($(this).attr('checked')) {
@@ -150,20 +171,19 @@ function Ui(contacts) {
                                } else {
                                        $(this).attr('checked', false);
                                }
-                               console.log('#forCallerList :checkbox', 'onchange');
                                self.setSelectAllDetails();
                        });
                },
 
                selectAll: function Ui_selectAll() {
-                       console.log('Ui_selectAll');
-                       if ($('#selectAllDetails').attr('checked')) {
-                               $('#selectAllDetails')
+                       var selectAll = $('#selectAllDetails');
+                       if (selectAll.attr('checked')) {
+                               selectAll
                                        .attr('checked', false)
                                        .data('checkboxradio')
                                        .refresh();
                        } else {
-                               $('#selectAllDetails')
+                               selectAll
                                        .attr('checked', true)
                                        .data('checkboxradio')
                                        .refresh();
@@ -171,7 +191,6 @@ function Ui(contacts) {
                },
 
                selectAllDetails: function Ui_selectAllDetails() {
-                       console.log('Ui_selectAllDetails');
                        if ($('#selectAllDetails').attr('checked')) {
                                $('#selectAllDetails').attr('checked', true);
                        } else {
@@ -185,7 +204,6 @@ function Ui(contacts) {
                 * @return {number} length
                 */
                getCountSelectedLogEntries: function Ui_getCountSelectedLogEntries() {
-                       console.log('Ui_getCountSelectedLogEntries');
                        return $('#forCallerList li .toRemove label.ui-checkbox-on').length;
                },
 
@@ -207,7 +225,6 @@ function Ui(contacts) {
                 * Hides checkboxes
                 */
                hideCheckboxes: function Ui_hideCheckboxes() {
-                       console.log('Ui_hideCheckboxes');
                        $('#selectAllDetails')
                                .attr('checked', false)
                                .data('checkboxradio')
@@ -228,12 +245,10 @@ function Ui(contacts) {
                 * @returns {string}
                 */
                cssClassesForEntry: function Ui_cssClassesForEntry(entry) {
-                       console.log('Ui_cssClassesForEntry', entry);
                        return 'call dir_' + entry.direction.toLowerCase() + ' type_' + entry.type.replace('.', '-').toLowerCase();
                },
 
                setSelectAllDetails: function Ui_setSelectAllDetails() {
-                       console.log('Ui_setSelectAllDetails');
                        if ($('#forCallerList input[type="checkbox"]').length === $('#forCallerList input[checked="checked"]').length) {
                                $('#selectAllDetails')
                                        .attr('checked', true)
@@ -252,35 +267,21 @@ function Ui(contacts) {
                 * @param {string} message
                 */
                showPopup: function Ui_showPopup(message) {
-                       console.log('Ui_showPopup', message);
-                       $('body')
-                               .append(this.templateManager.get('messageWindow'))
-                               .trigger('create');
                        $('#popupMessage').html(message);
-
-                       $('#popup')
-                               .on('tap', '#popupCancelActionBtn', this.closePopup.bind(this))
-                               .on('tap', '#popupSubmitActionBtn', this.deleteCheckedLogs.bind(this));
-
-                       $('#popup').popupwindow('open');
+                       $('#popup').popup('open', {'positionTo': 'window'});
                },
 
                /**
                 * Hides popup
                 */
                closePopup: function Ui_closePopup() {
-                       console.log('Ui_closePopup');
-                       $('#popup')
-                               .popupwindow('close')
-                               .remove();
+                       $('#popup').popup('close');
                },
 
                /**
                 * Deletes checked log entries
                 */
-               deleteCheckedLogs: function Ui_deleteCheckedLogs() {
-                       console.log('Ui_deleteCheckedLogs');
-
+               deleteCheckedLogs: function Ui_deleteCheckedLogs(e) {
                        this.closePopup();
 
                        $('#selectAllDetails')
@@ -296,16 +297,17 @@ function Ui(contacts) {
                        });
 
                        if ($('#forCallerList li.call').length > 0) {
-                               $('.number').html('(' + $('#forCallerList li').length + ')');
+                               this.updateCallerHeaderNumberOfEntries($('#forCallerList li.call').length);
                        } else {
+                               e.preventDefault();
+                               $('.ui-listview-filter .ui-input-text').val('');
+                               $('.ui-listview-filter .ui-input-text').trigger('change');
                                $.mobile.changePage('#callView');
                        }
                },
 
-               changeDetailsToRemoveState: function changeDetailsToRemoveState(set) {
-                       console.log('changeDetailsToRemoveState', set);
+               changeDetailsToRemoveState: function Ui_changeDetailsToRemoveState(set) {
                        var counter = this.getCountSelectedLogEntries();
-
                        if (set !== undefined) {
                                this.removeMode = false;
                        } else if (counter === 0) {
@@ -334,48 +336,83 @@ function Ui(contacts) {
                 * @param {CallHistoryEntry[]} callEntries
                 */
                showCallHistory: function Ui_showCallHistory(callEntries) {
-                       console.log('Ui_showCallHistory', callEntries);
-                       var counter = 0, //
-                               pdate = '', // previous date
+                       var self = this,
+                               pdate = null, // previous date
                                date = '',
                                elements = [], // list elements
                                len = callEntries.length, // entries length
+                               tempLength = 0, // length of temporary table;
                                i, // loop counter
+                               j, // loop counter
                                current, // current entry object
-                               next, // next entry object
                                today = this.helpers.getShortDate(new Date()), // today short date
-                               entryShortDate;
+                               entryShortDate,
+                               filterResult,
+                               groupsOfDays = [],
+                               dayLog,
+                               index = 0;
+
+                       function filterForSameEntry(element) {
+                               return self.getNumber(current) === self.getNumber(element)
+                                       && current.direction === element.direction;
+                       }
 
                        $('.selectedCount').hide();
 
                        for (i = 0; i < len; i = i + 1) {
-                               counter += 1;
                                current = callEntries[i];
                                date = current.startTime.toLocaleDateString();
-                               entryShortDate = this.helpers.getShortDate(callEntries[i].startTime);
-                               next = callEntries[i + 1];
 
-                               // if date is changed render new header
+                               // if date is changed create new deyLog;
                                if (date !== pdate) {
-                                       elements.push($(this.templateManager.get('dateRow', {
-                                               'date': today === entryShortDate ? 'Today' : date
-                                       })).get(0));
+                                       dayLog = {};
+                                       dayLog.date = date;
+                                       dayLog.entries = [];
+                                       dayLog.counters = [];
+                                       groupsOfDays.push(dayLog);
+                                       pdate = date;
                                }
 
-                               if (date !== pdate || next === undefined
-                                               || current.remoteParties[0].remoteParty !== next.remoteParties[0].remoteParty) {
-                                       elements.push(this.getCallItemRow(current, counter));
-                                       counter = 0; // reset counter after render
+                               // group entries by remote Party;
+                               filterResult = dayLog.entries.filter(filterForSameEntry);
+                               if (filterResult.length) {
+                                       index = dayLog.entries.indexOf(filterResult[0]);
+                                       dayLog.counters[index] += 1;
+                               } else {
+                                       dayLog.entries.push(current);
+                                       dayLog.counters[dayLog.entries.length - 1] = 1;
                                }
-
-                               if (date !== pdate) {
-                                       pdate = date;
+                       }
+                       // Create UL list with dividers;
+                       len = groupsOfDays.length;
+                       for (i = 0; i < len; i += 1) {
+                               dayLog = groupsOfDays[i];
+                               tempLength = dayLog.entries.length;
+                               entryShortDate = this.helpers.getShortDate(dayLog.entries[0].startTime);
+
+                               // add date header;
+                               elements.push($(this.templateManager.get('dateRow', {
+                                       'date': today === entryShortDate ? 'Today' : dayLog.date
+                               })).get(0));
+
+                               for (j = 0; j < tempLength; j = j + 1) {
+                                       elements.push(this.getCallItemRow(dayLog.entries[j], dayLog.counters[j]));
                                }
                        }
 
                        $('#calllogList')
                                .empty()
                                .append(elements);
+
+                       /* workaround for UIFW & webkit scroll*/
+                       $.mobile.activePage.css('min-height', 0);
+               },
+
+               /**
+                * @param: {CallHistoryEntry} entry
+                */
+               getNumber: function (entry) {
+                       return entry.remoteParties[0].remoteParty;
                },
 
                /**
@@ -386,11 +423,16 @@ function Ui(contacts) {
                 * @returns {HTMLPartial}
                 */
                getCallItemRow: function Ui_getCallItemRow(entry, counter) {
-                       console.log('Ui_getCallItemRow', entry, counter);
                        var party = entry.remoteParties[0],
                                name = party.displayName || party.remoteParty,
                                tpl;
 
+                       if (party.displayName === "") {
+                               name = "No Name";
+                       } else if (party.remoteParty === "") {
+                               name = "No Number";
+                       }
+
                        if (counter > 1) {
                                name += ' (' + counter + ')';
                        }
@@ -411,10 +453,9 @@ function Ui(contacts) {
                 * Returns HTML for single caller log entry
                 *
                 * @param {CallHistoryEntry} entry
-                * @returns
+                * @returns {HTMLElement}
                 */
                getCallerCallLogRow: function Ui_getCallerCallLogRow(entry) {
-                       console.log('Ui_getCallerCallLogRow', entry);
 
                        return $(this.templateManager.get('callerCallItemRow', {
                                'cssClass': this.cssClassesForEntry(entry),
@@ -430,7 +471,6 @@ function Ui(contacts) {
                 * @param {CallHistoryEntry[]} entries
                 */
                showHistoryForCaller: function Ui_showHistoryForCaller(remoteParty, entries) {
-                       console.log('Ui_showHistoryForCaller', entries);
                        var pdate = '',
                                date = '',
                                elements = [],
@@ -474,28 +514,41 @@ function Ui(contacts) {
                },
 
                /**
+                * Update accoundId
+                * @param {string} accountId
+                */
+               updateCallerHeaderAccountId: function Ui_updateCallerHeaderAccountId(accountId) {
+                       $('.infoContainer .accountId').html(accountId);
+               },
+
+               /**
+                * Update number of entries
+                * @param numberOfEntries
+                */
+               updateCallerHeaderNumberOfEntries: function Ui_updateCallerHeaderNumberOfEntries(numberOfEntries) {
+                       $('.infoContainer .numberOfEntries').html(numberOfEntries);
+               },
+
+               /**
                 * Updates caller main info
                 * @param {CallHistoryEntry} entry
                 * @param {number} numberOfEntries
                 */
                updateCallerHeader: function Ui_updateCallerHeader(entry, numberOfEntries) {
-                       console.log('Ui_updateCallerHeader', entry, numberOfEntries);
                        var name = '',
-                               num = '',
                                photoURIdefault = '../images/no_photo.png',
                                party,
                                imgPath;
 
-                       $('.contact > .infoContainer > .photo').css('background-image', photoURIdefault);
+                       $('.infoContainer .photo').css('background-image', photoURIdefault);
 
                        if (entry.remoteParties !== null) {
                                party = entry.remoteParties[0];
                                name = party.displayName || party.remoteParty;
                                if (party.displayName) {
-                                       num = party.remoteParty + ' (' + numberOfEntries + ')';
-                               } else {
-                                       num = ' (' + numberOfEntries + ')';
+                                       this.updateCallerHeaderAccountId(party.remoteParty);
                                }
+                               this.updateCallerHeaderNumberOfEntries(numberOfEntries);
 
                                if (party.contactRef) {
                                        imgPath = app.getPhotoURIForContact(party.contactRef.addressBookId, party.contactRef.contactId);
@@ -505,13 +558,15 @@ function Ui(contacts) {
                                }
                        } else if (entry.contactId !== null) {
                                name = entry.accountId;
-                               num = entry.accountId + ' (' + numberOfEntries + ')';
+                               this.updateCallerHeaderAccountId(entry.accountId);
+                               this.updateCallerHeaderNumberOfEntries(numberOfEntries);
                        } else {
                                name = entry.accountId;
-                               num = ' (' + numberOfEntries + ')';
+                               this.updateCallerHeaderAccountId('');
+                               this.updateCallerHeaderNumberOfEntries(numberOfEntries);
                        }
                        $('.contact > .infoContainer > .name').html(name);
-                       $('.contact > .infoContainer > .number').html(num);
+
                },
 
                /**
index 62892cb..68c6678 100644 (file)
@@ -1,5 +1,3 @@
-/*jslint devel: true*/
-/*jslint forin: true*/ /* temporary - from Tizen SDK */
 /*global tizen, $, app */
 /**
  * @class TemplateManager
@@ -22,14 +20,14 @@ function TemplateManager() {
                 * UI module initialisation
                 */
                init: function init() {
-
                },
 
                /**
                 * Returns template html (from cache)
+                * @param {string} tplName
+                * @param {string} tplParams
                 */
                get: function TemplateManager_get(tplName, tplParams) {
-                       console.log('TemplateManager_get:' + tplName);
                        if (this.cache[tplName] !== undefined) {
                                return this.getCompleted(this.cache[tplName], tplParams);
                        }
@@ -38,6 +36,8 @@ function TemplateManager() {
 
                /**
                 * Load templates to cache
+                * @param {string} tplNames
+                * @param {function} onSuccess
                 */
                loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess) {
                        var self = this,
@@ -66,7 +66,6 @@ function TemplateManager() {
 
                                                                // 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') {
@@ -74,7 +73,7 @@ function TemplateManager() {
                                                                }
                                                        },
                                                        error: function (jqXHR, textStatus, errorThrown) {
-                                                               alert('templateManagerError: ' + errorThrown);
+                                                               console.error('templateManagerError: ' + errorThrown);
                                                        }
                                                });
                                        } else {
@@ -92,13 +91,17 @@ function TemplateManager() {
 
                /**
                 * 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) {
-                               replaceRegExp = new RegExp(['%', tplParam, '%'].join(''), 'g');
-                               tplHtml = tplHtml.replace(replaceRegExp, tplParams[tplParam]);
+                               if (tplParams.hasOwnProperty(tplParam)) {
+                                       replaceRegExp = new RegExp(['%', tplParam, '%'].join(''), 'g');
+                                       tplHtml = tplHtml.replace(replaceRegExp, tplParams[tplParam]);
+                               }
                        }
 
                        return tplHtml;
index e3440f4..f8dc62c 100644 (file)
@@ -14,7 +14,7 @@
  *      limitations under the License.
  */
 
-/*jslint devel: true */
+/*jslint devel: true*/
 /*global $, tizen, App  */
 
 /**
@@ -40,7 +40,6 @@ var app = null;
                        var self = this;
                        $.getScript('js/app.js')
                                .done(function () {
-                                       console.log('Loaded app.js');
                                        // once the app is loaded, create the app object
                                        // and load the libraries
                                        app = new App();
@@ -59,7 +58,6 @@ var app = null;
                                        $.getScript(filename)
                                                .done(function () {
                                                        loadedLibs += 1;
-                                                       console.log('Loaded subscript: ' + filename + ' : ' + loadedLibs);
                                                        if (loadedLibs >= app.requires.length) {
                                                                // All dependencies are loaded - initialise the app
                                                                app.init();
@@ -74,7 +72,7 @@ var app = null;
                 * Handle ajax errors
                 */
                onGetScriptError: function onGetScriptError(e, jqxhr, setting, exception) {
-                       alert('An error occurred: ' + e.message);
+                       console.error('An error occurred: ' + e.message);
                }
        }).init(); // run the loader
 }());
\ No newline at end of file
index 33e746f..b76b2ff 100644 (file)
@@ -12,7 +12,7 @@
 </Reference>
 <Reference URI="templates/messageWindow.tpl">
 <DigestMethod Algorithm="http://www.w3.org/2001/04/xmlenc#sha256"></DigestMethod>
-<DigestValue>qjpQCV04PM/E2Ux9B9yg+e01/WMIrvzbSjSV8n2E2n8=</DigestValue>
+<DigestValue>zizbjxoYr3Gs+5pyl5lnHw9brODiUE6nXCf8t2IcBJo=</DigestValue>
 </Reference>
 <Reference URI="templates/callerCallItemRow.tpl">
 <DigestMethod Algorithm="http://www.w3.org/2001/04/xmlenc#sha256"></DigestMethod>
 </Reference>
 <Reference URI="js/app.ui.js">
 <DigestMethod Algorithm="http://www.w3.org/2001/04/xmlenc#sha256"></DigestMethod>
-<DigestValue>u0yo0HRLp8FaYm0N4LU6TvByAT/yfrx3HU03KgZ+p20=</DigestValue>
+<DigestValue>xczGoxqkK1wAAeUDun8hxzBz4zdtc7wfi4IFez8yANg=</DigestValue>
 </Reference>
 <Reference URI="js/app.js">
 <DigestMethod Algorithm="http://www.w3.org/2001/04/xmlenc#sha256"></DigestMethod>
 </Reference>
 <Reference URI="config.xml">
 <DigestMethod Algorithm="http://www.w3.org/2001/04/xmlenc#sha256"></DigestMethod>
-<DigestValue>8tekKmLgvmwWvRY6IAiZ6LjvPONg40+tHrNEYgvrsEI=</DigestValue>
+<DigestValue>FdOTWPDDtUhn2z/faNgKgtH/qHeGkvQgZ7b09kEK3bY=</DigestValue>
 </Reference>
 <Reference URI="icon.png">
 <DigestMethod Algorithm="http://www.w3.org/2001/04/xmlenc#sha256"></DigestMethod>
 </Reference>
 <Reference URI="css/style.css">
 <DigestMethod Algorithm="http://www.w3.org/2001/04/xmlenc#sha256"></DigestMethod>
-<DigestValue>P0lJVcH4Yt/OEUIU5MSpNzxEhZ0iX4DHnNoN2PzMI18=</DigestValue>
+<DigestValue>exzeWv5XiFeChv8h9Zc/dVf0vHJfACbRdn44rmSgKeQ=</DigestValue>
 </Reference>
 <Reference URI="NOTICE.Flora">
 <DigestMethod Algorithm="http://www.w3.org/2001/04/xmlenc#sha256"></DigestMethod>
 </Reference>
 </SignedInfo>
 <SignatureValue>
-d7fqK6/nufdPwwlZiSt1xVz/gd5U7fT/JH9+ZhGgR7JsIzizYN/fHWQgN6RRqM8Qs4hc7vWUNYS5
-AEYgGgphpROkmaMNVhBxfuXHNqi0AbDC8MmIjTMlQusVWGWZ5eNVhipSSgx66bnBcxEztpGdlIRc
-RgwSomoSsVle7Cyw63c=
+P0siyKCMIHc1S97HytgYawWEmoiViLT4zLJqTcEnVoaNpt4ZgSE+glLiHDBLeucBQweMHmFz4FRs
+Ih0Ds7Fahpw0voeVhUt/pOEt/aetD22exCh7YuttAm7II8xc7jVxPW8eo/XUhhTq2twTaCH3D1Qs
+ZYxAOXb7nhFikbpt014=
 </SignatureValue>
 <KeyInfo>
 <X509Data>
 <X509Certificate>
-MIICmzCCAgQCCQDXI7WLdVZwiTANBgkqhkiG9w0BAQUFADCBjzELMAkGA1UEBhMCS1IxDjAMBgNV
+MIICnTCCAgYCCQDE9MbMmJ/yCzANBgkqhkiG9w0BAQUFADCBkDELMAkGA1UEBhMCS1IxDjAMBgNV
 BAgMBVN1d29uMQ4wDAYDVQQHDAVTdXdvbjEWMBQGA1UECgwNVGl6ZW4gVGVzdCBDQTEiMCAGA1UE
-CwwZVGl6ZW4gRGlzdHJpYnV0b3IgVGVzdCBDQTEkMCIGA1UEAwwbVGl6ZW4gUHVibGljIERpc3Ry
-aWJ1dG9yIENBMB4XDTEyMTAyOTEzMDMwNFoXDTIyMTAyNzEzMDMwNFowgZMxCzAJBgNVBAYTAktS
-MQ4wDAYDVQQIDAVTdXdvbjEOMAwGA1UEBwwFU3V3b24xFjAUBgNVBAoMDVRpemVuIFRlc3QgQ0Ex
-IjAgBgNVBAsMGVRpemVuIERpc3RyaWJ1dG9yIFRlc3QgQ0ExKDAmBgNVBAMMH1RpemVuIFB1Ymxp
-YyBEaXN0cmlidXRvciBTaWduZXIwgZ8wDQYJKoZIhvcNAQEBBQADgY0AMIGJAoGBALtMvlc5hENK
-90ZdA+y66+Sy0enD1gpZDBh5T9RP0oRsptJv5jjNTseQbQi0SZOdOXb6J7iQdlBCtR343RpIEz8H
-mrBy7mSY7mgwoU4EPpp4CTSUeAuKcmvrNOngTp5Hv7Ngf02TTHOLK3hZLpGayaDviyNZB5PdqQdB
-hokKjzAzAgMBAAEwDQYJKoZIhvcNAQEFBQADgYEAvGp1gxxAIlFfhJH1efjb9BJK/rtRkbYn9+Ez
-GEbEULg1svsgnyWisFimI3uFvgI/swzr1eKVY3Sc8MQ3+Fdy3EkbDZ2+WAubhcEkorTWjzWz2fL1
-vKaYjeIsuEX6TVRUugHWudPzcEuQRLQf8ibZWjbQdBmpeQYBMg5x+xKLCJc=
+CwwZVGl6ZW4gRGlzdHJpYnV0b3IgVGVzdCBDQTElMCMGA1UEAwwcVGl6ZW4gUGFydG5lciBEaXN0
+cmlidXRvciBDQTAeFw0xMjEwMjcwNzQ4MzNaFw0yMjEwMjUwNzQ4MzNaMIGUMQswCQYDVQQGEwJL
+UjEOMAwGA1UECAwFU3V3b24xDjAMBgNVBAcMBVN1d29uMRYwFAYDVQQKDA1UaXplbiBUZXN0IENB
+MSIwIAYDVQQLDBlUaXplbiBEaXN0cmlidXRvciBUZXN0IENBMSkwJwYDVQQDDCBUaXplbiBQYXJ0
+bmVyIERpc3RyaWJ1dG9yIFNpZ25lcjCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEAy9mg2x4B
+zxlK3LJL81GsLq/pJfK1evdCKG/IOBpdoRO0rLhYnsL5+KvToPFa5g9GTZo32LikpW1NZ7++3EHE
+fnO2IGLUau4kquvhmz1LNg5xBTx7IbucmwLMRGo1BPGdsAQQLyXeQKJ5PCERmVg4MIoiL2zT/JsL
+sZ9UPT6GEB8CAwEAATANBgkqhkiG9w0BAQUFAAOBgQAw5xPBFR1XKuZ8QpsCtSE0zXVHvwIa+Ha4
+YBdRtGwEoZmiKGZV/wAhPRdmR0kISkTz20kIGz/ZwRZCVGhsr5hkkpFknYlKeKkEJ/tJfZl4D7ec
+GFAnynOzlWZqSIPz+yxX8ah9E6lTv4Vs9DhNb08nxVvxLqlpyVdk9RUsCx/yIA==
 </X509Certificate>
 <X509Certificate>
-MIICtDCCAh2gAwIBAgIJAMDbehElPNKvMA0GCSqGSIb3DQEBBQUAMIGVMQswCQYDVQQGEwJLUjEO
-MAwGA1UECAwFU3V3b24xDjAMBgNVBAcMBVN1d29uMRYwFAYDVQQKDA1UaXplbiBUZXN0IENBMSMw
-IQYDVQQLDBpUVGl6ZW4gRGlzdHJpYnV0b3IgVGVzdCBDQTEpMCcGA1UEAwwgVGl6ZW4gUHVibGlj
-IERpc3RyaWJ1dG9yIFJvb3QgQ0EwHhcNMTIxMDI5MTMwMjUwWhcNMjIxMDI3MTMwMjUwWjCBjzEL
+MIICtTCCAh6gAwIBAgIJAKORBcIiXygIMA0GCSqGSIb3DQEBBQUAMIGVMQswCQYDVQQGEwJLUjEO
+MAwGA1UECAwFU3V3b24xDjAMBgNVBAcMBVN1d29uMRYwFAYDVQQKDA1UaXplbiBUZXN0IENBMSIw
+IAYDVQQLDBlUaXplbiBEaXN0cmlidXRvciBUZXN0IENBMSowKAYDVQQDDCFUaXplbiBQYXJ0bmVy
+IERpc3RyaWJ1dG9yIFJvb3QgQ0EwHhcNMTIxMDI3MDc0NTIwWhcNMjIxMDI1MDc0NTIwWjCBkDEL
 MAkGA1UEBhMCS1IxDjAMBgNVBAgMBVN1d29uMQ4wDAYDVQQHDAVTdXdvbjEWMBQGA1UECgwNVGl6
-ZW4gVGVzdCBDQTEiMCAGA1UECwwZVGl6ZW4gRGlzdHJpYnV0b3IgVGVzdCBDQTEkMCIGA1UEAwwb
-VGl6ZW4gUHVibGljIERpc3RyaWJ1dG9yIENBMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDe
-OTS/3nXvkDEmsFCJIvRlQ3RKDcxdWJJp625pFqHdmoJBdV+x6jl1raGK2Y1sp2Gdvpjc/z92yzAp
-bE/UVLPh/tRNZPeGhzU4ejDDm7kzdr2f7Ia0U98K+OoY12ucwg7TYNItj9is7Cj4blGfuMDzd2ah
-2AgnCGlwNwV/pv+uVQIDAQABoxAwDjAMBgNVHRMEBTADAQH/MA0GCSqGSIb3DQEBBQUAA4GBACqJ
-KO33YdoGudwanZIxMdXuxnnD9R6u72ltKk1S4zPfMJJv482CRGCI4FK6djhlsI4i0Lt1SVIJEed+
-yc3qckGm19dW+4xdlkekon7pViEBWuyHw8OWv3RXtTum1+PGHjBJ2eYY4ZKIpz73U/1NC16sTB/0
-VhfnkHwPltmrpYVe
+ZW4gVGVzdCBDQTEiMCAGA1UECwwZVGl6ZW4gRGlzdHJpYnV0b3IgVGVzdCBDQTElMCMGA1UEAwwc
+VGl6ZW4gUGFydG5lciBEaXN0cmlidXRvciBDQTCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEA
+2ZQrdEowjqxUmB8FX8ej19VKY6jGHKNIRE5wrhBkuZ1b0FLRPiN3/Cl9wMkCnyJui4QhC28g1aBg
+w/JnaObcDqW1NgFVH3006+gZvCTDlw1nIEjvZa6P+uWOOi05xPPAE0feKPkO1POnOjnapfkkEVNU
+8TXsLbLYBylWT8rxZC8CAwEAAaMQMA4wDAYDVR0TBAUwAwEB/zANBgkqhkiG9w0BAQUFAAOBgQBJ
+yJ7p6qs0JI+1iKOk/sYWVP6dMueY72qOc/wVj5c3ejOlgJNNXDMAQ14QcRRexffc68ipTwybU/3m
+tcNwydzKJe+GFa4b2zyKOvOgrfs4MKSR0T9XEPmTKeR+NDT2CbA6/kQoRYm0fSORzD2UXJzNZWe/
+WjwSA66hv4q+0QZQFQ==
 </X509Certificate>
 </X509Data>
 </KeyInfo>
index 99406c2..2ba37fe 100644 (file)
@@ -1,4 +1,4 @@
-<li class="%cssClasses%">
+<li data-filtertext="%name%" class="%cssClasses%">
        <div class="toRemove hidden"><input type="checkbox" /></div>
        <div class="numberOrName">%name%</div>
        <div class="iconStatus"></div>
index e0aaec5..1c2763e 100644 (file)
@@ -1,11 +1,11 @@
        <div data-role="page" id="callView" data-add-back-btn="header">
                <div data-role="header" id="page-header" data-position="fixed">
-                       <h1>CallLog</h1>
+                       <h1>CALL LOG</h1>
                </div>
-               <div data-role="content">
+               <div id="page-content-scroll">
                        <div id="page-content">
-                               <ul data-role="listview" id="calllogList" data-filter="true" data-position="fixed"></ul>
+                               <ul data-role="listview" id="calllogList" data-filter="true" data-position="fixed" data-inset="true"></ul>
                        </div>
                </div>
-               <div data-role="footer" data-position="fixed"></div>
+               <!-- <div data-role="footer" data-position="fixed"></div> -->
        </div>
\ No newline at end of file
index bf6cc6c..d5868f8 100644 (file)
@@ -5,7 +5,11 @@
                                <div class="infoContainer">
                                        <div class="photo"></div>
                                        <div class="name"></div>
-                                       <div class="number"></div>
+                                       <div class="number"><span class="accountId"></span>(<span class="numberOfEntries"></span>)</div>
+                               </div>
+                               <div class="options">
+                                       <a href="javascript:void(0)" data-role="button" class="actionButton" id="callActionBtn" data-inline="true">Call</a>
+                                       <a href="javascript:void(0)" data-role="button" class="actionButton" id="smsActionBtn" data-inline="true">Message</a>
                                </div>
                        </div>
                </div>
@@ -24,7 +28,7 @@
                        <div data-role="tabbar" data-style="toolbar" id="delete-toolbar">
                                <ul>
                                        <li id="delete">
-                                               <a id="deleteActionBtn" data-icon="ctrlbar-delete">delete</a>
+                                               <a id="deleteActionBtn" data-icon="ctrlbar-delete">Delete</a>
                                        </li>
                                </ul>
                        </div>
index fe719ef..9b67b4b 100644 (file)
@@ -1,7 +1,7 @@
-<div id="popup" data-role="popupwindow" data-style="center_basic_1btn">
-       <p data-role="text" id="popupMessage"></p>
-       <div data-role="button-bg">
-               <a href="#" data-role="button" data-inline="true" id="popupSubmitActionBtn">Yes</a>
-               <a href="#" data-role="button" data-inline="true" id="popupCancelActionBtn">No</a>
-       </div>
-</div>
\ No newline at end of file
+               <div id="popup" data-role="popup" class="center_basic_2btn">
+                       <div class="ui-popup-text" id="popupMessage"></div>
+                       <div class="ui-popup-button-bg">
+                               <a data-role="button" data-inline="true" id="popupSubmitActionBtn">Yes</a>
+                               <a data-role="button" data-inline="true" id="popupCancelActionBtn">No</a>
+                       </div>
+               </div>