AI-on-the-edge-device/sd-card/html/data.html

<html>
    <head>
        <style>
            html,
            body {
                height: 100%;
                margin: 2px;
            }

            .box {
                display: flex;
                flex-flow: column;
                height: 100%;
            }

            .box .row.header {
                flex: 0 1 auto;
            }

            .box .row.content {
                flex: 1 1 auto;
            }

            .box .row.footer {
                flex: 0 1 auto;
            }

            #data {
                font-family: 'Courier New', Courier, monospace;
                font-size: small;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="row header">
                <button onClick="reload();">Reload</button>
                <button onClick="window.open('datafileact');">Show full data</button>
                <button onClick="window.location.href = 'fileserver/log/data/'">Show older data files</button>
                <a href="graph.html" target="_self">Show graph</a>
            </div>
            <div class="row content" id="data"><br><br><br><b>Loading Data file, please wait...</b></div>
            <div class="row footer">
                <button onClick="reload();">Reload</button>
                <button onClick="window.open('datafileact');">Show full data</button>
                <button onClick="window.location.href = 'fileserver/log/data/'">Show older data files</button>
                <a href="graph.html" target="_self">Show graph</a>
            </div>
          </div>
    </body>

    <script>
        function reload() {
            document.getElementById('data').innerHTML += "<br><b>Reloading...<b><br><br>";
            window.scrollBy(0,document.body.scrollHeight);
            funcRequest('data');
        }

        async function funcRequest(url){
            await fetch(url)
            .then((res) => {
                if (!res.ok) {
                    document.getElementById("data").innerHTML = "HTTP error " + res.status;
                }

                return res.text();
            })
            .then((data) => {
                document.getElementById('data').innerHTML = "<br>" + data.split("\n").join("\n<br>") + "&nbsp;";

                window.scrollBy(0,document.body.scrollHeight);

            })
            .catch((err) => {
                document.getElementById("data").innerHTML = err;
            });
        }

        funcRequest('data');

    </script>
</html>