Better interface, loading icon
This commit is contained in:
parent
5e63027352
commit
944ba2fb03
|
@ -1,8 +1,46 @@
|
|||
extends ../../../templates/base.pug
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
script(src="/static/js/totalTable.js")
|
||||
|
|
|
@ -40,7 +40,7 @@ module.exports.total = function(req, res, render) {
|
|||
module.exports.totalTable = function(req, res, render) {
|
||||
computeUserTable(req.session.user, (result) => {
|
||||
res.locals.courses = result.courses;
|
||||
res.locals.total = total;
|
||||
res.locals.total = result.total;
|
||||
render('totalTable.pug');
|
||||
});
|
||||
}
|
||||
|
|
|
@ -1,9 +1,13 @@
|
|||
let loadingDiv = document.getElementById('loading');
|
||||
let errorDiv = document.getElementById('error');
|
||||
let resultDiv = document.getElementById('result');
|
||||
const timeout = 30000;
|
||||
const timeout = 10000;
|
||||
|
||||
function getTable() {
|
||||
// Send XHR to totalTable
|
||||
loadingDiv.style.display = "";
|
||||
errorDiv.style.display = "none";
|
||||
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.timeout = timeout;
|
||||
xhr.onreadystatechange = function() {
|
||||
|
@ -17,17 +21,18 @@ function getTable() {
|
|||
};
|
||||
xhr.open('GET', '/total-table', true);
|
||||
xhr.send();
|
||||
window.xhr = xhr;
|
||||
}
|
||||
|
||||
function setData(text) {
|
||||
loadingDiv.style.display = "none";
|
||||
errorDiv.style.display = "none";
|
||||
resultDiv.innerHTML = text;
|
||||
}
|
||||
|
||||
function setError() {
|
||||
loadingDiv.style.display = "none";
|
||||
resultDiv.innerHTML = "An error occured";
|
||||
errorDiv.style.display = "";
|
||||
}
|
||||
|
||||
document.getElementById('tryAgain').addEventListener('click', getTable);
|
||||
getTable();
|
||||
|
|
|
@ -12,6 +12,7 @@ html
|
|||
body {
|
||||
padding-top: 65px;
|
||||
}
|
||||
block extracss
|
||||
title ADEjs
|
||||
body
|
||||
nav.navbar.navbar-expand-lg.navbar-dark.bg-dark.fixed-top
|
||||
|
|
Loading…
Reference in New Issue