Monitor view now calls zmdc APIs and checks if monitor is running/not running/pending

6 files changed, 211 insertions, 191 deletions

diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js
index b06e024b..5175237d 100644
--- a/www/js/MonitorCtrl.js
+++ b/www/js/MonitorCtrl.js
@@ -1,4 +1,4 @@
-/* jshint -W041 */
+/* jshint -W041, -W083 */
 /* jslint browser: true*/
 /* global cordova,StatusBar,angular,console */
 
@@ -13,9 +13,6 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
 
     $scope.monitors = [];
 
-
-
-
     $scope.openMenu = function () {
         $ionicSideMenuDelegate.toggleLeft();
     };
@@ -30,117 +27,7 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
         });
     };
 
-    $scope.radialMenuOptions = {
-        content: '',
-
-        background: '#2F4F4F',
-        isOpen: false,
-        toggleOnClick: false,
-        button: {
-            cssClass: "fa  fa-arrows-alt",
-        },
-        items: [
-            {
-                content: '',
-                cssClass: 'fa fa-chevron-circle-up',
-                empty: false,
-                onclick: function () {
-                    controlPTZ($scope.monitorId, 'Down');
-                }
-    },
-
-            {
-                content: '',
-                cssClass: 'fa fa-chevron-circle-up',
-                empty: false,
-                onclick: function () {
-                    controlPTZ($scope.monitorId, 'DownLeft');
-                }
-    },
-
-            {
-                content: '',
-                cssClass: 'fa fa-chevron-circle-up',
-                empty: false,
-
-                onclick: function () {
-                    controlPTZ($scope.monitorId, 'Left');
-                }
-    },
-            {
-                content: 'D',
-                empty: true,
-
-                onclick: function () {
-                    console.log('About');
-                }
-    },
-
-            {
-                content: '',
-                cssClass: 'fa fa-chevron-circle-up',
-                empty: false,
-                onclick: function () {
-                    controlPTZ($scope.monitorId, 'UpLeft');
-                }
-    },
 
-            {
-                content: '',
-                cssClass: 'fa fa-chevron-circle-up',
-                empty: false,
-                onclick: function () {
-                    controlPTZ($scope.monitorId, 'Up');
-                }
-    },
-
-            {
-                content: '',
-                cssClass: 'fa fa-chevron-circle-up',
-                empty: false,
-                onclick: function () {
-                    controlPTZ($scope.monitorId, 'UpRight');
-                }
-    },
-
-            {
-                content: 'H',
-                empty: true,
-                onclick: function () {
-                    console.log('About');
-                }
-    },
-
-            {
-                content: '',
-                cssClass: 'fa fa-chevron-circle-up',
-                empty: false,
-                onclick: function () {
-                    controlPTZ($scope.monitorId, 'Right');
-                }
-    },
-
-
-            {
-                content: '',
-                cssClass: 'fa fa-chevron-circle-up',
-                empty: false,
-                onclick: function () {
-                    controlPTZ($scope.monitorId, 'DownRight');
-                }
-    },
-
-            {
-                content: 'K',
-                empty: true,
-                onclick: function () {
-                    console.log('About');
-                }
-    },
-
-
-  ]
-    };
 
 
     // This function takes care of changing function parameters
@@ -450,7 +337,8 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
 
         // console.log('Set-Cookie'+ header('Set-Cookie')); //
 
