Hide empty courses, click to show them

Fixes #7

static/js/totalTable.js

@@ -1,6 +1,6 @@
-let loadingDiv = document.getElementById('loading');
-let errorDiv = document.getElementById('error');
-let resultDiv = document.getElementById('result');
+var loadingDiv = document.getElementById('loading');
+var errorDiv = document.getElementById('error');
+var resultDiv = document.getElementById('result');
 const timeout = 10000;
 
 function getTable() {
@@ -27,6 +27,32 @@ function setData(text) {
     loadingDiv.style.display = "none";
     errorDiv.style.display = "none";
     resultDiv.innerHTML = text;
+
+    var emptyCourses = document.getElementsByClassName('no-courses');
+    if (emptyCourses.length === 0) {
+        showEmptyCourses();
+    } else {
+        hideEmptyCourses();
+        document.getElementById('extend').addEventListener('click', function() {
+            showEmptyCourses();
+        });
+    }
+}
+
+function showEmptyCourses() {
+    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() {
+    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 setError() {