js/app.ui.js

   1
   2 /*global $, tizen, App, app */
   3
   4 App.Ui = null;
   5
   6 (function () { // strict mode wrapper
   7         'use strict';
   8
   9         var prepareCallerName = function prepareCallerName(contact) {
  10                 var callerName, firstName, lastName;
  11                 callerName = '';
  12                 firstName = contact.name.firstName;
  13                 lastName = contact.name.lastName;
  14                 if (firstName !== '' && firstName !== null) {
  15                         callerName = firstName;
  16                 }
  17                 if (lastName !== '' && lastName !== null) {
  18                         if (callerName === '') {
  19                                 callerName += lastName;
  20                         } else {
  21                                 callerName += ' ';
  22                                 callerName += lastName;
  23                         }
  24                 }
  25                 if (callerName === '') {
  26                         callerName = 'no name';
  27                 }
  28                 return callerName;
  29         };
  30
  31         App.Ui = function App_Ui(app) {
  32                 this.app = app;
  33         };
  34
  35         App.Ui.prototype = {
  36                 popup: null,
  37
  38                 showPopup: function showPopup(message, page) {
  39                         this.popup = $('<div id="popup" data-role="popupwindow" data-style="center_basic_1btn"><p data-role="text">' + message + '</p><div data-role="button-bg"><a href="#" data-role="button" data-inline="true" onclick="closePopup();">OK</a></div></div>');
  40                         this.page.append(this.popup);
  41                         this.page.trigger('create');
  42                         this.popup.data('page', page);
  43                         this.popup.popupwindow('open');
  44                 },
  45
  46                 closePopup: function closePopup() {
  47                         var page = this.popup.data('page');
  48                         page.data('monit', '');
  49                         this.popup.popupwindow('close');
  50                         this.popup.remove();
  51                         this.popup = null;
  52                 },
  53
  54                 disableAccept: function disableAccept() {
  55                         $('#accept-choose').css('pointer-events', 'none').addClass('ui-disabled');
  56                 },
  57
  58                 enableAccept: function enableAccept() {
  59                         $('#accept-choose').css('pointer-events', 'auto').removeClass('ui-disabled');
  60                 },
  61
  62                 createListRecord: function createListRecord(contacts) {
  63                         $.mobile.changePage('#choose');
  64                 },
  65
  66                 prepareWaitingPage: function prepareWaitingPage(title, text) {
  67                         var waitingBox, waitingContent;
  68                         waitingBox = $('<div class="box" id="waitingBox"></div>');
  69                         waitingContent = $('<p class="defaultVeryBigText">' + text + '</p><p class="defaultCounterText" id="counter"></p>');
  70                         $('#header-transfer H1').text(title);
  71                         $('#content-transfer .ui-scrollview-view').empty();
  72                         waitingBox.append(waitingContent);
  73                         $('#content-transfer .ui-scrollview-view').append(waitingBox);
  74                         $('#content-start').trigger('create');
  75                         this.app.countDown(10, $('#counter'));
  76                 },
  77
  78                 loadTemporaryContent: function loadTemporaryContent() {
  79                         var temporaryBox, temporaryContent, temporaryButton;
  80                         temporaryBox = $('<div class="box" id="temporaryBox"></div>');
  81                         temporaryContent = $('<p class="defaultText">Default card hasn\'t defined yet!<br>Do you want to define it now?</p>');
  82                         temporaryButton = $('<div data-role="button" class="ui-btn-create">Create default card</div>');
  83
  84                         temporaryButton.on('tap', function (event) {
  85                                 event.preventDefault();
  86                                 $.mobile.changePage('#choose');
  87                         });
  88
  89                         $('#content-start .ui-scrollview-view').empty();
  90                         temporaryBox.append(temporaryContent).append(temporaryButton);
  91                         $('#content-start .ui-scrollview-view').append(temporaryBox);
  92                         $('#content-start').trigger('create');
  93                 },
  94
  95                 loadStartContent: function loadStartContent() {
  96                         var startBox, gap, comment, changeContact, readFromCard, writeToCard, communicateWithOtherDevice;
  97                         startBox = $('<div class="box" id="startBox"></div>');
  98                         gap = $('<div class="gap"></div>');
  99                         comment = $('<div id="comment"><p class="comment">Your default contact</p><p class="comment" id="comment-name">' + (localStorage.firstName || '') + ' ' + (localStorage.lastName || '') + '</p></div>');
 100                         changeContact = $('<div data-role="button" class="ui-btn-create">Change your default contact</div>');
 101                         changeContact.on('tap', function (event) {
 102                                 event.preventDefault();
 103                                 $.mobile.changePage('#choose');
 104                         });
 105                         readFromCard = $('<div data-role="button" class="ui-btn-create">Read from card</div>');
 106                         readFromCard.on('tap', function (event) {
 107                                 event.preventDefault();
 108                                 $('#transfer').data('option', 'read');
 109                                 $.mobile.changePage('#transfer');
 110                         });
 111                         writeToCard = $('<div data-role="button" class="ui-btn-create">Write to card</div>');
 112                         writeToCard.on('tap', function (event) {
 113                                 event.preventDefault();
 114                                 $('#transfer').data('option', 'write');
 115                                 $.mobile.changePage('#transfer');
 116                         });
 117                         communicateWithOtherDevice = $('<div data-role="button" class="ui-btn-create">Communicate with other device</div>');
 118                         communicateWithOtherDevice.on('tap', function (event) {
 119                                 event.preventDefault();
 120                                 $('#transfer').data('option', 'communicate');
 121                                 $.mobile.changePage('#transfer');
 122                         });
 123
 124                         $('#content-start .ui-scrollview-view').empty();
 125                         startBox.append(changeContact).append(gap.clone()).append(readFromCard).append(gap.clone()).append(writeToCard).append(gap.clone()).append(communicateWithOtherDevice).prepend(comment);
 126                         //$('#content-start .ui-scrollview-view').append(comment);
 127                         $('#content-start .ui-scrollview-view').append(startBox);
 128                         $('#content-start').trigger('create');
 129                 },
 130
 131                 loadStartPage: function loadStartPage() {
 132                         if (localStorage.started === undefined) {
 133                                 console.log('localStorage.started === undefined');
 134                                 this.loadTemporaryContent();
 135                         } else {
 136                                 console.log('localStorage.started !== undefined');
 137                                 this.loadStartContent();
 138                         }
 139                 },
 140
 141                 prepareContactsTemplate: function prepareContactsTemplate(phone, first, last) {
 142                         var i, ul;
 143
 144                         ul = $('<ul data-role="listview" id="contacts-data"></ul>');
 145                         $('#contact > #content-contact > .ui-scrollview-view').empty().append(ul);
 146
 147                         ul.append($('<li class="ui-li-multiline"><a href="#">' + ((first === '' || first === 'null') ? '...' : first) + '<span class="ui-li-text-sub">First Name</span></a></li>'));
 148                         ul.append($('<li class="ui-li-multiline"><a href="#">' + ((last === '' || last === 'null') ? '...' : last) + '<span class="ui-li-text-sub">Last Name</span></a></li>'));
 149                         ul.append($('<li class="ui-li-multiline"><a href="#">' + ((phone === '' || phone === 'null') ? '...' : phone) + '<span class="ui-li-text-sub">Phone Number</span></a></li>'));
 150
 151                         $('#contact > #content-contact').trigger('create');
 152                 },
 153
 154                 showContactsList: function showContactsList(contacts) {
 155                         console.log(this, 'showContactsList');
 156                         var self = this,
 157                                 ul = $('<ul data-role="listview" id="list-choose"></ul>'),
 158                                 listElementTap,
 159                                 sortedContactList = [],
 160                                 i,
 161                                 j,
 162                                 len,
 163                                 length,
 164                                 firstName = '',
 165                                 lastName = '',
 166                                 phoneNumber = '',
 167                                 id,
 168                                 vCard,
 169                                 listElement;
 170
 171                         $('#choose > #content-choose > .ui-scrollview-view').empty().append(ul);
 172
 173                         listElementTap = function (event) {
 174                                 event.preventDefault();
 175                                 console.log(self, 'listElementTap');
 176                                 self.enableAccept();
 177                                 console.log($(this), 'jQuery $(this)');
 178                                 $(this).parent().find('li').css('background-color', 'inherit').removeClass('selected');
 179                                 $(this).css('background-color', '#ccc').addClass('selected');
 180                         };
 181
 182                         for (i = 0, len = contacts.length; i < len; i += 1) {
 183                                 firstName = '';
 184                                 lastName = '';
 185                                 phoneNumber = '';
 186                                 id = contacts[i].id;
 187                                 vCard = contacts[i].convertToString('VCARD_30');
 188                                 if (contacts[i].name.firstName !== null) {
 189                                         firstName = contacts[i].name.firstName;
 190                                 }
 191                                 if (contacts[i].name.lastName !== null) {
 192                                         lastName = contacts[i].name.lastName;
 193                                 }
 194                                 if (contacts[i].phoneNumbers[0] !== undefined) {
 195                                         phoneNumber = contacts[i].phoneNumbers[0].number;
 196                                 }
 197                                 sortedContactList.push({caller: prepareCallerName(contacts[i]), firstName: firstName, lastName: lastName, phoneNumber: phoneNumber, id: id, vCard: vCard, contact: contacts[i]});
 198                         }
 199
 200                         sortedContactList.sort(function (a, b) {
 201                                 if (a.caller < b.caller) {
 202                                         return -1;
 203                                 }
 204                                 if (a.caller > b.caller) {
 205                                         return 1;
 206                                 }
 207                                 return 0;
 208                         });
 209
 210                         for (j = 0, length = sortedContactList.length; j < length; j += 1) {
 211                                 listElement = $('<li class="ui-li-multiline" firstName="' + sortedContactList[j].firstName + '" lastName="' + sortedContactList[j].lastName + '" phoneNumber="' + sortedContactList[j].phoneNumber + '" id="' + sortedContactList[j].id + '" vCard="' + sortedContactList[j].vCard + '"><a href="#">' + sortedContactList[j].caller + '<span class="ui-li-text-sub">' + sortedContactList[j].phoneNumber + '</span></a></li>');
 212                                 if (localStorage.id === listElement.attr('id')) {
 213                                         listElement.css('background-color', '#ccc');
 214                                 }
 215                                 listElement.on('tap', listElementTap);
 216                                 ul.append(listElement);
 217                         }
 218
 219                         $('#choose > #content-choose').trigger('create');
 220                 },
 221
 222                 moveToStartPage: function moveToStartPage(monit) {
 223                         $('#start').data('monit', monit || '');
 224                         $.mobile.changePage('#start');
 225                 },
 226
 227                 moveToContactPage: function moveToContactPage(obj) {
 228                         $('#start').data('monit', '');
 229                         $('#contact').data('contactsData', obj);
 230                         $.mobile.changePage('#contact');
 231                 },
 232
 233
 234                 defineEvents: function defineEvents() {
 235                         var self = this;
 236
 237                         $('#header-start .ui-btn-back').on('tap', function (event) {
 238                                 event.preventDefault();
 239                                 self.app.nfc.stopNFC();
 240                         });
 241
 242                         $('#footer-transfer').on('tap', '.ui-btn-back', function (event) {
 243                                 event.preventDefault();
 244                                 self.app.nfc.timeExpired();
 245                         });
 246
 247                         $('#footer-contact').on('tap', '.ui-btn-back', function (event) {
 248                                 event.preventDefault();
 249                                 $.mobile.changePage('#start');
 250                         });
 251
 252                         $('#choose').on('pagebeforeshow', function () {
 253                                 self.disableAccept();
 254                         });
 255
 256                         $('#choose').on('pageshow', function (event) {
 257                                 console.log('#choose pageshow');
 258                                 self.app.loadContacts();
 259                         });
 260
 261                         $('#contact').on('pageshow', function (event) {
 262                                 var phone, first, last;
 263                                 phone = $(this).data('contactsData').phone;
 264                                 first = $(this).data('contactsData').first;
 265                                 last = $(this).data('contactsData').last;
 266                                 self.prepareContactsTemplate(phone, first, last);
 267                         });
 268
 269                         $('#accept-choose').on('tap', function (event) {
 270                                 event.preventDefault();
 271                                 self.app.saveDefaultCard();
 272                         });
 273
 274                         $('#save-contact').on('tap', function (event) {
 275                                 event.preventDefault();
 276                                 self.app.saveContact();
 277                         });
 278
 279                         $('#start').on('pagebeforeshow', function () {
 280                                 if (self.app.started) {
 281                                         self.loadStartPage();
 282                                 }
 283                         });
 284
 285                         $('#start').on('pageshow', function () {
 286                                 var monit, obj;
 287                                 obj = $(this);
 288                                 monit = obj.data('monit');
 289                                 if (monit !== '' && monit !== undefined) {
 290                                         self.showPopup(obj.data('monit'), obj);
 291                                 }
 292                         });
 293
 294                         $('#transfer').on('pageshow', function () {
 295                                 console.log($('#transfer').data('option'), 'XXXXXXXXx');
 296                                 console.log($(this).data('option'), 'ZZZZZZ');
 297                                 var option = $(this).data('option');
 298                                 if (option === 'read') {
 299                                         self.prepareWaitingPage('Card to Device', 'PUT WIRELESS TAG<br>CLOSE TO<br>YOUR DEVICE');
 300                                         try {
 301                                                 self.app.nfc.card.setTagDetectRead();
 302                                         } catch (err) {
 303                                                 console.log(err);
 304                                         }
 305                                 } else if (option === 'write') {
 306                                         self.prepareWaitingPage('Device to Card', 'PUT WIRELESS TAG<br>CLOSE TO<br>YOUR DEVICE');
 307                                         try {
 308                                                 self.app.nfc.card.setTagDetectWrite();
 309                                         } catch (er) {
 310                                                 console.log(er);
 311                                         }
 312                                 } else {
 313                                         self.prepareWaitingPage('Device to Device', 'PUT YOUR DEVICE<br>CLOSE TO<br>OTHER DEVICE');
 314                                         try {
 315                                                 self.app.nfc.peer.setTargetDetect();
 316                                         } catch (e) {
 317                                                 console.log(e);
 318                                         }
 319                                 }
 320                         });
 321                 }
 322
 323         };
 324
 325 }());