#154 - more controls, think its all working now

Former-commit-id: aeb31559d176b7f080a37d01b4f459d903923228

2 files changed, 127 insertions, 25 deletions

diff --git a/www/js/MontageHistoryCtrl.js b/www/js/MontageHistoryCtrl.js
index bdbfeea5..fbfd7bfd 100644
--- a/www/js/MontageHistoryCtrl.js
+++ b/www/js/MontageHistoryCtrl.js
@@ -63,9 +63,18 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         
         
         
-         var apiurl = ld.apiurl + "/events/index/StartTime >=:"+TimeObjectFrom+"/StartTime <=:"+ TimeObjectTo+".json";
-            
-            console.log ("New URL to get is " + apiurl);
+         var apiurl;
+        
+        if ($scope.sliderVal.exactMatch)
+        {
+            apiurl= ld.apiurl + "/events/index/StartTime =:"+TimeObjectFrom+".json";
+        }
+        
+        else
+        {
+            apiurl= ld.apiurl + "/events/index/StartTime >=:"+TimeObjectFrom+"/StartTime <=:"+ TimeObjectTo+".json";
+        }
+            ZMDataModel.zmLog ("Event timeline API is " + apiurl);
         
             $http.get(apiurl)
             .success( function(data) {
@@ -77,10 +86,36 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                     eid = data.events[i].Event.Id;
                     
                    // only take the first one for each monitor
-                   // that's the earliest match and play gapless from there
-                   if ($scope.MontageMonitors[mid].eventUrl == 'img/noevent.png')    
-                       $scope.MontageMonitors[mid].eventUrl=ld.streamingurl+"/nph-zms?source=event&mode=jpeg&event="+eid+"&frame=1&replay=gapless";
-                    console.log ("Monitor " + mid + " url is " + $scope.MontageMonitors[mid].eventUrl);
+                    for (var j=0; j < $scope.MontageMonitors.length; j++)
+                    {
+                       // that's the earliest match and play gapless from there
+                       if ($scope.MontageMonitors[j].Monitor.Id == mid)
+                       {
+                       if ($scope.MontageMonitors[j].eventUrl == 'img/noevent.png')    
+                           $scope.MontageMonitors[j].eventUrl=ld.streamingurl+"/nph-zms?source=event&mode=jpeg&event="+eid+"&frame=1&replay="+($scope.sliderVal.enableGapless?"gapless":"single");
+                        
+                       }
+                    }
+                }
+                
+                // now check for monitors with no events and get the closest match
+                if (!$scope.sliderVal.exactMatch)
+                {
+                    ZMDataModel.zmLog ("Exact match is off, so looking for more events");
+                    for (i=0; i<$scope.MontageMonitors.length; i++)
+                    {
+                        if ($scope.MontageMonitors[i].eventUrl=='img/noevent.png')
+                        {
+
+
+                            var indivGrab = ld.apiurl + "/events/index/MonitorId:"+$scope.MontageMonitors[i].Monitor.Id+"/StartTime >=:"+TimeObjectFrom+".json";
+
+                            ZMDataModel.zmDebug("Monitor " + $scope.MontageMonitors[i].Monitor.Id+":"+$scope.MontageMonitors[i].Monitor.Name + " does not have events, trying "+indivGrab);
+
+                            getExpandedEvents(i,indivGrab);
+
+                        }
+                    }
                 }
                 
                
@@ -92,6 +127,28 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                 
             });
         
+        
+        function getExpandedEvents(i,indivGrab)
+        {
+            var ld = ZMDataModel.getLogin();
+            console.log ("EXPANDED EVENT " + i + " " + indivGrab);
+            $http.get(indivGrab)
+            .success(function(data)
+            {
+               // console.log ("EXPANDED DATA FOR MONITOR " + i + JSON.stringify(data));
+                if (data.events.length > 0 )
+                {
+                    $scope.MontageMonitors[i].eventUrl=ld.streamingurl+"/nph-zms?source=event&mode=jpeg&event="+data.events[0].Event.Id+"&frame=1&replay="+($scope.sliderVal.enableGapless?"gapless":"single");
+                    
+                    ZMDataModel.zmLog ("Found expanded event "+data.events[0].Event.Id+" for monitor " + $scope.MontageMonitors[i].Monitor.Id);
+                }
+                
+            })
+            .error (function(data)
+            {
+            });
+        }
+        
             
     };
     
