<!DOCTYPE html>
<html lang="de">
<head>
    <script>
        let termdiv;
        let terminput;
        let timer;
        let timertext;
        const COMMAND = "command";


        function sendcommand(contentlist) {
            fetch("/term",{
                method:"POST",
                body: JSON.stringify({"content":contentlist}),
                headers: {"Content-type":"application/json; charset=UTF-8"}
            }).then(getterm());
        }
        function sendtermcommand() {
            sendcommand([COMMAND,
                            `terminal-command`,
                            terminput.value]
            );
            terminput.value = "";
            
        }

        function getterm() {
            let tmpterm = "";
            fetch("/term", { method: "GET" })
                .then(response => response.json())
                .then(termarray => {
                    console.log(termarray);
                    for (let line of termarray) {
                        tmpterm += `${line}<br>`;
                    }
                    termdiv.innerHTML = tmpterm;
                })
                .catch(termdiv.innerHTML = 'Fehler beim Abrufen der Daten');
        }
        function getterminterval() {
            timer -= 1
            timertext.innerHTML = `Reload in ${timer} Seconds`
            if (timer == 0) {
                getterm()
                timer = 5
            }
        }


        function initstuff() {
            timer = 5
            timertext = document.getElementById("timer")
            termdiv = document.getElementById("terminaltext");
            terminput = document.getElementById("terminalinput");
            getterm();
            setInterval(getterminterval,1000)
        }

        window.onload = initstuff;
    </script>
    <link rel="stylesheet" href="/static/style.css">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Terradash</title>
</head>
<body style="background-size: cover; background-image: url({{ url_for('static', filename='background.png') }});">
    <img src="{{ url_for('static', filename='logo.png') }}" alt="Terra-Dash">
    <div id="dash">
        <div id="buttons">
            <button style="margin-bottom: 10px;" 
                    class="button" 
                    onclick="sendcommand([COMMAND,`start`]);timer=2">start</button>
            <button style="margin-bottom: 10px; background-color: rgb(255, 0, 0);" 
                    class="button" 
                    onclick="sendcommand([COMMAND,`stop`]);timer=1">stop</button>
        </div>
        <div style="width: 100%;height: 100%;">
            <p style="font-size: 11px;margin: 0px;margin-left: 15px;" id="timer">Reload in _ Seconds</p>
            <div id="terminal">
                <div id="terminaltext"></div>
                <input id="terminalinput" type="text">
                <button
                style="margin-top: 15px;"
                class="button"
                onclick="sendtermcommand();
                terminput.value = ``">send</button>
            </div>
        </div>
    </div>
</body>
</html>
