Browse Source

pagination fix

apprausch 5 years ago
parent
commit
bb73b6b574

+ 12 - 2
client/controllers/apps.js

@@ -12,12 +12,19 @@ myApp.controller('AppsController', ['$scope', '$http', '$location', '$routeParam
 	$scope.spHTI = false;
 	$scope.finalHTI = false;
 	$scope.total = 0;
+	$scope.dataLoaded = false;
+	$scope.appNumber = 0;
 
-	$scope.getApps = function(){
+	$scope.setAppNumber = function(toAdd) {
+		return $scope.appNumber + toAdd;
+	}
+
+	$scope.getApps = function() {
 
 		angular.element('*[id^="tviz"]').remove();
 
 		$scope.numPerPage = 10;
+		$scope.currentPage = 1;
 		var genre = $routeParams.genre;
 		var page = $routeParams.page;
 		var query = "";
@@ -26,6 +33,7 @@ myApp.controller('AppsController', ['$scope', '$http', '$location', '$routeParam
 		}
 		if(page) {
 			$scope.currentPage = page;
+			$scope.appNumber = (page - 1) * $scope.numPerPage;
 		}
 		if(query != "" && page) {
 			query += "&page=" + page;
@@ -33,9 +41,10 @@ myApp.controller('AppsController', ['$scope', '$http', '$location', '$routeParam
 			query += "/?page=" + page;
 		}
 		$http.get('/crawler/downloadedapps' + query).then(function(response){
+			$scope.dataLoaded = true;
 			$scope.apps = response.data.apps;
 			$scope.total = response.data.total;
-			$scope.noOfPages = Math.ceil(total / $scope.numPerPage);
+			$scope.noOfPages = Math.ceil($scope.total / $scope.numPerPage);
 		});
 	}
 
@@ -50,6 +59,7 @@ myApp.controller('AppsController', ['$scope', '$http', '$location', '$routeParam
 			query += "/?posture=" + posture;
 		}
 		$http.get('/crawler/downloadedapps/'+id+query).then(function(response){
+			$scope.dataLoaded = true;
 			$scope.app = response.data;
 			//showCT($scope.app);
 			$scope.privacyRisksTC = [

+ 21 - 0
client/css/style.css

@@ -4,4 +4,25 @@
 
 #spQualityCTContainer .certaintrust-hti-f {
     display: none;
+}
+
+.loader {
+  border: 16px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 16px solid blue;
+  border-bottom: 16px solid blue;
+  width: 120px;
+  height: 120px;
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }

+ 4 - 3
client/directives/pagination.html

@@ -1,10 +1,11 @@
-<div class="pagination">
-    <ul>
+<div class="pull-right">
+    <ul class="pagination">
         <!-- <li ng-class="{disabled: noPrevious()}">
             <a ng-click="selectPrevious()">Previous</a>
         </li> -->
         <li ng-repeat="page in pages" ng-class="{active: isActive(page)}">
-            <a ng-click="selectPage(page)">{{page}}</a>
+            <a ng-href="#!/apps/?page={{page}}">{{page}}</a>
+            <!-- <a ng-href="#!/apps?page={{page}}" ng-click="selectPage(page)">{{page}}</a> -->
         </li>
         <!-- <li ng-class="{disabled: noNext()}">
             <a ng-click="selectNext()">Next</a>

+ 6 - 7
client/directives/pagination.js

@@ -8,9 +8,9 @@ myApp.directive('pagination', function () {
 			currentPage: '=',
 			onSelectPage: '&'
 		},
-		templateUrl: 'pagination.html',
+		templateUrl: 'directives/pagination.html',
 		replace: true,
-		link: function (scope, location) {
+		link: function (scope) {
 			scope.$watch('numPages', function (value) {
 				scope.pages = [];
 				for (var i = 1; i <= value; i++) {
@@ -27,16 +27,15 @@ myApp.directive('pagination', function () {
 				return scope.currentPage === scope.numPages;
 			};
 			scope.isActive = function (page) {
-				return scope.currentPage === page;
+				return scope.currentPage == page;
 			};
 
 			scope.selectPage = function (page) {
 				if (!scope.isActive(page)) {
 					scope.currentPage = page;
-					// scope.onSelectPage({
-					// 	page: page
-					// });
-					location.hash = "#/apps?page=" + page;
+					scope.onSelectPage({
+						page: page
+					});
 				}
 			};
 

+ 2 - 1
client/views/app.html

@@ -92,4 +92,5 @@
             <div id="finalAndResult"></div>
         </div>
     </div>
-</div>
+</div>
+<div class="loader" ng-hide="dataLoaded"></div>

+ 3 - 2
client/views/apps.html

@@ -18,7 +18,7 @@
     </thead> 
     <tbody> 
         <tr ng-repeat="app in apps" ng-init="getApp2(app, $index)">
-            <th scope="row">{{$index+1}}</th>
+            <th scope="row">{{setAppNumber($index+1)}}</th>
             <td>{{app.title}}</td>
             <!-- <td>{{app.genre}}</td>
             <td>{{app.reviewsCount}}</td>
@@ -43,4 +43,5 @@
         </tr>
     </tbody> 
 </table>
-<pagination num-pages="noOfPages" current-page="currentPage" class="pagination-small"></pagination>
+<pagination num-pages="noOfPages" current-page="currentPage" class="pagination-small"></pagination>
+<div class="loader" ng-hide="dataLoaded"></div>

+ 18 - 9
lib/index.js

@@ -584,7 +584,7 @@ router.get('/ShowAgg/:appId', function (req, res, next) {//Test Aggregation
 router.get('/downloadedapps/', function (req, res, next) {
   var filter = {};
   var perPage = 10;
-  var page = 0;
+  var page = 1;
   var total = 0;
 
   if(req.query.genre) {
@@ -593,18 +593,27 @@ router.get('/downloadedapps/', function (req, res, next) {
   if(req.query.page) {
     page = req.query.page;
   }
-  models.app.find(filter).sort('title')
-    .then(function (resultList) {
-      total = resultList.length;
-      return resultList;
-    })
-    .skip(perPage * page).limit(perPage)
+
+  models.app.find(filter)
+    .sort('title').skip(perPage * (page -1)).limit(perPage)
     .then((apps) => apps.map(function (app) {
       app.url = "http://localhost:3000/crawler/downloadedapps/" + app.appId;
       return app;
     }))
-    .then(function (apps){
-      return { result: apps, total: total };
+    .then(function(apps) {
+      return new Promise(function (resolve, reject) {
+        models.app.find({})
+          .then(function (results) {
+            total = results.length;
+            resolve(apps);
+          })
+          .catch(function (err) {
+            reject(err);
+          });
+      });
+    })
+    .then(function (apps){      
+      return { apps: apps, total: total };
     })
     .then(res.json.bind(res))
     .catch(function (e) {