Merge branch 'dev' of tforgione/adejs into master

controllers/total/templates/total.pug

@@ -1,26 +1,46 @@
 extends ../../../templates/base.pug
 
 block content
-    table.table.table-bordered.table-striped.table-hover
+    #loading
-        thead
+        .center
-            tr
+            .loader
-                th Course name
+            div Loading your calendar, please wait...
-                th Detected type
+
-                th Count in hours
+    #error(style="display:none;")
-                th Count in TD equivalent
+        .row
-        tbody
+            .col-2
-            each course in courses
+            .col-8
-                tr
+                .alert.alert-danger
-                    td #{course.name}
+                    .row
-                    td #{course.type}
+                        .col-8
-                    td #{course.time}
+                            .center.btn
-                    td #{course.tdEquivalent}
+                                <strong>Error:</strong> could not connect to calendar
-            tr.table-active
+                        .col-4
-                td
+                            button#tryAgain.btn.btn-primary Click here to try again
-                    strong #{total.name}
+            .col-2
-                td
+    #result
-                    strong #{total.type}
+
-                td
+block extracss
-                    strong #{total.time}
+    style.
-                td
+        .center {
-                    strong #{total.tdEquivalent}
+            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")

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}

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'),
 ]

controllers/total/views.js

@@ -1,7 +1,10 @@
 const cal = require('./calendar');
 
-module.exports.total = function(req, res, render) {
+function computeUserTable(user, callback) {
-    cal.getTotal(req.session.user, (table) => {
+
+    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;
+        result.courses = courses;
-        res.locals.total = total;
+        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 = result.total;
+        render('totalTable.pug');
     });
 }

static/js/totalTable.js

@@ -0,0 +1,38 @@
+let loadingDiv = document.getElementById('loading');
+let errorDiv = document.getElementById('error');
+let resultDiv = document.getElementById('result');
+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() {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+                setData(xhr.responseText);
+            } else {
+                setError();
+            }
+        }
+    };
+    xhr.open('GET', '/total-table', true);
+    xhr.send();
+}
+
+function setData(text) {
+    loadingDiv.style.display = "none";
+    errorDiv.style.display = "none";
+    resultDiv.innerHTML = text;
+}
+
+function setError() {
+    loadingDiv.style.display = "none";
+    errorDiv.style.display = "";
+}
+
+document.getElementById('tryAgain').addEventListener('click', getTable);
+getTable();

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