src/xwalk/test/android/data/contacts.html

   1 <html>
   2 <head>
   3   <title></title>
   4 </head>
   5 <style type="text/css">
   6   body { margin: auto; width: 100%; }
   7   div { margin: 15; padding: 10; width: 100%; }
   8   textarea { margin: 10; padding: 10; width: 95%; height: 15%; font-size: 12; resize: none; }
   9   .button { margin: 10; padding: 10; width: 80%; height: 5%; font-size: 40; }
  10   .title { margin: 20; padding: 20; font-size: 42; font-weight: bold; }
  11   .subtitle { margin: 10; padding: 10; font-size: 32; }
  12   .text { font-size: 25; }
  13   .center { text-align: center; }
  14   .save { background-color: #FFFACD; }
  15   .update { background-color: #CAE1FF; }
  16   .find { background-color: #FFF0F5; }
  17   .remove { background-color: #F0FFF0; }
  18   .event { background-color:  #D1D1D1; }
  19 </style>
  20 <body>
  21
  22 <script>
  23
  24 // Features to test:
  25 // 1. Save - by saving two new contacts and check by onchangechange event.
  26 // 2. Contact change event - by checking if all new added IDs are received.
  27 // 3. Update - by updating first contact.
  28 // 4. Find - by looking for the updated contact and compare with expected result.
  29 // 5. Remove - by removing the second contact.
  30 // 6. Clear - by clearing all contacts and check if all contacts are removed.
  31
  32 window.onload = function() {
  33   var contacts = navigator.contacts || xwalk.experimental.contacts;
  34
  35   contacts.addEventListener('contactschange', function(data) {
  36       var output = document.getElementById('event');
  37       output.value += 'contacts changes:\n';
  38       data.added && logEventListener('added: ', data.added, output);
  39       data.removed && logEventListener('removed: ', data.removed, output);
  40       data.modified && logEventListener('modified: ', data.modified, output);
  41       output.value += '-----------\n';
  42       output.scrollTop = output.scrollHeight;
  43   });
  44
  45   // Helpers
  46   function setHTML(id, str) { document.getElementById(id).innerHTML = str; }
  47   function addHTML(id, str) { document.getElementById(id).innerHTML += str+'<br>'; }
  48   function ifcontains(a, e) { return a.indexOf(e) != -1; }
  49   function logContactSaved(contact) {
  50     addHTML('save', 'Contact ' + contact.id + ' ' + contact.name.givenNames[0] + ' ' + contact.name.familyNames[0] + ' saved!');
  51   }
  52
  53   function errorCallback(error) {
  54     document.title = 'Fail';
  55     console.log(error);
  56   }
  57
  58   var addedIDs = [];
  59   var testNewContactFlag = false;
  60   var expectedNewPhoneNumber = '+4455001';
  61   function testNewContacts() {
  62     // Test Case 2: check if oncontactchanges received all new contacts IDs.
  63     if (addedIDs.length != 2) {
  64       return;
  65     }
  66
  67     if (ifcontains(addedIDs, contact1.id) && ifcontains(addedIDs, contact2.id)) {
  68       testNewContactFlag = true;
  69     }
  70
  71     // Test Case 3: update first contact after both contacts are saved.
  72     var output = 'Will update contact ' +
  73                  contact1.id + ' ' +
  74                  contact1.name.givenNames[0] + ' ' +
  75                  contact1.name.familyNames[0] + ': phone from ' +
  76                  contact1.phoneNumbers[0].value + ' to ' + expectedNewPhoneNumber;
  77     addHTML('update', output);
  78
  79     contact1.phoneNumbers[0].value = expectedNewPhoneNumber;
  80     contacts.save(contact1).then(updateCallback, errorCallback);
  81   }
  82
  83   var removedIDs = [];
  84   contacts.oncontactschange = function(data) {
  85     if (data.added) {
  86       addedIDs.push.apply(addedIDs, data.added); // Append added IDs to addedIDs
  87       testNewContacts();
  88     }
  89     if (data.removed) {
  90       removedIDs.push.apply(removedIDs, data.removed); // Append removed IDs to removedIDs
  91       tryFinalVerify();
  92     }
  93   }
  94
  95   // Create two contacts for testing
  96   var givenName = 'John';
  97
  98   var contactName1 = new ContactName({
  99     givenNames: [givenName],
 100     familyNames: ['Doe']
 101   });
 102
 103   var contactName2 = new ContactName({
 104     givenNames: [givenName],
 105     familyNames: ['Smith']
 106   });
 107
 108   var mobilePhone1 = new ContactTelField({
 109     types: ['home'],
 110     preferred: true,
 111     value: '+01234567890'
 112   });
 113
 114   var mobilePhone2 = new ContactTelField({
 115     types: ['work'],
 116     preferred: false,
 117     value: '+11234567890'
 118   });
 119
 120   // Test Case 1: Save two new contacts
 121   var contact1 = new Contact({
 122     name: contactName1,
 123     phoneNumbers: [mobilePhone1]
 124   });
 125
 126   var contact2 = new Contact({
 127     name: contactName2,
 128     phoneNumbers: [mobilePhone2]
 129   });
 130
 131   contacts.save(contact1).then(function(item) { logContactSaved(item); contact1.id = item.id; }, errorCallback);
 132   contacts.save(contact2).then(function(item) { logContactSaved(item); contact2.id = item.id; }, errorCallback);
 133
 134   var testUpdateFirstFlag = false;
 135   function updateCallback(item) {
 136     var output = '<p>Contact ' +
 137                  item.id + ' ' +
 138                  item.name.givenNames[0] + ' ' +
 139                  item.name.familyNames[0] + ' updated:<br>phone now is: ' +
 140                  item.phoneNumbers[0].value;
 141     addHTML('update', output);
 142     testUpdateFirstFlag = (item.phoneNumbers[0].value == expectedNewPhoneNumber);
 143
 144     // Test Case 4: find first contact after it is updated.
 145     var ContactFindOptions = function(init) {
 146       this.value = init.value;
 147       this.operator = init.operator;
 148       this.fields = init.fields;
 149       this.sortBy = init.sortBy;
 150       this.sortOrder = init.sortOrder;
 151       this.resultsLimit = init.resultsLimit;
 152     }
 153     var options = new ContactFindOptions({
 154       value: contact1.name.familyNames[0],
 155       operator: 'contains',
 156       fields: ['familyName'],
 157       sortBy: ['familyNames'],
 158       sortOrder: 'ascending',
 159       resultsLimit: 3
 160     });
 161     contacts.find(options).then(findCallback, errorCallback);
 162   };
 163
 164   var testFindFirstFlag = false;
 165   function findCallback(items) {
 166     testFindFirstFlag = (items[0].name.familyNames[0] == contact1.name.familyNames[0]);
 167     var output = 'Found '+items.length + ' contact(s):';
 168     output += '<p>';
 169     for (var i = 0, l = items.length; i < l; ++i) {
 170       output += items[i].name.givenNames[0] + ' ' + items[i].name.familyNames[0] + '<br>';
 171     }
 172     setHTML('find', output);
 173
 174     // Test Case 5: remove specific contact.
 175     contacts.remove(contact2.id).then(removeCallback, errorCallback);
 176     addHTML('remove', "Will remove contact " + contact2.id);
 177   };
 178
 179   function removeCallback() {
 180     addHTML('remove', contact2.id + " is removed.<br>Will test clear()");
 181     // Test Case 6: clear all contacts.
 182     contacts.clear().then(tryFinalVerify, errorCallback);
 183   }
 184
 185   // Check if contacts are all removed, which means all test steps are done. If so we verify all results.
 186   function tryFinalVerify() {
 187     if (removedIDs.length != 2) {
 188       return;
 189     }
 190     addHTML('remove', "All contacts are removed.");
 191     testRemovedSecondFlag = ifcontains(removedIDs, contact2.id);
 192     if (testNewContactFlag && testUpdateFirstFlag && testFindFirstFlag && testRemovedSecondFlag) {
 193       document.title = 'Pass';
 194     } else {
 195       document.title = 'Fail';
 196     }
 197   }
 198
 199   function logEventListener(msg, data, output) {
 200     for (var i = 0; i < data.length; ++i) {
 201       msg += data[i] + '|';
 202     }
 203     output.value += msg + '\n';
 204   }
 205
 206 };
 207
 208 </script>
 209
 210 <div class="title center">Contacts API Example</div>
 211
 212 <div class="save">
 213   <p class="subtitle center">Save Contact</p>
 214   <p class="text center" id="save"></p>
 215 </div>
 216
 217 <div class="update">
 218   <p class="subtitle center">Update Contact</p>
 219   <p class="text center" id="update"></p>
 220 </div>
 221
 222 <div class="find">
 223   <p class="subtitle center">Find Contact</p>
 224   <p class="text center" id="find"></p>
 225 </div>
 226
 227 <div class="remove">
 228   <p class="subtitle center">Remove Contact</p>
 229   <p class="text center" id="remove"></p>
 230 </div>
 231
 232 <div class="event">
 233   <p class="subtitle center">Contact Event</p>
 234   <textarea id="event" readonly=true></textarea>
 235 </div>
 236
 237 </body>
 238 </html>