#26

public/callcenter/PhoneController.js

@@ -19,7 +19,7 @@ app.controller('PhoneController', function ($scope, $rootScope, $http, $timeout,
 		$log.log('InitializePhone event received');
 
 		Twilio.Device.setup(data.token, {
-			debug: true, 
+			debug: true,
 			codecPreferences: ['opus', 'pcmu']
 		});
 
@@ -287,7 +287,12 @@ app.controller('PhoneController', function ($scope, $rootScope, $http, $timeout,
 
 	$scope.addDigit = function (digit) {
 		$log.log('Phone: send digit: ' + digit);
-		$scope.phoneNumber = $scope.phoneNumber + digit;
+
+		if ($scope.phoneNumber) {
+			$scope.phoneNumber += digit;
+		} else {
+			$scope.phoneNumber = `+${digit}`;
+		}
 
 		if ($scope.connection) {
 			$scope.connection.sendDigits(digit);

public/callcenter/WorkflowController.js

@@ -1,4 +1,4 @@
-var app = angular.module('callcenterApplication', ['ngMessages', 'glue.directives']);
+var app = angular.module('callcenterApplication', ['ngMessages', 'glue.directives', 'phone-number', 'convert-to-phone-number']);
 
 app.controller('WorkflowController', function ($scope, $rootScope, $http, $interval, $log, $window, $q) {
 

public/callcenter/workplace.html

@@ -176,10 +176,16 @@ <h4 class="panel-title">Waiting for new task ...</h4>
 
             <section class="phone">
 
+              <form name="phone">
+
               <input style="font-size:2em; padding-left:10px;" ng-show="UI.state == 'idle'" ng-model="phoneNumber" type="text" name="phoneNumber"
-                placeholder="+.." />
+                placeholder="" convert-to-phone-number phone-number />
               <div class="phone-number" style="font-size:2em; padding-left:10px" ng-if="UI.state == 'busy'">{{phoneNumber}}</div>
 
+              <div class="warning" ng-style="{'visibility': (phone.phoneNumber.$error.invalidPhone && phoneNumber.length > 8 )?'visible':'hidden'}">
+                Invalid phone number
+              </div>
+
               <div class="keypad">
 
                 <div ng-click="addDigit('1')" class="digit">1</div>
@@ -231,11 +237,15 @@ <h4 class="panel-title">Waiting for new task ...</h4>
 
         </div>
 
-              <button class="button-call" ng-if="UI.state == 'idle'" ng-click="call(phoneNumber)">CALL</button>
+
+              <button ng-disabled="phone.phoneNumber.$error.invalidPhone" class="button-call" ng-if="UI.state == 'idle'" ng-click="call(phoneNumber)">CALL</button>
               <button class="button-hangup" ng-if="UI.state == 'busy'" ng-click="hangUp()">HANGUP</button>
               <span class="status">Status: {{debug}}</span>
               <span ng-if="error != null" class="status">Error: {{error}}</span>
 
+
+            </form>
+
             </section>
 
             <div class="devices-panel">
@@ -279,13 +289,14 @@ <h4 class="panel-title">Waiting for new task ...</h4>
     <script src="/scripts/angular-messages.min.js"></script>
     <script src="/scripts/angular-scrollglue.js"></script>
     <script src="/scripts/moment.min.js"></script>
+    <script src="/scripts/directives/ConvertToPhoneNumberDirective.js"></script>
+    <script src="/scripts/directives/PhoneNumberDirective.js"></script>
     <script src="WorkflowController.js"></script>
     <script src="WorkflowReservationController.js"></script>
     <script src="PhoneController.js"></script>
     <script src="ChatController.js"></script>
     <script src="VideoController.js"></script>
     <script src="/scripts/directives/TaskWaitingTimeFilter.js"></script>
-
   </body>
 
 </html>

public/scripts/directives/ConvertToPhoneNumberDirective.js

@@ -0,0 +1,19 @@
+const convertToPhoneNumber = [
+  '$filter',
+  function($filter) {
+    return {
+      require: 'ngModel',
+      link: function(scope, elem, attrs, ctrl) {
+        ctrl.$parsers.unshift(function(viewValue) {
+          if (viewValue && viewValue[0] !== '+' && viewValue.length === 1) {
+            elem.val(`+${viewValue}`);
+          } else {
+            return viewValue;
+          }
+        });
+      }
+    };
+  }
+];
+
+angular.module('convert-to-phone-number', []).directive('convertToPhoneNumber', convertToPhoneNumber);

public/scripts/directives/PhoneNumberDirective.js

@@ -1,27 +1,22 @@
-angular.module('phone-number', [])
-  .directive('phoneNumber', ['$parse', '$compile', function($parse, $compile) {
-    const pattern = /^\+[0-9]{8,20}$/;
+const validatePhoneNumber = function($parse, $compile) {
+  const pattern = /^\+[1-9]{1}[0-9]{7,20}$/;
 
-    return {
-      require: 'ngModel',
-      link: function (scope, element, attrs, ctrl) {
+  return {
+    require: 'ngModel',
+    link: function(scope, element, attrs, ctrl) {
+      ctrl.$validators.integer = function(ngModelValue) {
 
-        ctrl.$validators.integer = function (ngModelValue) {
-          if(ngModelValue == undefined || ngModelValue == null){
-            ctrl.$setValidity('invalidPhone', true);
-            return ngModelValue;
-          }
-
-          if (pattern.test(ngModelValue) == false) {
-            ctrl.$setValidity('invalidPhone', false);
-            return ngModelValue;
-          }
+        if (pattern.test(ngModelValue) == false) {
+          ctrl.$setValidity('invalidPhone', false);
+          return ngModelValue;
+        }
 
-          ctrl.$setValidity('invalidPhone', true);
+        ctrl.$setValidity('invalidPhone', true);
 
-          return ngModelValue;
-        };
-      }
-    };
-
-  }])
+        return ngModelValue;
+      };
+    }
+  };
+};
+
+angular.module('phone-number', []).directive('phoneNumber', validatePhoneNumber);

public/styles/default.css

@@ -242,6 +242,16 @@ a.header-home-link {
     color: white;
 }
 
+.phone-controller .button-call[disabled] {
+    width: 100%;
+    border-radius: 3px;
+    border: 1px solid #ddd;
+    font-size: 1.6em;
+    background-color: #ddd;
+    color: white;
+}
+
+
 .phone-controller .button-hangup {
     width: 100%;
     border-radius: 3px;