<!DOCTYPE html>
<html lang="de">
<head>
    <script>
        let termdiv;

        function sendcommand(list) {
            fetch("/term",{
                method:"POST",
                body: list,
                headers: {"Content-type":"application/json; charset=UTF-8"}
            });
            getterm();
        };

        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 initstuff() {
            termdiv = document.getElementById("terminal");
            getterm();
            setInterval(getterm,8000)
        }



        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 class="button" onclick="sendcommand([`start`])">start</button>
            <button style="background-color: rgb(186, 0, 0);" class="button" onclick="sendcommand([`stop`])">stop</button>
        </div>
        <div id="terminal">
        </div>
    </div>
</body>
</html>
