WiFiThermostat/src/WiFiThermostat/html_console.h

/* clang-format off */

static const char js_wsapp[] PROGMEM = R"=====(var cmd = document.getElementById('cmd');
var listMsgs = document.getElementById('msgs');
var socketStatus = document.getElementById('status');
var btnClose = document.getElementById('btnClose');

var wsUrl = 'ws://' + window.location.hostname + ':81';
var socket = new WebSocket(wsUrl);
socket.onopen = function(event) {
  //socketStatus.innerHTML = 'Connected to: ' + event.currentTarget.URL;
  socketStatus.innerHTML = 'Connected';
  socketStatus.className = 'open';
};

socket.onerror = function(error) {
  console.log('WebSocket error: ' + error);
};

socket.onmessage = function(event) {
  var msg = event.data;
  listMsgs.innerHTML += msg;
  listMsgs.scrollTop = listMsgs.scrollHeight;
};

socket.onclose = function(event) {
  socketStatus.innerHTML = 'Disconnected';
  socketStatus.className = 'closed';
};

function sendCmd() {
    socket.send(cmd.value);
    listMsgs.innerHTML += 'Sent: ' + cmd.value + '\n';
    cmd.value = '';
    return false;
}

function togConn() {
	if(socketStatus.className=='open') { socket.close(); btnClose.innerHTML='Reload'; }
	else location.reload();
}

document.getElementById("cmd")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("btnSend").click();
    }
});
)====="; // js_wsapp

static const char html_console_body[] PROGMEM = R"=====(
<p><b>Console</b></p>
<div id="status">Connecting...</div>
<table style='width:100%'>
<tr><td style='width:800px'><textarea id='msgs'></textarea></td></tr>
<tr><td style='width:100%'><input id='cmd' type='text'></td></tr>
<tr><td style='width:100%'><button type='submit' id='btnSend' onclick='sendCmd();'>Send</button></td></tr>
<tr><td style='width:100%'><button type='button' id='btnClose' onclick='togConn();'>Disconnect</button></td></tr>
<tr><td style='width:100%'><form action='.' method='get'><button class='bgrey'>Main Menu</button></form></td></tr>
</table>
<script src="wsapp.js"></script>
)====="; // html_console_body