diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/js/DataModel.js | 1 | ||||
| -rw-r--r-- | www/js/EventCtrl.js | 32 | ||||
| -rw-r--r-- | www/templates/events-modal.html | 12 | ||||
| -rw-r--r-- | www/templates/events.html | 9 |
4 files changed, 50 insertions, 4 deletions
diff --git a/www/js/DataModel.js b/www/js/DataModel.js index dcd8d11d..4a4fdee0 100644 --- a/www/js/DataModel.js +++ b/www/js/DataModel.js @@ -68,6 +68,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion simevents.push({ "Event": { // Obviously this is dummy data + "Id":Math.floor(Math.random() * (5000 - 100 + 1)) + 1000, "MonitorId": mon.toString(), "Cause": causes[Math.floor(Math.random() * (2 - 0 + 1)) + 0], "Length": Math.floor(Math.random() * (700 - 20 + 1)) + 20, diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index 69fd0222..84764f19 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -2,7 +2,7 @@ // This was before I got access to the new APIs. FIXME: Revisit this code to see what I am doing with it // and whether the new API has a better mechanism -angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ionicPlatform, $scope, $stateParams, message, ZMDataModel,$ionicSideMenuDelegate) { +angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ionicPlatform, $scope, $stateParams, message, ZMDataModel,$ionicSideMenuDelegate, $ionicModal) { console.log("I got STATE PARAM " + $stateParams.id); $scope.id = parseInt($stateParams.id,10); @@ -10,6 +10,36 @@ $scope.openMenu = function () { $ionicSideMenuDelegate.toggleLeft(); } +// This is a modal to show the event footage +$ionicModal.fromTemplateUrl('templates/events-modal.html', { + scope: $scope, + animation: 'slide-in-up' + }) + .then(function(modal) { + $scope.modal = modal; + + }); + + +$scope.openModal = function(eid,ename,edur) { + console.log ("Open Modal"); + $scope.eventName = ename; + $scope.eventId = eid; + $scope.eventDur = Math.round(edur); + $scope.loginData = ZMDataModel.getLogin(); + $scope.modal.show(); + }; + $scope.closeModal = function() { + console.log ("Close Modal"); + $scope.modal.hide(); + + }; + //Cleanup the modal when we're done with it! + $scope.$on('$destroy', function() { + console.log ("Destroy Modal"); + $scope.modal.remove(); + }); + console.log("***CALLING EVENTS FACTORY"); var lData = ZMDataModel.getLogin(); console.log("ZM Service Username = " + lData.username); diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html new file mode 100644 index 00000000..69bcd021 --- /dev/null +++ b/www/templates/events-modal.html @@ -0,0 +1,12 @@ +<ion-modal-view> + <ion-header-bar> + <h1 class="title">{{eventName}} (Duration:{{eventDur}}s) + <span style="float:right"> + <button class="button button-clear icon icon-left ion-close" ng-click="closeModal()" >Close</button> + </span> + </h1> + </ion-header-bar> + <ion-content> + <img ng-src="{{loginData.url}}cgi-bin/nph-zms?source=event&mode=jpeg&event={{eventId}}&frame=1&scale=100&rate=100&maxfps=5&replay=single&user={{loginData.username}}&pass={{loginData.password}}" width="100%" /> + </ion-content> +</ion-modal-view> diff --git a/www/templates/events.html b/www/templates/events.html index 753cd780..e33a3568 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -15,9 +15,9 @@ <!--<ion-list>--> <!-- <div ng-repeat="event in events">--> - <ion-item collection-repeat="event in events"> + <ion-item collection-repeat="event in events" > - <div class="row"> + <div class="row" > <div class="col col-left"> <!-- this ngswitch displays different icons depending on the cause of the event --> @@ -48,7 +48,10 @@ <i class="ion-images"></i> {{event.Event.Frames}} <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} <i class="ion-arrow-graph-up-right"></i> {{event.Event.TotScore}} - <br/> + + <span style="float:right"> + <button class="button button-small icon icon-left ion-ios-eye" ng-click="openModal(event.Event.Id, event.Event.Name, event.Event.Length)" >View Footage</button></span> + </div> <!--<div class="col"> |