simplifying event montage - select X hrs ago too

Former-commit-id: eac8812d33320d75e049da131c3fee631d0ad7f1

3 files changed, 66 insertions, 45 deletions

diff --git a/www/js/MontageHistoryCtrl.js b/www/js/MontageHistoryCtrl.js
index abe1f984..c0188d2d 100644
--- a/www/js/MontageHistoryCtrl.js
+++ b/www/js/MontageHistoryCtrl.js
@@ -49,8 +49,20 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         return moment(str).format(NVRDataModel.getTimeFormat() + ' on MMMM Do YYYY');
     };
 
+    $scope.dateChanged = function()
+    {
+        console.log ("DATE CHANGED");
+        $scope.datetimeValueFrom.hrs = Math.round(moment.duration(moment().diff(moment($scope.datetimeValueFrom.value))).asHours());
+    };
 
 
+    $scope.hrsChanged = function()
+    {
+         $scope.datetimeValueFrom.value = moment().subtract($scope.datetimeValueFrom.hrs,'hours').toDate();
+        timefrom.toDate();
+         
+    };
+    
 
     function orientationChanged() {
         NVRDataModel.debug("Detected orientation change, redoing packery resize");
@@ -321,12 +333,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
     }
 
 
-    $scope.dateChanged = function () {
-        // window.stop();
-        // console.log (">>>>>>>>>>>>>>>>>>>>>>>>>>>>> BAD BAD");
-        footerCollapse();
-    };
-
+   
 
     //--------------------------------------------------------------
     //  Used to control zms for a connkey. If ndx is not -1,
@@ -1198,6 +1205,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         $rootScope.rand = Math.floor((Math.random() * 100000) + 1);
         $scope.monitors = [];
         imageLoadingDataShare.set(0);
+        
 
         var refresh = NVRDataModel.getMonitors(1);
 
@@ -1216,6 +1224,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
     var intervalHandle;
     $scope.isModalActive = false;
     var modalIntervalHandle;
+    $scope.hrsAgo = 4;
 
     window.addEventListener("resize", orientationChanged, false);
 
@@ -1258,13 +1267,16 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
     //tdatetimeValueFrom.setDate(tdatetimeValueFrom.getDate()-1);
 
     $scope.datetimeValueFrom = {
-        value: ""
+        value: "",
+        hrs:""
     };
     $scope.datetimeValueTo = {
         value: ""
     };
 
     $scope.datetimeValueFrom.value = timefrom.toDate();
+    $scope.datetimeValueFrom.hrs = Math.round(moment.duration(moment().diff(moment($scope.datetimeValueFrom.value))).asHours());
+    
     $scope.datetimeValueTo.value = timeto.toDate();
 
     $rootScope.eventQueryInterval = "";
diff --git a/www/lang/locale-en.json b/www/lang/locale-en.json
index 995aa926..8557256c 100644
--- a/www/lang/locale-en.json
+++ b/www/lang/locale-en.json
@@ -355,5 +355,8 @@
     "kZMSettingsFor"             :"ZoneMinder settings for",
     "kZMStopped"                 :"stopped",
     "kZMUndetermined"            :"undetermined",
-    "kZMUpgradeNeeded"           :"ZoneMinder upgrade needed"
+    "kZMUpgradeNeeded"           :"ZoneMinder upgrade needed",
+    "kEventHistShowFrom"         :"Show from",
+    "kEventHistHrs"              :"hours ago"
+    
 }
diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html
index 9895d5cf..3a4cbd86 100644
--- a/www/templates/montage-history.html
+++ b/www/templates/montage-history.html
@@ -14,10 +14,10 @@
 
         <button class="button button-icon button-clear ion-loop" ng-click="resetSizes();">&nbsp;
         </button>
-        
+
         <button class="button button-icon button-clear ion-plus-round" ng-click="sliderChanged(1);">&nbsp;
         </button>
-        
+
         <button class="button button-icon button-clear ion-minus-round" ng-click="sliderChanged(-1);">&nbsp;
         </button>
 
@@ -29,7 +29,7 @@
 
     <ion-content scroll-sista has-bouncing="false" style="background-color:#444444" delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll>
 
-        
+
 
         <!--<div class="timeline_text" ion-datetime-picker title="From" am-pm={{!loginData.use24hr}} ng-model="datetimeValueFrom.value" ng-change="dateChanged()">
             <b>{{'kFrom' | translate}} : </b>{{datetimeValueFrom.value | date: timeFormat}}
@@ -41,7 +41,8 @@
         </div>-->
 
         <div class="timeline_text">
