Merge pull request #12179 from fabi1cazenave/fdn-bug888912

Bug 888912 - Entering Numbers into FDN List

apps/settings/elements/call_fdn_list.html

@@ -0,0 +1,23 @@
+<element name="call-fdnList" extends="section">
+  <template>
+
+    <header>
+      <a href="#call-fdnSettings">
+        <span data-l10n-id="back" class="icon icon-back">Back</span>
+      </a>
+      <menu type="toolbar">
+        <button id="fdnContact">
+          <span data-l10n-id="add" class="icon icon-add">Add</span>
+        </button>
+      </menu>
+      <h1 data-l10n-id="fdn-authorizedNumbers"> Authorized Numbers </h1>
+    </header>
+
+    <div>
+      <ul id="fdn-contactsContainer"></ul>
+    </div>
+
+    <script src="js/simcard_fdn_list.js"></script>
+
+  </template>
+</element>

apps/settings/elements/call_fdn_list_add.html

@@ -0,0 +1,28 @@
+<element name="call-fdnList-add" extends="section">
+  <template>
+
+    <header>
+      <a href="#call-fdnList">
+        <span data-l10n-id="back" class="icon icon-back">Back</span>
+      </a>
+      <menu type="toolbar">
+        <button id="fdnContact-submit"><span data-l10n-id="ok">Done</span></button>
+      </menu>
+      <h1 id="fdnContact-title"></h1>
+    </header>
+
+    <div>
+      <ul>
+        <li>
+          <p data-l10n-id="fdnContact-name">Name</p>
+          <input x-inputmode="verbatim" type="text" id="fdnContact-name"/>
+        </li>
+        <li>
+          <p data-l10n-id="fdnContact-number">Number</p>
+          <input x-inputmode="verbatim" type="number" id="fdnContact-number"/>
+        </li>
+      </ul>
+    </div>
+
+  </template>
+</element>

apps/settings/elements/call_fdn_settings.html

@@ -30,7 +30,9 @@ <h1 data-l10n-id="fdnSettings"> Fixed dialing numbers </h1>
           <small data-l10n-id="fdn-authorizedNumbers-desc">
             List of numbers that can be called
           </small>
-          <a data-l10n-id="fdn-authorizedNumbers">Authorized numbers</a>
+          <a href="#call-fdnList" data-l10n-id="fdn-authorizedNumbers">
+            Authorized numbers
+          </a>
         </li>
         <li id="fdn-resetPIN2">
           <label>
@@ -40,6 +42,7 @@ <h1 data-l10n-id="fdnSettings"> Fixed dialing numbers </h1>
       </ul>
     </div>
 
+    <script src="js/simcard_fdn_list.js"></script>
     <script src="js/simcard_fdn.js"></script>
     <script src="js/simcard_dialog.js"></script>
 

apps/settings/index.html

@@ -82,6 +82,8 @@
     <link rel="import" href="/elements/call_cf_unconditional_settings.html">
     <link rel="import" href="/elements/call_voice_mail_settings.html">
     <link rel="import" href="/elements/call_pin2_dialog.html">
+    <link rel="import" href="/elements/call_fdn_list_add.html">
+    <link rel="import" href="/elements/call_fdn_list.html">
     <link rel="import" href="/elements/call_fdn_settings.html">
     <link rel="import" href="/elements/call.html">
     <link rel="import" href="/elements/carrier_operator_settings.html">
@@ -169,6 +171,23 @@
     <section is="call-cf-mobileBusySettings" role="region" id="call-cf-mobileBusySettings"></section>
     <!-- Connectivity :: Call :: Call Forwarding Unconditional -->
     <section is="call-cf-unconditionalSettings" role="region" id="call-cf-unconditionalSettings"></section>
+    <!-- Connectivity :: Call :: Fixed Dialing Numbers (FDN) :: Authorized Numbers :: Action Menu -->
+    <form id="call-fdnList-action" role="dialog" data-type="action">
+      <header>
+        <span id="fdnAction-name">John Doe</span><br />
+        <span id="fdnAction-number">+1 2345678</span>
+      </header>
+      <menu>
+        <button id="fdnAction-call" data-l10n-id="fdnAction-call"> Call </button>
+        <button id="fdnAction-edit" data-l10n-id="fdnAction-edit"> Edit contact </button>
+        <button id="fdnAction-delete" data-l10n-id="fdnAction-delete"> Delete contact </button>
+        <button id="fdnAction-cancel" data-l10n-id="cancel"> Cancel </button>
+      </menu>
+    </form>
+    <!-- Connectivity :: Call :: Fixed Dialing Numbers (FDN) :: Authorized Numbers :: Add -->
+    <section is="call-fdnList-add" role="region" id="call-fdnList-add"></section>
+    <!-- Connectivity :: Call :: Fixed Dialing Numbers (FDN) :: Authorized Numbers -->
+    <section is="call-fdnList" role="region" id="call-fdnList"></section>
     <!-- Connectivity :: Call :: Fixed Dialing Numbers (FDN) :: SIM PIN2 Input -->
     <section is="call-pin2-dialog" role="region" id="call-pin2-dialog"></section>
     <!-- Connectivity :: Call :: Fixed Dialing Numbers (FDN) -->

