home.html

<!DOCTYPE html>
<html>
<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) {
            var startsWithBracked = msg.indexOf('{') == 0;
            var startsWithList = msg.indexOf('list') == 0;

	        if (listenabled.checked || (typeof msg === 'string' && !startsWithBracked && !startsWithList)) {
	            messages.push(msg);
	            if (messages.length > MESSAGES_MAX_COUNT) {
	                messages.shift();
	            }
	            log.innerHTML = messages.join('<br>');
	            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());
	    });

	    $('#export').click(function() {
	    	var link = document.createElement('a');
	    	link.setAttribute('download', 'agent-log.txt');
	    	var text = log.innerHTML.replace(/<br>/g, '\n');
	    	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($('<div><b>Connection closed.</b></div>'))
	        });
	        socket.on('message', function(evt) {
	            appendLog(evt);
	        });
	    } else {
	        appendLog($('<div><b>Your browser does not support WebSockets.</b></div>'))
        }
        
        $("#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: 100%;
    width: 100%;
}

#log {
    flex-grow: 1;
    font-family: "Roboto Mono", "Courier", "Lucida Grande", Verdana, sans-serif;
    background-color: #DAE3E3;
    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">
            <div id="log">This is some random text This is some random textThis is some random textThis is some random textThis is some random textThis is some random textThis is some random text<br />This is some random text<br />This is some random text<br /></div>
            <div id="footer">
                <form id="form">
                    <input type="submit" class="button" value="Send" />
                    <input type="text" id="input" class="textfield" />
                </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>