html/index.html

   1 <!doctype html>
   2 <html>
   3 <title>IID Coffee Terminal</title>
   4 <script>
   5     function loadServerScript() {
   6         let script = document.createElement('script');
   7         script.src = "http://10.35.95.2/coffee/js";
   8         document.head.append(script);
   9         script.onerror = function() {
  10             this.parentElement.removeChild(this);
  11             setTimeout(loadServerScript, 10000);
  12         };
  13     }
  14
  15     loadServerScript();
  16
  17     var socket;
  18
  19     function connect() {
  20         console.log("connecting...");
  21         socket = new WebSocket(
  22             "ws://" + document.domain + ':' + location.port,
  23             "merica-terminal-protocol"
  24         );
  25
  26         socket.onopen = function() {
  27             console.log("socket open");
  28             document.getElementById("inputStatus").innerHTML = "connected";
  29         }
  30
  31         socket.onclose = function() {
  32             console.log("socket closed");
  33             document.getElementById("inputStatus").innerHTML = "disconnected";
  34             delete socket;
  35             setTimeout(connect, 10000);
  36         }
  37
  38         socket.onmessage = function(msg) {
  39             updateJSONmsg(msg.data);
  40             if (typeof updateRemote === "function") {
  41                 updateRemote(msg.data);
  42             } else {
  43                 if (localStorage) {
  44                     var now = Date.now();
  45                     localStorage.setItem(now, msg.data);
  46                     console.log(now + ": " + msg.data);
  47                 }
  48             }
  49         }
  50     }
  51
  52     connect();
  53
  54     function updateJSONmsg(msg) {
  55         document.getElementById("localJSON").innerHTML = msg;
  56     }
  57     function printLocalStorage() {
  58         var output = "";
  59         if (localStorage) {
  60             if (localStorage.length) {
  61                 for (var i = 0; i < localStorage.length; i++) {
  62                     output += localStorage.key(i) + ': ' + localStorage.getItem(localStorage.key(i)) + '<br>';
  63                 }
  64             } else {
  65                 output += "nobody here anymore!";
  66             }
  67         } else {
  68             output += "localStorage not supported";
  69         }
  70
  71         updateJSONmsg(output);
  72     }
  73
  74     function clearLocalStorage() {
  75         if (localStorage) {
  76             localStorage.clear();
  77         }
  78     }
  79
  80     function sendReset() {
  81         socket.send("reset");
  82         console.log("reset");
  83     }
  84
  85     function sendClose() {
  86         socket.send("close");
  87         console.log("close");
  88     }
  89 </script>
  90
  91 <body>
  92     <center>
  93     <h1>IID Coffee Terminal</h1>
  94     </center>
  95
  96 <div id="remote"><center>No data from server.</center></div>
  97
  98 <div id="local">
  99     <hr>
 100     <center>
 101     <h2>Debug area</h2>
 102     <button onclick="sendReset()">reset</button>
 103     <span style="display:inline-block; width: 20pt;"></span>
 104     <button onclick="sendClose()">close</button>
 105     <span style="display:inline-block; width: 20pt;"></span>
 106     <button onclick="printLocalStorage()">storage</button>
 107     <span style="display:inline-block; width: 20pt;"></span>
 108     <button onclick="clearLocalStorage()">clear</button>
 109     <span style="display:inline-block; width: 20pt;"></span>
 110     <button onclick="location.reload()">reload</button>
 111     <p>Input: <span id="inputStatus"></span>, JSON message: <span id="localJSON">no data received</span></p>
 112     </center>
 113     <hr>
 114 </div>
 115
 116 </body>
 117 </html>