From 196e52ac0a88771a92469173adbfdb94046e0e7e Mon Sep 17 00:00:00 2001
From: Noah Levitt <nlevitt@archive.org>
Date: Mon, 12 Oct 2015 23:08:35 +0000
Subject: [PATCH] homegrown infinite scroll through pages on site page

---
 webconsole/static/index.html         |  1 +
 webconsole/static/js/app.js          |  1 -
 webconsole/static/js/controllers.js  | 49 ++++++++++++++++++----------
 webconsole/static/partials/site.html |  5 +++
 4 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/webconsole/static/index.html b/webconsole/static/index.html
index 9f31b61..4c83f33 100644
--- a/webconsole/static/index.html
+++ b/webconsole/static/index.html
@@ -10,6 +10,7 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-route.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.2.1/ng-infinite-scroll.js"></script>
 <script src="/static/js/app.js"></script>
 <script src="/static/js/controllers.js"></script>
 <style>
diff --git a/webconsole/static/js/app.js b/webconsole/static/js/app.js
index 51794a0..242bf44 100644
--- a/webconsole/static/js/app.js
+++ b/webconsole/static/js/app.js
@@ -46,4 +46,3 @@ brozzlerConsoleApp.filter("byteformat", function() {
         return result;
     }
 });
-
diff --git a/webconsole/static/js/controllers.js b/webconsole/static/js/controllers.js
index c4ec518..4b28a80 100644
--- a/webconsole/static/js/controllers.js
+++ b/webconsole/static/js/controllers.js
@@ -59,7 +59,7 @@ brozzlerControllers.controller("JobController", ["$scope", "$routeParams", "$htt
         $http.get("/api/jobs/" + $routeParams.id).success(function(data) {
             $scope.job = data;
             $scope.job.page_count = $scope.job.queued_count = 0;
-            console.log("job=", $scope.job);
+            // console.log("job=", $scope.job);
             $http.get("/api/stats/" + $scope.job.conf.warcprox_meta.stats.buckets[0]).success(function(data) {
                 $scope.job.stats = data;
                 // console.log("job stats=", $scope.job.stats);
@@ -76,28 +76,41 @@ brozzlerControllers.controller("JobController", ["$scope", "$routeParams", "$htt
 
     }]);
 
-brozzlerControllers.controller("SiteController", ["$scope", "$routeParams", "$http",
-    function($scope, $routeParams, $http) {
+brozzlerControllers.controller("SiteController", ["$scope", "$routeParams", "$http", "$window",
+    function($scope, $routeParams, $http, $window) {
+        var start = 0;
+        $scope.loading = false;
+        $scope.pages = [];
+        $window.addEventListener("scroll", function() {
+            // console.log("window.scrollTop=" + window.scrollTop + " window.offsetHeight=" + window.offsetHeight + " window.scrollHeight=" + window.scrollHeight);
+            if ($window.innerHeight + $window.scrollY + 50 >= window.document.documentElement.scrollHeight) {
+                loadMorePages();
+            }
+        });
+
+        var loadMorePages = function() {
+            if ($scope.loading)
+                return;
+            $scope.loading = true;
+
+            // console.log("load more! start=" + start);
+            $http.get("/api/site/" + $routeParams.id + "/pages?start=" + start + "&end=" + (start+90)).then(function(response) {
+                $scope.pages = $scope.pages.concat(response.data.pages);
+                // console.log("pages = ", $scope.pages);
+                start += response.data.pages.length;
+                $scope.loading = false;
+            }, function(reason) {
+                $scope.loading = false;
+            });
+
+        };
+
         $http.get("/api/site/" + $routeParams.id).success(function(data) {
             $scope.site = data;
             loadSiteStats($http, $scope.site);
             // console.log("site = ", $scope.site);
         });
 
-        $http.get("/api/site/" + $routeParams.id + "/pages?start=0&end=99").success(function(data) {
-            $scope.pages = data.pages;
-            console.log("pages = ", $scope.pages);
-        });
-
+        loadMorePages();
     }]);
 
-/*
-   $http.get("/api/site/" + $routeParams.id).then(function(response) {
-   console.log("/api/site/" + $routeParams.id + " returned", response);
-   $scope.site = response.data;
-   return $http.get("/api/site/" + $routeParams.id + "/pages");
-   }).then(function(response) {
-   console.log("/api/site/" + $routeParams.id + "/pages returned", response);
-   $scope.site.pages = response.data.pages;
-   });
-   */
diff --git a/webconsole/static/partials/site.html b/webconsole/static/partials/site.html
index ce0ebda..6c80c89 100644
--- a/webconsole/static/partials/site.html
+++ b/webconsole/static/partials/site.html
@@ -48,6 +48,11 @@
                 </a>
             </div>
         </div>
+        <div class="col-sm-12" ng-show="loading">
+            <div style="text-align:center;font-size:300%">
+                <span class="fa fa-spinner fa-pulse"></span>
+            </div>
+        </div>
     </div>
 
 </div>