You can now view events footage from the events list

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}} &nbsp;
                             <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} &nbsp;
                             <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">