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                     var now = Date.now();
  47                     localStorage.setItem(now, msg.data);
  48                     console.log(now + ": " + msg.data);
  49                 }
  50             }
  51         }
  52     }
  53
  54     connect();
  55
  56     function updateJSONmsg(msg) {
  57         document.getElementById("localJSON").innerHTML = msg;
  58     }
  59     function printLocalStorage() {
  60         var output = "";
  61         if (localStorage) {
  62             if (localStorage.length) {
  63                 for (var i = 0; i < localStorage.length; i++) {
  64                     output += localStorage.key(i) + ': ' + localStorage.getItem(localStorage.key(i)) + '<br>';
  65                 }
  66             } else {
  67                 output += "nobody here anymore!";
  68             }
  69         } else {
  70             output += "localStorage not supported";
  71         }
  72
  73         updateJSONmsg(output);
  74     }
  75
  76     function clearLocalStorage() {
  77         if (localStorage) {
  78             localStorage.clear();
  79         }
  80     }
  81
  82     function sendReset() {
  83         socket.send("reset");
  84         console.log("reset");
  85     }
  86
  87     function sendClose() {
  88         socket.send("close");
  89         console.log("close");
  90     }
  91 </script>
  92 </head>
  93 <body>
  94     <center>
  95     <h1>IID Coffee Terminal</h1>
  96     </center>
  97
  98 <div id="remote"><center>No data from server.</center></div>
  99
 100 <div id="local">
 101     <hr>
 102     <center>
 103     <h2>Debug area</h2>
 104     <button onclick="sendReset()">reset</button>
 105     <span style="display:inline-block; width: 20pt;"></span>
 106     <button onclick="sendClose()">close</button>
 107     <span style="display:inline-block; width: 20pt;"></span>
 108     <button onclick="printLocalStorage()">storage</button>
 109     <span style="display:inline-block; width: 20pt;"></span>
 110     <button onclick="clearLocalStorage()">clear</button>
 111     <span style="display:inline-block; width: 20pt;"></span>
 112     <button onclick="location.reload()">reload</button>
 113     <p>Input: <span id="inputStatus"></span>, JSON message: <span id="localJSON">no data received</span></p>
 114     </center>
 115     <hr>
 116 </div>
 117
 118 </body>
 119 </html>