diff options
Diffstat (limited to 'src/main/resources/webapp/apps')
4 files changed, 69 insertions, 4 deletions
diff --git a/src/main/resources/webapp/apps/app.js b/src/main/resources/webapp/apps/app.js index f74206c..8896d33 100755 --- a/src/main/resources/webapp/apps/app.js +++ b/src/main/resources/webapp/apps/app.js @@ -107,3 +107,31 @@ directives.directive('dogtagxl', function () { templateUrl: '/apps/dogtagBig.html' } }); + +directives.directive('spinner', function () { + return function($scope, element, attr) { + var opts = { + lines: 13, // The number of lines to draw + length: 7, // The length of each line + width: 4, // The line thickness + radius: 10, // The radius of the inner circle + corners: 1, // Corner roundness (0..1) + rotate: 0, // The rotation offset + color: '#000', // #rgb or #rrggbb + speed: 1, // Rounds per second + trail: 60, // Afterglow percentage + shadow: false, // Whether to render a shadow + hwaccel: false, // Whether to use hardware acceleration + className: attr.spinnerClass || 'spinner', // The CSS class to assign to the spinner + zIndex: 2e9, // The z-index (defaults to 2000000000) + top: attr.spinnerTop || 'auto', // Top position relative to parent in px + left: attr.spinnerLeft || 'auto' // Left position relative to parent in px + }; + + console.log("attr.spinnerTop =", attr.spinnerTop, "attr.spinnerLeft =", attr.spinnerLeft); + + var target = element[0]; + new Spinner(opts).spin(target); + return target; + } +}); diff --git a/src/main/resources/webapp/apps/core/PagingTableService.js b/src/main/resources/webapp/apps/core/PagingTableService.js index f38b6f1..86d08f1 100755 --- a/src/main/resources/webapp/apps/core/PagingTableService.js +++ b/src/main/resources/webapp/apps/core/PagingTableService.js @@ -7,15 +7,29 @@ function PagingTableService() { query: "", startIndex: options.startIndex || 0, count: options.count || 10, - currentlySearching: false + currentlySearching: false, + queryStart: 0 }; var update = function(){ self.currentlySearching = true; + self.queryStart = new Date().getTime(); + + // This will update the spinner if the user want to show it. + var interval = setInterval(function () { + $scope.$apply(); + }, 500); + fetchCallback(self.startIndex, self.count, self.query, function(data) { + var now = new Date().getTime(); + console.log("Query took " + (now - self.queryStart) + "ms"); + + clearInterval(interval); + self.rows = data.rows; watcher(); self.currentlySearching = false; + self.queryStart = 0; }); }; @@ -56,6 +70,20 @@ function PagingTableService() { update(); }; + /* + * UI State queries + * + * TODO: the results should only be shown if the last query was successful. Add an 'error' state too. + */ + + self.showSpinner = function () { + return self.currentlySearching && new Date().getTime() - self.queryStart > 500; + }; + + self.showResults = function () { + return !self.currentlySearching; + }; + self.showPrev = function () { return self.startIndex > 0; }; diff --git a/src/main/resources/webapp/apps/frontPageApp/frontPageApp.js b/src/main/resources/webapp/apps/frontPageApp/frontPageApp.js index 9e507b4..def1e67 100755 --- a/src/main/resources/webapp/apps/frontPageApp/frontPageApp.js +++ b/src/main/resources/webapp/apps/frontPageApp/frontPageApp.js @@ -71,13 +71,13 @@ function BadgeCtrl($scope, $routeParams, Badge) { } function PersonListCtrl($scope, Person, PagingTableService) { - var groupSize = 4; + var groupSize = 4, rows = 6; var personsWatcher = function () { $scope.personGroups = groupBy($scope.persons.rows, groupSize); }; $scope.persons = PagingTableService.create($scope, PagingTableService.defaultCallback(Person, {orderBy: "name"}), - {count: groupSize * 6, watcher: personsWatcher}); + {count: groupSize * rows, watcher: personsWatcher}); console.log("$scope.persons.searchText", $scope.persons.searchText); console.log("$scope.persons.rows", $scope.persons.rows); diff --git a/src/main/resources/webapp/apps/frontPageApp/personList.html b/src/main/resources/webapp/apps/frontPageApp/personList.html index 2c14b01..9f977ee 100755 --- a/src/main/resources/webapp/apps/frontPageApp/personList.html +++ b/src/main/resources/webapp/apps/frontPageApp/personList.html @@ -33,7 +33,15 @@ <div class="row"> <div class="span12"> - <div class="row" ng-repeat="group in personGroups"> + <div class="row" ng-show="persons.showSpinner()"> + <div class="span12"> + <div style="height: 100px"> + <div spinner spinner-class="wat" spinner-left="564px" spinner-top="50%"></div> + </div> + </div> + </div> + + <div class="row" ng-repeat="group in personGroups" ng-show="persons.showResults()"> <div class="span3" ng-repeat="person in group" style="padding-bottom: 1em"> <div class="row"> <person-avatar person="person.person"></person-avatar> @@ -45,6 +53,7 @@ </div> </div> </div> + <ul class="pager"> <li ng-show="persons.showPrev()" class="previous {{{true: 'disabled', false: ''}[persons.prevDisabled()]}}"> <a ng-click="persons.prev()">← Prev</a> |