From 944ba2fb034ef8510777e648c169a3c5ebdcf30f Mon Sep 17 00:00:00 2001 From: Thomas Forgione Date: Mon, 25 Sep 2017 17:17:24 +0200 Subject: [PATCH] Better interface, loading icon --- controllers/total/templates/total.pug | 40 ++++++++++++++++++++++++++- controllers/total/views.js | 2 +- static/js/totalTable.js | 11 ++++++-- templates/base.pug | 1 + 4 files changed, 49 insertions(+), 5 deletions(-) diff --git a/controllers/total/templates/total.pug b/controllers/total/templates/total.pug index 0093a60..3e8068c 100644 --- a/controllers/total/templates/total.pug +++ b/controllers/total/templates/total.pug @@ -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 + Error: 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") diff --git a/controllers/total/views.js b/controllers/total/views.js index 1028d0b..bb918d1 100644 --- a/controllers/total/views.js +++ b/controllers/total/views.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'); }); } diff --git a/static/js/totalTable.js b/static/js/totalTable.js index 1ba5b01..11f2bf3 100644 --- a/static/js/totalTable.js +++ b/static/js/totalTable.js @@ -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(); diff --git a/templates/base.pug b/templates/base.pug index 39fcf9b..d924a78 100644 --- a/templates/base.pug +++ b/templates/base.pug @@ -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