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

This commit is contained in:
Italo Rossi 2016-09-23 10:58:44 -03:00 committed by Anthony Minessale
parent 6d6bd1efa5
commit 2511ad50e1
3 changed files with 52 additions and 16 deletions

View File

@ -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>

View File

@ -1,25 +1,25 @@
<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>

View File

@ -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();
}
}
}
);