FS-8955 [verto_communicator] Adding DTMF shortcuts and handling DTMF history on DTMF widget

html5/verto/verto_communicator/src/partials/chat.html

@@ -188,7 +188,8 @@
     <div class="chat-message-input">
       <form ng-submit="send()" >
         <div class="chat-message-input-group">
-          <textarea ng-model="message" ng-keydown="($event.keyCode == 13 && $event.shiftKey !== true) && send($event)" required="required" class="form-control input-sm" placeholder="{{ 'CHAT_TYPE_MESSAGE' | translate }}"></textarea>
+          <textarea ng-model="message" ng-keydown="($event.keyCode == 13 && $event.shiftKey !== true) && send($event)" required="required" class="form-control input-sm" placeholder="{{ 'CHAT_TYPE_MESSAGE' | translate }}"
+          ng-focus="disableOnKeydownDtmf()" ng-blur="enableOnKeydownDtmf()"></textarea>
           <button class="btn btn-success btn-sm" type="submit">
             {{ 'CHAT_SEND_MESSAGE' | translate }}
             <span class="mdi-navigation-arrow-forward chat-message-input-group-icon-button"></span>

html5/verto/verto_communicator/src/partials/dialpad_widget.html

 <div class="panel panel-default shadow-z-2" ng-class="{'shadow-z-2': !call_history}">
       <form name="form">
         <div class="input-group dialpad-display">
-          <input name="dialpadnumber" type="text" class="form-control text-center" placeholder="" ng-model="dialpadNumber" />
+          <input name="dtmfHistory" type="text" class="form-control text-center" placeholder="" ng-model="dtmfHistory.value" />
         </div>
         <div class="panel-body">
           <div class="dialpad-numbers">
             <div class="row">
               <div class="col-md-4 col-xs-4">
-                <a class="btn btn-block" href="" ng-click="dtmf(1)">
+                <a class="btn btn-block" href="" ng-click="dtmfWidget(1)">
                   <h2 class="dialpad-number">1</h2>
                   <span class="dialpad-alpha">./@</span>
                 </a>
               </div>
               <div class="col-md-4 col-xs-4">
-                <a class="btn btn-block" href="" ng-click="dtmf(2)">
+                <a class="btn btn-block" href="" ng-click="dtmfWidget(2)">
                   <h2 class="dialpad-number">2</h2>
                   <span class="dialpad-alpha">ABC</span>
                 </a>
               </div>
               <div class="col-md-4 col-xs-4">
-                <a class="btn btn-block" href="" ng-click="dtmf(3)">
+                <a class="btn btn-block" href="" ng-click="dtmfWidget(3)">
                   <h2 class="dialpad-number">3</h2>
                   <span class="dialpad-alpha">DEF</span>
                 </a>
@@ -27,19 +27,19 @@
             </div>
             <div class="row">
               <div class="col-md-4 col-xs-4">
-                <a class="btn btn-block" href="" ng-click="dtmf(4)">
+                <a class="btn btn-block" href="" ng-click="dtmfWidget(4)">
                   <h2 class="dialpad-number">4</h2>
                   <span class="dialpad-alpha">GHI</span>
                 </a>
               </div>
               <div class="col-md-4 col-xs-4">
-                <a class="btn btn-block" href="" ng-click="dtmf(5)">
+                <a class="btn btn-block" href="" ng-click="dtmfWidget(5)">
                   <h2 class="dialpad-number">5</h2>
                   <span class="dialpad-alpha">JKL</span>
                 </a>
               </div>
               <div class="col-md-4 col-xs-4">
-                <a class="btn btn-block" href="" ng-click="dtmf(6)">
+                <a class="btn btn-block" href="" ng-click="dtmfWidget(6)">
                   <h2 class="dialpad-number">6</h2>
                   <span class="dialpad-alpha">MNO</span>
                 </a>
@@ -47,19 +47,19 @@
             </div>
             <div class="row">
               <div class="col-md-4 col-xs-4">
-                <a class="btn btn-block" href="" ng-click="dtmf(7)">
+                <a class="btn btn-block" href="" ng-click="dtmfWidget(7)">
                   <h2 class="dialpad-number">7</h2>
                   <span class="dialpad-alpha">PQRS</span>
                 </a>
               </div>
               <div class="col-md-4 col-xs-4">
