Skip to content

Commit 831b0fd

Browse files
author
smellai
committed
improved debugger UI
1 parent 607334d commit 831b0fd

File tree

1 file changed

+116
-69
lines changed

1 file changed

+116
-69
lines changed

‎main.go‎

Lines changed: 116 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -286,59 +286,63 @@ const homeTemplateHtml = `<!DOCTYPE html>
286286
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
287287
<script type="text/javascript">
288288
$(function() {
289-
290-
var socket;
291-
var msg = $("#msg");
292-
var log = document.getElementById('log');
293-
var pause = document.getElementById('myCheck');
294-
var messages = [];
295-
var only_log = true;
296-
297-
function appendLog(msg) {
298-
299-
if (!pause.checked && (only_log == false || (!(msg.indexOf("{") == 0) && !(msg.indexOf("list") == 0) && only_log == true))) {
300-
messages.push(msg);
301-
if (messages.length > 100) {
302-
messages.shift();
303-
}
304-
var doScroll = log.scrollTop == log.scrollHeight - log.clientHeight;
305-
log.innerHTML = messages.join("<br>");
306-
if (doScroll) {
307-
log.scrollTop = log.scrollHeight - log.clientHeight;
308-
}
309-
}
310-
}
311-
312-
$("#form").submit(function() {
313-
if (!socket) {
314-
return false;
315-
}
316-
if (!msg.val()) {
317-
return false;
318-
}
319-
socket.emit("command", msg.val());
320-
if (msg.val().indexOf("log off") != -1) {only_log = true}
321-
if (msg.val().indexOf("log on") != -1) {only_log = false}
322-
msg.val("");
323-
return false
324-
});
325-
326-
if (window["WebSocket"]) {
327-
if (window.location.protocol === 'https:') {
328-
socket = io('https://{{$}}')
329-
} else {
330-
socket = io("http://{{$}}");
331-
}
332-
socket.on("disconnect", function(evt) {
333-
appendLog($("<div><b>Connection closed.</b></div>"))
334-
});
335-
socket.on("message", function(evt) {
336-
appendLog(evt);
337-
});
338-
} else {
339-
appendLog($("<div><b>Your browser does not support WebSockets.</b></div>"))
340-
}
341-
});
289+
var socket;
290+
var input = $('#input');
291+
var log = document.getElementById('log');
292+
var autoscroll = document.getElementById('autoscroll');
293+
var listenabled = document.getElementById('list');
294+
var messages = [];
295+
296+
function appendLog(msg) {
297+
console.log(msg);
298+
console.log('----');
299+
if (listenabled.checked || (typeof msg === 'string' && msg.indexOf('{') !== 0 && msg.indexOf('list') !== 0)) {
300+
messages.push(msg);
301+
if (messages.length > 2000) {
302+
messages.shift();
303+
}
304+
var doScroll = log.scrollTop == log.scrollHeight - log.clientHeight;
305+
log.innerHTML = messages.join('<br>');
306+
if (autoscroll.checked && doScroll) {
307+
log.scrollTop = log.scrollHeight - log.clientHeight;
308+
}
309+
}
310+
}
311+
312+
$('#form').submit(function(e) {
313+
e.preventDefault();
314+
if (!socket) {
315+
return false;
316+
}
317+
if (!input.val()) {
318+
return false;
319+
}
320+
socket.emit('command', input.val());
321+
});
322+
323+
$('#export').click(function() {
324+
var link = document.createElement('a');
325+
link.setAttribute('download', 'agent-log.txt');
326+
link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(log.innerHTML));
327+
link.click();
328+
});
329+
330+
if (window['WebSocket']) {
331+
if (window.location.protocol === 'https:') {
332+
socket = io('https://{{$}}')
333+
} else {
334+
socket = io('http://{{$}}');
335+
}
336+
socket.on('disconnect', function(evt) {
337+
appendLog($('<div><b>Connection closed.</b></div>'))
338+
});
339+
socket.on('message', function(evt) {
340+
appendLog(evt);
341+
});
342+
} else {
343+
appendLog($('<div><b>Your browser does not support WebSockets.</b></div>'))
344+
}
345+
});
342346
</script>
343347
<style type="text/css">
344348
html {
@@ -351,42 +355,85 @@ body {
351355
margin: 0;
352356
width: 100%;
353357
height: 100%;
354-
background: gray;
358+
background: #00979d;
359+
font-family: 'Lucida Grande', Lucida, Verdana, sans-serif;
355360
}
356361
357362
#log {
358363
background: white;
359364
margin: 0;
360-
padding: 0.5em 0.5em 0.5em 0.5em;
365+
padding: .5em;
361366
position: absolute;
362-
top: 0.5em;
363-
left: 0.5em;
364-
right: 0.5em;
367+
top: .5em;
368+
left: .5em;
369+
right: .5em;
365370
bottom: 3em;
366371
overflow: auto;
367372
}
368373
369-
#form {
370-
padding: 0 0.5em 0 0.5em;
374+
.buttons {
375+
display: flex;
376+
padding: 0 .5em;
371377
margin: 0;
372378
position: absolute;
373379
bottom: 1em;
374-
left: 0px;
375-
width: 100%;
380+
left: 0;
381+
width: calc(100% - 1em);
376382
overflow: hidden;
377383
}
378384
385+
#form {
386+
display: inline-block;
387+
}
388+
389+
#export {
390+
float: right;
391+
margin-left: auto;
392+
}
393+
394+
#autoscroll,
395+
#list {
396+
margin-left: 2em;
397+
vertical-align: middle;
398+
}
399+
400+
@media screen and (max-width: 950px) {
401+
#form {
402+
max-width: 60%;
403+
}
404+
405+
#input {
406+
max-width: 55%;
407+
}
408+
}
409+
@media screen and (max-width: 825px) {
410+
.buttons {
411+
flex-direction: column;
412+
}
413+
414+
#log {
415+
bottom: 7em;
416+
}
417+
418+
#autoscroll,
419+
#list {
420+
margin-left: 0;
421+
margin-top: .5em;
422+
}
423+
}
379424
</style>
380425
</head>
381426
<body>
382427
<div id="log"></div>
383-
<form id="form">
384-
<input type="submit" value="Send" />
385-
<input type="text" id="msg" size="64"/>
386-
<input name="pause" type="checkbox" value="pause" id="myCheck"/> Pause
387-
<!--<input type="button" value="Install Certificate" onclick="window.open('http://localhost:8991/certificate.crt')" />-->
388-
</form>
389-
</form>
428+
<div class="buttons">
429+
<form id="form">
430+
<input type="submit" value="Send" />
431+
<input type="text" id="input" size="64"/>
432+
</form>
433+
<div><input name="pause" type="checkbox" checked id="autoscroll"/> Autoscroll</div>
434+
<div><input name="list" type="checkbox" checked id="list"/> Toggle List</div>
435+
<button id="export">Export Log</button>
436+
</div>
390437
</body>
391438
</html>
392439
`

0 commit comments

Comments
 (0)