Added support to limit maximum monitors in Montage View and also added a portal alias - those who many not be using one can keep this empty

9 files changed, 83 insertions, 16 deletions

diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index aab1e643..a4f471ef 100644
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -13,9 +13,11 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
     var loginData = {
         'username': '',
         'password': '',
-        'url': '', // This is ZM portal API (Don't add /zm)
+        'url': '', // This is the ZM portal path
         'apiurl': '', // This is the API path
-        'simulationMode': false // if true, data will be simulated
+        'simulationMode': false, // if true, data will be simulated
+        'maxMontage':"10", //total # of monitors to display in montage
+        'alias':""
     };
 
     // This is really a test mode. This is how I am validating
@@ -137,6 +139,18 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
 
             }
 
+            if (window.localStorage.getItem("maxMontage") != undefined) {
+                loginData.maxMontage =
+                    window.localStorage.getItem("maxMontage");
+
+            }
+
+             if (window.localStorage.getItem("alias") != undefined) {
+                loginData.alias =
+                    window.localStorage.getItem("alias");
+
+            }
+
             monitorsLoaded = 0;
             console.log("Getting out of ZMDataModel init");
 
@@ -167,6 +181,25 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
             window.localStorage.setItem("url", loginData.url);
             window.localStorage.setItem("apiurl", loginData.apiurl);
             window.localStorage.setItem("simulationMode", loginData.simulationMode);
+            window.localStorage.setItem("alias",loginData.alias);
+
+
+
+            if (!loginData.maxMontage)
+            {
+                console.log ("INVALID MONTAGE NUM");
+                loginData.maxMontage="10";
+            }
+
+            if (parseInt(loginData.maxMontage)<=0)
+            {
+                console.log ("*** TOO LOW ***");
+                loginData.maxMontage=1;
+            }
+
+
+            window.localStorage.setItem("maxMontage", loginData.maxMontage);
+
             console.log("********** SIMULATION IS " + loginData.simulationMode);
 
         },
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index d49bc244..8b179016 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -42,7 +42,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
     $scope.$on('$ionicView.unloaded', function () {
         console.log("**VIEW ** Events Ctrl Unloaded");
         console.log("*** MODAL ** Destroying modal too");
-        $scope.modal.remove();
+        if (!($scope.modal===undefined)) {$scope.modal.remove()};
 
     });
 
@@ -130,10 +130,12 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
         // If I leave it as JSON, it gets converted to OPTONS due
         // to CORS behaviour and ZM/Apache don't seem to handle it
 
