FS-7994 - Verto Communicator - Using factory for group calls in history

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

@@ -8,6 +8,22 @@ body {
   padding-top: 60px;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
+.icon-tiny {
+  font-size: 14px;
+}
+
+.back-icon {
+  cursor: pointer;
+  margin-top: -2px;
+  float: left;
+  margin-left: -2px;
+  margin-right: 7px;
+}
+
 .container-fluid {
   height: 100%;
 }
@@ -237,6 +253,12 @@ body .modal-body .btn-group .btn.active {
   width: 100%;
 }
 
+#dialpad .list-icon {
+  margin-top: 8px;
+  float: right;
+  margin-left: 2px;
+}
+
 #dialpad .dialpad-display .btn-fab {
   font-size: 32px;
   position: relative;
@@ -319,6 +341,11 @@ body .modal-body .btn-group .btn.active {
   position: relative;
 }
 
+.call_direction {
+  position: absolute;
+  margin-top: 6px;
+}
+
 
 #dialpad #call_history.active {
   visibility: visible;
@@ -363,6 +390,8 @@ body .modal-body .btn-group .btn.active {
   text-overflow: clip;
   overflow: hidden;
   overflow-wrap: break-word;
+  margin-left: 26px !important;
+  position: absolute;
 }
 
 #dialpad .dialpad-number {
@@ -370,6 +399,13 @@ body .modal-body .btn-group .btn.active {
   color: rgb(38, 204, 218);
 }
 
+#dialpad .date {
+  margin-top: 15px; 
+  display: block;
+  font-size: 11px;
+  color: #CCC;
+}
+
 #dialpad .dialpad-alpha {
   font-size: 11px;
   color: #CCC;

html5/verto/verto_communicator/src/index.html

@@ -120,6 +120,7 @@
 
     <script type="text/javascript" src="src/storageService/storageService.module.js"></script>
     <script type="text/javascript" src="src/storageService/services/storage.js"></script>
+    <script type="text/javascript" src="src/storageService/services/call_history.js"></script>
 
     <!-- endbuild -->
 

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

@@ -3,7 +3,9 @@
     <div id="call_history" class="shadow-z-2 panel">
       <div class="panel-heading">
         <div class="panel-title">
-            Call History
+            <i class="mdi-navigation-arrow-back back-icon" ng-click="viewCallsList()" ng-if="call_list"></i>
+            <span ng-if="!call_list">Call History</span>
+            <span ng-if="call_list">{{ call_list[0].number }}</span>
 
             <span class="pull-right pull-right-margin dropdown">
               <a href="" class="dropdown-toggle" data-target="#" data-toggle="dropdown" aria-expanded="true">
@@ -16,18 +18,32 @@
         </div>
       </div>
       <ul class="call-history">
-        <div ng-show="!storage.data.call_history.length">
+        <div ng-if="!has_history">
           <p class="text-center text-muted">No history calls.</p>
         </div>
 
-        <li ng-repeat="call in storage.data.call_history">
-          <a ng-show="call.number" href="" ng-dblclick="$parent.call(call.number)" ng-click="$parent.fillDialpadNumber(call.number)">
-            <i ng-show="call.direction == 'inbound'" ng-class="{'mdi-communication-call-missed': !call.status,'mdi-communication-call-received': call.status}"></i>
-            <i ng-show="call.direction == 'outbound'" class="mdi-communication-call-made"></i>
-            <h2 class="dialpad-number dialpad-number-limited">{{ call.number }}</h2>
+        <li ng-repeat="number in history_control track by number" ng-if="!call_list">
+          <a ng-init="call = call_history[number][0]" class="inline-block" ng-show="call.number" href="" ng-dblclick="$parent.call(call.number)" ng-click="$parent.fillDialpadNumber(call.number)">
+            <div class="call-history-info">
+            <i ng-if="call.direction == 'inbound'" ng-class="{'mdi-communication-call-missed': !call.status,'mdi-communication-call-received': call.status}"></i>
+            <i ng-if="call.direction == 'outbound'" class="mdi-communication-call-made call_direction"></i>
+            <h2 class="dialpad-number dialpad-number-limited">{{ call.number }} ({{ call_history[number].length }})</h2>
             <br/>
+            <span class="date">{{ call.call_start }}</span>
+            </div>
+          </a>
+          <a href="" ng-click="$parent.viewCallsList(call_history[number])" class="list-icon">
+            <i class="mdi-action-view-list"></i>
+          </a>
+        </li>
+
+        <li ng-repeat="call in call_list">
+          <a ng-show="call.number" href="" ng-dblclick="$parent.call(call.number)" ng-click="$parent.fillDialpadNumber(call.number)">
+            <i ng-if="call.direction == 'inbound'" class="icon-tiny" ng-class="{'mdi-communication-call-missed': !call.status,'mdi-communication-call-received': call.status}"></i>
+            <i ng-if="call.direction == 'outbound'" class="icon-tiny mdi-communication-call-made"></i>
             <span class="dialpad-alpha">{{ call.call_start }}</span>
           </a>
+
         </li>
       </ul>
     </div>

html5/verto/verto_communicator/src/storageService/services/call_history.js

