home.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Arduino Create Agent Debug Console</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,600,700&display=swap" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
<script type="text/javascript">
    $(function() {
	    var socket;
	    var input = $('#input');
	    var log = document.getElementById('log');
	    var autoscroll = document.getElementById('autoscroll');
	    var listenabled = document.getElementById('list');
	    var messages = [];
        var MESSAGES_MAX_COUNT = 2000;

	    function appendLog(msg) {
            let jsonMsg = {};
            let portListing = false;
            try {
                jsonMsg = JSON.parse(msg);
                portsListing = jsonMsg.Ports;
            } catch {
                // no valid json
            }

            var startsWithList = msg.indexOf('list') == 0;

            if (listenabled.checked || (!portsListing && !startsWithList)) {
                let printMsg = msg;
                if (jsonMsg.Ports) {
                    const validKeys = ['Name', 'SerialNumber', 'IsOpen', 'VendorID', 'ProductID'];
                    if (jsonMsg.Network) {
                        printMsg = "Network Ports:\n"+JSON.stringify(jsonMsg.Ports, validKeys, 2);
                    } else {
                        printMsg = "Serial Ports:\n"+JSON.stringify(jsonMsg.Ports, validKeys, 2);
                    }
                } else if (Object.keys(jsonMsg).length !== 0) {
                    printMsg = JSON.stringify(jsonMsg, undefined, 2);
                }

                // when parsing JSON we're escaping some html charaters like "&<>", we want to show their
                // original value in the log
                function decode(str) {
                    let txt = new DOMParser().parseFromString(str, "text/html");
                    return txt.documentElement.textContent;
                }
                printMsg = decode(printMsg);

                messages.push(printMsg);
                if (messages.length > MESSAGES_MAX_COUNT) {
                    messages.shift();
                }
                log.textContent = messages.join('\n\n');
                if (autoscroll.checked) {
                    log.scrollTop = log.scrollHeight - log.clientHeight;
                }
            }
	    }

	    $('#form').submit(function(e) {
	    	e.preventDefault();
	        if (!socket) {
	            return false;
	        }
	        if (!input.val()) {
	            return false;
	        }
	        socket.emit('command', input.val());
            input.val('');
	    });

	    $('#export').click(function() {
	    	var link = document.createElement('a');
	    	link.setAttribute('download', 'agent-log.txt');
	    	var text = log.textContent;
	    	link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    		link.click();
    	});

        $('#clear').click(function() {
            messages = [];
            log.innerHTML = '';
        });

	    if (window['WebSocket']) {
	        if (window.location.protocol === 'https:') {
	            socket = io('https://{{$}}')
	        } else {
	            socket = io('http://{{$}}');
	        }
	        socket.on('disconnect', function(evt) {
	            appendLog('Connection closed.')
	        });
	        socket.on('message', function(evt) {
	            appendLog(evt);
	        });
	    } else {
	        appendLog('Your browser does not support WebSockets.')
        }

        $("#input").focus();
	});
</script>
<style type="text/css">
html, body {
    overflow: hidden;
    height: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    background: #F8F9F9;
    font-size: 16px;
    font-family: "Open Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
}

#container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}

#log {
    flex-grow: 1;
    font-family: "Roboto Mono", "Courier", "Lucida Grande", Verdana, sans-serif;
    background-color: #DAE3E3;
    height: calc(100vh - 61px);
    margin: 15px 15px 10px;
    padding: 8px 10px;
    overflow-y: auto;
}

#footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0px 15px 0px;
}

#form {
    display: flex;
    flex-grow: 1;
    margin-bottom: 15px;
}

#input {
    flex-grow: 1;
}

#secondary-controls div {
    display: inline-block;
    padding: 10px 15px;
}

#autoscroll,
#list {
    vertical-align: middle;
    width: 20px;
    height: 20px;
}


#secondary-controls button {
    margin-bottom: 15px;
    vertical-align: top;
}

.button {
    background-color: #b5c8c9;
    border: 1px solid #b5c8c9;
    border-radius: 2px 2px 0 0;
    box-shadow: 0 4px #95a5a6;
    margin-bottom: 4px;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 1.28px;
    line-height: normal;
    outline: none;
    padding: 9px 18px;
    text-align: center;
    text-transform: uppercase;
    transition: box-shadow .1s ease-out, transform .1s ease-out;
}

.button:hover {
    box-shadow: 0 2px #95a5a6;
    outline: none;
    transform: translateY(2px);
}

.button:active {
    box-shadow: none;
    transform: translateY(4px);
}

.textfield {
    background-color: #dae3e3;
    width: auto;
    height: auto;
    padding: 10px 8px;
    margin-left: 8px;
    vertical-align: top;
    border: none;
    font-family: "Open Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
    font-size: 1em;
    outline: none;
}
</style>
</head>
    <body>
        <div id="container">
            <pre id="log"></pre>
            <div id="footer">
                <form id="form">
                    <input type="submit" class="button" value="Send" />
                    <input type="text" id="input" class="textfield" aria-label="send command" />
                </form>
                <div id="secondary-controls">
                    <div>
                        <input name="pause" type="checkbox" checked id="autoscroll" />
                        <label for="autoscroll">Autoscroll</label>
                    </div>
                    <div>
                        <input name="list" type="checkbox" checked id="list" />
                        <label for="list">Enable&nbsp;List&nbsp;Command</label>
                    </div>
                    <button id="clear" class="button">Clear&nbsp;Log</button>
                    <button id="export" class="button">Export&nbsp;Log</button>
                </div>
            </div>
        </div>
    </body>
</html>