quashed infinite scrolling bug (was being called too many times) and also now displaying events latest first

2 files changed, 126 insertions, 51 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