html/index.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8"/>
   5 <title>IID Coffee Terminal</title>
   6 <script>
   7     function loadServerScript() {
   8         let script = document.createElement('script');
   9         script.src = "http://localhost:5000/js";
  10         document.head.append(script);
  11         script.onerror = function() {
  12             this.parentElement.removeChild(this);
  13             setTimeout(loadServerScript, 10000);
  14         };
  15     }
  16
  17     loadServerScript();
  18
  19     var socket;
  20
  21     function showOfflineQueue(queue) {
  22         if (Array.isArray(queue)) {
  23             let elem = document.getElementById("offline_data");
  24             elem.innerHTML = '';
  25             for (var i = queue.length - 1; i >= 0 && i >= queue.length - 20; i--) {
  26                 let entry = queue[i];
  27                 elem.innerHTML += (new Date(entry.time)).toGMTString() + ": <tt>" + entry.data + "</tt><br>";
  28             }
  29         }
  30     }
  31
  32     function connect() {
  33         console.log("connecting...");
  34         socket = new WebSocket(
  35             "ws://" + document.domain + ':' + location.port,
  36             "merica-terminal-protocol"
  37         );
  38
  39         socket.onopen = function() {
  40             console.log("socket open");
  41             document.getElementById("inputStatus").innerHTML = "connected";
  42         }
  43
  44         socket.onclose = function() {
  45             console.log("socket closed");
  46             document.getElementById("inputStatus").innerHTML = "disconnected";
  47             delete socket;
  48             setTimeout(connect, 10000);
  49         }
  50
  51         socket.onmessage = function(msg) {
  52             updateJSONmsg(msg.data);
  53             if (typeof updateRemote === "function") {
  54                 updateRemote(msg.data);
  55             } else {
  56                 if (localStorage) {
  57                     let queue = JSON.parse(localStorage.getItem("offlineQueue")) || [];
  58                     queue.push({ time: Date.now(), data: msg.data });
  59                     try {
  60                         localStorage.setItem("offlineQueue", JSON.stringify(queue));
  61                     }
  62                     catch (err) {
  63                         console.log(err);
  64                     }
  65                     showOfflineQueue(queue);
  66                 }
  67             }
  68         }
  69     }
  70
  71     connect();
  72
  73     function updateJSONmsg(msg) {
  74         document.getElementById("localJSON").innerHTML = msg;
  75     }
  76     function printLocalStorage() {
  77         var output = "";
  78         if (localStorage) {
  79             if (localStorage.length) {
  80                 for (var i = 0; i < localStorage.length; i++) {
  81                     output += localStorage.key(i) + ': ' + localStorage.getItem(localStorage.key(i)) + '<br>';
  82                 }
  83             } else {
  84                 output += "nobody here anymore!";
  85             }
  86         } else {
  87             output += "localStorage not supported";
  88         }
  89
  90         updateJSONmsg(output);
  91     }
  92
  93     function clearLocalStorage() {
  94         if (localStorage) {
  95             localStorage.clear();
  96         }
  97     }
  98
  99     function sendReset() {
 100         socket.send("reset");
 101         console.log("reset");
 102     }
 103
 104     function sendClose() {
 105         socket.send("close");
 106         console.log("close");
 107     }
 108 </script>
 109 </head>
 110 <body>
 111     <center>
 112     <h1>IID Coffee Terminal</h1>
 113     </center>
 114
 115 <div id="remote"></div>
 116
 117 <div id="local">
 118     <h2>Offline mode</h2>
 119     <p><b>You can make coffees as usually – swipe a card/token and select a beverage.</b><br>
 120     All data about coffees are collected and will be pushed to the server once it is online again!</p>
 121     <h3>Collected data (last 20 entries)</h3>
 122     <div id="offline_data">
 123     </div>
 124
 125     <hr>
 126     <center>
 127     <h2>Debug area</h2>
 128     <button onclick="sendReset()">reset</button>
 129     <span style="display:inline-block; width: 20pt;"></span>
 130     <button onclick="sendClose()">close</button>
 131     <span style="display:inline-block; width: 20pt;"></span>
 132     <button onclick="printLocalStorage()">storage</button>
 133     <span style="display:inline-block; width: 20pt;"></span>
 134     <button onclick="clearLocalStorage()">clear</button>
 135     <span style="display:inline-block; width: 20pt;"></span>
 136     <button onclick="location.reload()">reload</button>
 137     <p>Input: <span id="inputStatus"></span>, JSON message: <span id="localJSON">no data received</span></p>
 138     </center>
 139 </div>
 140
 141 </body>
 142 </html>