Added caller ID selection (#1)

* Added all .pems to .gitignore * Started adding support for setting caller Id * Ensure callerId value is being set correctly
Nimvelo · Jan 14, 2020 · 468a43c · 468a43c
1 parent 0b8b95e
commit 468a43c
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 18 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,3 @@
-sc-chrome-plugin.pem
+*.pem
 sc-chrome-plugin.zip
 .DS_Store
diff --git a/sc-chrome-plugin/call.html b/sc-chrome-plugin/call.html
@@ -21,6 +21,9 @@
         </div>
         <div class="modal-body">
           <input type="text" id="number" placeholder="Number" maxlenght="25">
+          <label for="callerIdPicker">Caller Id:</label>
+          <select id="callerIdPicker">
+          </select>
           <label class="checkbox"><input id="dialerWithhold" type="checkbox"> <small>Withhold Caller ID</small></label>
           <p class="muted"><small>Click the 'dial' button below to call this number from your extension. You can edit the number before dialing or click 'close' to go back.</small></p>
           <div id="notification"></div>

diff --git a/sc-chrome-plugin/call.js b/sc-chrome-plugin/call.js
@@ -24,7 +24,9 @@ function dial() {
 
     var call = $('#number').val();
 
-    chrome.extension.sendMessage({number: call, numberHold: withhold}, function(response) {
+    var selectedCallerId = $('#callerIdPicker').val();
+
+    chrome.extension.sendMessage({number: call, numberHold: withhold, callerId: selectedCallerId}, function(response) {
       status = response[0];
       message = response[1];
 
@@ -99,4 +101,21 @@ $(document).ready(function() {
     $('#number').val(number);
   }
 
+  try {
+    var outgoingCallerIds = localStorage[localStorage['loginUsername'] + '_outgoingCallerIds'];
+
+    JSON.parse(outgoingCallerIds).forEach((outgoingCallerId) => {
+      if (!outgoingCallerId.allowCalls) return;
+
+      var newItem = $("<option></option>").attr("value",outgoingCallerId.uri).text(outgoingCallerId.number);
+
+      if (outgoingCallerId.uri == localStorage[localStorage['loginUsername'] + '_prefMainExtensionDefaultCallerId']) {
+        newItem.attr("selected", "selected");
+      }
+      $('#callerIdPicker').append(newItem);
+    });
+
+  } catch (err) {
+    console.error('Error getting outgoingCallerIds: ', err);
+  }
 });
diff --git a/sc-chrome-plugin/js/background.js b/sc-chrome-plugin/js/background.js
@@ -13,7 +13,7 @@ var notification_timeout = 5; // Minutes
 // Add listener for messages passed from the content.js script
 chrome.extension.onMessage.addListener(
   function(request, sender, sendResponse) {
-    if (request.number != null) { sendResponse(tryCall(request.number, request.numberHold)); }
+    if (request.number != null) { sendResponse(tryCall(request.number, request.numberHold, request.callerId)); }
     if (request.sms != null) { sendResponse(sendSMS(request.sms, request.message, request.from)); }
     if (request.clickableEnabled != null) { sendResponse(clickableEnabled()); }
     if (request.connectStream != null) { attempts = 0; setupNotifications(); }
@@ -391,7 +391,7 @@ function sendSMS(number, message, from) {
 
 }
 
-function tryCall(number, numberHold) {
+function tryCall(number, numberHold, callerId) {
 
   log('makeCall - Number: ' + number);
   log('[SCCE] Call number. Number: ' + number);
@@ -401,15 +401,15 @@ function tryCall(number, numberHold) {
   }
 
   var realNumber = fixNumber(number);
-  return makeCall(realNumber);
+  return makeCall(realNumber, callerId);
 }
 
 function fixNumber(number) {
 
   return number.replace(/(?:\+44|\(|\)|-|\s)/g, "");
 }
 
-function makeCall(number) {
+function makeCall(number, callerId) {
 
   var endpoint = localStorage[localStorage['loginUsername'] + '_prefMainExtension'];
   var username = localStorage["loginUsername"];
@@ -422,7 +422,8 @@ function makeCall(number) {
   xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
   xmlhttp.send(JSON.stringify({   type: "call",
                                   endpoint: endpoint,
-                                  to: number
+                                  to: number,
+                                  callerId: callerId,
                               }));
 
   var status = xmlhttp.status;

diff --git a/sc-chrome-plugin/js/main.js b/sc-chrome-plugin/js/main.js
@@ -28,6 +28,7 @@ function showWelcome() {
 function showDialer() {
   hide();
   showMenu();
+  getOutgoingNumbers();
   numbersAutoComplete("#dialerNumber", true, true);
   $('#blockDialer').fadeIn(400);
   $("#menuDialer").addClass("active");
@@ -248,8 +249,13 @@ function saveSettings() {
 	if ( $('#extensions').val() != "notset" ) {
     var extension = $('#extensions').val();
 
+    var shortNumber = localStorage[localStorage['loginUsername'] + '_' + $('#extensions').val()];
+
+    var selectedExtension = JSON.parse(localStorage[localStorage['loginUsername'] + '_localExtensions']).find(x => x.value === shortNumber);
+
     localStorage[localStorage['loginUsername'] + '_prefMainExtension'] = extension;
-    localStorage[localStorage['loginUsername'] + '_prefMainExtensionShort'] = localStorage[localStorage['loginUsername'] + '_' + $('#extensions').val()]
+    localStorage[localStorage['loginUsername'] + '_prefMainExtensionShort'] = shortNumber;
+    localStorage[localStorage['loginUsername'] + '_prefMainExtensionDefaultCallerId'] = selectedExtension.defaultCallerId;
 
     // Set up is done, so we set the _loginSetup value to done
     localStorage[localStorage['loginUsername'] + "_loginSetup"] = 'done';
@@ -438,8 +444,9 @@ function dial() {
       var withhold = 0;
     }
 
+    var selectedCallerId = $('#callerIdPicker').val();
     // We send the number to the background page (background.js) as we use this in some other places as well
-    chrome.extension.sendMessage({number: call, numberHold: withhold}, function(response) {
+    chrome.extension.sendMessage({number: call, numberHold: withhold, callerId: selectedCallerId}, function(response) {
       // Status is the numeric code of the request
       status = response[0];
       // The mesage contains any validation errors etc
@@ -503,7 +510,7 @@ function getExtensions() {
 
       lable = item['name'] + ' - ' + item['shortNumber'];
       value = item['shortNumber'];
-      localExtensions.push({label: lable, value: value, category: "Extensions"});
+      localExtensions.push({label: lable, value: value, category: "Extensions", defaultCallerId: item['defaultCallerId']});
 
       localStorage[localStorage['loginUsername'] + '_' + item['uri']] = item['shortNumber'];
 
@@ -824,15 +831,27 @@ function getOutgoingNumbers(type) {
       if (xmlhttp.status === 200) {
         obj = JSON.parse(xmlhttp.responseText);
 
-        for (var item in obj.items) {
-          if (obj.items[item].allowCalls == true) {
-            label = obj.items[item].number;
-            value = obj.items[item].number;
+         // Remove any existing options
+        $('#callerIdPicker').find('option').remove();
+
+        localStorage[localStorage['loginUsername'] + '_outgoingCallerIds'] = JSON.stringify(obj.items);
+
+        for (var i in obj.items) {
+          const itemObj = obj.items[i];
+          var label = itemObj.number;
+          var value = itemObj.number;
+
+          if (itemObj.allowCalls == true) {
             allowCalls.push({label: label, value: value, category: "Numbers"});
-          }
-          if (obj.items[item].allowSms == true) {
-            label = obj.items[item].number;
-            value = obj.items[item].number;
+
+            var newItem = $("<option></option>").attr("value",itemObj['uri']).text(label);
+
+            if (itemObj.uri == localStorage[localStorage['loginUsername'] + '_prefMainExtensionDefaultCallerId']) {
+              newItem.attr("selected", "selected");
+            }
+            $('#callerIdPicker').append(newItem);
+
+          } else if (itemObj.allowSms == true) {
             allowSMS.push({label: label, value: value, category: "SMS Enabled"});
           }
         }

diff --git a/sc-chrome-plugin/main.html b/sc-chrome-plugin/main.html
@@ -87,6 +87,12 @@ <h3>Loading...</h3>
             <label class="checkbox"><input id="dialerWithhold" type="checkbox"> <small>Withhold Caller ID</small></label>
           <small id="dialerInfo" class="text-info"></small>
 
+          <br />
+          <br />
+          <small>Caller Id:</small>
+          <select id="callerIdPicker">
+          </select>
+
           <div id="numberDialerButtons">
             <button type="submit" id="dial" class="btn btn-info">Dial <i class="icon-chevron-right icon-white"></i></button>
             <button id="recent" class="btn" type="button" alt="Recent Calls"><i class="icon-align-justify"></i></button>