html/index.html

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