<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>esp-iot</title>
    <!-- PWA support -->
    <link rel="manifest" href="/manifest.json"/>
    <meta name="theme-color" content="#2F3BA2"/>
    <meta name="description" content="short your url"/>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'/>

    <link rel="stylesheet" type="text/css" href="/sym/dark.css"/>

    <script>
        const wsurl = 'ws://127.0.0.1:8081'
        const socket = new WebSocket(wsurl)
        let devices;

        socket.onopen = () => {
            socket.send('new session')
        }
        socket.onerror = (error) => {
            console.log(`WebSocket error: ${error}`)
        }
        socket.onclose = error => show_error('session timed out (refresh)')
        socket.onmessage = (e) => {
            console.log(e.data)
            let msg = e.data.split(";", 3)
            if (msg[0] === 'error') show_error(msg[1])
            else if (msg[0] === 'device') {
                if (!devices.includes(msg[1])){
                    devices.push(msg[1])
                    e.data
                }
                if (msg[2] === 'online') document.getElementById(msg[1]).style.display = "block"
                else if (msg[2] === 'offline') document.getElementById(msg[1]).style.display = "none"
                else document.getElementById('led1_title').innerText = `LED 1 (currently ${msg[1]}):`
            }
        }
        function show_error(msg) {
            let error_style = document.getElementById('error-box').style
            document.getElementById('error-message').innerText = msg
            error_style.display = "block"
            error_style.animation = "slide-from-left alternate 0.2s"
            setTimeout(to => {error_style.animation = ""}, 200)
        }
    </script>
</head>
<body>
    <div class="title">ESP-IoT</div>
    <div class="devices">
        <div id="led1" class="device_box">
            <div class="title2" id="led1_title">LED 1:</div>
            <button class="btn-green"
                 style="width: 10rem; position:relative; margin-top: 1rem; margin-left: calc(50% - 5rem);"
                 onclick="socket.send('device;led1;on')">
                <div class="btn-text">on</div>
            </button>
            <button class="btn-red"
                 style="width: 10rem; position:relative; margin-top: 1rem; margin-left: calc(50% - 5rem);"
                 onclick="socket.send('device;led1;off')">
                <div class="btn-text">off</div>
            </button>
        </div>
    </div>
    <div id="error-box" class="error">
        <div onclick="this.parentNode.style.display = 'none'" style="position: absolute; top:5px; right: 5px;" class="sym_btn-invisible">
            <img class="icon" src="sym/ic_close_white_24px.svg">
        </div>
        <div id="error-message" class="btn-text">
        </div>
    </div>
</body>
</html>