Attempt to sanitize the JS code + fix few bugs

The problems solved by this commit:

- When another user logs in during logout timeout, he was logged out
  automatically, even before choosing a coffee.

- Logout timer was not shown always when it should. After choosing a
  coffee, the timer was shown for a while. Then, after the user page
  was reloaded from the server, the timer disappeared and after an
  elapsed second, the timer was shown again.

- Local debug area was not shown and hidden consistently.

The first problem was resolved by canceling the logout timer after
login. The last two problems were fixed by centralizing of the UI
updates to a single function, which does the update based on the value
of state variables.

diff --git a/templates/main.js b/templates/main.js
index bccd67b3a34e35b8b8fc02a2e696ca96011df6d4..f945b292cd14f4b767c725c9ae5bd4632f46ce93 100644 (file)
--- a/templates/main.js
+++ b/templates/main.js
@@ -1,7 +1,11 @@
 var flask = "{{ url_for('hello', _external=True) }}"
 
-var updateRemote = undefined;
-var loggedIn = false;
+// State variables
+
+var updateRemote = undefined;   // defined iff remote server accessible
+var loggedIn = false;           // true after swiping the cards
+var timeToLogout = undefined;   // defined during logout countdown
+var logoutTimer;
 
 console.log("hello from flask");
 //sendJSON("{\"type\":\"empty\"}");
@@ -28,25 +32,25 @@ function loadLocalStorage() {
 
 var flavorChosen;
 
-function countingTimeLogout(count_time){
-    document.getElementById("logout_button").value = '\nlogout\n(' + count_time + ' s)';
-    if (count_time == 0) {
-        logout();
-    } else {
-        setTimeout(function() { countingTimeLogout(count_time - 1); }, 1000);
-    }
-}
-
-function updateNextStep()
+// Central function to update UI elements. To ensure that the UI is
+// consistent, other code should only change state variables and then
+// call this function. This function updates the UI to match the state.
+function updateUI()
 {
-    if (loggedIn) {
-       document.getElementById("nextStep").innerHTML = "Now select a beverage on the coffee machine…";
+    if (updateRemote === undefined) {
+        update("remote", "<center>Server offline...</center>");
+        document.getElementById("local").style.display = "block";
     } else {
-        if (flavorChosen !== undefined) {
-           document.getElementById("nextStep").innerHTML = "Enjoy your " + flavorChosen + "!";
-           flavorChosen=undefined;
-           countingTimeLogout(10); //mean 10 seconds
+        document.getElementById("local").style.display = "none";
+
+        if (loggedIn) {
+            document.getElementById("nextStep").innerHTML = "Now select a beverage on the coffee machine…";
+        } else {
+            document.getElementById("nextStep").innerHTML = "Enjoy your " + flavorChosen + "!";
         }
+
+        if (timeToLogout !== undefined)
+            document.getElementById("logout_button").value = '\nlogout\n(' + timeToLogout + ' s)';
     }
 }
 
@@ -89,9 +93,7 @@ function loadRemote(string) {
             update("remote", this.responseText);
             updateRemote = hiddenUpdateRemote;
             loadLocalStorage();
-            if (loggedIn) {
-                document.getElementById("local").style.display = "none";
-            }
+            updateUI();
         }
     };
     xhr.open("GET", flask, true);
@@ -106,11 +108,11 @@ function ajax(method, route, data, id) {
         if (this.readyState == 4) {
             if (this.status == 200) {
                 update(id, this.responseText);
-                updateNextStep();
+                updateUI();
             } else {
                 updateRemote = undefined;
-                update("remote", "<center>Server offline...</center>");
-                document.getElementById("local").style.display = "block";
+                updateUI();
+
                 if (localStorage) {
                     var now = Date.now();
                     var fuck = JSON.stringify({
@@ -140,14 +142,26 @@ function ajax(method, route, data, id) {
 function login(id) {
     ajax("POST", "login", id, "user");
     loggedIn = true;
-    document.getElementById("local").style.display = "none";
+    clearTimeout(logoutTimer);
+    timeToLogout = undefined;
 }
 
 function logout() {
     sendReset();
     ajax("GET", "logout", "", "user");
     loggedIn = false;
-    document.getElementById("local").style.display = "block";
+    timeToLogout = undefined;
+}
+
+function countingTimeLogout(count_time)
+{
+    timeToLogout = count_time;
+    updateUI();
+    if (count_time == 0) {
+        logout();
+    } else {
+        logoutTimer = setTimeout(function() { countingTimeLogout(count_time - 1); }, 1000);
+    }
 }
 
 function renameUser() {
@@ -173,6 +187,7 @@ function addCoffee(flavor) {
         ajax("POST", "coffee/add", data, "user");
         flavorChosen = flavor;
         loggedIn = false;
+        countingTimeLogout(10); //mean 10 seconds
     }
 }