Added monitor live view

3 files changed, 36 insertions, 4 deletions

diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js
index 2db85aa5..ec919c1d 100644
--- a/www/js/MonitorCtrl.js
+++ b/www/js/MonitorCtrl.js
@@ -1,13 +1,43 @@
 // controller for Monitor View
 
-angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', function ($scope, ZMDataModel, message,$ionicSideMenuDelegate) {
+angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', function ($scope, ZMDataModel, message,$ionicSideMenuDelegate, $ionicLoading, $ionicModal) {
 
     $scope.monitors = [];
 
+
 $scope.openMenu = function () {
     $ionicSideMenuDelegate.toggleLeft();
   }
 
+ $scope.openModal = function (mid) {
+        console.log("Open Monitor Modal");
+
+        $scope.monitorId = mid;
+        $scope.LoginData = ZMDataModel.getLogin();
+        $scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
+        $scope.modal.show();
+    };
+    $scope.closeModal = function () {
+        console.log("Close Monitor Modal");
+        $scope.modal.hide();
+
+    };
+    //Cleanup the modal when we're done with it!
+    $scope.$on('$destroy', function () {
+        console.log("Destroy Monitor Modal");
+        $scope.modal.remove();
+    });
+
+// This is a modal to show the monitor footage
+    $ionicModal.fromTemplateUrl('templates/monitors-modal.html', {
+            scope: $scope,
+            animation: 'slide-in-up'
+        })
+        .then(function (modal) {
+            $scope.modal = modal;
+
+        });
+
     console.log("***EVENTS: Waiting for Monitors to load before I proceed");
 
     $scope.monitors = message;
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index 15d7120f..0ab63679 100644
--- a/www/templates/monitors-modal.html
+++ b/www/templates/monitors-modal.html
@@ -13,8 +13,10 @@
     <ion-content>
 
         <!-- replay can also be gapless -->
+        {{LoginData.url}}/cgi-bin/nph-zms?mode=jpeg&amp;monitor={{monitorId}}&amp;scale=100&amp;maxfps=3&amp;buffer=1000&amp;user={{LoginData.username}}&amp;pass={{LoginData.password}}&amp;rand={{rand}}
+
         <div ng-if="!isSimulated()">
-            <img ng-src="{{LoginData.url}}/cgi-bin/nph-zms?mode=jpeg&amp;monitor={{monitor.Monitor.Id}}&scale=100&maxfps=3&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" width="100%" />
+            <img ng-src="{{LoginData.url}}/cgi-bin/nph-zms?mode=jpeg&amp;monitor={{monitorId}}&scale=100&maxfps=3&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" width="100%" />
         </div>
 
         <div ng-if="isSimulated()">
diff --git a/www/templates/monitors.html b/www/templates/monitors.html
index 73bbd6fb..9ba3df04 100644
--- a/www/templates/monitors.html
+++ b/www/templates/monitors.html
@@ -42,11 +42,11 @@
                 <div style="float:right;">
                     <a class="button button-small icon icon-left icon ion-gear-a" href="#/app/events">Configuration</a>
                     <a class="button button-small icon icon-left ion-calendar" href="#/events/{{monitor.Monitor.Id}}">Events</a>
-                    <a class="button button-small icon icon-left ion-ios-eye" href="#/app/events">Live View</a>
+                    <a class="button button-small icon icon-left ion-ios-eye" ng-click="openModal(monitor.Monitor.Id)"  >Live View</a>
                 </div>
 
             </div>
         </div>
         <!-- </a> -->
     </ion-content>
-</ion-view>
\ No newline at end of file
+</ion-view>