From 14293bc9a5b341535708fca6ee8532703877525c Mon Sep 17 00:00:00 2001 From: Guilherme Coelho Date: Thu, 15 Sep 2016 22:02:03 +0200 Subject: [PATCH] add connection-warning when server response takes more than 30sec (#58) * add connection-warning when server response takes more than 30sec * ensure error message can be shown more than once * keep warning until data loads --- app/main.js | 10 +++++++++- index.html | 3 +++ style.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 59 insertions(+), 1 deletion(-) diff --git a/app/main.js b/app/main.js index a62ae0f371..8127b4f611 100644 --- a/app/main.js +++ b/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/index.html b/index.html index 7d997e722f..5de8012661 100644 --- a/index.html +++ b/index.html @@ -54,6 +54,9 @@ +
+
Oops! We're having trouble reaching the server. We'll try again in a few seconds.
+
diff --git a/style.css b/style.css index 48b71512bd..de49d8aea8 100644 --- a/style.css +++ b/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; + } +}