diff options
| -rw-r--r-- | www/js/EventCtrl.js | 133 | ||||
| -rw-r--r-- | www/templates/events.html | 4 |
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)" /> |