Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add connection-warning when server response takes more than 30sec #58

Merged
merged 3 commits into from
Sep 15, 2016
Merged

add connection-warning when server response takes more than 30sec #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
15a772e
add connection-warning when server response takes more than 30sec
Sep 15, 2016
d8ad786
ensure error message can be shown more than once
Sep 15, 2016
8445949
keep warning until data loads
Sep 15, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion api/static/app/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where does the style of #connection-warning become set back to none when some loading succeeds after > 30s?

Copy link
Contributor Author

@guicoelho guicoelho Sep 15, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it takes more than 30sec, then warning is displayed. The warning element has an animation, which is triggered when the element is first shown. This animation shows the element and hides it 15sec later.

I've found a problem, however: only on the first timeout the warning will show, because the animation only starts when the element goes from display: none to display: block.

I've added a fix - see next commit.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok - and just to be sure: will the warning immediately disappear when data isLoaded (i.e. when the overlay is removed)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As discussed on Basecamp - now warning stays until data loads 👍

dataLoaded();
});
setTimeout(fetchAndReschedule, REFRESH_TIME_MINUTES * 60 * 1000);
}

Expand Down
3 changes: 3 additions & 0 deletions api/static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@
<!-- end Mixpanel -->
</head>
<body>
<div id="connection-warning">
<div class="inner">Oops! We're having trouble reaching the server. We'll try again in a few seconds.</div>
</div>
<svg class="map sea"></svg>
<canvas class="map wind"></canvas>
<!-- <canvas class="map solar"></canvas> -->
Expand Down
47 changes: 47 additions & 0 deletions api/static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -186,3 +221,15 @@ a {
a:hover {
text-decoration: underline;
}

@keyframes appear-from-top {
0% {
top: -40px;
}
15%,85% {
top: 0px;
}
100% {
top: -40px;
}
}