diff --git a/home.html b/home.html index 7f4ffb6b9..61cade73d 100644 --- a/home.html +++ b/home.html @@ -33,18 +33,27 @@ if (jsonMsg.Ports) { const validKeys = ['Name', 'SerialNumber', 'IsOpen', 'VendorID', 'ProductID']; if (jsonMsg.Network) { - printMsg = "Network Ports:
"+JSON.stringify(jsonMsg.Ports, validKeys, 2); + printMsg = "Network Ports:\n"+JSON.stringify(jsonMsg.Ports, validKeys, 2); } else { - printMsg = "Serial Ports:
"+JSON.stringify(jsonMsg.Ports, validKeys, 2); + 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('

'); + log.textContent = messages.join('\n\n'); if (autoscroll.checked) { log.scrollTop = log.scrollHeight - log.clientHeight; } @@ -60,13 +69,13 @@ 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.innerHTML.replace(/
/g, '\n'); - text = text.replace(/|<\/b>/g, ''); + var text = log.textContent; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.click(); }); @@ -83,15 +92,15 @@ socket = io('http://{{$}}'); } socket.on('disconnect', function(evt) { - appendLog($('
Connection closed.
')) + appendLog('Connection closed.') }); socket.on('message', function(evt) { appendLog(evt); }); } else { - appendLog($('
Your browser does not support WebSockets.
')) + appendLog('Your browser does not support WebSockets.') } - + $("#input").focus(); }); @@ -101,7 +110,7 @@ height: 100%; } -body { +body { margin: 0px; padding: 0px; background: #F8F9F9; @@ -111,7 +120,7 @@ #container { display: flex; - flex-direction: column; + flex-direction: column; height: 100vh; width: 100%; } @@ -126,15 +135,15 @@ overflow-y: auto; } -#footer { - display: flex; +#footer { + display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; - margin: 0px 15px 0px; + margin: 0px 15px 0px; } -#form { +#form { display: flex; flex-grow: 1; margin-bottom: 15px; @@ -145,8 +154,8 @@ } #secondary-controls div { - display: inline-block; - padding: 10px 15px; + display: inline-block; + padding: 10px 15px; } #autoscroll, @@ -169,7 +178,7 @@ box-shadow: 0 4px #95a5a6; margin-bottom: 4px; color: #000; - cursor: pointer; + cursor: pointer; font-size: 14px; letter-spacing: 1.28px; line-height: normal; @@ -181,20 +190,20 @@ } .button:hover { - box-shadow: 0 2px #95a5a6; + box-shadow: 0 2px #95a5a6; outline: none; transform: translateY(2px); } .button:active { - box-shadow: none; + box-shadow: none; transform: translateY(4px); } .textfield { background-color: #dae3e3; width: auto; - height: auto; + height: auto; padding: 10px 8px; margin-left: 8px; vertical-align: top;