diff options
Diffstat (limited to 'src/main/resources/webapp')
| -rwxr-xr-x | src/main/resources/webapp/apps/core/PagingTableService.js | 72 | ||||
| -rwxr-xr-x | src/main/resources/webapp/apps/frontPageApp/personList.html | 19 |
2 files changed, 60 insertions, 31 deletions
diff --git a/src/main/resources/webapp/apps/core/PagingTableService.js b/src/main/resources/webapp/apps/core/PagingTableService.js index a2d53f9..b602fbe 100755 --- a/src/main/resources/webapp/apps/core/PagingTableService.js +++ b/src/main/resources/webapp/apps/core/PagingTableService.js @@ -2,45 +2,67 @@ function PagingTableService() { var create = function ($scope, fetchCallback, options) { options = options || {}; var watcher = options.watcher || function(){}; + // This is exposed to the view as accessible variables var self = { rows: [], query: "", startIndex: options.startIndex || 0, count: options.count || 10, + error: undefined + }; + + var internal = { + // either "loading", "data" or "error" + state: "loading", currentlySearching: false, queryStart: 0 }; var update = function () { var query = self.query; - if (self.currentlySearching) { + if (internal.currentlySearching) { console.log("query active, storing =", query); return; } - self.currentlySearching = true; - self.queryStart = new Date().getTime(); + internal.currentlySearching = true; + internal.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, query, function (data) { + fetchCallback(self.startIndex, self.count, query, function (data, error) { var now = new Date().getTime(); - console.log("Query took " + (now - self.queryStart) + "ms"); - + console.log("Query took " + (now - internal.queryStart) + "ms"); clearInterval(interval); - self.rows = data.rows; - self.currentlySearching = false; - self.queryStart = 0; + if(typeof data !== "undefined") { + internal.state = "data"; + internal.currentlySearching = false; + internal.queryStart = 0; + self.rows = data.rows; + self.error = undefined; - if(self.query != query) { - console.log("Had a new query requested, sending. query =", query, ", self.query =", self.query); - update(); - } + if(self.query != query) { + console.log("Had a new query requested, sending. query =", query, ", self.query =", self.query); + update(); + } - watcher(); + watcher(); + } + else { + internal.state = "error"; + internal.currentlySearching = false; + internal.queryStart = 0; + // Here we should probably store the old rows. + self.rows = []; + self.error = { + message: "wat!!" + }; + + watcher(); + } }); }; @@ -50,7 +72,7 @@ function PagingTableService() { }; self.next = function () { - if (self.currentlySearching) { + if (internal.currentlySearching) { return; } self.startIndex += self.count; @@ -58,7 +80,7 @@ function PagingTableService() { }; self.prev = function () { - if (self.currentlySearching) { + if (internal.currentlySearching) { return; } if (self.startIndex == 0) { @@ -83,16 +105,10 @@ function PagingTableService() { /* * 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.viewState = function() { + return internal.state; }; self.showPrev = function () { @@ -104,11 +120,11 @@ function PagingTableService() { }; self.nextDisabled = function () { - return self.currentlySearching; + return internal.currentlySearching; }; self.prevDisabled = function () { - return self.currentlySearching; + return internal.currentlySearching; }; // Do an initial fetch @@ -137,6 +153,10 @@ function PagingTableService() { totalResults: totalResults, rows: data }); + }, function() { + console.log("Failed"); + console.log(arguments); + cb(undefined, {message: "Error loading data..."}); }); }; }; diff --git a/src/main/resources/webapp/apps/frontPageApp/personList.html b/src/main/resources/webapp/apps/frontPageApp/personList.html index d229659..f36aba7 100755 --- a/src/main/resources/webapp/apps/frontPageApp/personList.html +++ b/src/main/resources/webapp/apps/frontPageApp/personList.html @@ -33,7 +33,7 @@ <div class="row"> <div class="span12"> - <div class="row" ng-show="persons.showSpinner()"> + <div class="row" ng-show="persons.viewState() == 'loading'"> <div class="span12"> <div style="height: 100px"> <div spinner spinner-class="wat" spinner-left="564px" spinner-top="50%"></div> @@ -41,19 +41,28 @@ </div> </div> - <div class="row" ng-repeat="group in personGroups" ng-show="persons.showResults()"> + <div class="row" ng-repeat="group in personGroups" ng-show="persons.viewState() == 'data'"> <div class="span3" ng-repeat="person in group" style="padding-bottom: 1em"> <div class="row"> <avatar-xl person="person.person"></avatar-xl> <a href="/#/person/{{person.person.uuid}}">{{person.person.name}}</a> <br/> - <span ng-repeat="level in person.badges | countBadgeByLevel | gz"> - <span class="badge-inverse badge-level-{{$index + 1}} badge"><i class="icon-user"></i> x {{level}}</span> - </span> + <span ng-repeat="level in person.badges | countBadgeByLevel | gz"> + <span class="badge-inverse badge-level-{{$index + 1}} badge"><i class="icon-user"></i> x {{level}}</span> + </span> </div> </div> </div> + <div class="row" ng-show="persons.viewState() == 'error'"> + <div class="span12"> + <p>An error occurred when loading the data...</p> + <p ng-show="persons.error"> + Error: {{persons.error.message}} + </p> + </div> + </div> + <ul class="pager"> <li ng-show="persons.showPrev()" class="previous {{{true: 'disabled', false: ''}[persons.prevDisabled()]}}"> <a ng-click="persons.prev()">← Prev</a> |