src/web/html/serial.html

<!doctype html>
<html lang="en">
    <head>
        <title>{#NAV_WEBSERIAL}</title>
        {#HTML_HEADER}
    </head>
    <body>
        {#HTML_NAV}
        <div id="wrapper">
            <div id="content" style="max-width: 100% !important;">
                <div class="row">
                    <textarea id="serial" class="mt-3" cols="80" rows="40" readonly></textarea>
                </div>
                <div class="row my-3">
                    <div class="col-3">{#CONSOLE_ACTIVE}: <span class="dot" id="active"></span></div>
                    <div class="col-3 col-sm-4 my-3">{#UPTIME}: <span id="uptime"></span></div>
                    <div class="col-6 col-sm-4 a-r">
                        <input type="button" value="{#BTN_CLEAR}" class="btn" id="clear"/>
                        <input type="button" value="{#BTN_AUTOSCROLL}" class="btn" id="scroll"/>
                        <input type="button" value="{#BTN_COPY}" class="btn" id="copy"/>
                    </div>
                </div>
            </div>
        </div>
        {#HTML_FOOTER}
        <script type="text/javascript">
            var mAutoScroll = true;
            var con = document.getElementById("serial");
            var exeOnce = true;
            var version, build;

            function parseGeneric(obj) {
                var up = obj["ts_uptime"];
                var days = parseInt(up / 86400) % 365;
                var hrs  = parseInt(up / 3600) % 24;
                var min  = parseInt(up / 60) % 60;
                var sec  = up % 60;
                document.getElementById("uptime").innerHTML = days + " {#DAYS}, "
                    + ("0"+hrs).substr(-2) + ":"
                    + ("0"+min).substr(-2) + ":"
                    + ("0"+sec).substr(-2);

                parseRssi(obj)
                if(true == exeOnce) {
                    parseNav(obj)
                    parseESP(obj)
                    parseTitle(obj)
                    window.setInterval("getAjax('/api/generic', parseGeneric)", 5000);
                    exeOnce = false;
                    setTimeOffset();
                }
                version = obj.version;
                build   = obj.build;
            }

            function setTimeOffset() {
                // set time offset for serial console
                var obj = new Object();
                obj.cmd = "serial_utc_offset";
                obj.val = new Date().getTimezoneOffset() * -60;
                getAjax("/api/setup", null, "POST", JSON.stringify(obj));
            }

            document.getElementById("clear").addEventListener("click", function() {
                con.value = "";
            });
            document.getElementById("scroll").addEventListener("click", function() {
                mAutoScroll = !mAutoScroll;
                this.value = (mAutoScroll) ? "{#BTN_AUTOSCROLL}" : "{#BTN_MANUALSCROLL}";
            });
            document.getElementById("copy").addEventListener("click", function() {
                con.value = version + " - " + build + "\n---------------\n" + con.value;
                if (window.clipboardData && window.clipboardData.setData) {
                    return window.clipboardData.setData("Text", text);
                } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
                    var ta = document.createElement("textarea");
                    ta.textContent = con.value;
                    ta.style.position = "fixed";  // Prevent scrolling to bottom of page in Microsoft Edge.
                    document.body.appendChild(ta);
                    ta.select();
                    try {
                        return document.execCommand("copy");  // Security exception may be thrown by some browsers.
                    } catch (ex) {
                        alert("{#CLIPBOARD_FAILED} " + ex);
                    } finally {
                        document.body.removeChild(ta);
                        alert("{#COPIED_TO_CLIPBOARD}");
                    }
                }
            });

            if (!!window.EventSource) {
                var source = new EventSource('/events');
                source.addEventListener('open', function(e) {
                    document.getElementById("active").style.backgroundColor = "#0c0";
                }, false);

                source.addEventListener('error', function(e) {
                    if (e.target.readyState != EventSource.OPEN) {
                        document.getElementById("active").style.backgroundColor = "#f00";
                    }
                }, false);

                source.addEventListener('serial', function(e) {
                    con.value += e.data.replace(/\<rn\>/g, '\r\n');
                    if(mAutoScroll)
                        con.scrollTop = con.scrollHeight;
                }, false);
            }

            getAjax("/api/generic", parseGeneric);
        </script>
    </body>
</html>