Source: panels/call_fdn_list/panel.js

  1. define(function(require) {
  2.   'use strict';
  4.   var DsdsSettings = require('dsds_settings');
  5.   var DialogService = require('modules/dialog_service');
  6.   var FdnContext = require('modules/fdn_context');
  7.   var SettingsPanel = require('modules/settings_panel');
  9.   return function ctor_settings_panel() {
  10.     return SettingsPanel({
  11.       _currentContact: null,
  13.       onInit: function(panel) {
  14.         this._elements = {};
  15.         this._elements.fdnContactButton = panel.querySelector('.fdnContact');
  16.         this._elements.fdnActionMenu =
  17.           panel.querySelector('.call-fdnList-action');
  18.         this._elements.fdnActionMenuName =
  19.           panel.querySelector('.fdnAction-name');
  20.         this._elements.fdnActionMenuNumber =
  21.           panel.querySelector('.fdnAction-number');
  22.         this._elements.fdnActionMenuCall =
  23.           panel.querySelector('.fdnAction-call');
  24.         this._elements.fdnActionMenuEdit =
  25.           panel.querySelector('.fdnAction-edit');
  26.         this._elements.fdnActionMenuRemove =
  27.           panel.querySelector('.fdnAction-delete');
  28.         this._elements.fdnActionMenuCancel =
  29.           panel.querySelector('.fdnAction-cancel');
  30.         this._elements.contactsContainer =
  31.           panel.querySelector('.fdn-contactsContainer');
  33.         this._bindEvents();
  34.       },
  36.       onBeforeShow: function() {
  37.         this._renderAuthorizedNumbers();
  38.       },
  40.       _bindEvents: function() {
  41.         // add FDN contact
  42.         this._elements.fdnContactButton.onclick = () => {
  43.           DialogService.show('call-fdnList-add', {
  44.             mode: 'add'
  45.           }).then((result) => {
  46.             var type = result.type;
  47.             var value = result.value;
  48.             if (type === 'submit') {
  49.               this._updateContact('add', {
  50.                 name: value.name,
  51.                 number: value.number
  52.               });
  53.             }
  54.           });
  55.         };
  57.         // edit FDN contact
  58.         this._elements.fdnActionMenuEdit.onclick = () => {
  59.           // hide action menu first
  60.           this._hideActionMenu();
  62.           // then show dialog
  63.           DialogService.show('call-fdnList-add', {
  64.             name: this._currentContact.name,
  65.             number: this._currentContact.number,
  66.             mode: 'edit'
  67.           }).then((result) => {
  68.             var type = result.type;
  69.             var value = result.value;
  70.             if (type === 'submit') {
  71.               this._updateContact('edit', {
  72.                 name: value.name,
  73.                 number: value.number
  74.               });
  75.             }
  76.           });
  77.         };
  79.         // remove FDN contact
  80.         this._elements.fdnActionMenuRemove.onclick = () => {
  81.           this._hideActionMenu();
  82.           this._updateContact('remove');
  83.         };
  85.         // call that fdn
  86.         this._elements.fdnActionMenuCall.onclick = () => {
  87.           var activity = new window.MozActivity({
  88.             name: 'dial',
  89.             data: {
  90.               type: 'webtelephony/number',
  91.               number: this._currentContact.number
  92.             }
  93.           });
  95.           activity.onerror = () => {
  96.             console.error('we are not able to call mozActivity to dialer with' +
  97.               ' number ' + this._currentContact.number);
  98.           };
  99.         };
  101.         this._elements.fdnActionMenuCancel.onclick =
  102.           this._hideActionMenu.bind(this);
  103.       },
  105.       /**
  106.        * we will render all registered FDN numbers on screen.
  107.        *
  108.        * @type {Function}
  109.        * @return {Promise}
  110.        */
  111.       _renderAuthorizedNumbers: function() {
  112.         this._elements.contactsContainer.innerHTML = '';
  113.         var cardIndex = DsdsSettings.getIccCardIndexForCallSettings();
  114.         return FdnContext.getContacts(cardIndex).then((contacts) => {
  115.           for (var i = 0, l = contacts.length; i < l; i++) {
  116.             var li = this._renderFdnContact(contacts[i]);
  117.             this._elements.contactsContainer.appendChild(li);
  118.           }
  119.         });
  120.       },
  122.       /**
  123.        * render needed UI for each contact item.
  124.        *
  125.        * @type {Function}
  126.        * @param {Object} contact
  127.        */
  128.       _renderFdnContact: function(contact) {
  129.         var li = document.createElement('li');
  130.         var nameContainer = document.createElement('span');
  131.         var numberContainer = document.createElement('small');
  133.         nameContainer.textContent = contact.name;
  134.         numberContainer.textContent = contact.number;
  135.         li.appendChild(numberContainer);
  136.         li.appendChild(nameContainer);
  138.         li.onclick = () => {
  139.           this._showActionMenu(contact);
  140.         };
  142.         return li;
  143.       },
  145.       /**
  146.        * show specific contact on the menu.
  147.        *
  148.        * @type {Function}
  149.        * @param {Object} contact
  150.        */
  151.       _showActionMenu: function(contact) {
  152.         this._currentContact = contact;
  153.         this._elements.fdnActionMenuName.textContent = contact.name;
  154.         this._elements.fdnActionMenuNumber.textContent = contact.number;
  155.         this._elements.fdnActionMenu.hidden = false;
  156.       },
  158.       /**
  159.        * hide the whole action menu.
  160.        *
  161.        * @type {Function}
  162.        */
  163.       _hideActionMenu: function() {
  164.         this._elements.fdnActionMenu.hidden = true;
  165.       },
  167.       /**
  168.        * update information on each contact item based on passed in parameters.
  169.        *
  170.        * @type {Function}
  171.        * @param {String} action
  172.        * @param {Object} options
  173.        * @return {Promise}
  174.        */
  175.       _updateContact: function(action, options) {
  176.         // `action' is either `add', `edit' or `remove': these three actions all
  177.         // rely on the same mozIccManager.updateContact() method.
  178.         options = options || {};
  179.         var cardIndex = DsdsSettings.getIccCardIndexForCallSettings();
  180.         var name = options.name;
  181.         var number = options.number;
  183.         var contact = FdnContext.createAction(action, {
  184.           cardIndex: cardIndex,
  185.           contact: {
  186.             id: this._currentContact && this._currentContact.id,
  187.             name: name,
  188.             number: number
  189.           }
  190.         });
  192.         return DialogService.show('simpin-dialog', {
  193.           method: 'get_pin2',
  194.           cardIndex: cardIndex,
  195.           pinOptions: {
  196.             fdnContact: contact
  197.           }
  198.         }).then((result) => {
  199.           var type = result.type;
  200.           if (type === 'submit') {
  201.             this._renderAuthorizedNumbers();
  202.           }
  203.         });
  204.       }
  205.     });
  206.   };
  207. });