Add a loading progress bar, as it can be slow with internal webserver (100ms/request)

plus large history (120 requests).

(cherry picked from commit e1b0b7a5b6759bb7a59536efcc4d6652d92dda16)
This commit is contained in:
Oliver Jowett 2015-01-15 22:23:15 +00:00
parent 870233977c
commit dd734debc3
3 changed files with 7 additions and 2 deletions

View file

@ -17,6 +17,7 @@
<body onload="initialize()">
<div id="loader" class="hidden">
<img src="spinny.gif" id="spinny">
<progress id="loader_progress"></progress>
</div>
<div id="map_container">

View file

@ -166,6 +166,8 @@ function initialize() {
ReceiverClock.tick = (function(){})
}
$("#loader").removeClass("hidden");
// Get receiver metadata, reconfigure using it, then continue
// with initialization
$.getJSON('data/receiver.json')
@ -192,8 +194,8 @@ var CurrentHistoryFetch = null;
var PositionHistoryBuffer = []
function start_load_history() {
if (PositionHistorySize > 0) {
console.log("Starting to load history");
$("#loader").removeClass("hidden");
$("#loader_progress").attr('max',PositionHistorySize);
console.log("Starting to load history (" + PositionHistorySize + " items)");
load_history_item(0);
} else {
endLoadHistory();
@ -207,6 +209,7 @@ function load_history_item(i) {
}
console.log("Loading history #" + i);
$("#loader_progress").attr('value',i);
$.ajax({ url: 'data/history_' + i + '.json',
timeout: 5000,

View file

@ -17,6 +17,7 @@ div#update_error { position: absolute; bottom: 25px; left: 25px; border: 2px sol
div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: #000; opacity: 0.8; filter: alpha(opacity=80); }
#spinny { width: 128px; height: 128px; position: absolute; top: 50%; left: 50%; margin: -64px 0 0 -64px; }
#loader_progress { width: 250px; height: 20px; position: absolute; top: 50%; left: 50%; margin: 128px 0 0 -125px; }
#tableinfo, #sudo_buttons { font-size: x-small; font-family: monospace; }