Able to show and hide null-courses

controllers/total/templates/totalTableByCourse.pug

@@ -13,13 +13,15 @@ table.table.table-bordered.table-striped.table-hover
                     td #{course[type]}
                 td #{course.totalTdEquivalent}
         tr#extend
-            td
-                a(href="#") ...
-            each type in types
-                td
-                    a(href="#") ...
-            td
-                a(href="#") ...
+            td(colspan=2+types.length)
+                a#extendText(href="#") ...
+
+        each course in noCourses
+            tr.no-courses
+                td #{course.name}
+                each type in types
+                    td #{course[type]}
+                td #{course.totalTdEquivalent}
 
         tr.table-active
             td

controllers/total/views.js

@@ -119,7 +119,17 @@ module.exports.totalTableByCourse = function(req, res, render, next) {
         for (let type in cal.Type) {
             res.locals.types.push(type);
         }
-        res.locals.courses = result.courses;
+        res.locals.courses = [];
+        res.locals.noCourses = [];
+
+        for (let course of result.courses) {
+            if (course.totalTdEquivalent > 0) {
+                res.locals.courses.push(course);
+            } else {
+                res.locals.noCourses.push(course);
+            }
+        }
+
         res.locals.total = result.total;
         render('totalTableByCourse.pug');
     });

static/js/totalTable.js

@@ -2,6 +2,7 @@ var loadingDiv = document.getElementById('loading');
 var errorDiv = document.getElementById('error');
 var resultDiv = document.getElementById('result');
 const timeout = 10000;
+var emptyCoursesShown = false;
 
 function getTable() {
     // Send XHR to totalTable
@@ -27,32 +28,50 @@ function setData(text) {
     loadingDiv.style.display = "none";
     errorDiv.style.display = "none";
     resultDiv.innerHTML = text;
+    emptyCoursesShown = false;
 
     var emptyCourses = document.getElementsByClassName('no-courses');
     if (emptyCourses.length === 0) {
         showEmptyCourses();
+        document.getElementById('extend').style.display = "none";
     } else {
         hideEmptyCourses();
         document.getElementById('extend').addEventListener('click', function() {
-            showEmptyCourses();
+            switchEmptyCourses();
         });
     }
+    updateExtendText();
 }
 
 function showEmptyCourses() {
+    emptyCoursesShown = true;
     var emptyCourses = document.getElementsByClassName('no-courses');
     for (var i = 0; i < emptyCourses.length; i++) {
         emptyCourses[i].style.display = "";
     }
-    document.getElementById('extend').style.display = "none";
 }
 
 function hideEmptyCourses() {
+    emptyCoursesShown = false;
     var emptyCourses = document.getElementsByClassName('no-courses');
     for (var i = 0; i < emptyCourses.length; i++) {
         emptyCourses[i].style.display = "none";
     }
-    document.getElementById('extend').style.display = "";
+}
+
+function switchEmptyCourses() {
+    if (emptyCoursesShown) {
+        hideEmptyCourses();
+    } else {
+        showEmptyCourses();
+    }
+    updateExtendText();
+}
+
+function updateExtendText() {
+    document.getElementById('extendText').innerHTML =
+        "Courses with null TD equivalent " + (emptyCoursesShown ? "(hide)" : "(show)");
+
 }
 
 function setError() {