-                <a class="btn btn-block" href="" ng-click="dtmf(8)">
+                <a class="btn btn-block" href="" ng-click="dtmfWidget(8)">
                   <h2 class="dialpad-number">8</h2>
                   <span class="dialpad-alpha">TUV</span>
                 </a>
               </div>
               <div class="col-md-4 col-xs-4">
-                <a class="btn btn-block" href="" ng-click="dtmf(9)">
+                <a class="btn btn-block" href="" ng-click="dtmfWidget(9)">
                   <h2 class="dialpad-number">9</h2>
                   <span class="dialpad-alpha">WXYZ</span>
                 </a>
@@ -67,19 +67,19 @@
             </div>
             <div class="row">
               <div class="col-md-4 col-xs-4">
-                <a class="btn btn-block" href="" ng-click="dtmf('*')">
+                <a class="btn btn-block" href="" ng-click="dtmfWidget('*')">
                   <h2 class="dialpad-number dialpad-star">*</h2>
                   <span class="dialpad-alpha"></span>
                 </a>
               </div>
               <div class="col-md-4 col-xs-4">
-                <a class="btn btn-block" href="" ng-click="dtmf(0)">
+                <a class="btn btn-block" href="" ng-click="dtmfWidget(0)">
                   <h2 class="dialpad-number">0</h2>
                   <span class="dialpad-alpha">+</span>
                 </a>
               </div>
               <div class="col-md-4 col-xs-4">
-                <a class="btn btn-block" href="" ng-click="dtmf('#')">
+                <a class="btn btn-block" href="" ng-click="dtmfWidget('#')">
                   <h2 class="dialpad-number dialpad-pound">#</h2>
                   <span class="dialpad-alpha"></span>
                 </a>

html5/verto/verto_communicator/src/vertoControllers/controllers/MainController.js

@@ -4,9 +4,11 @@
   angular
     .module('vertoControllers')
     .controller('MainController',
-      function($scope, $rootScope, $location, $modal, $timeout, $q, verto, storage, CallHistory, toastr, Fullscreen, prompt, eventQueue, $translate) {
+      function($scope, $rootScope, $location, $modal, $timeout, $q, verto, storage, CallHistory, toastr, Fullscreen, prompt, eventQueue, $translate, $window) {
 
       console.debug('Executing MainController.');
+      $rootScope.dtmfHistory = { value: '' };
+      $rootScope.onKeydownDtmfEnabled = true;
 
       if (storage.data.language && storage.data.language !== 'browser') {
         $translate.use(storage.data.language);
@@ -239,7 +241,8 @@
        * @param {String} number - New touched number.
        */
       $rootScope.dtmf = function(number) {
-        $rootScope.dialpadNumber = $scope.dialpadNumber + number;
+        console.log('dtmf', number);
+        $rootScope.dialpadNumber = $rootScope.dialpadNumber + number;
         if (verto.data.call) {
           verto.dtmf(number);
         }
@@ -555,6 +558,38 @@
         }
       }
 
+      $rootScope.dtmfWidget = function(number) {
+        $rootScope.dtmfHistory.value = $rootScope.dtmfHistory.value + number;
+        if (verto.data.call) {
+          verto.dtmf(number);
+        }
+      }
+
+      $rootScope.disableOnKeydownDtmf = function() {
+        $rootScope.onKeydownDtmfEnabled = false;
+      };
+
+      $rootScope.enableOnKeydownDtmf = function() {
+        $rootScope.onKeydownDtmfEnabled = true;
+      };
+
+      $rootScope.$on("$routeChangeStart", function(event, next, current) {
+        if (next.$$route.originalPath === '/incall') {
+          $rootScope.dtmfHistory.value = '';
+          angular.element($window).bind('keydown', onKeydownDtmfHistory);
+        } else {
+          angular.element($window).unbind('keydown', onKeydownDtmfHistory);
+        }
+      });
+
+      function onKeydownDtmfHistory(event) {
+        var caracter = event.key;
+        if ($rootScope.onKeydownDtmfEnabled && caracter.match(/^(\*|\#|[0-9a-dA-D])$/g)) {
+          $rootScope.dtmfWidget(caracter);
+          $scope.$applyAsync();
+        }
+      }
+
     }
   );