<html lang="en">
<head>
    <title>KPi - Blinkt!</title>

    <script>

        let xhr = new XMLHttpRequest();

        function turnOn() {
            xhr.open("POST", "/on");
            xhr.send()
        }

        function turnOff() {
            xhr.open("POST", "/off");
            xhr.send()
        }

        function turnLightMode(id) {
            xhr.open("POST", "/lightmode");
            xhr.send(id)
        }

        function morseWord() {
            const text = document.getElementById("morse_text").value.trim();
            xhr.open("POST", "/morse");
            xhr.send(text)
        }

        function shutdown() {
            xhr.open("POST", "/shutdown");
            xhr.send()
        }
    </script>
</head>

<body>
<h1>Kotlin Native Blinkt! controller</h1>
<table>
    <tr>
        <td>
            <fieldset>
                <legend>Light switch</legend>
                <button onclick="turnOn()">On</button>
                <button onclick="turnOff()">Off</button>
            </fieldset>
        </td>
        <td>
            <fieldset>
                <legend>Light modes</legend>
                <button onclick="turnLightMode('red')">Red</button>
                <button onclick="turnLightMode('green')">Green</button>
                <button onclick="turnLightMode('blue')">Blue</button>
                <button onclick="turnLightMode('rainbow')">Rainbow</button>
                <button onclick="turnLightMode('cycle')">Cycle</button>
            </fieldset>
        </td>
    </tr>
    <tr>
        <td>
            <fieldset>
                <legend>Morse word</legend>
                <label for="morse_text"></label><input id="morse_text" type="text"/>
                <button onclick="morseWord()">Morse it</button>
            </fieldset>
        </td>
        <td>
            <fieldset>
                <legend>System</legend>
                <button onclick="shutdown()">Shutdown</button>
            </fieldset>
        </td>
    </tr>
</table>
<p>Try it, maybe it will explode.</p>
</body>
</html>