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 connect() {
  22         console.log("connecting...");
  23         socket = new WebSocket(
  24             "ws://" + document.domain + ':' + location.port,
  25             "merica-terminal-protocol"
  26         );
  27
  28         socket.onopen = function() {
  29             console.log("socket open");
  30             document.getElementById("inputStatus").innerHTML = "connected";
  31         }
  32
  33         socket.onclose = function() {
  34             console.log("socket closed");
  35             document.getElementById("inputStatus").innerHTML = "disconnected";
  36             delete socket;
  37             setTimeout(connect, 10000);
  38         }
  39
  40         socket.onmessage = function(msg) {
  41             updateJSONmsg(msg.data);
  42             if (typeof updateRemote === "function") {
  43                 updateRemote(msg.data);
  44             } else {
  45                 if (localStorage) {
  46                     let queue = JSON.parse(localStorage.getItem("offlineQueue")) || [];
  47                     queue.push({ time: Date.now(), data: msg.data });
  48                     try {
  49                         localStorage.setItem("offlineQueue", JSON.stringify(queue));
  50                     }
  51                     catch (err) {
  52                         console.log(err);
  53                     }
  54                 }
  55             }
  56         }
  57     }
  58
  59     connect();
  60
  61     function updateJSONmsg(msg) {
  62         document.getElementById("localJSON").innerHTML = msg;
  63     }
  64     function printLocalStorage() {
  65         var output = "";
  66         if (localStorage) {
  67             if (localStorage.length) {
  68                 for (var i = 0; i < localStorage.length; i++) {
  69                     output += localStorage.key(i) + ': ' + localStorage.getItem(localStorage.key(i)) + '<br>';
  70                 }
  71             } else {
  72                 output += "nobody here anymore!";
  73             }
  74         } else {
  75             output += "localStorage not supported";
  76         }
  77
  78         updateJSONmsg(output);
  79     }
  80
  81     function clearLocalStorage() {
  82         if (localStorage) {
  83             localStorage.clear();
  84         }
  85     }
  86
  87     function sendReset() {
  88         socket.send("reset");
  89         console.log("reset");
  90     }
  91
  92     function sendClose() {
  93         socket.send("close");
  94         console.log("close");
  95     }
  96 </script>
  97 </head>
  98 <body>
  99     <center>
 100     <h1>IID Coffee Terminal</h1>
 101     </center>
 102
 103 <div id="remote"><center>No data from server.</center></div>
 104
 105 <div id="local">
 106     <hr>
 107     <center>
 108     <h2>Debug area</h2>
 109     <button onclick="sendReset()">reset</button>
 110     <span style="display:inline-block; width: 20pt;"></span>
 111     <button onclick="sendClose()">close</button>
 112     <span style="display:inline-block; width: 20pt;"></span>
 113     <button onclick="printLocalStorage()">storage</button>
 114     <span style="display:inline-block; width: 20pt;"></span>
 115     <button onclick="clearLocalStorage()">clear</button>
 116     <span style="display:inline-block; width: 20pt;"></span>
 117     <button onclick="location.reload()">reload</button>
 118     <p>Input: <span id="inputStatus"></span>, JSON message: <span id="localJSON">no data received</span></p>
 119     </center>
 120     <hr>
 121 </div>
 122
 123 </body>
 124 </html>