diff options
Diffstat (limited to 'www/js')
| -rw-r--r-- | www/js/DataModel.js | 167 | ||||
| -rw-r--r-- | www/js/EventCtrl.js | 18 | ||||
| -rw-r--r-- | www/js/EventsGraphsCtrl.js | 125 | ||||
| -rw-r--r-- | www/js/HttpFactory.js | 4 | ||||
| -rw-r--r-- | www/js/MonitorCtrl.js | 4 | ||||
| -rw-r--r-- | www/js/MontageCtrl.js | 23 | ||||
| -rw-r--r-- | www/js/app.js | 112 |
7 files changed, 245 insertions, 208 deletions
diff --git a/www/js/DataModel.js b/www/js/DataModel.js index cd5e411f..3935de06 100644 --- a/www/js/DataModel.js +++ b/www/js/DataModel.js @@ -1,56 +1,67 @@ +// This is my central data respository and common functions +// that many other controllers use +// It's grown over time. I guess I may have to split this into multiple services in the future + angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ionicLoading', function ($http, $q, $ionicLoading) { // var deferred=''; var monitorsLoaded = 0; var simulationMode = 0; // make 1 for simulation - var simSize = 30; + var simSize = 30; // how many monitors to simulate var montageSize = 3; var monitors = []; var oldevents = []; var loginData = { 'username': '', 'password': '', - 'url': '', - 'apiurl': '' + 'url': '', // This is ZM portal API (Don't add /zm) + 'apiurl': '' // This is the API path + }; + + // This is really a test mode. This is how I am validating + // how my app behaves if you have many monitors. If you set simulationMode above to 1 + // then this is the function that getMonitors and getEvents (not yet) calls + + var simulation = { + fillSimulatedMonitors: function (cnt) { + var simmonitors = []; + console.log("*** Returning " + cnt + " simulated monitors"); + for (var i = 0; i < cnt; i++) { + + + simmonitors.push({ + "Monitor": { + // Obviously this is dummy data + "Id": i.toString(), + "Name": "Monitor Simulation " + i.toString(), + "Type": "Remote", + "Function": "Modect", + "Enabled": "1", + "Width": "1280", + "Height": "960", + "Colours": "4", + "MaxFPS": "10.00", + "AlarmMaxFPS": "10.00", + "AlarmFrameCount": "10.00" + } + }); + + } + // console.log ("Simulated: "+JSON.stringify(simmonitors)); + return simmonitors; + }, }; - //greeas - - var simulation = - { - fillSimulatedMonitors: function(cnt) - { - var simmonitors = []; - console.log ("*** Returning "+cnt+" simulated monitors"); - for (var i=0; i < cnt; i++) - { - - - simmonitors.push( - { - "Monitor": - { - "Id":i.toString(), - "Name":"Monitor Simulation "+i.toString(), - "Type":"Remote", - "Function":"Modect", - "Enabled":"1", - "Width":"1280", - "Height":"960", - "Colours":"4", - "MaxFPS":"10.00", - "AlarmMaxFPS":"10.00", - "AlarmFrameCount":"10.00" - } - } - ); - - } - console.log ("Simulated: "+JSON.stringify(simmonitors)); - return simmonitors; - }, - }; return { + // This function is called when the app is ready to run + // sets up various variables + // including persistent login data for the ZM apis and portal + // The reason I need both is because as of today, there is no way + // to access images using the API and they are authenticated via + // the ZM portal authentication, which is pretty messy. But unless + // the ZM authors fix this and streamline the access of images + // from APIs, I don't have an option + init: function () { console.log("****** DATAMODEL INIT SERVICE CALLED ********"); var montageSize = 2; @@ -71,7 +82,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion window.localStorage.getItem("url"); } - + if (window.localStorage.getItem("apiurl") != undefined) { loginData.apiurl = window.localStorage.getItem("apiurl"); @@ -82,9 +93,9 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion console.log("Getting out of ZMDataModel init"); }, - - - + + + getLogin: function () { return loginData; }, @@ -97,17 +108,26 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion }, + // This function returns a list of monitors + // if forceReload == 1 then it will force an HTTP API request to get a list of monitors + // if 0. then it will return back the previously loaded monitor list if one exists, else + // will issue a new HTTP API to get it + + // I've wrapped this function in my own promise even though http returns a promise. This is because + // depending on forceReload and simulation mode, http may or may not be called. So I'm promisifying + // the non http stuff too to keep it consistent to the calling function. + getMonitors: function (forceReload) { console.log("** Inside ZMData getMonitors with forceReload=" + forceReload); var d = $q.defer(); - if (((monitorsLoaded == 0) || (forceReload == 1)) && (simulationMode !=1) ) // monitors are empty or force reload + if (((monitorsLoaded == 0) || (forceReload == 1)) && (simulationMode != 1)) // monitors are empty or force reload { - console.log("ZMDataModel: Invoking HTTP Factory to load monitors"); + console.log("ZMDataModel: Invoking HTTP get to load monitors"); var apiurl = loginData.apiurl; var myurl = apiurl + "/monitors.json"; $http.get(myurl) .success(function (data) { - console.log ("HTTP success got " + JSON.stringify(data.monitors)); + console.log("HTTP success got " + JSON.stringify(data.monitors)); monitors = data.monitors; console.log("promise resolved inside HTTP success"); monitorsLoaded = 1; @@ -115,6 +135,8 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion }) .error(function (err) { console.log("HTTP Error " + err); + // To keep it simple for now, I'm translating an error + // to imply no monitors could be loaded. FIXME: conver to proper error monitors = []; console.log("promise resolved inside HTTP fail"); d.resolve(monitors); @@ -123,8 +145,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion } else // monitors are loaded { - if (simulationMode == 1) - { + if (simulationMode == 1) { monitors = simulation.fillSimulatedMonitors(simSize); //fillSimulatedMonitors } @@ -138,14 +159,18 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion console.log("ZMData setMonitors called with " + mon.length + " monitors"); monitors = mon; }, - - getAllPreexistingEvents: function() - { - console.log ("returning "+oldevents.length+" preexisting events"); + // Not sure if I am using this anymore. I was using this for graphs, but I + // don't think I am now + getAllPreexistingEvents: function () { + console.log("returning " + oldevents.length + " preexisting events"); return oldevents; }, - - + + // This function returns events for specific monitor or all monitors + // You get here by tapping on events in the monitor screen or from + // the menu events option + // monitorId == 0 means all monitors (ZM starts from 1) + getEvents: function (monitorId) { $ionicLoading.show({ @@ -156,18 +181,20 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion showDelay: 0 }); - console.log("ZMData getEvents called with ID="+monitorId); + console.log("ZMData getEvents called with ID=" + monitorId); var d = $q.defer(); var myevents = []; var apiurl = loginData.apiurl; - var myurl = (monitorId == 0) ? apiurl + "/events.json" : apiurl + "/events/index/MonitorId:"+monitorId+".json"; - console.log ("Constructed URL is " + myurl); + var myurl = (monitorId == 0) ? apiurl + "/events.json" : apiurl + "/events/index/MonitorId:" + monitorId + ".json"; + console.log("Constructed URL is " + myurl); + // FIXME: When retrieving lots of events, I really need to do pagination here - more complex + // as I have to do that in list scrolling too. For now, I hope your events don't kill the phone + // memory $http.get(myurl) .success(function (data) { $ionicLoading.hide(); myevents = data.events.reverse(); - if (monitorId == 0) - { + if (monitorId == 0) { oldevents = myevents; } //console.log (JSON.stringify(data)); @@ -180,11 +207,11 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion $ionicLoading.hide(); console.log("HTTP Events error " + err); d.resolve(myevents); - if (monitorId ==0) - { + if (monitorId == 0) { + // FIXME: make this into a proper error oldevents = []; } - return d.promise; + return d.promise; }) return d.promise; @@ -211,15 +238,11 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion monitorsLoaded = loaded; }, + // Given a monitor Id it returns the monitor name + // FIXME: Can I do a better job with associative arrays? getMonitorName: function (id) { var idnum = parseInt(id); - // console.log ("I have " + monitors.length + " monitors to match"); - - //console.log (JSON.stringify(monitors)); for (var i = 0; i < monitors.length; i++) { - // console.log ("Searching for:"+idnum+"& got:"+monitors[i].Monitor.Id); - //console.log ("Searching for monitors id:"+monitors[i].Mo - // console.log ("Iteration #"+i+" " +monitors[i].Monitor.Id + " " + monitors[i].Monitor.Name); if (parseInt(monitors[i].Monitor.Id) == idnum) { // console.log ("Matched, exiting getMonitorname"); return monitors[i].Monitor.Name; @@ -228,8 +251,8 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion } return "(Unknown)"; }, - - - + + + }; -}]);
\ No newline at end of file +}]); diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index 8c0ea8ba..69fd0222 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -1,3 +1,7 @@ +// This is the controller for Event view. StateParams is if I recall the monitor ID. +// 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) { console.log("I got STATE PARAM " + $stateParams.id); $scope.id = parseInt($stateParams.id,10); @@ -20,13 +24,10 @@ $scope.openMenu = function () { myevents[i].Event.MonitorName = ZMDataModel.getMonitorName(myevents[i].Event.MonitorId); } - //for (var i = 0; i< myevents.length; i++) - // { - // console.log ("I got Name as " + myevents[i].Event.MonitorName); - // } + $scope.events = myevents; }); - //ZMDataModel.getEvents(); + $scope.doRefresh = function () { @@ -42,13 +43,10 @@ $scope.openMenu = function () { myevents[i].Event.MonitorName = ZMDataModel.getMonitorName(myevents[i].Event.MonitorId); } - //for (var i = 0; i< myevents.length; i++) - // { - // console.log ("I got Name as " + myevents[i].Event.MonitorName); - // } + $scope.events = myevents; $scope.$broadcast('scroll.refreshComplete'); }); }; //dorefresh -});
\ No newline at end of file +}); diff --git a/www/js/EventsGraphsCtrl.js b/www/js/EventsGraphsCtrl.js index 9dbf3efb..92cd525e 100644 --- a/www/js/EventsGraphsCtrl.js +++ b/www/js/EventsGraphsCtrl.js @@ -1,10 +1,14 @@ +// This controller generates a graph for events +// the main function is generateChart. I call generate chart with required parameters +// from the template file + angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', function ($ionicPlatform, $scope, ZMDataModel, $ionicSideMenuDelegate, $rootScope, $http) { - console.log("Inside Graphs controller"); + console.log("Inside Graphs controller"); $scope.openMenu = function () { $ionicSideMenuDelegate.toggleLeft(); } - $scope.navTitle = 'Tab Page'; + $scope.navTitle = 'Tab Page'; $scope.leftButtons = [{ type: 'button-icon icon ion-navicon', tap: function (e) { @@ -12,80 +16,81 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', functio } }]; - $scope.generateChart = function(chartTitle) - { - //alert ("Well I got called!"); - $scope.chartObject = {}; //test - $scope.chartObject.data = [ + $scope.generateChart = function (chartTitle) { + + $scope.chartObject = {}; + $scope.chartObject.data = [ ['Monitor', 'Events', { - role: 'style' + role: 'style' }, { - role: 'annotation' + role: 'annotation' }], ['', 0, '', ''] // needed to get rid of the initial error of charts + // FIXME: does it really work? I noticed the red warning + // coming up on the device ]; - $scope.chartObject.type = "BarChart"; - $scope.chartObject.options = { - title: chartTitle, - height: $rootScope.devHeight, - animation: { - duration: 700, - easing: 'out', - startup: 'false', - }, + $scope.chartObject.type = "BarChart"; + $scope.chartObject.options = { + title: chartTitle, + height: $rootScope.devHeight, // FIXME: I need to make this dynamic depending on + // # of bars + legend: 'none', + animation: { + duration: 700, + easing: 'out', + startup: 'false', + }, - } - - var monitors = []; - console.log("*** Grabbing lists of events and monitors "); - ZMDataModel.getMonitors(0).then(function (data) { + } - monitors = data; + var monitors = []; var loginData = ZMDataModel.getLogin(); - //var events = ZMDataModel.getAllPreexistingEvents(); - // lets get the event count for all - for (var i = 0; i < monitors.length; i++) { - (function (j) { - //monevents[monitors[j].Monitor.Id].monName = monitors[j].Monitor.Name; - - var url = loginData.apiurl + - "/events/index/MonitorId:" + monitors[j].Monitor.Id + - ".json?page=1"; - console.log("Monitor event URL:" + url); - $http.get(url) - .success(function (data) { - console.log("**** EVENT COUNT FOR MONITOR " + - monitors[j].Monitor.Id + " IS " + data.pagination.count); - - console.log("Pushing " + monitors[j].Monitor.Name + - " AND " + data.pagination.count); - - $scope.chartObject.data.push - ([monitors[j].Monitor.Name, data.pagination.count, - 'opacity: 0.4', data.pagination.count]); - - }) - .error(function (data) { - console.log("**** EVENT COUNT FOR MONITOR " + - monitors[i].Monitor.Id + " IS ERROR "); - $scope.chartObject.data.push([monitors[j].Monitor.Name, + console.log("*** Grabbing lists of events and monitors "); + ZMDataModel.getMonitors(0).then(function (data) { + + monitors = data; + + for (var i = 0; i < monitors.length; i++) { + (function (j) { // loop closure - http is async, so success returns after i goes out of scope + // so we need to bind j to i when http returns so its not out of scope. Gak. + // I much prefer the old days of passing context data from request to response + + var url = loginData.apiurl + + "/events/index/MonitorId:" + monitors[j].Monitor.Id + // FIXME: need to add hr/week + ".json?page=1"; + console.log("Monitor event URL:" + url); + $http.get(url) + .success(function (data) { + console.log("**** EVENT COUNT FOR MONITOR " + + monitors[j].Monitor.Id + " IS " + data.pagination.count); + + console.log("Pushing " + monitors[j].Monitor.Name + + " AND " + data.pagination.count); + + $scope.chartObject.data.push([monitors[j].Monitor.Name, data.pagination.count, + 'opacity: 0.4', data.pagination.count]); + + }) + .error(function (data) { + // ideally I should be treating it as an error + // but what I am really doing now is treating it like no events + // works but TBD: make this into a proper error handler + console.log("**** EVENT COUNT FOR MONITOR " + + monitors[i].Monitor.Id + " IS ERROR "); + $scope.chartObject.data.push([monitors[j].Monitor.Name, 0, 'opacity: 0.4', 0]); - - }); - })(i); // j - - } //for - - }); - - }; // scope function + }); + })(i); // j + } //for + }); + }; // scope function }); diff --git a/www/js/HttpFactory.js b/www/js/HttpFactory.js index c11daba1..b869e809 100644 --- a/www/js/HttpFactory.js +++ b/www/js/HttpFactory.js @@ -1,3 +1,5 @@ +// NOT USED ANYMORE. FIXME: DELETE THIS FILE + angular.module('zmApp.controllers').factory('ZMHttpFactory', ['$http', '$rootScope','$ionicLoading', '$ionicPopup','$timeout' function($http, $rootScope, $ionicLoading, $ionicPopup, $timeout) { @@ -91,4 +93,4 @@ angular.module('zmApp.controllers').factory('ZMHttpFactory', ['$http', '$rootSco }, //getEvents } } -]);
\ No newline at end of file +]); diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js index 300f5538..2db85aa5 100644 --- a/www/js/MonitorCtrl.js +++ b/www/js/MonitorCtrl.js @@ -1,3 +1,5 @@ +// controller for Monitor View + angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', function ($scope, ZMDataModel, message,$ionicSideMenuDelegate) { $scope.monitors = []; @@ -25,4 +27,4 @@ $scope.openMenu = function () { }; -});
\ No newline at end of file +}); diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js index 115bd513..8a189dfb 100644 --- a/www/js/MontageCtrl.js +++ b/www/js/MontageCtrl.js @@ -1,3 +1,5 @@ +// Controller for the montage view + angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', function ($scope, $rootScope, ZMDataModel, message,$ionicSideMenuDelegate) { @@ -8,24 +10,26 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', function ($s //var monsize =3; console.log("********* Inside Montage Ctrl"); $scope.LoginData = ZMDataModel.getLogin(); + + // slider is tied to the view slider for montage + //Remember not to use a variable. I'm using an object + // so it's passed as a reference - otherwise it makes + // a copy and the value never changes $scope.slider = {}; $scope.slider.monsize = ZMDataModel.getMontageSize(); $scope.$on('$ionicView.afterEnter', function () { + // This rand is really used to reload the monitor image in img-src so it is not cached + // I am making sure the image in montage view is always fresh $rootScope.rand = Math.floor((Math.random() * 100000) + 1); - //console.log("*********IN VIEW, generated " + $rootScope.rand); - console.log("Rootscoxxpe Montage is " + ZMDataModel.getMontageSize() + " and slider montage is " + $scope.slider.monsize); }); - - - $scope.$watch('slider.monsize', function () { console.log('Slider has changed'); ZMDataModel.setMontageSize($scope.slider.monsize); console.log("Rootscope Montage is " + ZMDataModel.getMontageSize() + " and slider montage is " + $scope.slider.monsize); - //$rootScope.montageSize = $scope.slider.monsize; + }); $scope.monitors = []; @@ -33,11 +37,6 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', function ($s $scope.monitors = message; console.log("I have received the monitors inside Montage and there are " + $scope.monitors.length); - // console.log("***CALLING FACTORY"); - //ZMHttpFactory.getMonitors().then(function(data) //{ - // $scope.monitors = data; - // console.log("I GOT " + $scope.monitors); - // }); $scope.doRefresh = function () { console.log("***Pull to Refresh"); @@ -50,4 +49,4 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', function ($s }); }; -});
\ No newline at end of file +}); diff --git a/www/js/app.js b/www/js/app.js index a5f58a6b..d6d1012b 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -1,4 +1,3 @@ - // core app start stuff angular.module('zmApp', [ 'ionic', @@ -17,14 +16,20 @@ angular.module('zmApp', [ } - window.onorientationchange = function() { - console.log ("**ORIENTATION CHANGE**"); + // This routine is called whenever the orientation changes + // so I can recompute my width and height. I use them + // for scoping graphs as well as figuring out how many thumbnails + // to show for montages + window.onorientationchange = function () { + console.log("**ORIENTATION CHANGE**"); var pixelRatio = window.devicePixelRatio || 1; $rootScope.devWidth = ((window.innerWidth > 0) ? window.innerWidth : screen.width); $rootScope.devHeight = ((window.innerHeight > 0) ? window.innerHeight : screen.height); - console.log("********Computed Dev Width & Height as" + $rootScope.devWidth+"*"+$rootScope.devHeight); + console.log("********Computed Dev Width & Height as" + $rootScope.devWidth + "*" + $rootScope.devHeight); } - + + // This is a skeleton for now. Eventually I am going to prohibit + // certain views to load unless you've logged in $rootScope.$on('$stateChangeStart', function (event, toState, toParams) { // console.log ("***** STATE CHANGE CHECK ****"); var requireLogin = toState.data.requireLogin; @@ -43,9 +48,14 @@ angular.module('zmApp', [ var pixelRatio = window.devicePixelRatio || 1; $rootScope.devWidth = ((window.innerWidth > 0) ? window.innerWidth : screen.width); $rootScope.devHeight = ((window.innerHeight > 0) ? window.innerHeight : screen.height); - - console.log("********Computed Dev Width & Height as" + $rootScope.devWidth+"*"+$rootScope.devHeight); + console.log("********Computed Dev Width & Height as" + $rootScope.devWidth + "*" + $rootScope.devHeight); + + // What I noticed is when I moved the app to the device + // the montage screens were not redrawn after resuming from background mode + // Everything was fine if I switched back to the montage screen + // so as a global hack I'm just reloading the current state if you switch + // from foreground to background and back document.addEventListener("resume", function () { console.log("****The application is resuming from the background"); $rootScope.rand = Math.floor((Math.random() * 100000) + 1); @@ -68,13 +78,13 @@ angular.module('zmApp', [ }); }) - +// My route map connecting menu options to their respective templates and controllers .config(function ($stateProvider, $urlRouterProvider) { $stateProvider - /*.state('app', { + /*.state('app', { data: { requireLogin: false }, @@ -86,15 +96,15 @@ angular.module('zmApp', [ })*/ - .state('login', { + .state('login', { data: { requireLogin: false }, url: "/login", templateUrl: "templates/login.html", controller: 'zmApp.LoginCtrl', - - + + }) .state('monitors', { @@ -112,56 +122,54 @@ angular.module('zmApp', [ controller: 'zmApp.MonitorCtrl', }) - - - + .state('events', { - data: { - requireLogin: false - }, - resolve: { - message: function (ZMDataModel) { - console.log("Inside app.events resolve"); - return ZMDataModel.getMonitors(0); - } - }, - url: "/events/:id", - templateUrl: "templates/events.html", - controller: 'zmApp.EventCtrl', - - }) - -//n + data: { + requireLogin: false + }, + resolve: { + message: function (ZMDataModel) { + console.log("Inside app.events resolve"); + return ZMDataModel.getMonitors(0); + } + }, + url: "/events/:id", + templateUrl: "templates/events.html", + controller: 'zmApp.EventCtrl', + + }) + + //n .state('events-graphs', { - data: { - requireLogin: false - }, - url: "/events-graphs", - templateUrl: "templates/events-graphs.html", - controller: 'zmApp.EventsGraphsCtrl', - }) - - + data: { + requireLogin: false + }, + url: "/events-graphs", + templateUrl: "templates/events-graphs.html", + controller: 'zmApp.EventsGraphsCtrl', + }) + + .state('montage', { data: { requireLogin: false - }, - resolve: { - message: function (ZMDataModel) { - console.log("Inside app.montage resolve"); - return ZMDataModel.getMonitors(0); - } - }, - url: "/montage", - templateUrl: "templates/montage.html", - controller: 'zmApp.MontageCtrl', + }, + resolve: { + message: function (ZMDataModel) { + console.log("Inside app.montage resolve"); + return ZMDataModel.getMonitors(0); + } + }, + url: "/montage", + templateUrl: "templates/montage.html", + controller: 'zmApp.MontageCtrl', -}); + }); // if none of the above states are matched, use this as the fallback var defaultState = "/monitors"; //var defaultState = "/app/montage"; $urlRouterProvider.otherwise(defaultState); -});
\ No newline at end of file +}); |