]> rtime.felk.cvut.cz Git - coffee/mt-apps.git/blobdiff - html/index.html
Use server at localhost
[coffee/mt-apps.git] / html / index.html
index c5e19f3194612c0e7d097df75cd56688bb197179..afc244f2dfa71c97ab975ae8ec527e4da0f00441 100644 (file)
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<title>Websocket example</title>
-
+<head>
+<meta charset="utf-8"/>
+<title>IID Coffee Terminal</title>
 <script>
-    var socket = new WebSocket(
-        "ws://" + document.domain + ':' + location.port,
-        "dumb-increment-protocol"
-    );
-
-    function update(id, msg) {
-        document.getElementById(id).innerHTML = msg;
+    function loadServerScript() {
+       let script = document.createElement('script');
+       script.src = "http://localhost:5000/js";
+       document.head.append(script);
+       script.onerror = function() {
+           this.parentElement.removeChild(this);
+           setTimeout(loadServerScript, 10000);
+       };
     }
 
-    socket.onopen = function() {
-        console.log("socket open");
-        update("text", "open");
-    }
+    loadServerScript();
+
+    var socket;
 
-    socket.onclose = function() {
-        console.log("socket close");
-        update("text", "closed");
+    function connect() {
+        console.log("connecting...");
+       socket = new WebSocket(
+            "ws://" + document.domain + ':' + location.port,
+            "merica-terminal-protocol"
+       );
+
+       socket.onopen = function() {
+            console.log("socket open");
+            document.getElementById("inputStatus").innerHTML = "connected";
+       }
+
+       socket.onclose = function() {
+            console.log("socket closed");
+            document.getElementById("inputStatus").innerHTML = "disconnected";
+           delete socket;
+           setTimeout(connect, 10000);
+       }
+
+       socket.onmessage = function(msg) {
+            updateJSONmsg(msg.data);
+            if (typeof updateRemote === "function") {
+               updateRemote(msg.data);
+            } else {
+               if (localStorage) {
+                    var now = Date.now();
+                    localStorage.setItem(now, msg.data);
+                    console.log(now + ": " + msg.data);
+               }
+            }
+       }
     }
 
-    socket.onmessage = function(json) {
-        var msg = JSON.parse(json.data);
+    connect();
+
+    function updateJSONmsg(msg) {
+        document.getElementById("localJSON").innerHTML = msg;
+    }
+    function printLocalStorage() {
+        var output = "";
+        if (localStorage) {
+            if (localStorage.length) {
+                for (var i = 0; i < localStorage.length; i++) {
+                    output += localStorage.key(i) + ': ' + localStorage.getItem(localStorage.key(i)) + '<br>';
+                }
+            } else {
+                output += "nobody here anymore!";
+            }
+        } else {
+            output += "localStorage not supported";
+        }
 
-        update("json", JSON.stringify(msg))
+        updateJSONmsg(output);
+    }
 
-        switch(msg.type) {
-            case "rfid":
-                update("text", msg.uid + " " + msg.size);
-                break;
+    function clearLocalStorage() {
+        if (localStorage) {
+            localStorage.clear();
         }
     }
 
     function sendReset() {
-        socket.send("reset\n");
+        socket.send("reset");
         console.log("reset");
     }
 
     function sendClose() {
-        socket.send("close\n");
+        socket.send("close");
         console.log("close");
     }
 </script>
-
-
-
+</head>
 <body>
+    <center>
+    <h1>IID Coffee Terminal</h1>
+    </center>
 
-<p id="json"></p>
-<p id="text"></p>
+<div id="remote"><center>No data from server.</center></div>
 
-<a href="https://time.is/" id="time_is_link" rel="nofollow"></a>
-<span id="Czechia_z721"></span>
-<script src="//widget.time.is/t.js"></script>
-<script>
-time_is_widget.init({Czechia_z721:{}});
-</script>
+<div id="local">
+    <hr>
+    <center>
+    <h2>Debug area</h2>
+    <button onclick="sendReset()">reset</button>
+    <span style="display:inline-block; width: 20pt;"></span>
+    <button onclick="sendClose()">close</button>
+    <span style="display:inline-block; width: 20pt;"></span>
+    <button onclick="printLocalStorage()">storage</button>
+    <span style="display:inline-block; width: 20pt;"></span>
+    <button onclick="clearLocalStorage()">clear</button>
+    <span style="display:inline-block; width: 20pt;"></span>
+    <button onclick="location.reload()">reload</button>
+    <p>Input: <span id="inputStatus"></span>, JSON message: <span id="localJSON">no data received</span></p>
+    </center>
+    <hr>
+</div>
 
-<button onclick="sendReset()">reset</button>
-<button onclick="sendClose()">close</button>
 </body>
 </html>