@@ -107,6 +164,9 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         rate:1,
         realRate:100,
         hideNoEvents:false,
+        enableGapless:true,
+        exactMatch:false
+        
     };
     
     // start with a day ago
diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html
index 173aaf5a..971afd65 100644
--- a/www/templates/montage-history.html
+++ b/www/templates/montage-history.html
@@ -42,7 +42,7 @@
 
         <span ng-show="!minimal">
             
-            <div class="timeline_text"><b>Timeline starting: {{prettifyDate(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day)}} at {{prettifyTime(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day+" "+sliderVal.hour+":"+sliderVal.min)}}@ {{sliderVal.rate}}x</b></div>
+            <div class="timeline_text"><b>Timeline starting: {{prettifyDate(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day)}} at {{prettifyTime(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day+" "+sliderVal.hour+":"+sliderVal.min)}} @ {{sliderVal.rate}}x</b></div>
         
                 <div class="range range-positive">
                     <i style="color:#bbbbbb" class="icon ion-image"></i>
@@ -169,32 +169,74 @@
                 <ion-toggle ng-model="sliderVal.hideNoEvents"
                             ng-checked="{{sliderVal.hideNoEvents}}"
                             toggle-class="toggle-dark">Hide monitors without events</ion-toggle>
+                
+                <ion-toggle ng-model="sliderVal.enableGapless"
+                            ng-checked="{{sliderVal.enableGapless}}"
+                            toggle-class="toggle-dark">enable gapless playback</ion-toggle>
+                
+                
+                <ion-toggle ng-model="sliderVal.exactMatch"
+                            ng-checked="{{sliderVal.exactMatch}}"
+                            toggle-class="toggle-dark">exact time match</ion-toggle>
             
                 
-                <div class="item item-divider">History at: {{prettifyDate(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day)}} at {{prettifyTime(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day+" "+sliderVal.hour+":"+sliderVal.min)}} </div>
+                <div class="item item-divider">Start at: {{prettifyDate(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day)}} at {{prettifyTime(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day+" "+sliderVal.hour+":"+sliderVal.min)}} </div>
                 
                 
-                <div class="item"><br/><div style="width:90%"><input ng-model="sliderVal.rate" type="text" id="mySlider6" slider options="slider_modal_options_rate"/></div><br/></div>
+                <div class="row">
+                    <div class="col col-90">
+                        <br/><div style="width:90%;color:black;"><input ng-model="sliderVal.rate" type="text" id="mySlider6" slider options="slider_modal_options_rate"/></div><br/>
+                    </div>
+                    <div class="col col-10" style="background-color:#AEA8D3">
+                     rate  
+                    </div>
+                </div>
                 
-                <div class="item"><br/><div style="width:90%"><input ng-model="sliderVal.min" type="text" id="mySlider5" slider options="slider_modal_options_mm"/></div><br/></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="item"><br/><div style="width:90%"><input ng-model="sliderVal.hour" type="text" id="mySlider4" slider options="slider_modal_options_hh"/></div><br/></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="item"><br/><div style="width:90%"><input ng-model="sliderVal.day" type="text" id="mySlider3" slider options="slider_modal_options_DD"/></div><br/></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="item" ><br/><div style="width:90%"><input ng-model="sliderVal.month" type="text" id="mySlider2" slider options="slider_modal_options_MM"/></div><br/></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="item" ><br/><div style="width:90%"><input ng-model="sliderVal.year" type="text" id="mySlider1" slider options="slider_modal_options_YY" /></div><br/></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>
     </ion-pull-up-footer>