From 5e630273527c285013219b407f34ae3ab76e38db Mon Sep 17 00:00:00 2001 From: Thomas Forgione Date: Mon, 25 Sep 2017 15:26:06 +0200 Subject: [PATCH 1/2] Added begining of XHR way of doing stuff (#3) --- controllers/total/templates/total.pug | 28 ++++-------------- controllers/total/templates/totalTable.pug | 23 +++++++++++++++ controllers/total/urls.js | 1 + controllers/total/views.js | 25 ++++++++++++---- static/js/totalTable.js | 33 ++++++++++++++++++++++ 5 files changed, 82 insertions(+), 28 deletions(-) create mode 100644 controllers/total/templates/totalTable.pug create mode 100644 static/js/totalTable.js diff --git a/controllers/total/templates/total.pug b/controllers/total/templates/total.pug index 06da3ea..0093a60 100644 --- a/controllers/total/templates/total.pug +++ b/controllers/total/templates/total.pug @@ -1,26 +1,8 @@ extends ../../../templates/base.pug block content - table.table.table-bordered.table-striped.table-hover - thead - tr - th Course name - th Detected type - th Count in hours - th Count in TD equivalent - tbody - each course in courses - tr - td #{course.name} - td #{course.type} - td #{course.time} - td #{course.tdEquivalent} - tr.table-active - td - strong #{total.name} - td - strong #{total.type} - td - strong #{total.time} - td - strong #{total.tdEquivalent} + #loading Loading... please wait + #result + +block extrajs + script(src="/static/js/totalTable.js") diff --git a/controllers/total/templates/totalTable.pug b/controllers/total/templates/totalTable.pug new file mode 100644 index 0000000..608558a --- /dev/null +++ b/controllers/total/templates/totalTable.pug @@ -0,0 +1,23 @@ +table.table.table-bordered.table-striped.table-hover + thead + tr + th Course name + th Detected type + th Count in hours + th Count in TD equivalent + tbody + each course in courses + tr + td #{course.name} + td #{course.type} + td #{course.time} + td #{course.tdEquivalent} + tr.table-active + td + strong #{total.name} + td + strong #{total.type} + td + strong #{total.time} + td + strong #{total.tdEquivalent} diff --git a/controllers/total/urls.js b/controllers/total/urls.js index 6ef5c38..a0be341 100644 --- a/controllers/total/urls.js +++ b/controllers/total/urls.js @@ -2,4 +2,5 @@ const url = require('create-url').url; module.exports = [ url('/total/', 'total', 'total'), + url('/total-table', 'totalTable', 'totalTable'), ] diff --git a/controllers/total/views.js b/controllers/total/views.js index 7969220..1028d0b 100644 --- a/controllers/total/views.js +++ b/controllers/total/views.js @@ -1,7 +1,10 @@ const cal = require('./calendar'); -module.exports.total = function(req, res, render) { - cal.getTotal(req.session.user, (table) => { +function computeUserTable(user, callback) { + + let result = {}; + + cal.getTotal(user, (table) => { let courses = []; let total = { name: "Total", @@ -22,10 +25,22 @@ module.exports.total = function(req, res, render) { total.tdEquivalent += table[key].tdEquivalent; } - res.locals.courses = courses; - res.locals.total = total; + result.courses = courses; + result.total = total; + callback(result); - render('total.pug'); + }); +} + +module.exports.total = function(req, res, render) { + render('total.pug'); +} + +module.exports.totalTable = function(req, res, render) { + computeUserTable(req.session.user, (result) => { + res.locals.courses = result.courses; + res.locals.total = total; + render('totalTable.pug'); }); } diff --git a/static/js/totalTable.js b/static/js/totalTable.js new file mode 100644 index 0000000..1ba5b01 --- /dev/null +++ b/static/js/totalTable.js @@ -0,0 +1,33 @@ +let loadingDiv = document.getElementById('loading'); +let resultDiv = document.getElementById('result'); +const timeout = 30000; + +function getTable() { + // Send XHR to totalTable + let xhr = new XMLHttpRequest(); + xhr.timeout = timeout; + xhr.onreadystatechange = function() { + if (xhr.readyState === XMLHttpRequest.DONE) { + if (xhr.status === 200) { + setData(xhr.responseText); + } else { + setError(); + } + } + }; + xhr.open('GET', '/total-table', true); + xhr.send(); + window.xhr = xhr; +} + +function setData(text) { + loadingDiv.style.display = "none"; + resultDiv.innerHTML = text; +} + +function setError() { + loadingDiv.style.display = "none"; + resultDiv.innerHTML = "An error occured"; +} + +getTable(); From 944ba2fb034ef8510777e648c169a3c5ebdcf30f Mon Sep 17 00:00:00 2001 From: Thomas Forgione Date: Mon, 25 Sep 2017 17:17:24 +0200 Subject: [PATCH 2/2] 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