Add directives for pagination

Added pagination on changes page

nsot/static/js/app.js

@@ -333,14 +333,27 @@
         $scope.loading = true;
         $scope.changes = [];
         $scope.siteId = $routeParams.siteId;
+        $scope.pager = null;
+        $scope.limier = null;
+
+        var params = {limit: 10};
+        var search = $location.search();
+        if (search.offset) params.offset = search.offset;
+        if (search.limit) params.limit = search.limit;
 
         $q.all([
             $http.get(
                 "/api/sites/" + $scope.siteId +
-                "/changes"
+                "/changes",
+                {params: params}
             )
         ]).then(function(results){
-            $scope.changes = results[0].data.data.changes;
+            var data = results[0].data.data;
+            $scope.changes = data.changes;
+            $scope.pager = new nsot.Pager(
+                data.offset, data.limit, data.total, $location
+            );
+            $scope.limiter = new nsot.Limiter(data.limit, $location);
             $scope.loading = false;
         }, function(data){
             if (data.status === 404) {
@@ -349,8 +362,7 @@
             }
         });
 
-    }
-    ]);
+    }]);
 
     app.controller("ChangeController", [
             "$scope", "$http", "$route", "$location", "$q", "$routeParams",

nsot/static/js/directives.js

@@ -82,4 +82,24 @@
         };
     });
 
+    app.directive("paginator", function(){
+        return {
+            restrict: "E",
+            scope: {
+                "pager": "=",
+            },
+            templateUrl: "/static/templates/directives/paginator.html"
+        };
+    });
+
+    app.directive("dropdown", function(){
+        return {
+            restrict: "E",
+            scope: {
+                "ctxtObj": "=",
+            },
+            templateUrl: "/static/templates/directives/dropdown.html"
+        };
+    });
+
 })();

nsot/static/js/nsot.js

@@ -0,0 +1,90 @@
+(function() {
+    "use strict";
+
+    var nsot = window.nsot = nsot || {};
+
+    nsot.Pager = function(offset, limit, total, $location) {
+        this.offset = offset;
+        this.limit = limit;
+        this.total = total;
+        this.$location = $location;
+
+        this.page = (offset + limit) / limit;
+        this.numPages = Math.ceil(total/limit);
+
+        this.hasFirst = function(){
+            return this.offset !== 0;
+        }
+
+        this.hasPrevious = function(){
+            return this.offset !== 0;
+        }
+
+        this.hasNext = function(){
+            return this.offset + this.limit < this.total;
+        }
+
+        this.hasLast = function(){
+            return this.offset + this.limit < this.total;
+        }
+
+        this.firstPage = function(){
+            return 0;
+        }
+
+        this.previousPage = function(){
+            return this.offset - this.limit;
+        }
+
+        this.nextPage = function(){
+            return this.offset + this.limit;
+        }
+
+        this.lastPage = function(){
+            return (this.numPages - 1) * this.limit;
+        }
+
+        this.firstPageUrl = function(){
+            return "?" + $.param(_.defaults(
+                {"offset": this.firstPage()},
+                this.$location.search()
+            ));
+        }
+
+        this.previousPageUrl = function(){
+            return "?" + $.param(_.defaults(
+                {"offset": this.previousPage()},
+                this.$location.search()
+            ));
+        }
+
+        this.nextPageUrl = function(){
+            return "?" + $.param(_.defaults(
+                {"offset": this.nextPage()},
+                this.$location.search()
+            ));
+        }
+
+        this.lastPageUrl = function(){
+            return "?" + $.param(_.defaults(
+                {"offset": this.lastPage()},
+                this.$location.search()
+            ));
+        }
+    }
+
+    nsot.Limiter = function(limit, $location) {
+
+        this.name = "Limit"
+        this.current = limit;
+        this.values = [10, 25, 50, 100];
+        this.$location = $location;
+
+        this.getUrl = function(value){
+            return "?" + $.param(_.defaults(
+                {"limit": value}, this.$location.search()
+            ));
+        }
+    }
+
+})();

nsot/static/templates/changes.html

@@ -1,6 +1,8 @@
 <loading-panel ng-if="loading"></loading-panel>
 <div ng-if="!loading">
     <heading-bar heading="Changes">
+        <dropdown ctxt-obj="limiter"></dropdown>
+        <paginator pager="pager"></paginator>
     </heading-bar>
 
     <div class="row" class="row"><div class="col-sm-10 col-sm-offset-1">

nsot/static/templates/directives/dropdown.html

@@ -0,0 +1,12 @@
+<div class="btn-group">
+    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+        <span ng-if="ctxtObj.current">[[ctxtObj.name]]: [[ctxtObj.current]]</span>
+        <span ng-if="!ctxtObj.current">[[ctxtObj.name]]</span>
+        <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu" role="menu">
+        <li ng-repeat="value in ctxtObj.values">
+            <a ng-href="[[ctxtObj.getUrl(value)]]">[[value]]</a>
+        </li>
+    </ul>
+</div>

nsot/static/templates/directives/paginator.html

@@ -0,0 +1,21 @@
+<div ng-if="pager.limit" class="btn-group" style="padding-right: 10px;">
+
+
+    <a ng-disabled="!pager.hasFirst()" class="btn btn-default" ng-href="[[pager.firstPageUrl()]]">
+        <i class="fa fa-angle-double-left"></i>
+    </a>
+
+    <a ng-disabled="!pager.hasPrevious()" class="btn btn-default" ng-href="[[pager.previousPageUrl()]]">
+        <i class="fa fa-angle-left"></i>
+    </a>
+
+    <a class="btn btn-default disabled">Page [[pager.page]] of [[pager.numPages]]</a>
+
+    <a ng-disabled="!pager.hasNext()" class="btn btn-default" ng-href="[[pager.nextPageUrl()]]">
+        <i class="fa fa-angle-right"></i>
+    </a>
+
+    <a ng-disabled="!pager.hasLast()" class="btn btn-default" ng-href="[[pager.lastPageUrl()]]">
+        <i class="fa fa-angle-double-right"></i>
+    </a>
+</div>

nsot/templates/app.html

@@ -85,12 +85,13 @@
             </div>
         </div>
 
-        <script src="{{cdnjs_prefix}}/ajax/libs/angular.js/1.3.8/angular.min.js"></script>
+        <script src="{{cdnjs_prefix}}/ajax/libs/angular.js/1.3.8/angular.js"></script>
         <script src="{{cdnjs_prefix}}/ajax/libs/angular.js/1.3.8/angular-route.min.js"></script>
         <script src="{{cdnjs_prefix}}/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
         <script src="{{cdnjs_prefix}}/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
         <script src="{{cdnjs_prefix}}/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
         <script src="{{cdnjs_prefix}}/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
+        <script src="/static/js/nsot.js"></script>
         <script src="/static/js/app.js"></script>
         <script src="/static/js/directives.js"></script>
     </body>