+        console.log ("POST: "+loginData.url +'/'+ loginData.alias+'/index.php');
+
         var req = $http({
             method: 'POST',
             /*timeout: 15000,*/
-            url: loginData.url + '/zm/index.php',
+            url: loginData.url +'/'+ loginData.alias+'/index.php',
             headers: {
                 'Content-Type': 'application/x-www-form-urlencoded',
                 //'Accept': '*/*',
@@ -210,14 +212,14 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
     // it on open
     $scope.closeModal = function () {
         console.log("Close & Destroy Modal");
-        $scope.modal.remove();
+        if (!($scope.modal===undefined)) {$scope.modal.remove()};
 
     };
     //Cleanup the modal when we're done with it
     // I Don't think it ever comes here
     $scope.$on('$destroy', function () {
         console.log("Destroy Modal");
-        $scope.modal.remove();
+        if (!($scope.modal===undefined)) {$scope.modal.remove()};
     });
 
     console.log("***CALLING EVENTS FACTORY");
diff --git a/www/js/EventsGraphsCtrl.js b/www/js/EventsGraphsCtrl.js
index 01701d88..5793ed10 100644
--- a/www/js/EventsGraphsCtrl.js
+++ b/www/js/EventsGraphsCtrl.js
@@ -68,8 +68,8 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', functio
         $scope.chartObject.type = "BarChart";
         $scope.chartObject.options = {
             title: chartTitle,
-
-            height: $rootScope.devHeight, // FIXME: I need to make this dynamic depending on
+            tooltip: {isHtml:true, trigger: 'both'},
+            height: $rootScope.devHeight,
             // # of bars
             legend: 'none',
             animation: {
diff --git a/www/js/LoginCtrl.js b/www/js/LoginCtrl.js
index e734fef2..3b79f7bf 100644
--- a/www/js/LoginCtrl.js
+++ b/www/js/LoginCtrl.js
@@ -1,4 +1,4 @@
-angular.module('zmApp.controllers').controller('zmApp.LoginCtrl', function ($scope, $rootScope, $ionicModal, ZMDataModel,$ionicSideMenuDelegate) {
+angular.module('zmApp.controllers').controller('zmApp.LoginCtrl', function ($scope, $rootScope, $ionicModal, ZMDataModel,$ionicSideMenuDelegate, $ionicPopup) {
 $scope.openMenu = function () {
     $ionicSideMenuDelegate.toggleLeft();
   }
@@ -10,9 +10,17 @@ $scope.openMenu = function () {
     // Perform the login action when the user submits the login form
     $scope.login = function () {
         console.log('Saving login');
+
+        if (parseInt($scope.loginData.maxMontage) >10)
+        {
+           $ionicPopup.alert({
+     title: 'Note',
+     template: 'You have selected to view more than 10 monitors in the Montage screen. Note that this is very resource intensive and may load the server or cause issues in the application. If you are not sure, please consider limiting this value to 10'
+   });
+        }
         ZMDataModel.setLogin($scope.loginData);
 
+    };
 
 
-    };
 })
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 57573c5e..c85011b0 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -73,8 +73,10 @@ function onPause() {
     }
 
 
-    console.log("********* Inside Montage Ctrl");
+
     $scope.LoginData = ZMDataModel.getLogin();
+    $scope.monLimit = $scope.LoginData.maxMontage;
+    console.log("********* Inside Montage Ctrl, MAX LIMIT="+$scope.monLimit);
 
     // slider is tied to the view slider for montage
     //Remember not to use a variable. I'm using an object
diff --git a/www/js/app.js b/www/js/app.js
index 8c207d35..0d3024f3 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -98,9 +98,10 @@ angular.module('zmApp', [
         // generates and error in desktops but works fine
         console.log("**** DEVICE READY ***");
 
+
         setTimeout(function () {
             $cordovaSplashscreen.hide()
-        }, 3000)
+            }, 3000)
 
         var pixelRatio = window.devicePixelRatio || 1;
         $rootScope.devWidth = ((window.innerWidth > 0) ? window.innerWidth : screen.width);
diff --git a/www/templates/help.html b/www/templates/help.html
index b11506ec..0720bac7 100644
--- a/www/templates/help.html
+++ b/www/templates/help.html
@@ -25,6 +25,12 @@
 
 
         <ion-item>
+            <h2> <b>I do not have authentication enabled but the app keeps asking me to specify authentication</b></h2>
+        If you don't use ZM authentication, just enter an "x" in both user name and password.
+        </ion-item>
+
+
+        <ion-item>
             <h2><b> The data is not refreshing!</b></h2>
         Most screens that show lists of data has a pull down action. Pull down to refresh and your data
         should be reloaded.
diff --git a/www/templates/login.html b/www/templates/login.html
index 0e302c9e..bf5170d1 100644
--- a/www/templates/login.html
+++ b/www/templates/login.html
@@ -7,6 +7,7 @@
 
     <ion-content class="padding">
         <div class="list list-inset">
+            <span style="color:rgb(100,100,100)"> <i class="ion-android-home" style="font-size:150%"></i> ZoneMinder portal</span>
             <label class="item item-input">
                 <input autocapitalize="none" type="text" placeholder="Username" ng-model="loginData.username">
             </label>
@@ -14,15 +15,29 @@
                 <input type="password" placeholder="Password" ng-model="loginData.password">
             </label>
             <label class="item item-input">
-                <input autocapitalize="none" type="text" placeholder="ZM base URL (please don't add /zm)" ng-model="loginData.url">
+                <input autocapitalize="none" type="text" placeholder="ZM base URL " ng-model="loginData.url">
             </label>
+
+            <label class="item item-input">
+                <input autocapitalize="none" type="text" placeholder="ZM portal alias (if any) " ng-model="loginData.alias">
+            </label>
+
+            <span style="color:rgb(100,100,100)"><br/><i class="ion-social-angular" style="font-size:150%"></i> ZoneMinder API</span>
             <label class="item item-input">
                 <input autocapitalize="none" type="text" placeholder="API base URL" ng-model="loginData.apiurl">
             </label>
         </div>
-
+        <span style="color:rgb(100,100,100)"><i class="ion-android-settings" style="font-size:150%"></i> Developer Options</span>
          <ion-toggle ng-model="loginData.simulationMode" ng-checked={{loginData.simulationMode}} toggle-class="toggle-energized">Simulation Mode</ion-toggle>
+       <div class="item item-input-inset">
+           Maximum Monitors in Montage View&nbsp;
+    <label class="item-input-wrapper">
+      <input type="tel" placeholder="be careful" ng-model="loginData.maxMontage">
+    </label>
+
+
 
+  </div>
         <button class="button button-block button-balanced icon ion-locked" ng-click="login()"> Save</button>
 
 
diff --git a/www/templates/montage.html b/www/templates/montage.html
index d8c6ac53..2cbe9fa9 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -16,8 +16,8 @@
         </div>
         <!-- Hi:{{slider.monsize}} {{devWidth}} -->
         <div class="wrapper">
-
-            <span ng-repeat="monitor in monitors">
+{{monLimit}}
+            <span ng-repeat="monitor in monitors| limitTo: monLimit">
            
           
            <header class="header">&nbsp;<i class="ion-monitor"></i> {{monitor.Monitor.Name}}&nbsp;</header>