humanize time difference for other views too

Former-commit-id: dd6df8dd23512f22c802d4f41c2c64da25b59282

4 files changed, 28 insertions, 4 deletions

diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js
index 5aaf6034..8ebf1f1b 100644
--- a/www/js/EventModalCtrl.js
+++ b/www/js/EventModalCtrl.js
@@ -1105,7 +1105,15 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
 
     }
 
-
+    function humanizeTime(str)
+    {
+        var et = moment(str);
+        var m = moment.duration(moment().diff(et)).humanize();
+        
+        var r  = m+' '+$translate.instant('kAgo'); 
+        return (r);
+        
+    }
 
     function jumpToEventZms(connkey, dirn) {
 
@@ -1291,6 +1299,8 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
         var loginData = ZMDataModel.getLogin();
         var myurl = loginData.apiurl + '/events/' + eid + ".json";
         ZMDataModel.zmLog("*** Constructed API for detailed events: " + myurl);
+        $scope.humanizeTime = "...";
+        $scope.mName = "...";
         $http.get(myurl)
             .then(function (success) {
 
@@ -1314,6 +1324,9 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
                     $scope.eFramesNum = event.Event.Frames;
                     $scope.eventDur = Math.round(event.Event.Length);
                     $scope.loginData = ZMDataModel.getLogin();
+                    $scope.humanizeTime = humanizeTime(event.Event.StartTime);
+                    $scope.mName = ZMDataModel.getMonitorName(event.Event.MonitorId);
+                    //console.log (">>>>>>>>HUMANIZE " + $scope.humanizeTime);
 
                     //console.log("**** VIDEO STATE IS " + event.Event.DefaultVideo);
                     if (typeof event.Event.DefaultVideo === 'undefined')
diff --git a/www/js/TimelineModalCtrl.js b/www/js/TimelineModalCtrl.js
index aa403010..a4b2cb4b 100644
--- a/www/js/TimelineModalCtrl.js
+++ b/www/js/TimelineModalCtrl.js
@@ -176,6 +176,8 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
             });
 
         $scope.eventdetails = $translate.instant('kLoading') + "...";
+        $scope.mName = ZMDataModel.getMonitorName($scope.event.Event.MonitorId);
+        $scope.humanizeTime = humanizeTime($scope.event.Event.StartTime);
         processEvent();
         //$scope.eventdetails = JSON.stringify($scope.event);
     });
@@ -440,6 +442,15 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
     }
 
 
+    function humanizeTime(str)
+    {
+        var et = moment(str);
+        var m = moment.duration(moment().diff(et)).humanize();
+        
+        var r  = m+' '+$translate.instant('kAgo'); 
+        return (r);
+        
+    }
 
     function padToN(number, digits) {
 
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index a178c901..1c0f66d2 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -120,7 +120,7 @@
 
 
 
-   <div class="events-range-modal-text">{{'kShowingEvent' | translate}}: {{d_eventId}}</div>
+   <div class="events-range-modal-text">{{mName}}&nbsp;<i class="ion-arrow-right-b"></i>&nbsp;{{'kEvent' | translate}}:{{d_eventId}} ({{humanizeTime}}) </div>
 
    <div id="flyoutmenu" style="position:absolute;bottom:100px;left:10px">
         <ul>
diff --git a/www/templates/timeline-modal.html b/www/templates/timeline-modal.html
index 28147213..b27c749b 100644
--- a/www/templates/timeline-modal.html
+++ b/www/templates/timeline-modal.html
@@ -6,14 +6,14 @@
         <ion-content  ng-cloak on-double-tap="closeModal()" delegate-handle="timeline-modal-delegate">
 <div ng-controller="TimelineModalCtrl" >   
             <br/>
-            <div class="item item-divider">{{'kEvent' | translate}}: {{eid}}
+            <div class="item item-divider">{{mName}}&nbsp;<i class="ion-arrow-right-b"></i>&nbsp;{{'kEvent' | translate}}:{{eid}} ({{humanizeTime}})
                   <button class="button icon-left button-small  button-positive" style="float:right; opacity:0.7" ng-click="switchType()">
                 <i class="ion-shuffle"></i>
                 </button>
                 
             </div>
           
-            <center> <h5>{{'kShowing' | translate}} {{graphType}} {{'kFrames' | translate}} </h5>
+            <center> <h5>{{'kEvent' | translate}} {{graphType}} {{'kFrames' | translate}} </h5>
                 <p>{{'kTimelineMessage' | translate}}</p>