Rework offline mode

In offline mode, we now show the collected data and inform the user
that she can still make a coffee :)

The main idea is that when the server is offline, no leftovers from
remote UI is shown, only local div is shown. Hiding and showing of
local/remote UI has to be implemented in remote-provided
javascript (in coffee-flask repo).

diff --git a/html/index.html b/html/index.html
index 49a1f9301a2bbe48e9e9f88d9e55529f8f8108a0..f4ffe70ff9e8920a59dae8bacc31da67fde3f724 100644 (file)
--- a/html/index.html
+++ b/html/index.html
@@ -18,6 +18,17 @@
 
     var socket;
 
+    function showOfflineQueue(queue) {
+        if (Array.isArray(queue)) {
+           let elem = document.getElementById("offline_data");
+           elem.innerHTML = '';
+           for (var i = queue.length - 1; i >= 0 && i >= queue.length - 20; i--) {
+               let entry = queue[i];
+               elem.innerHTML += (new Date(entry.time)).toGMTString() + ": <tt>" + entry.data + "</tt><br>";
+            }
+        }
+    }
+
     function connect() {
         console.log("connecting...");
         socket = new WebSocket(
@@ -51,6 +62,7 @@
                    catch (err) {
                        console.log(err);
                    }
+                   showOfflineQueue(queue);
                 }
             }
         }
@@ -100,9 +112,16 @@
     <h1>IID Coffee Terminal</h1>
     </center>
 
-<div id="remote"><center>No data from server.</center></div>
+<div id="remote"></div>
 
 <div id="local">
+    <h2>Offline mode</h2>
+    <p><b>You can make coffees as usually – swipe a card/token and select a beverage.</b><br>
+    All data about coffees are collected and will be pushed to the server once it is online again!</p>
+    <h3>Collected data (last 20 entries)</h3>
+    <div id="offline_data">
+    </div>
+
     <hr>
     <center>
     <h2>Debug area</h2>
@@ -117,7 +136,6 @@
     <button onclick="location.reload()">reload</button>
     <p>Input: <span id="inputStatus"></span>, JSON message: <span id="localJSON">no data received</span></p>
     </center>
-    <hr>
 </div>
 
 </body>