-
+        // FIXME: Put  in an interval and do this once every few
+        // minutes so it does not time out
         var req = $http({
             method: 'POST',
             /*timeout: 15000,*/
@@ -469,6 +357,12 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
                 return foo;
             },
 
+            // FIXME: Refer to
+            // zoneminder/skins/mobile/includes/control_functions.php
+            // for move commands
+            // logic - /zm/api/monitors/X.json, read ControlId = Y
+            // then zm/api/controls/Y.json
+
             data: {
                 view: "request",
                 request: "control",
@@ -505,14 +399,75 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
     console.log("***EVENTS: Waiting for Monitors to load before I proceed");
 
     $scope.monitors = message;
+    var loginData = ZMDataModel.getLogin();
+     monitorStateCheck();
 
+    function monitorStateCheck()
+    {
+        var apiMonCheck;
+
+        // The status is provided by zmdc.pl
+        // "not running", "pending", "running since", "Unable to connect"
+
+         for (var i = 0; i < $scope.monitors.length; i++) {
+            (function (j)
+            {
+                $scope.monitors[j].Monitor.isRunningText = "...";
+                $scope.monitors[j].Monitor.isRunning = "...";
+                $scope.monitors[j].Monitor.color = '#1E90FF';
+                $scope.monitors[j].Monitor.char = "ion-checkmark-circled";
+                apiMonCheck = loginData.apiurl + "/monitors/daemonStatus/id:" + $scope.monitors[j].Monitor.Id + "/daemon:zmc.json";
+                console.log ("**** ZMC CHECK " + apiMonCheck);
+                $http.get(apiMonCheck)
+                .success(function(data)
+                {
+                    if (data.statustext.indexOf("not running")>-1)
+                    {
+                        $scope.monitors[j].Monitor.isRunning = "false" ;
+                        $scope.monitors[j].Monitor.color = 'red';
+                        $scope.monitors[j].Monitor.char = "ion-close-circled";
+                    }
+                    else if (data.statustext.indexOf("pending")>-1)
+                    {
+                        $scope.monitors[j].Monitor.isRunning = "pending" ;
+                        $scope.monitors[j].Monitor.color = 'orange';
+                    }
+                    else if (data.statustext.indexOf("running since")>-1)
+                    {
+                        $scope.monitors[j].Monitor.isRunning = "true" ;
+                        $scope.monitors[j].Monitor.color = 'green';
+                    }
+
+                    else if (data.statustext.indexOf("Unable to connect")>-1)
+                    {
+                        $scope.monitors[j].Monitor.isRunning = "false" ;
+                        $scope.monitors[j].Monitor.color = 'red';
+                        $scope.monitors[j].Monitor.char = "ion-close-circled";
+                    }
+
+
+                    $scope.monitors[j].Monitor.isRunningText = data.statustext;
+                })
+                .error (function (data)
+                {
+                    $scope.monitors[j].Monitor.isRunning = "error";
+                    $scope.monitors[j].Monitor.color = '#800000';
+                     $scope.monitors[j].Monitor.char = "ion-help-circled";
+                });
+
+
+            })(i);
+         }
+    }
     $scope.doRefresh = function () {
         console.log("***Pull to Refresh");
         $scope.monitors = [];
 
         var refresh = ZMDataModel.getMonitors(1);
+
         refresh.then(function (data) {
             $scope.monitors = data;
+            monitorStateCheck();
             $scope.$broadcast('scroll.refreshComplete');
         });
 
diff --git a/www/js/app.js b/www/js/app.js
index dc50e41d..e8ac220e 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -12,6 +12,8 @@ angular.module('zmApp', [
 
 
 
+
+
 // this directive will be load any time an image completes loading 
 // via img tags where this directive is added (I am using this in
 // events and mionitor view to show a loader while the image is
@@ -31,6 +33,9 @@ angular.module('zmApp', [
     };
 })
 
+
+
+
 // In Android, HTTP requests seem to get stuck once in a while
 // It may be a crosswalk issue.
 // To tackle this gracefully, I've set up a global interceptor
@@ -61,6 +66,70 @@ angular.module('zmApp', [
     };
 })
 
+.factory('zmAutoLogin', function($interval, ZMDataModel, $http)  {
+    var zmAutoLoginHandle;
+    function doLogin()
+    {
+        console.log ("**** ZM AUTO LOGIN CALLED");
+        var loginData = ZMDataModel.getLogin();
+        $http({
+            method:'POST',
+            url:loginData.url + '/index.php',
+            headers:{
+                'Content-Type': 'application/x-www-form-urlencoded',
+               'Accept': 'application/json',
+            },
+            transformRequest: function (obj) {
+                var str = [];
+                for (var p in obj)
+                    str.push(encodeURIComponent(p) + "=" +
+                        encodeURIComponent(obj[p]));
+                var foo = str.join("&");
+                //console.log("****RETURNING " + foo);
+                return foo;
+            },
+
+            data: {
+                username:loginData.username,
+                password:loginData.password,
+                action:"login",
+                view:"console"
+            }
+        })
+        .success(function(data)
+        {
+            console.log ("**** ZM Login OK");
+        })
+        .error(function(error)
+        {
+            console.log ("**** ZM Login FAILED");
+        });
+    }
+
+    function start()
+    {
+        $interval.cancel(zmAutoLoginHandle);
+        doLogin();
+        zmAutoLoginHandle = $interval(function()
+        {
+            doLogin();
+
+        },5*60*1000); // Auto login every 5 minutes
+                      // PHP timeout is around 10 minutes
+                      // should be ok?
+    }
+    function stop()
+    {
+        $interval.cancel(zmAutoLoginHandle);
+
+    }
+
+    return {
+        start: start,
+        stop: stop
+    };
+})
+
 /* For future use - does not work with img src intercepts
 .factory ('httpAuthIntercept', function ($rootScope, $q)
 {
@@ -88,7 +157,8 @@ angular.module('zmApp', [
 */
 
 
-.run(function ($ionicPlatform, $ionicPopup, $rootScope, $state, ZMDataModel, $cordovaSplashscreen, $http) {
+
+.run(function ($ionicPlatform, $ionicPopup, $rootScope, $state, ZMDataModel, $cordovaSplashscreen, $http, $interval, zmAutoLogin) {
 
     ZMDataModel.init();
     var loginData = ZMDataModel.getLogin();
@@ -115,7 +185,7 @@ angular.module('zmApp', [
     $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
         var requireLogin = toState.data.requireLogin;
 
-        if (ZMDataModel.isLoggedIn() || ZMDataModel.isSimulated()) {
+        if (ZMDataModel.isLoggedIn()) {
             console.log("State transition is authorized");
             return;
         }
@@ -126,7 +196,7 @@ angular.module('zmApp', [
 
             $ionicPopup.alert({
                 title: "Credentials Required",
-                template: "Please provide your ZoneMinder credentials or switch to simulation mode"
+                template: "Please provide your ZoneMinder credentials"
             });
             // for whatever reason, .go was resulting in digest loops.
             // if you don't prevent, states will stack
@@ -165,9 +235,20 @@ angular.module('zmApp', [
             $state.go($state.current, {}, {
                 reload: true
             });
+            zmAutoLogin.start();
         }, false);
 
 
+        document.addEventListener("pause", function () {
+            console.log("****The application is going into  background");
+             zmAutoLogin.stop();
+
+        }, false);
+
+
+
+
+
         if (window.cordova && window.cordova.plugins.Keyboard) {
             cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
         }
@@ -183,45 +264,12 @@ angular.module('zmApp', [
     // lets POST so we get a session ID right hre
   //  var loginData = ZMDataModel.getLogin();
 
-    console.log ("*** INIT LOGIN ****");
-    $http({
-        method:'POST',
-        url:loginData.url + '/index.php',
-        headers:{
-            'Content-Type': 'application/x-www-form-urlencoded',
-           'Accept': 'application/json',
-        },
-        transformRequest: function (obj) {
-            var str = [];
-            for (var p in obj)
-                str.push(encodeURIComponent(p) + "=" +
-                    encodeURIComponent(obj[p]));
-            var foo = str.join("&");
-            console.log("****RETURNING " + foo);
-            return foo;
-        },
-
-        data: {
-            username:loginData.username,
-            password:loginData.password,
-            action:"login",
-            view:"console"
-        }
-    })
-    .success(function(data)
-    {
-        console.log ("**** INIT LOGIN OK");
-    })
-    .error(function(error)
-    {
-        console.log ("**** INIT LOGIN FAILED");
-    });
+    console.log ("Setting up POST LOGIN timer");
+    zmAutoLogin.start();
 
 
 
-
-
-})
+}) //run
 
 // My route map connecting menu options to their respective templates and controllers
 .config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index fcd0f8c9..221e0dc7 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -21,6 +21,10 @@
             </ion-scroll>
 
 
+        </div>
+    </ion-content>
+</ion-modal-view>
+
     <nav mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click">
         <button mfb-button icon="ion-close" label="exit event view" ng-click="closeModal()"></button>
 
@@ -41,6 +45,3 @@
 
         <a mfb-button icon="ion-play" label="play" ng-click="controlEventStream(eventCommands.play)"></a>
     </nav>
-        </div>
-    </ion-content>
-</ion-modal-view>
diff --git a/www/templates/help.html b/www/templates/help.html
index 55d22d9e..decdf47e 100644
--- a/www/templates/help.html
+++ b/www/templates/help.html
@@ -43,6 +43,16 @@
         should be reloaded.
         </ion-item>
 
+        <ion-item class="item-text-wrap">
+            <h2><b> What do all the colors in the Monitor view mean?</b></h2>
+        <i class="icon ion-checkmark-circled" style="color:#1E90FF"></i> Checking <br/>
+        <i class="icon ion-checkmark-circled" style="color:green"></i> All good <br/>
+        <i class="icon ion-close-circled" style="color:red"></i> Not running <br/>
+        <i class="icon ion-close-circled" style="color:orange"></i> Not running (pending) <br/>
+        <i class="icon ion-checkmark-circled" style="color:grey"></i> Disabled <br/>
+              <i class="icon ion-help-circled" style="color:#800000"></i> Unknown <br/>
+
+        </ion-item>
 
         <ion-item class="item-text-wrap">
             <h2><b>I want to contribute!</b></h2>
diff --git a/www/templates/monitors.html b/www/templates/monitors.html
index 6ef5d954..7b6b00b3 100644
--- a/www/templates/monitors.html
+++ b/www/templates/monitors.html
@@ -1,52 +1,58 @@
 <ion-view view-title="Monitors" cache="false">
-    
-     <ion-nav-buttons side="left">
-          <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
-        </ion-nav-buttons> 
-    
-    
+
+    <ion-nav-buttons side="left">
+        <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
+    </ion-nav-buttons>
+
+
     <ion-content>
-        <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher>
-        <div class="list card" ng-repeat="monitor in monitors">
-            <!-- <a href="#/app/events" ng-click="toggleLeft()"> -->
-            <div class="item" ng-style="{'background-color': monitor.Monitor.Enabled=='1'?'white':'white'}">
-                <div ng-if="monitor.Monitor.Enabled == '1'">
-                    <span class='item item-icon-left item-icon-right'>
+        <div ng-controller="ModalCtrl">
+            <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher>
+            <div class="list card" ng-repeat="monitor in monitors">
+                <!-- <a href="#/app/events" ng-click="toggleLeft()"> -->
+                <div class="item" ng-style="{'background-color': monitor.Monitor.Enabled=='1'?'white':'white'}">
+                    <div ng-if="monitor.Monitor.Enabled == '1'">
+                        <span class='item item-icon-left item-icon-right'>
                 <i class="icon ion-ios-monitor-outline"></i>
                  <b>{{monitor.Monitor.Name}}</b>
-                <i class="icon ion-checkmark-circled" style="color:green;"></i>
+
+
+                <i class="icon {{monitor.Monitor.char}}" style="color:{{monitor.Monitor.color}};"></i>
+
                 </span>
-                </div>
+                    </div>
 
 
-                <div ng-if="monitor.Monitor.Enabled != '1'">
-                    <span class='item item-icon-left item-icon-right'>
+                    <div ng-if="monitor.Monitor.Enabled != '1'">
+                        <span class='item item-icon-left item-icon-right'>
                     <i class="icon ion-ios-monitor-outline"></i>
                      <b>{{monitor.Monitor.Name}}</b>
-                    <i class="icon ion-checkmark-circled" style="color:grey;"></i>
+                    <i class="icon {{monitor.Monitor.char}}" style="color:grey;"></i>
                 </span>
 
-                </div>
+                    </div>
 
 
-                <p>Mode :{{monitor.Monitor.Function}}</br>
-                    <!-- Current State: {{monitor.STATE}}</br> 
+                    <p>Mode :{{monitor.Monitor.Function}}</br>
+                        <!-- Current State: {{monitor.STATE}}</br>
             Events: {{monitor.NUMEVENTS}}</br> -->
-                    Resolution: {{monitor.Monitor.Width}}*{{monitor.Monitor.Height}}</br>
-                    Max FPS: {{monitor.Monitor.MaxFPS}}
-                    <br/> Alarm Max FPS:{{monitor.Monitor.AlarmMaxFPS}}
-                    <br/> Alarm Frame Count: {{monitor.Monitor.AlarmFrameCount}}
-                    <br/>
-                </p>
-
-                <div style="float:right;">
-                    <a class="button button-small icon icon-left icon ion-gear-a" href="" ng-click="changeConfig(monitor.Monitor.Name, monitor.Monitor.Id,monitor.Monitor.Enabled,monitor.Monitor.Function);">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" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable)"  >Live View</a>
-                </div>
+                        Resolution: {{monitor.Monitor.Width}}*{{monitor.Monitor.Height}}</br>
+                        Max FPS: {{monitor.Monitor.MaxFPS}}
+                        <br/> Alarm Max FPS:{{monitor.Monitor.AlarmMaxFPS}}
+                        <br/> Alarm Frame Count: {{monitor.Monitor.AlarmFrameCount}}
+                        <br/> Status: {{monitor.Monitor.isRunningText}}
+                        <br/><br/>
+                    </p>
 
+                    <div style="float:right;">
+                        <a class="button button-small icon icon-left icon ion-gear-a" href="" ng-click="changeConfig(monitor.Monitor.Name, monitor.Monitor.Id,monitor.Monitor.Enabled,monitor.Monitor.Function);">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" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable)">Live View</a>
+                    </div>
+
+                </div>
             </div>
+            <!-- </a> -->
         </div>
-        <!-- </a> -->
     </ion-content>
 </ion-view>
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 3e3f940a..822212bc 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -36,7 +36,7 @@
 
             </span>
             <article class="main">
-                <img ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{randomval}}" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable)" on-hold="onHold($index)" on-release="onRelease($index)" />
+                <img ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{randomval}}" width="{{((devWidth-30)/(7-monitorSize[$index]))}}px;" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable)" on-hold="onHold($index)" on-release="onRelease($index)" />
             </article>
 
             <span ng-show="!minimal">