#154 - animation on time change so its easier to see

Former-commit-id: bad618be9e67af8087b2d6c290ebc7ed58ead1e3

3 files changed, 126 insertions, 147 deletions

diff --git a/www/css/style.css b/www/css/style.css
index 52e5ad08..384304b3 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -121,6 +121,20 @@ Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 }
 
 
+.header-paused {
+    background: #ba3e3e;
+    color:#cccccc;
+    border-color: #ba3e3e;
+     border-style: solid;
+    border-width:1px;
+    opacity:80%;
+    transform: translate(-50%, -50%);
+    
+}
+
+
+
+
 .alarmed-header {
     background: #ba3e3e;
     color:#ffffff;
diff --git a/www/js/MontageHistoryCtrl.js b/www/js/MontageHistoryCtrl.js
index bf107a94..2dd8adb7 100644
--- a/www/js/MontageHistoryCtrl.js
+++ b/www/js/MontageHistoryCtrl.js
@@ -39,6 +39,31 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         };
     
     
+    $scope.togglePause = function (mid)
+    {
+        console.log ("TOGGLE PAUSE " + mid);
+        var m = -1;
+        for (var i=0; i < $scope.MontageMonitors.length; i++)
+        {
+         
+            if ($scope.MontageMonitors[i].Monitor.Id == mid)
+            {
+                m = i;
+                break;
+            }
+        }
+        if (m != -1)
+        {
+            $scope.MontageMonitors[m].isPaused = !$scope.MontageMonitors[m].isPaused;
+            
+            var cmd =  $scope.MontageMonitors[m].isPaused? 1:2;
+            
+            ZMDataModel.zmDebug ("Sending CMD:"+cmd+" for monitor "+$scope.MontageMonitors[m].Monitor.Name);
+            controlEventStream(cmd,"",$scope.MontageMonitors[m].connKey,-1);
+        }
+    };
+    
+    
     $scope.footerCollapse = function()
     {
         
@@ -61,6 +86,10 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         {
             $scope.MontageMonitors[i].eventUrl = "img/noevent.png";
             $scope.MontageMonitors[i].eventUrlTime="";
+            $scope.MontageMonitors[i].isPaused=false;
+            $scope.MontageMonitors[i].connKey = $rootScope.rand = Math.floor((Math.random() * 100000) + 1);
+            
+            
            // $scope.MontageMonitors[i].connkey= i;
 
         }
@@ -107,11 +136,13 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                        if ($scope.MontageMonitors[j].Monitor.Id == mid)
                        {
                        if ($scope.MontageMonitors[j].eventUrl == 'img/noevent.png')
+                        
                            
                            if (!ZMDataModel.isBackground())
                            {
                                 $scope.MontageMonitors[j].eventUrl=ld.streamingurl+"/nph-zms?source=event&mode=jpeg&event="+eid+"&frame=1&replay="+($scope.sliderVal.enableGapless?"gapless":"single");
                                
+                                
                                 $scope.MontageMonitors[j].eventUrlTime = stime;
                            }
                            else 
@@ -216,7 +247,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
             if ($scope.MontageMonitors[i].eventUrl !="" && $scope.MontageMonitors[i].eventUrl !='img/noevent.png')
             {
                 console.log ("Checking event status for " + $scope.MontageMonitors[i].Monitor.Name);
-                controlEventStream('99','',$scope.MontageMonitors[i].Monitor.Id, i);
+                controlEventStream('99','',$scope.MontageMonitors[i].connKey, i);
                 
             }
         }
@@ -289,6 +320,10 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
 
             //console.log("POST: " + loginData.url + '/index.php');
 
+            //console.log ("AUTH IS " + $rootScope.authSession);
+        
+            var myauthtoken = $rootScope.authSession.replace("&auth=","");
+        //&auth=
             var req = $http({
                 method: 'POST',
                 /*timeout: 15000,*/
@@ -303,7 +338,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                         str.push(encodeURIComponent(p) + "=" +
                             encodeURIComponent(obj[p]));
                     var foo = str.join("&");
-                    // console.log("****RETURNING " + foo);
+                    console.log("****RETURNING " + foo);
                     return foo;
                 },
 
@@ -312,7 +347,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                     request: "stream",
                     connkey: connkey,
                     command: cmd,
-                    auth: $rootScope.authSession,
+                    auth: myauthtoken,
                    // user: loginData.username,
                    // pass: loginData.password
                 }
@@ -329,7 +364,20 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                     $http.get (apiurl)
                     .success (function (data)
                     {
-                        $scope.MontageMonitors[ndx].eventUrlTime=data.event.Event.StartTime;
+                        if ($scope.MontageMonitors[ndx].eventUrlTime!=data.event.Event.StartTime)
+                        {
+                            
+                            var element = angular.element(document.getElementById($scope.MontageMonitors[ndx].Monitor.Id+"-timeline"));
+                                    element.removeClass ('animated slideInRight');
+                                    element.addClass('animated slideOutRight');
+                                    $timeout (function() {
+                                        element.removeClass ('animated slideOutRight');
+                                         element.addClass('animated slideInRight');
+                                        $scope.MontageMonitors[ndx].eventUrlTime=data.event.Event.StartTime;
+                                    },300);
+                               
+                        }
+                        
                     })
                     .error (function (data)
                     {
diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html
index 1a1fd3e8..4c808894 100644
--- a/www/templates/montage-history.html
+++ b/www/templates/montage-history.html
@@ -2,9 +2,6 @@
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
 
-
-
-
         <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
     </ion-nav-buttons>
 
@@ -21,125 +18,90 @@
                 </button>
         </span>
 
-        <!--
-        <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()">
-        </button>-->
-        <!--<button class="button button-icon ion-ios-help-outline" ng-click="popover.show($event)"></button>-->
-
-
 
     </ion-nav-buttons>
 
     <ion-content has-bouncing="false" style="background-color:#444444">
 
-        <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()">
-        </ion-refresher>
 
 
+        <div class="timeline_text" ion-datetime-picker ng-model="datetimeValue.value" ng-change="dateChanged()">
+            <b>Tap to change: {{datetimeValue.value | date: "yyyy-MMM-dd hh:mma"}}  @ {{sliderVal.rate}}x</b>
 
+        </div>
 
 
-        <span ng-show="!minimal">
-            
-            
-            
-            <div  class="timeline_text" ion-datetime-picker ng-model="datetimeValue.value" ng-change="dateChanged()">
-                    <b>Tap to change: {{datetimeValue.value | date: "yyyy-MMM-dd hh:mma"}}  @ {{sliderVal.rate}}x</b>
-                    
-                </div>
-            
-        
-                <div class="range range-positive">
-                    <i style="color:#bbbbbb" class="icon ion-image"></i>
-                    <input type="range" ng-model="slider.monsize" min="1"
-                           max="10" ng-change="sliderChanged(slider.monsize)">
-                    <i style="color:#bbbbbb" class="icon ion-grid"></i>
+        <div class="range range-positive">
+            <i style="color:#bbbbbb" class="icon ion-image"></i>
+            <input type="range" ng-model="slider.monsize" min="1" max="10" ng-change="sliderChanged(slider.monsize)">
+            <i style="color:#bbbbbb" class="icon ion-grid"></i>
 
-                </div>
-        </span>
+        </div>
 
         <div ng-style="packMontage ? { '-webkit-column-count':slider.monsize,'-webkit-column-gap':'0px','line-height':'0px','-webkit-column-fill': 'balance', 'column-fill': 'balance' } : {'-webkit-column-count':slider.monsize,'-webkit-column-gap':'0px','line-height':'0px','display':'-webkit-flex','-webkit-flex-direction':'row','flex-direction':'row', 'flex-wrap':'wrap' }">
 
-            <!--<div ng-style="packMontage ? { '-webkit-column-count':slider.monsize, '-webkit-column-gap':'0px','line-height':'0px' } : { 'flex':'display', '-webkit-column-count':slider.monsize }">-->
 
-
-            <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow' && monitor.Monitor.Enabled !='0'">
-     
-           
-               
+            <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow' && monitor.Monitor.Enabled !='0'"> 
+                
+                
                 <div style="position: relative;width:{{devWidth/slider.monsize}}px;">
-                    
-                   
-                    
-                    <div ng-if="!isModalActive">
-                        
-                        
-                        
-                        <div ng-if="$root.authSession!='undefined' && !isBackground()">
-                            <div ng-if = "!minimal && monitor.eventUrl == 'img/noevent.png' && !sliderVal.hideNoEvents">
-                                <img id="img-$index" image-spinner-src="{{isBackground()?'':monitor.eventUrl}}"  image-spinner-loader="lines" style="
-        width: 100% !important;
-        height: auto !important;" />
-                                <div   style="position:absolute; bottom:0%; right:0%;white-space:nowrap;overflow:hidden;" 
-                                 class="header">
-                                &nbsp;<i class="ion-monitor"></i>
+                     
+                    <div ng-if="$root.authSession!='undefined' && !isBackground()">
+                        <div ng-if = "!minimal && monitor.eventUrl == 'img/noevent.png' && !sliderVal.hideNoEvents">
+                            <img id="img-$index" image-spinner-src="{{isBackground()?'':monitor.eventUrl}}"  image-spinner-loader="lines" style="
+                                width: 100% !important;
+                                height: auto !important;" />
+                            <div   style="position:absolute; bottom:0%; right:0%;white-space:nowrap;overflow:hidden;" 
+                             class="header">
+                            &nbsp;<i class="ion-monitor"></i>
+                           {{monitor.Monitor.Name}}&nbsp;
+                            </div>
+                        </div>
+
+                        <div ng-if = "!minimal && monitor.eventUrl != 'img/noevent.png' && monitor.connKey">
+
+                            <img ng-if="!isBackground()" id="img-$index" image-spinner-src="{{monitor.eventUrl}}&scale={{LoginData.singleImageQuality}}{{$root.authSession}}&rand={{$root.rand}}&rate={{sliderVal.realRate}}&connkey={{monitor.connKey}}"  image-spinner-loader="lines" style="
+                            width: 100% !important;
+                            height: auto !important;" on-tap="togglePause(monitor.Monitor.Id)" />
+
+                            <img ng-if="isBackground()" id="img-$index" image-spinner-src=""  image-spinner-loader="lines" style="
+                            width: 100% !important;
+                            height: auto !important;" />
+
+                            <div  ng-if="!isBackground()" style="position:absolute; bottom:0%; right:0%;white-space:nowrap;overflow:hidden;" 
+                             class="header">
+                            &nbsp;<i class="ion-monitor"></i>
                                {{monitor.Monitor.Name}}&nbsp;
-                                </div>
                             </div>
-                            
-                            <div ng-if = "!minimal && monitor.eventUrl != 'img/noevent.png'">
-                                <img ng-if="!isBackground()" id="img-$index" image-spinner-src="{{monitor.eventUrl}}&scale={{LoginData.singleImageQuality}}{{$root.authSession}}&rand={{$root.rand}}&rate={{sliderVal.realRate}}&connkey={{monitor.Monitor.Id}}"  image-spinner-loader="lines" style="
-        width: 100% !important;
-        height: auto !important;" />
-                                
-                                <img ng-if="isBackground()" id="img-$index" image-spinner-src=""  image-spinner-loader="lines" style="
-        width: 100% !important;
-        height: auto !important;" />
-                                
-                                <div  ng-if="!isBackground()" style="position:absolute; bottom:0%; right:0%;white-space:nowrap;overflow:hidden;" 
-                                     class="header">
-                                    &nbsp;<i class="ion-monitor"></i>
-                                   {{monitor.Monitor.Name}}&nbsp;
-                                </div>
-                                
-                                <div  ng-if="!isBackground() && sliderVal.showTimeline" style="position:absolute; bottom:15px; right:0%;white-space:nowrap;overflow:hidden;" 
-                                     class="header-event-id">
-                                    &nbsp;<i class="ion-clock"></i>
-                                   {{prettifyDate(monitor.eventUrlTime)}}&nbsp;
-                                </div>
-                                
+
+                             <div  ng-if="!isBackground() && sliderVal.showTimeline" style=" position:absolute; bottom:15px; right:0%;white-space:nowrap;overflow:hidden;" 
+                             class="header-event-id" id="{{monitor.Monitor.Id}}-timeline">
+                            &nbsp;<i class="ion-clock"></i>
+                               {{prettifyDate(monitor.eventUrlTime)}}&nbsp;
                             </div>
                             
+                            <div  ng-if="monitor.isPaused" style="position:absolute; top:50%; left:50%;white-space:nowrap;overflow:hidden;" 
+                             class="header-paused">
+                            &nbsp;<i class="ion-pause"></i>
+                               paused&nbsp;
+                            </div>
                             
-
+                            <!--<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 id="img-$index" image-spinner-src="img/pausevideo.png" style="width: 100% !important;
-  height: auto !important;" />
-                        </div>
-                        
-                        
-                        
-
+                    <div ng-if="!$root.authSession=='undefined' || isBackground()">
+                        <img id="img-$index" image-spinner-src="img/pausevideo.png" 
+                             style="width: 100% !important;height: auto !important;" />
                     </div>
                 </div>
-
-                    
-            <div ng-if="isModalActive">
-                <img id="img-$index" image-spinner-src="img/pausevideo.png" style="margin-top:0px;
-        width: 100% !important;
-        height: auto !important;" />
-            </div>
-
-
-
             </span>
-            <!-- ngrepeat -->
-
         </div>
 
-
         <ion-item ng-show="!MontageMonitors.length">
             No monitors to display.
         </ion-item>
@@ -187,8 +149,10 @@
 
 
                 <ion-toggle ng-model="sliderVal.exactMatch" ng-checked="{{sliderVal.exactMatch}}" toggle-class="toggle-dark">exact time match</ion-toggle>
-                
-                <ion-toggle ng-model="sliderVal.showTimeline" ng-checked="{{sliderVal.showTimeline}}" toggle-class="toggle-dark">show event time <p>(resource intensive)</p></ion-toggle>
+
+                <ion-toggle ng-model="sliderVal.showTimeline" ng-checked="{{sliderVal.showTimeline}}" toggle-class="toggle-dark">show event time
+                    <p>(resource intensive)</p>
+                </ion-toggle>
 
 
 
@@ -213,53 +177,6 @@
                     </div>
                 </div>
 
-                <!--
-                <div class="row">
-                    <div class="col col-90">
-                        <br/><div style="width:90%;color:black;"><input ng-model="sliderVal.min" type="text" id="mySlider5" slider options="slider_modal_options_mm"/></div><br/>
-                    </div>
-                    <div class="col col-10" style="background-color:#7f8c8d">
-                      min  
-                    </div>
-                </div>
-                
-                <div class="row">
-                    <div class="col col-90">
-                        <br/><div style="width:90%;color:black;"><input ng-model="sliderVal.hour" type="text" id="mySlider4" slider options="slider_modal_options_hh"/></div><br/>
-                    </div>
-                    <div class="col col-10" style="background-color:#7f8c8d">
-                      hr
-                    </div>
-                </div>
-                
-                <div class="row">
-                    <div class="col col-90">
-                        <br/><div style="width:90%;color:black;"><input ng-model="sliderVal.day" type="text" id="mySlider3" slider options="slider_modal_options_DD"/></div><br/>
-                    </div>
-                    <div class="col col-10" style="background-color:#7f8c8d">
-                      day
-                    </div>
-                </div>
-                
-                <div class="row">
-                    <div class="col col-90">
-                        <br/><div style="width:90%;color:black;"><input ng-model="sliderVal.month" type="text" id="mySlider2" slider options="slider_modal_options_MM"/></div><br/>
-                    </div>
-                    <div class="col col-10" style="background-color:#7f8c8d">
-                      mth  
-                    </div>
-                </div>
-                
-                <div class="row">
-                    <div class="col col-90">
-                        <br/><div style="width:90%;color:black;"><input ng-model="sliderVal.year" type="text" id="mySlider1" slider options="slider_modal_options_YY"/></div><br/>
-                    </div>
-                    <div class="col col-10" style="background-color:#7f8c8d">
-                      yr 
-                    </div>
-                </div>-->
-
-
 
             </div>
         </ion-pull-up-content>