apps/settings/js/simcard_dialog.js

@@ -212,6 +212,13 @@ function SimPinDialog(dialog) {
 
   function verify() { // apply PIN|PUK
     switch (_action) {
+      // get PIN code
+      case 'get_pin':
+      case 'get_pin2':
+        _onsuccess(pinInput.value);
+        close();
+        break;
+
       // unlock SIM
       case 'unlock_pin':
         unlockPin();
@@ -281,7 +288,15 @@ function SimPinDialog(dialog) {
 
     var lockType = 'pin'; // used to query the number of retries left
     switch (action) {
-      // unlock
+      // get PIN code
+      case 'get_pin2':
+        lockType = 'pin2';
+      case 'get_pin':
+        setInputMode('pin');
+        _localize(dialogTitle, lockType + 'Title');
+        break;
+
+      // unlock SIM
       case 'unlock_pin':
         setInputMode('pin');
         _localize(dialogTitle, 'pinTitle');

apps/settings/js/simcard_fdn.js

@@ -5,11 +5,32 @@
 
 var SimFdnLock = {
   dialog: document.getElementById('call-pin2-dialog'),
+  pinDialog: null,
+
+  // enable|disable|unlock FDN
   simFdnDesc: document.querySelector('#fdn-enabled small'),
   simFdnCheckBox: document.querySelector('#fdn-enabled input'),
   resetPin2Item: document.getElementById('fdn-resetPIN2'),
   resetPin2Button: document.querySelector('#fdn-resetPIN2 button'),
 
+  // FDN contact list (display, add)
+  contactsContainer: document.getElementById('fdn-contactsContainer'),
+  fdnContactTitle: document.getElementById('fdnContact-title'),
+  fdnContactName: document.getElementById('fdnContact-name'),
+  fdnContactNumber: document.getElementById('fdnContact-number'),
+  fdnContactSubmit: document.getElementById('fdnContact-submit'),
+  fdnContactButton: document.getElementById('fdnContact'),
+
+  // FDN contact action menu (call, edit, delete)
+  fdnActionMenu: document.getElementById('call-fdnList-action'),
+  fdnActionMenuName: document.getElementById('fdnAction-name'),
+  fdnActionMenuNumber: document.getElementById('fdnAction-number'),
+  fdnActionMenuCall: document.getElementById('fdnAction-call'),
+  fdnActionMenuEdit: document.getElementById('fdnAction-edit'),
+  fdnActionMenuRemove: document.getElementById('fdnAction-delete'),
+  fdnActionMenuCancel: document.getElementById('fdnAction-cancel'),
+  currentContact: null,
+
   updateFdnStatus: function spl_updateSimStatus() {
     var self = this;
     var req = IccHelper.getCardLock('fdn');
@@ -30,23 +51,168 @@ var SimFdnLock = {
     var callback = this.updateFdnStatus.bind(this);
     IccHelper.addEventListener('cardstatechange', callback);
 
-    var pinDialog = new SimPinDialog(this.dialog);
+    this.pinDialog = new SimPinDialog(this.dialog);
+    var self = this;
+
+    // enable|disable|unlock FDN
 
     this.simFdnCheckBox.disabled = true;
     this.simFdnCheckBox.onchange = function spl_togglePin2() {
       var action = this.checked ? 'enable_fdn' : 'disable_fdn';
       if (IccHelper.cardState === 'puk2Required') {
         action = 'unlock_puk2';
       }
-      pinDialog.show(action, callback, callback);
+      self.pinDialog.show(action, callback, callback);
     };
 
     this.resetPin2Button.onclick = function spl_resetPin2() {
-      pinDialog.show('change_pin2');
+      self.pinDialog.show('change_pin2');
     };
 
     this.updateFdnStatus();
+
+    // add|edit|remove|call FDN contact
+
+    window.addEventListener('panelready', (function(e) {
+      if (e.detail.current === '#call-fdnList') {
+        this.renderAuthorizedNumbers();
+      }
+    }).bind(this));
+
+    this.fdnContactButton.onclick = function() { // add FDN contact
+      localize(self.fdnContactTitle, 'fdnAction-add');
+      self.fdnContactName.value = '';
+      self.fdnContactNumber.value = '';
+      self.fdnContactSubmit.onclick = self.addContact.bind(self);
+      Settings.currentPanel = '#call-fdnList-add';
+    };
+
+    this.fdnActionMenuEdit.onclick = function() { // edit FDN contact
+      localize(self.fdnContactTitle, 'fdnAction-edit');
+      self.fdnContactName.value = self.currentContact.name;
+      self.fdnContactNumber.value = self.currentContact.number;
+      self.fdnContactSubmit.onclick = self.editContact.bind(self);
+      self.hideActionMenu();
+      Settings.currentPanel = '#call-fdnList-add';
+    };
+
+    this.fdnActionMenuRemove.onclick = function() { // remove FDN contact
+      self.hideActionMenu();
+      self.removeContact();
+    };
+
+    this.fdnActionMenuCall.onclick = function() {
+      new MozActivity({
+        name: 'dial',
+        data: {
+          type: 'webtelephony/number',
+          number: self.currentContact.number
+        }
+      });
+    };
+
+    this.fdnActionMenuCancel.onclick = this.hideActionMenu.bind(this);
+  },
+
+
+  /**
+   * Display FDN contact list and action menu
+   */
+
+  renderFdnContact: function(contact) {
+    var li = document.createElement('li');
+    var nameContainer = document.createElement('span');
+    var numberContainer = document.createElement('small');
+
+    nameContainer.textContent = contact.name;
+    numberContainer.textContent = contact.number;
+    li.appendChild(numberContainer);
+    li.appendChild(nameContainer);
+
+    li.onclick = (function() {
+      this.showActionMenu(contact);
+    }).bind(this);
+    return li;
+  },
+
+  renderAuthorizedNumbers: function() {
+    this.contactsContainer.innerHTML = '';
+    FdnAuthorizedNumbers.getContacts(null, (function(contacts) {
+      for (var i = 0, l = contacts.length; i < l; i++) {
+        var li = this.renderFdnContact(contacts[i]);
+        this.contactsContainer.appendChild(li);
+      }
+    }).bind(this));
+  },
+
+  showActionMenu: function(contact) {
+    this.currentContact = contact;
+    this.fdnActionMenuName.textContent = contact.name;
+    this.fdnActionMenuNumber.textContent = contact.number;
+    this.fdnActionMenu.classList.add('visible');
+  },
+
+  hideActionMenu: function() {
+    this.fdnActionMenu.classList.remove('visible');
+  },
+
+
+  /**
+   * Add|Edit|Remove FDN contact
+   */
+
+  addContact: function() {
+    var name = this.fdnContactName.value;
+    var number = this.fdnContactNumber.value;
+
+    var cb = this.clear.bind(this);
+    var er = function(e) {
+      throw new Error('Could not add FDN contact to SIM card', e);
+    };
+
+    this.pinDialog.show('get_pin2', function(pinCode) {
+      FdnAuthorizedNumbers.addNumber(er, cb, name, number, pinCode);
+    }, this.wrongPinError);
+  },
+
+  editContact: function() {
+    var id = this.currentContact.id;
+    var name = this.fdnContactName.value;
+    var number = this.fdnContactNumber.value;
+
+    var cb = this.clear.bind(this);
+    var er = function(e) {
+      throw new Error('Could not edit FDN contact on SIM card', e);
+    };
+
+    this.pinDialog.show('get_pin2', function(pinCode) {
+      FdnAuthorizedNumbers.updateNumber(er, cb, id, name, number, pinCode);
+    }, this.wrongPinError);
+  },
+
+  removeContact: function() {
+    var id = this.currentContact.id;
+
+    var cb = this.clear.bind(this);
+    var er = function(e) {
+      throw new Error('Could not edit FDN contact on SIM card', e);
+    };
+
+    this.pinDialog.show('get_pin2', function(pinCode) {
+      FdnAuthorizedNumbers.removeNumber(er, cb, id, pinCode);
+    }, this.wrongPinError);
+  },
+
+  clear: function() {
+    Settings.currentPanel = '#call-fdnList';
+    this.fdnContactName.value = '';
+    this.fdnContactNumber.value = '';
+  },
+
+  wrongPinError: function(e) {
+    throw new Error('Incorrect PIN2 code.', e);
   }
+
 };
 
 navigator.mozL10n.ready(SimFdnLock.init.bind(SimFdnLock));