Better interface, loading icon

This commit is contained in:
Thomas Forgione 2017-09-25 17:17:24 +02:00
parent 5e63027352
commit 944ba2fb03
No known key found for this signature in database
GPG Key ID: C75CD416BD1FFCE1
4 changed files with 49 additions and 5 deletions

View File

@ -1,8 +1,46 @@
extends ../../../templates/base.pug extends ../../../templates/base.pug
block content block content
#loading Loading... please wait #loading
.center
.loader
div Loading your calendar, please wait...
#error(style="display:none;")
.row
.col-2
.col-8
.alert.alert-danger
.row
.col-8
.center.btn
<strong>Error:</strong> could not connect to calendar
.col-4
button#tryAgain.btn.btn-primary Click here to try again
.col-2
#result #result
block extracss
style.
.center {
text-align: center;
}
.loader {
display: inline-block;
text-align: center;
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
block extrajs block extrajs
script(src="/static/js/totalTable.js") script(src="/static/js/totalTable.js")

View File

@ -40,7 +40,7 @@ module.exports.total = function(req, res, render) {
module.exports.totalTable = function(req, res, render) { module.exports.totalTable = function(req, res, render) {
computeUserTable(req.session.user, (result) => { computeUserTable(req.session.user, (result) => {
res.locals.courses = result.courses; res.locals.courses = result.courses;
res.locals.total = total; res.locals.total = result.total;
render('totalTable.pug'); render('totalTable.pug');
}); });
} }

View File

@ -1,9 +1,13 @@
let loadingDiv = document.getElementById('loading'); let loadingDiv = document.getElementById('loading');
let errorDiv = document.getElementById('error');
let resultDiv = document.getElementById('result'); let resultDiv = document.getElementById('result');
const timeout = 30000; const timeout = 10000;
function getTable() { function getTable() {
// Send XHR to totalTable // Send XHR to totalTable
loadingDiv.style.display = "";
errorDiv.style.display = "none";
let xhr = new XMLHttpRequest(); let xhr = new XMLHttpRequest();
xhr.timeout = timeout; xhr.timeout = timeout;
xhr.onreadystatechange = function() { xhr.onreadystatechange = function() {
@ -17,17 +21,18 @@ function getTable() {
}; };
xhr.open('GET', '/total-table', true); xhr.open('GET', '/total-table', true);
xhr.send(); xhr.send();
window.xhr = xhr;
} }
function setData(text) { function setData(text) {
loadingDiv.style.display = "none"; loadingDiv.style.display = "none";
errorDiv.style.display = "none";
resultDiv.innerHTML = text; resultDiv.innerHTML = text;
} }
function setError() { function setError() {
loadingDiv.style.display = "none"; loadingDiv.style.display = "none";
resultDiv.innerHTML = "An error occured"; errorDiv.style.display = "";
} }
document.getElementById('tryAgain').addEventListener('click', getTable);
getTable(); getTable();

View File

@ -12,6 +12,7 @@ html
body { body {
padding-top: 65px; padding-top: 65px;
} }
block extracss
title ADEjs title ADEjs
body body
nav.navbar.navbar-expand-lg.navbar-dark.bg-dark.fixed-top nav.navbar.navbar-expand-lg.navbar-dark.bg-dark.fixed-top