diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/js/DataModel.js | 65 | ||||
| -rw-r--r-- | www/js/EventCtrl.js | 112 | ||||
| -rw-r--r-- | www/templates/events.html | 4 |
3 files changed, 129 insertions, 52 deletions
diff --git a/www/js/DataModel.js b/www/js/DataModel.js index d30c76a0..59802ca3 100644 --- a/www/js/DataModel.js +++ b/www/js/DataModel.js @@ -21,8 +21,8 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion 'url': '', // This is the ZM portal path 'apiurl': '', // This is the API path 'simulationMode': false, // if true, data will be simulated - 'maxMontage':"10", //total # of monitors to display in montage - 'streamingurl':"" + 'maxMontage': "10", //total # of monitors to display in montage + 'streamingurl': "" }; // This is really a test mode. This is how I am validating @@ -150,10 +150,10 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion } - if (window.localStorage.getItem("streamingurl") != undefined) { + if (window.localStorage.getItem("streamingurl") != undefined) { loginData.streamingurl = window.localStorage.getItem("streamingurl"); - console.log ("STREAMING URL " + loginData.streamingurl); + console.log("STREAMING URL " + loginData.streamingurl); } @@ -187,20 +187,18 @@ 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("streamingurl",loginData.streamingurl); + window.localStorage.setItem("streamingurl", loginData.streamingurl); - if (!loginData.maxMontage) - { - console.log ("INVALID MONTAGE NUM"); - loginData.maxMontage="10"; + if (!loginData.maxMontage) { + console.log("INVALID MONTAGE NUM"); + loginData.maxMontage = "10"; } - if (parseInt(loginData.maxMontage)<=0) - { - console.log ("*** TOO LOW ***"); - loginData.maxMontage=1; + if (parseInt(loginData.maxMontage) <= 0) { + console.log("*** TOO LOW ***"); + loginData.maxMontage = 1; } @@ -279,6 +277,33 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion return oldevents; }, + // When I display events in the event controller, this is the first function I call + // This returns the total number of pages + // I then proceed to display pages in reverse order to display the latest events first + // I also reverse sort them in ZMDataModel to sort by date + // All this effort because the ZM APIs return events in sorted order, oldest first. Yeesh. + + getEventsPages: function (monitorId) { + console.log("********** INSIDE EVENTS PAGES "); + var apiurl = loginData.apiurl; + var myurl = (monitorId == 0) ? apiurl + "/events.json?page=1" : apiurl + "/events/index/MonitorId:" + monitorId + ".json?page=1"; + var d = $q.defer(); + $http.get(myurl) + .success(function (data) { + //console.log ("**** EVENTS PAGES I GOT "+JSON.stringify(data)); + //console.log("**** PAGE COUNT IS " + data.pagination.pageCount); + d.resolve(data.pagination); + return d.promise; + }) + .error(function (error) { + console.log("*** ERROR GETTING TOTAL PAGES ***"); + d.reject(error); + return d.promise; + }); + return d.promise; + + }, + // 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 @@ -301,19 +326,13 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion var myevents = []; var apiurl = loginData.apiurl; - // FIXME: THIS IS JUST FETCHING PAGE 1 !! - // looks like I have more work to do here - var myurl = (monitorId == 0) ? apiurl + "/events.json" : apiurl + "/events/index/MonitorId:" + monitorId + ".json"; if (pageId) { - myurl = myurl + "?page=" + pageId; + myurl = myurl + "?page=" + pageId; } else { console.log("**** PAGE WAS " + pageId); } 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 if (loginData.simulationMode == true) { console.log("Events will be simulated"); @@ -326,13 +345,13 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion $http.get(myurl /*,{timeout:15000}*/ ) .success(function (data) { $ionicLoading.hide(); - myevents = data.events; - //myevents = data.events.reverse(); + //myevents = data.events; + myevents = data.events.reverse(); if (monitorId == 0) { oldevents = myevents; } //console.log (JSON.stringify(data)); - console.log("Returning " + myevents.length + "events"); + console.log("DataModel Returning " + myevents.length + "events for page"+pageId); d.resolve(myevents); return d.promise; diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index ab25c0a7..7422b03a 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -46,7 +46,9 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo $scope.$on('$ionicView.unloaded', function () { console.log("**VIEW ** Events Ctrl Unloaded"); console.log("*** MODAL ** Destroying modal too"); - if ($scope.modal!==undefined) {$scope.modal.remove();} + if ($scope.modal !== undefined) { + $scope.modal.remove(); + } }); @@ -65,6 +67,16 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo var eventsPage = 1; var moreEvents = true; + $scope.viewTitle = { + title: "" + }; + + // for some reason inifinite scroll is invoked + // before I actually load the first page with page count + // this makes scrolling stop as eventsPage is still 0 + // FIXME: This is a hack + + var pageLoaded = false; // When loading images, it sometimes takes time - the images can be quite // large. What practically was happening was you'd see a blank screen for a few @@ -134,12 +146,12 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo // 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 +'/index.php'); + console.log("POST: " + loginData.url + '/index.php'); var req = $http({ method: 'POST', /*timeout: 15000,*/ - url: loginData.url +'/index.php', + url: loginData.url + '/index.php', headers: { 'Content-Type': 'application/x-www-form-urlencoded', //'Accept': '*/*', @@ -217,14 +229,18 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo // it on open $scope.closeModal = function () { console.log("Close & Destroy Modal"); - if ($scope.modal!==undefined) {$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"); - if ($scope.modal!==undefined) {$scope.modal.remove();} + if ($scope.modal !== undefined) { + $scope.modal.remove(); + } }); console.log("***CALLING EVENTS FACTORY"); @@ -234,47 +250,79 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo // I am converting monitor ID to monitor Name // so I can display it along with Events // Is there a better way? - console.log("Calling --> EventsPage = " + eventsPage); - //$scope.events = + $scope.events = []; - ZMDataModel.getEvents($scope.id, eventsPage) + + // First get total pages and then + // start from the latest. If this fails, nothing displays + // FIXME: clean up error handling + + ZMDataModel.getEventsPages($scope.id) .then(function (data) { - console.log("EventCtrl Got events"); - //var events = []; - var myevents = data; - for (var i = 0; i < myevents.length; i++) { + eventsPage = data.pageCount; + console.log("TOTAL EVENT PAGES IS " + eventsPage); + pageLoaded = true; + $scope.viewTitle.title = data.count; + ZMDataModel.getEvents($scope.id, eventsPage) - myevents[i].Event.MonitorName = ZMDataModel.getMonitorName(myevents[i].Event.MonitorId); - } + .then(function (data) { + console.log("EventCtrl Got events"); + //var events = []; + var myevents = data; + for (var i = 0; i < myevents.length; i++) { + + myevents[i].Event.MonitorName = ZMDataModel.getMonitorName(myevents[i].Event.MonitorId); + } - $scope.events = myevents; + $scope.events = myevents; + }); + }); + + + $scope.moreDataCanBeLoaded = function () { return moreEvents; }; $scope.loadMore = function () { + + // the events API does not return an error for anything + // except greater page limits than reported + console.log("***** LOADING MORE INFINITE SCROLL ****"); - eventsPage++; - $scope.$broadcast('scroll.infiniteScrollComplete'); + eventsPage--; + if ((eventsPage <= 0) && (pageLoaded)) { + moreEvents = false; + console.log("*** At Page " + eventsPage + ", not proceeding"); + return; + } + + + ZMDataModel.getEvents($scope.id, eventsPage) .then(function (data) { - console.log("Got new page of events"); + console.log("Got new page of events with Page=" + eventsPage); var myevents = data; for (var i = 0; i < myevents.length; i++) { myevents[i].Event.MonitorName = ZMDataModel.getMonitorName(myevents[i].Event.MonitorId); } $scope.events = $scope.events.concat(myevents); + console.log("Got new page of events"); + + $scope.$broadcast('scroll.infiniteScrollComplete'); }, function (error) { console.log("*** No More Events to Load, Stop Infinite Scroll ****"); moreEvents = false; + $scope.$broadcast('scroll.infiniteScrollComplete'); }); + // $scope.$broadcast('scroll.infiniteScrollComplete'); }; @@ -286,20 +334,28 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo $scope.doRefresh = function () { console.log("***Pull to Refresh"); $scope.events = []; - ZMDataModel.getEvents($scope.id, 1) + + ZMDataModel.getEventsPages($scope.id) .then(function (data) { - console.log("EventCtrl Got events"); - //var events = []; - var myevents = data; - for (var i = 0; i < myevents.length; i++) { + eventsPage = data.pageCount; + console.log("TOTAL EVENT PAGES IS " + eventsPage); + pageLoaded = true; + $scope.viewTitle.title = data.count; + ZMDataModel.getEvents($scope.id, eventsPage) + + .then(function (data) { + console.log("EventCtrl Got events"); + //var events = []; + var myevents = data; + for (var i = 0; i < myevents.length; i++) { - myevents[i].Event.MonitorName = ZMDataModel.getMonitorName(myevents[i].Event.MonitorId); + myevents[i].Event.MonitorName = ZMDataModel.getMonitorName(myevents[i].Event.MonitorId); + } - } - moreEvents = true; - $scope.events = myevents; - $scope.$broadcast('scroll.refreshComplete'); + $scope.events = myevents; + }); + }); }; //dorefresh diff --git a/www/templates/events.html b/www/templates/events.html index ee8bd087..a2ae5a2e 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -1,4 +1,5 @@ -<ion-view view-title="Events" cache-view="false"> +<ion-view view-title="{{viewTitle.title}} Events" cache-view="false"> +<ion-nav-title>{{viewTitle.title}} Events</ion-nav-title> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> @@ -24,6 +25,7 @@ <div class="col col-left"> <!-- this ngswitch displays different icons depending on the cause of the event --> + {{$index + 1}} <div ng-switch on="event.Event.Cause"> <div ng-switch-when="Motion"> <i class="ion-android-walk" style="float:left; font-size:200%;"></i> |