diff --git a/api/static/app/main.js b/api/static/app/main.js index a62ae0f371..8127b4f611 100644 --- a/api/static/app/main.js +++ b/api/static/app/main.js @@ -505,12 +505,20 @@ if (!nobrowsercheck && !isChrome()) { // Periodically load data var REFRESH_TIME_MINUTES = 5; function fetchAndReschedule() { + // If data doesn't load in 30 secs, show connection warning + timeout_interval = setTimeout(function(){ + document.getElementById('connection-warning').className = "show"; + }, 30 * 1000); queue() .defer(d3.json, 'europe.topo.json') .defer(d3.json, ENDPOINT + '/v1/production') .defer(d3.json, ENDPOINT + '/v1/solar') .defer(d3.json, ENDPOINT + '/v1/wind') - .await(dataLoaded); + .await(function(){ + document.getElementById('connection-warning').className = "hide"; + clearInterval(timeout_interval); + dataLoaded(); + }); setTimeout(fetchAndReschedule, REFRESH_TIME_MINUTES * 60 * 1000); } diff --git a/api/static/index.html b/api/static/index.html index 68a0ae2620..d5b67f5c5d 100644 --- a/api/static/index.html +++ b/api/static/index.html @@ -50,6 +50,9 @@ +
+
Oops! We're having trouble reaching the server. We'll try again in a few seconds.
+
diff --git a/api/static/style.css b/api/static/style.css index 48b71512bd..de49d8aea8 100644 --- a/api/static/style.css +++ b/api/static/style.css @@ -4,6 +4,41 @@ html, body { height: 100%; font-family: sans-serif; } + +#connection-warning { + position: fixed; + display: block; + z-index: 99; + height: 40px; + top: -40px; + left: 0; + transition: all 0.5s ease; + width: 100%; +} + +#connection-warning.show { + top: 0; +} + +#connection-warning.hide { + top: -40px; + +} + +#connection-warning .inner { + width: 600px; + display: block; + margin: 0 auto; + background-color: red; + height: 40px; + line-height: 40px; + text-align: center; + color: white; + font-size: 0.8em; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; +} + .contribute-text { display: block; position: absolute; @@ -186,3 +221,15 @@ a { a:hover { text-decoration: underline; } + +@keyframes appear-from-top { + 0% { + top: -40px; + } + 15%,85% { + top: 0px; + } + 100% { + top: -40px; + } +}