From 267e832fa16029f0ecd1cdaca699d661ddc556e8 Mon Sep 17 00:00:00 2001 From: Trygve Laugstøl Date: Mon, 21 Jan 2013 14:33:53 +0100 Subject: o Improved paging with a "view" state that's either 'loading', 'data' or 'error'. --- .../esper/testing/web/resource/CoreResource.java | 11 +++- .../webapp/apps/core/PagingTableService.js | 72 ++++++++++++++-------- .../webapp/apps/frontPageApp/personList.html | 19 ++++-- 3 files changed, 69 insertions(+), 33 deletions(-) (limited to 'src/main') diff --git a/src/main/java/io/trygvis/esper/testing/web/resource/CoreResource.java b/src/main/java/io/trygvis/esper/testing/web/resource/CoreResource.java index 158e9ab..8ca2521 100755 --- a/src/main/java/io/trygvis/esper/testing/web/resource/CoreResource.java +++ b/src/main/java/io/trygvis/esper/testing/web/resource/CoreResource.java @@ -35,6 +35,11 @@ public class CoreResource extends AbstractResource { @Path("/person") public List getPersons(@MagicParam final PageRequest pageRequest, @QueryParam("query") final String query) throws Exception { +// Thread.sleep(1000); +// if(new Random().nextInt(3) == 0) { +// throw new RuntimeException("internal error"); +// } + return da.inTransaction(new CoreDaosCallback>() { protected List run() throws SQLException { List list = new ArrayList<>(); @@ -201,7 +206,7 @@ public class CoreResource extends AbstractResource { protected final SqlF getBuildJson = new SqlF() { public BuildJson apply(BuildDto dto) throws SQLException { - return new BuildJson(dto.uuid, dto.timestamp, dto.success); + return new BuildJson(dto.uuid, dto.createdDate, dto.timestamp, dto.success); } }; @@ -245,11 +250,13 @@ public class CoreResource extends AbstractResource { class BuildJson { public final UUID uuid; public final DateTime createdDate; + public final DateTime timestamp; public final boolean success; - public BuildJson(UUID uuid, DateTime createdDate, boolean success) { + public BuildJson(UUID uuid, DateTime createdDate, DateTime timestamp, boolean success) { this.uuid = uuid; this.createdDate = createdDate; + this.timestamp = timestamp; this.success = success; } } 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 @@
-
+
@@ -41,19 +41,28 @@
-
+
{{person.person.name}}
- - x {{level}} - + + x {{level}} +
+
+
+

An error occurred when loading the data...

+

+ Error: {{persons.error.message}} +

+
+
+