#301 - frame navigation through modal now possible in events view. Analyze is TBD

Former-commit-id: 1711dca44ad0280b53bee52e4e2c4b78748e3961

2 files changed, 126 insertions, 11 deletions

diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 63bd0f96..1cb05bf5 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -342,25 +342,140 @@ angular.module('zmApp.controllers')
     // Tapping on a frame shows this image
     //------------------------------------------------------
     
-    $scope.showImage = function (p,r,f, fid,e, imode, id)
+    $scope.showImage = function (p,r,f, fid,e, imode, id, parray, ndx)
     {
         var img;
-        console.log ("Image Mode " + imode);
-        if (imode=='path') 
         
-            img = "<img width='100%' ng-src='"+p+"/index.php?view=image&path="+r+f+"'>";
+                
+         $scope.kFrame = $translate.instant ('kFrame');
+         $scope.kEvent = $translate.instant ('kEvent');
+         $scope.ndx = ndx;
+         $scope.parray = parray;
+         $scope.imode = imode;
+        
+       // console.log ("Image Mode " + imode);
+       // console.log ("parray :  " + JSON.stringify(parray));
+       // console.log ("index: " + ndx);
+        if ($scope.imode=='path') 
+        
+            $scope.imgsrc = p+"/index.php?view=image&path="+r+$scope.parray[$scope.ndx].fname;
         else
         {
-            img = "<img width='100%' ng-src='"+p+"/index.php?view=image&fid="+id+"'>";
-           // console.log ("IS MULTISERVER SO IMAGE IS " + img);
+            $scope.imgsrc = p+"/index.php?view=image&fid="+$scope.parray[$scope.ndx].id;
+           
         }
+
+        
+        
+        
+        //$rootScope.zmPopup = $ionicPopup.alert({title: kFrame+':'+fid+'/'+kEvent+':'+e,template:img,  cssClass:'popup80'});
+        
+              $rootScope.zmPopup = $ionicPopup.show({
+            template: '<center>{{parray[ndx].frameid}}/{{prettifyTimeSec(parray[ndx].time)}}</center><br/><img src="{{imgsrc}}" width="100%"  />',
+            title: 'details',
+            subTitle: 'use left and right arrows to change',
+            scope: $scope,
+            cssClass: 'popup80',
+            buttons: [
+                {
+                    // left 1
+                    text: '',
+                    type: 'button-small button-energized ion-chevron-left',
+                    onTap: function (e) {
+                        // look for next frame that matches the type of frame
+                        // we are showing (all or diff timestamps);
+                        
+                       // console.log ("TYPE OF FRAMES: " + $scope.typeOfFrames);
+                        var nndx = null;
+                        var alltype = $translate.instant('kShowAllFrames');
+                        for (var i=$scope.ndx-1; i>=0; i--)
+                        {
+                            if ($scope.parray[i].type == $scope.typeOfFrames|| $scope.typeOfFrames == alltype)
+                            {
+                                nndx = i;
+                                break;
+                            }
+                        }
+                        if (nndx == null) nndx = $scope.ndx;
+                        $scope.ndx = nndx;
+                       
+                        if ($scope.imode=='path') 
+                        {
+        
+                            $scope.imgsrc = p+"/index.php?view=image&path="+r+$scope.parray[$scope.ndx].fname;
+                        }
+                        else
+                        {
+                            $scope.imgsrc = p+"/index.php?view=image&fid="+$scope.parray[$scope.ndx].id;
+                        }
+
+                        
+                        
+                        e.preventDefault();
+                     
+                       
+                    }
+                },
+                {
+                    // right 1
+                    text: '',
+                    type: 'button-small button-energized ion-chevron-right',
+                    onTap: function (e) {
+                        
+                         // look for next frame that matches the type of frame
+                        // we are showing (all or diff timestamps);
+                        
+                       // console.log ("TYPE OF FRAMES: " + $scope.typeOfFrames);
+                        var nndx = null;
+                        var alltype = $translate.instant('kShowAllFrames');
+                        for (var i=$scope.ndx+1; i<$scope.parray.length; i++)
+                        {
+                            //console.log ("Comparing: " +$scope.parray[i].type +" to " + $scope.typeOfFrames);
+                            if ($scope.parray[i].type == $scope.typeOfFrames || $scope.typeOfFrames == alltype)
+                            {
+                                nndx = i;
+                                break;
+                            }
+                        }
+                        if (nndx == null) nndx = $scope.ndx;
+                        $scope.ndx = nndx;
+                        
+                        if ($scope.imode=='path') 
+                        {
+        
+                            $scope.imgsrc = p+"/index.php?view=image&path="+r+$scope.parray[$scope.ndx].fname;
+                        }
+                        else
+                        {
+                            $scope.imgsrc = p+"/index.php?view=image&fid="+$scope.parray[$scope.ndx].id;
+                        }
+
+                        e.preventDefault();
+                        
+                        
+                    }
+                },
+                
+
+                
+                {
+                    text: '',
+                    type: 'button-positive button-small ion-checkmark-round',
+                    onTap: function (e) {
+                       
+
+                    }
+                }]
+        });
+        
         
-        var kFrame = $translate.instant ('kFrame');
-        var kEvent = $translate.instant ('kEvent');
         
         
-        $rootScope.zmPopup = $ionicPopup.alert({title: kFrame+':'+fid+'/'+kEvent+':'+e,template:img,  cssClass:'popup80'});
     };
+        
+        
+        
+        
     
         
     $scope.toggleTypeOfAlarms = function()
diff --git a/www/templates/events.html b/www/templates/events.html
index 1eded906..a47a6e79 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -162,9 +162,9 @@
                                             <figure  class = "animated slideInLeft" style="display:inline-block">
                                                 <!--{{event.Event.baseURL}} p:{{event.Event.imageMode}}-->
                                                 <figcaption class="smallnote">{{ 'kFrame' | translate}}:{{alarm.frameid}},{{ 'kScore' | translate }}:{{alarm.score}}, {{'kTime'|translate}}: {{prettifyTimeSec(alarm.time)}}</figcaption>       
-                                                  <img ng-if="event.Event.imageMode=='path'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380"    style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id)"  />
+                                                  <img ng-if="event.Event.imageMode=='path'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380"    style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)"  />
                                                 
-                                                <img ng-if="event.Event.imageMode=='fid'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}"    style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id)"  />
+                                                <img ng-if="event.Event.imageMode=='fid'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}"    style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)"  />