From 5e630273527c285013219b407f34ae3ab76e38db Mon Sep 17 00:00:00 2001 From: Thomas Forgione Date: Mon, 25 Sep 2017 15:26:06 +0200 Subject: [PATCH] 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();