Updating the Web phone code

From Integrics Wiki
Jump to: navigation, search

Overview

To incorporate the Web phone code to Enswitch, a few changes to the code of the phone.js file of https://github.com/InnovateAsterisk/Browser-Phone were needed:

  • First, handling of receiving data from the controller was added because the controller needs to get data from the server and pass that data to the web phone.
  • Then, the class Phone is defined. After the class, a message is posted to the controller that the plugin is loaded.
  • Next is the declaration of all the global variables which need to be accessible through the entire .js file. By default they're defined globally and assigned values, but because these are changes to an existing project, these values are assigned in the startPhone function.
  • Next is the startPhone function which assigns values to global variables and also adds event listeners that initializes UI by calling InitUi and updates UI by calling UpdateUi.

When assigning values to the global variables, all var, let and const should be removed because we're only assigning values here and the variables are declared earlier. If new global variables are added, those should be added to the declaration also. This is done manually.

  • Listeners that call InitUi and UpdateUi are moved from another part of the code in the phone.js file. These listeners could be updated so anyone working on this should estimate how much of the code should be moved.
  • The last thing is in the getDbItem function, "var localDB = window.localStorage;" was replaced with "var localDB = phoneDevice;"

Procedure

Changes to the phone.js file are marked with the following comments:

// MAIN ADDED CODE - START
// COMMUNICATION WITH THE WebPhoneController.js - START
// COMMUNICATION WITH THE WebPhoneController.js - END
// CUSTOM CLASS TO REMOVE USAGE OF LOCAL STORAGE - START
// CUSTOM CLASS TO REMOVE USAGE OF LOCAL STORAGE - END
// LET THE CONTROLLER KNOW THAT PLUGIN IS READY FOR BEING USED - START
// LET THE CONTROLLER KNOW THAT PLUGIN IS READY FOR BEING USED - END
// DECLARE ALL GLOBAL VARIABLES - START
// DECLARE ALL GLOBAL VARIABLES - END
// MAIN ADDED CODE - END (this comment is inside startPhone function)
// MOVED CODE - CODE MOVED TO BE CALLED IN INIT FUNCTION - START
// MOVED CODE - CODE MOVED TO BE CALLED IN INIT FUNCTION - END
// ADDED CODE - CLOSING OF INIT FUNCTION START
// ADDED CODE - CLOSING OF INIT FUNCTION END
// REPLACE window.localStorage with phoneDevice