<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../resources/stylesheet.css"/>
    <title>{{device}} WebUI HMI</title>
    <meta charset="UTF-8">
</head>
<body>
<div class="debug">
        <div class="xfc-pad">
            <textarea id=lcd cols="21" rows="4" name="textfeld" class="display" readonly></textarea>
            <br>
            <a href="javascript:callButton('{{E_UP_BUTTON}}')" class="button-up button-simple">&#9650;</a>
            <a href="javascript:callButton('{{E_DOWN_BUTTON}}')" class="button-down button-simple">&#9660;</a>
            <a href="javascript:callButton('{{E_START_BUTTON}}')" class="button-play button-simple">&#9654;</a>
            <a href="javascript:callButton('{{E_STOP_BUTTON}}')" class="button-stop button-simple">&#9632;</a>
            <a href="javascript:callButton('{{E_DIAMOND_BUTTON}}')" class="button-diamond button-simple">&#9670;</a>
            <a href="javascript:callButton('{{E_VIRT_DEBUG_KEY}}')" class="button-up button-simple">&#x1f4d6;</a>
            <br><br>
            RFID (str): <input id="rfidTag" type="text" value="{{ID_TAG_WILDCARD}}"> <a href="javascript:callRfid()" class="button-simple">rfid</a>
        </div>
</div>
<script>
    var sock;
    var data;
    var wsuri = "ws://" + window.location.hostname + ":8192";
    var setconfigurationrequest = {"SetConfigurationRequest": {"EventBasedMessages": true}}
    var statusrequest = {"StatusRequest": ""}
    var xhttp = new XMLHttpRequest();
    document.addEventListener("keypress", function (e) { if(e.which == 13) callRfid() }); // Numerical code for "enter"

    window.onload = function()
    {
        connectWS();
    }

    function connectWS()
    {
        sock = new WebSocket(wsuri);
        if (sock)
        {
            sock.onopen = function(e)
            {
                sendWS(setconfigurationrequest)
                sendWS(statusrequest)
            }
            sock.onclose = function(e) {
                reset();
                setTimeout(function() { connectWS(); }, 1000);
            }
            sock.onmessage = function(e) {
                data = JSON.parse(e.data);
                setTextOfLcd();
            }
            sock.onerror = function(err) {
                reset();
                if (sock)
                {
                    sock.close();
                }
            };
        }
    }

    function sendWS(message)
    {
        var msg = JSON.stringify(message)
        sock.send(msg)
    }

    function reset()
    {
        sock = null;
        data = {"display": "", "led": ""};
        setTextOfLcd();
    }

    function setTextOfLcd()
    {
        document.getElementById('lcd').value = data["display"];
    }

    function callRfid()
    {
        tag = document.getElementById('rfidTag').value;
        sendRequest('rfidString='+tag);
    }

    function callButton(action)
    {
        sendRequest('Button='+action);
    }

    function sendRequest(message)
    {
        xhttp.open("POST", "/debug", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send(message);
    }
</script>
</body>
</html>
