FS-8966 - [verto_communicator] Ability to cancel dialing while doing speed test

html5/verto/verto_communicator/src/css/verto.css

@@ -143,7 +143,7 @@ button.btn i {
   -webkit-animation: rotator 1.4s linear infinite;
           animation: rotator 1.4s linear infinite;
   position: absolute;
-  top: 35%;
+  top: 50%;
   left: 50%;
   margin-left: -35px;
   zoom: 2;

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

@@ -1,6 +1,15 @@
 <div ng-show="loading">
-  <h3 style="margin-top: 4%;" class="text-center">Calling to {{ dialpadNumber }}...</h3>
-  <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+  <h2 ng-show="cancelled" style="margin-top: 4%;" class="text-center">Cancelling...</h2>
+  <span ng-show="!cancelled">
+      <h2 style="margin-top: 4%;" class="text-center">Determining your speed...</h2>
+      <h4 style="margin-top: 4%;" class="text-center">
+          Calling to {{ dialpadNumber }}...
+          <a class="btn btn-sm btn-raised btn-warning" ng-click="cancel()">
+              Cancel<div class="ripple-container"></div>
+          </a>
+      </h4>
+  </span>
+  <svg class="spinner" width="35px" height="35px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
     <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
   </svg>
 </div>

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

@@ -109,6 +109,7 @@
          * Call to the number in the $rootScope.dialpadNumber.
          */
         $scope.loading = false;
+        $scope.cancelled = false;
         $rootScope.call = function(extension) {
           if (!storage.data.testSpeedJoin || !$rootScope.dialpadNumber) {
             return call(extension);
@@ -116,10 +117,19 @@
           $scope.loading = true;
 
           verto.testSpeed(function() {
-            $scope.loading = false;
-            call(extension);
+            if ($scope.cancelled) {
+              $scope.cancelled = false;
+              $scope.loading = false;
+              return;
+            } else {
+              call(extension);
+            }
           });
         }
+
+        $rootScope.cancel = function() {
+          $scope.cancelled = true;
+        }
       }
     ]);