From fdb2202b27fd1252c45c9fc83f9088e5c523fe38 Mon Sep 17 00:00:00 2001
From: Michal Sojka <michal.sojka@cvut.cz>
Date: Thu, 16 Aug 2018 19:42:53 +0200
Subject: [PATCH] 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).
---
 html/index.html | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/html/index.html b/html/index.html
index 49a1f93..f4ffe70 100644
--- 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>
-- 
2.39.2