-            {{'kFrom' | translate}}:{{prettifyDateTimeFirst(datetimeValueFrom.value)}} ({{humanizeTime(datetimeValueFrom.value)}}) <!-- - {{'kTo' | translate}}:{{prettifyDateTimeFirst(datetimeValueTo.value)}} -->
+            {{'kFrom' | translate}}:{{prettifyDateTimeFirst(datetimeValueFrom.value)}} ({{humanizeTime(datetimeValueFrom.value)}})
+            <!-- - {{'kTo' | translate}}:{{prettifyDateTimeFirst(datetimeValueTo.value)}} -->
             <div ng-if="$root.platformOS != 'ios'">({{'kChromeMax' | translate}})</div>
         </div>
 
@@ -92,49 +93,46 @@
 
                                 <figcaption class="normal-figcaption" >
 
-                                        &nbsp;<i class="ion-ios-videocam"></i> <span style="background-color:red;color:#fff" ng-if="monitor.Monitor.isPaused">&nbsp;<i class="ion-pause"></i>&nbsp;</span>
-                                       {{monitor.Monitor.Name}}&nbsp;
-                                    
-                                       <div  ng-if="sliderVal.showTimeline && $root.runMode!='lowbw'" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:9px" 
-                             class="header-event-id" id="{{monitor.Monitor.Id}}-timeline">
-                            <i class="ion-clock"></i>
-                               {{prettifyDateTimeFirst(monitor.Monitor.eventUrlTime)}} ({{humanizeTime(monitor.Monitor.eventUrlTime)}})&nbsp;
-                            </div>
+                                        &nbsp;<i class="ion-ios-videocam"></i> <span style="background-color:red;color:#fff" ng-if="monitor.Monitor.isPaused">&nbsp;<i class="ion-pause"></i>&nbsp;</span> {{monitor.Monitor.Name}}&nbsp;
+
+            <div ng-if="sliderVal.showTimeline && $root.runMode!='lowbw'" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:9px" class="header-event-id" id="{{monitor.Monitor.Id}}-timeline">
+                <i class="ion-clock"></i> {{prettifyDateTimeFirst(monitor.Monitor.eventUrlTime)}} ({{humanizeTime(monitor.Monitor.eventUrlTime)}})&nbsp;
+            </div>
+
+            </figcaption>
+
+
+
+            </figure>
+        </div>
 
-                                </figcaption>
 
-                                
 
-                                </figure>
-                            </div>
-                            
-                            
-                            
 
-                            
-                            <!--
+
+        <!--
                              <div  ng-if="sliderVal.showTimeline && $root.runMode!='lowbw'" style=" position:absolute; bottom:15px; right:0%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" 
                              class="header-event-id" id="{{monitor.Monitor.Id}}-timeline">
                             &nbsp;<i class="ion-clock"></i>
                                {{prettifyDate(monitor.Monitor.eventUrlTime)}}&nbsp;
                             </div>
                             -->
-                          
-                            
-                            <!--<div ng-if="!monitor.isPaused"
+
+
+        <!--<div ng-if="!monitor.isPaused"
                                 style="position:absolute; bottom:35px; right:0%;white-space:nowrap;overflow:hidden;" class="header-event-id">paused
                             </div>-->
-			  
-			  
-                        </div>
-                    </div> <!-- valid auth session &!background -->
 
-                    <div ng-if="!$root.authSession=='undefined' || isBackground()">
-                        <img  image-spinner-src="img/pausevideo.png" 
-                              />
-                    
-                    </div>
-            </span>
+
+        </div>
+        </div>
+        <!-- valid auth session &!background -->
+
+        <div ng-if="!$root.authSession=='undefined' || isBackground()">
+            <img image-spinner-src="img/pausevideo.png" />
+
+        </div>
+        </span>
         </div>
 
         <ion-item ng-show="!MontageMonitors.length">
@@ -195,14 +193,22 @@
 
 
 
-                
+
 
                 <div class="item item-divider">{{'kTimeline' | translate}}</div>
 
+                <div class="item item-input-inset">
+                    {{'kEventHistShowFrom'|translate}}:&nbsp;
+                    <label class="item-input-wrapper">
+                        <input ng-change="hrsChanged()" type="tel" placeholder="hours" ng-model="datetimeValueFrom.hrs">
+                    </label>
+                    &nbsp;{{'kEventHistHrs' | translate}}
+                </div>
+                
                 <ion-item>
-                    <div ion-datetime-picker title="From" am-pm={{!loginData.use24hr}} ng-model="datetimeValueFrom.value">
+                    <div ion-datetime-picker title="From" am-pm={{!loginData.use24hr}} ng-model="datetimeValueFrom.value" ng-change="dateChanged()">
                         <b>{{'kFrom' | translate }}: </b>{{datetimeValueFrom.value | date: timeFormat}}
-                    </div>  ({{humanizeTime(datetimeValueFrom.value)}})
+                    </div> ({{humanizeTime(datetimeValueFrom.value)}})
                 </ion-item>
 
                 <div class="row">