+'use strict';
+
+  angular
+  .module('storageService')
+  .factory('CallHistory', function(storage) {
+
+    var history = storage.data.call_history;
+    var history_control = storage.data.history_control;
+
+    var addCallToHistory = function(number, direction, status) {
+      if(history[number] == undefined) {
+        history[number] = [];
+      }
+
+      history[number].unshift({
+        'number': number,
+        'direction': direction,
+        'status': status,
+        'call_start': Date()
+      });
+
+      var index = history_control.indexOf(number);
+      console.log(index);
+      if(index > -1) {
+        history_control.splice(index, 1);
+      }
+
+      history_control.unshift(number);
+
+    };
+
+    var getCallsFromHistory = function(number) {
+      return history[number];
+    };
+
+    return {
+      all: function() {
+        return history;
+      },
+      all_control: function() {
+        return history_control;
+      },
+      get: function(number) {
+        return getCallsFromHistory(number);
+      },
+      add: function(number, direction, status) {
+        return addCallToHistory(number, direction, status);
+      },
+      clear: function() {
+        storage.data.call_history = {};
+        storage.data.history_control = [];
+        history = storage.data.call_history;
+        history_control = storage.data.history_control;
+        return history_control;
+      }
+    }
+});

html5/verto/verto_communicator/src/storageService/services/storage.js

@@ -12,7 +12,8 @@
       cur_call: 0,
       called_number: '',
       useVideo: true,
-      call_history: [],
+      call_history: {},
+      history_control: [],
       call_start: false,
       name: '',
       email: '',

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

@@ -4,15 +4,29 @@
   angular
     .module('vertoControllers')
     .controller('DialPadController', ['$rootScope', '$scope',
-      '$http', '$location', 'toastr', 'verto', 'storage',
-      function($rootScope, $scope, $http, $location, toastr, verto, storage) {
+      '$http', '$location', 'toastr', 'verto', 'storage', 'CallHistory',
+      function($rootScope, $scope, $http, $location, toastr, verto, storage, CallHistory) {
         console.debug('Executing DialPadController.');
-
         $scope.checkBrowser();
+        $scope.call_history = CallHistory.all();
+        $scope.history_control = CallHistory.all_control();
+        $scope.has_history = Object.keys($scope.call_history).length;
         storage.data.videoCall = false;
         storage.data.userStatus = 'connecting';
         storage.data.calling = false;
 
+        $scope.clearCallHistory = function() {
+          CallHistory.clear();
+          $scope.call_history = CallHistory.all();
+          $scope.history_control = CallHistory.all_control();
+          $scope.has_history = Object.keys($scope.call_history).length;
+          return $scope.history_control;
+        };
+
+        $scope.viewCallsList = function(calls) {
+          return $scope.call_list = calls;
+        };
+
         /**
          * fill dialpad via querystring [?autocall=\d+]
          */
@@ -62,14 +76,10 @@
           verto.call($rootScope.dialpadNumber);
 
           storage.data.called_number = $rootScope.dialpadNumber;
-          storage.data.call_history.unshift({
-            'number': $rootScope.dialpadNumber,
-            'direction': 'outbound',
-            'call_start': Date()
-          });
+          CallHistory.add($rootScope.dialpadNumber, 'outbound');
           $location.path('/incall');
         }
       }
     ]);
 
-})();
+})();
\ No newline at end of file

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

@@ -4,8 +4,8 @@
   angular
     .module('vertoControllers')
     .controller('MainController',
-      function($scope, $rootScope, $location, $modal, $timeout, verto, storage, toastr, Fullscreen, prompt) {
-      
+      function($scope, $rootScope, $location, $modal, $timeout, verto, storage, CallHistory, toastr, Fullscreen, prompt) {
+
       console.debug('Executing MainController.');
 
       var myVideo = document.getElementById("webcam");
@@ -140,7 +140,7 @@
         );
       };
 
-      $scope.openModal = function(templateUrl, controller) {
+      $rootScope.openModal = function(templateUrl, controller) {
         var modalInstance = $modal.open({
           animation: $scope.animationsEnabled,
           templateUrl: templateUrl,
@@ -201,10 +201,6 @@
         $scope.call_history = angular.element("#call_history").hasClass('active');
       };
 
-      $scope.clearCallHistory = function() {
-        storage.data.call_history = [];
-      };
-
       $scope.toggleChat = function() {
         if ($scope.chatStatus && $rootScope.activePane === 'chat') {
           $rootScope.chat_counter = 0;
@@ -328,22 +324,11 @@
 
           $scope.answerCall();
           storage.data.called_number = data;
-
-          storage.data.call_history.unshift({
-            'number': data,
-            'direction': 'inbound',
-            'status': true,
-            'call_start': Date()
-          });
+          CallHistory.add(number, 'inbound', true);
           $location.path('/incall');
         }, function() {
           $scope.declineCall();
-          storage.data.call_history.unshift({
-            'number': data,
-            'direction': 'inbound',
-            'status': false,
-            'call_start': Date()
-          });
+          CallHistory.add(number, 'inbound', false);
         });
       });
 
@@ -439,4 +424,4 @@
     }
   );
 
-})();
+})();
\ No newline at end of file

html5/verto/verto_communicator/src/vertoService/services/vertoService.js

@@ -258,8 +258,8 @@ vertoService.service('verto', ['$rootScope', '$cookieStore', '$location', 'stora
             label: device.label || device.id
           });
         }
-        console.debug('Devices were refreshed, checking that we have cameras.');          
-        
+        console.debug('Devices were refreshed, checking that we have cameras.');
+
         // This means that we cannot use video!
         if (data.videoDevices.length === 0) {
           console.log('No camera, disabling video.');
@@ -274,7 +274,7 @@ vertoService.service('verto', ['$rootScope', '$cookieStore', '$location', 'stora
       },
 
       refreshDevices: function(callback) {
-        console.debug('Attempting to refresh the devices.');        
+        console.debug('Attempting to refresh the devices.');
         jQuery.verto.refreshDevices(this.refreshDevicesCallback);
       },
 
@@ -416,7 +416,7 @@ vertoService.service('verto', ['$rootScope', '$cookieStore', '$location', 'stora
             console.log('Has data.liveArray.');
             $rootScope.$emit('members.clear');
             data.liveArray = null;
-            
+
           } else {
             console.log('Doesn\'t found data.liveArray.');
           }