added infinite scrolling - now retrieving all events

3 files changed, 75 insertions, 29 deletions

diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index e44fedb6..aab1e643 100644
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -67,7 +67,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
                     simevents.push({
                         "Event": {
                             // Obviously this is dummy data
-                            "Id":Math.floor(Math.random() * (5000 - 100 + 1)) + 1000,
+                            "Id": Math.floor(Math.random() * (5000 - 100 + 1)) + 1000,
                             "MonitorId": mon.toString(),
                             "Cause": causes[Math.floor(Math.random() * (2 - 0 + 1)) + 0],
                             "Length": Math.floor(Math.random() * (700 - 20 + 1)) + 20,
@@ -183,20 +183,20 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
         getMonitors: function (forceReload) {
             console.log("** Inside ZMData getMonitors with forceReload=" + forceReload);
             $ionicLoading.show({
-                    template: 'Loading Monitors...',
-                    animation: 'fade-in',
-                    showBackdrop: true,
-                    duration:15000,
-                    maxWidth: 200,
-                    showDelay: 0
-                });
+                template: 'Loading Monitors...',
+                animation: 'fade-in',
+                showBackdrop: true,
+                duration: 15000,
+                maxWidth: 200,
+                showDelay: 0
+            });
             var d = $q.defer();
             if (((monitorsLoaded == 0) || (forceReload == 1)) && (loginData.simulationMode != true)) // monitors are empty or force reload
             {
                 console.log("ZMDataModel: Invoking HTTP get to load monitors");
                 var apiurl = loginData.apiurl;
                 var myurl = apiurl + "/monitors.json";
-                $http.get(myurl /*,{timeout:15000}*/)
+                $http.get(myurl /*,{timeout:15000}*/ )
                     .success(function (data) {
                         //console.log("HTTP success got " + JSON.stringify(data.monitors));
                         monitors = data.monitors;
@@ -212,7 +212,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
                         monitors = [];
                         console.log("promise resolved inside HTTP fail");
                         d.resolve(monitors);
-                         $ionicLoading.hide();
+                        $ionicLoading.hide();
                     });
                 return d.promise;
 
@@ -224,7 +224,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
                 }
                 console.log("Returning pre-loaded list of " + monitors.length + " monitors");
                 d.resolve(monitors);
-                 $ionicLoading.hide();
+                $ionicLoading.hide();
                 return d.promise;
             }
 
@@ -245,18 +245,18 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
         // the menu events option
         // monitorId == 0 means all monitors (ZM starts from 1)
 
-        getEvents: function (monitorId) {
+        getEvents: function (monitorId, pageId) {
 
-            console.log("ZMData getEvents called with ID=" + monitorId);
+            console.log("ZMData getEvents called with ID=" + monitorId + "and Page=" + pageId);
 
             $ionicLoading.show({
-                    template: 'Loading Events...',
-                    animation: 'fade-in',
-                    showBackdrop: true,
-                    maxWidth: 200,
-                    showDelay: 0,
-                    duration:15000, //specifically for Android - http seems to get stuck at times
-                });
+                template: 'Loading Events...',
+                animation: 'fade-in',
+                showBackdrop: true,
+                maxWidth: 200,
+                showDelay: 0,
+                duration: 15000, //specifically for Android - http seems to get stuck at times
+            });
 
             var d = $q.defer();
             var myevents = [];
@@ -266,6 +266,11 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
             // looks like I have more work to do here
 
             var myurl = (monitorId == 0) ? apiurl + "/events.json" : apiurl + "/events/index/MonitorId:" + monitorId + ".json";
+            if (pageId) {
+                var 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
@@ -279,10 +284,11 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
                 return d.promise;
             } else { // not simulated
 
-                $http.get(myurl  /*,{timeout:15000}*/)
+                $http.get(myurl /*,{timeout:15000}*/ )
                     .success(function (data) {
                         $ionicLoading.hide();
-                        myevents = data.events.reverse();
+                        myevents = data.events;
+                        //myevents = data.events.reverse();
                         if (monitorId == 0) {
                             oldevents = myevents;
                         }
@@ -295,9 +301,15 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
                     .error(function (err) {
                         $ionicLoading.hide();
                         console.log("HTTP Events error " + err);
-                        d.resolve(myevents);
+                        // I need to reject this as I have infinite scrolling
+                        // implemented in EventCtrl.js --> and if it does not know
+                        // it got an error going to the next page, it will get into
+                        // an infinite loop as we are at the bottom of the list always
+
+                        d.reject(myevents);
+
+                        // FIXME: Check what pagination does to this logic
                         if (monitorId == 0) {
-                            // FIXME: make this into a proper error
                             oldevents = [];
                         }
                         return d.promise;
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index e4d70eea..7ae08535 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -59,6 +59,9 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
         play: "2"
     }
 
+    var eventsPage = 1;
+    var moreEvents = true;
+
     // 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
     // seconds. Not a good UX. So what I am doing is when the events modal or
@@ -224,7 +227,10 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
     // I am converting monitor ID to monitor Name
     // so I can display it along with Events
     // Is there a better way?
-    $scope.events = ZMDataModel.getEvents($scope.id)
+    console.log("Calling --> EventsPage = " + eventsPage);
+    //$scope.events =
+    $scope.events = [];
+    ZMDataModel.getEvents($scope.id, eventsPage)
         .then(function (data) {
             console.log("EventCtrl Got events");
             //var events = [];
@@ -238,6 +244,33 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
             $scope.events = myevents;
         });
 
+    $scope.moreDataCanBeLoaded = function () {
+        return moreEvents;
+    }
+
+    $scope.loadMore = function () {
+        console.log("***** LOADING MORE INFINITE SCROLL ****");
+        eventsPage++;
+        $scope.$broadcast('scroll.infiniteScrollComplete');
+        ZMDataModel.getEvents($scope.id, eventsPage)
+            .then(function (data) {
+                    console.log("Got new page of events");
+                    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);
+                },
+
+                function (error) {
+                    console.log("*** No More Events to Load, Stop Infinite Scroll ****");
+                    moreEvents = false;
+
+                });
+
+    }
+
     $scope.isSimulated = function () {
         return ZMDataModel.isSimulated();
     };
@@ -246,7 +279,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
     $scope.doRefresh = function () {
         console.log("***Pull to Refresh");
         $scope.events = [];
-        $scope.events = ZMDataModel.getEvents($scope.id)
+        $scope.events = ZMDataModel.getEvents($scope.id, 1)
             .then(function (data) {
                 console.log("EventCtrl Got events");
                 //var events = [];
@@ -256,7 +289,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
                     myevents[i].Event.MonitorName = ZMDataModel.getMonitorName(myevents[i].Event.MonitorId);
                 }
 
-
+                moreEvents = true;
                 $scope.events = myevents;
                 $scope.$broadcast('scroll.refreshComplete');
             });
diff --git a/www/js/app.js b/www/js/app.js
index 494ebdb9..8c207d35 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -34,11 +34,11 @@ angular.module('zmApp', [
 // Also remember you need to add it to .config
 
 .factory('timeoutHttpIntercept', function ($rootScope, $q) {
-    console.log("*** HTTP INTERCEPTOR CALLED ***");
+    //console.log("*** HTTP INTERCEPTOR CALLED ***");
     return {
         'request': function (config) {
             config.timeout = 15000;
-            console.log("*** HTTP INTERCEPTOR CALLED ***");
+            //console.log("*** HTTP INTERCEPTOR CALLED ***");
             return config;
         }
     };
@@ -97,6 +97,7 @@ angular.module('zmApp', [
 
         // generates and error in desktops but works fine
         console.log("**** DEVICE READY ***");
+
         setTimeout(function () {
             $cordovaSplashscreen.hide()
         }, 3000)