Skip to content

Commit f2435fa

Browse files
sebromerosebromero
committed
Merge console template into go file
1 parent 407dc64 commit f2435fa

File tree

1 file changed

+114
-68
lines changed

1 file changed

+114
-68
lines changed

‎main.go

+114-68
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,8 @@ const homeTemplateHtml = `<!DOCTYPE html>
340340
<html>
341341
<head>
342342
<title>Arduino Create Agent Debug Console</title>
343+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
344+
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,600,700&display=swap" rel="stylesheet">
343345
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
344346
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
345347
<script type="text/javascript">
@@ -350,11 +352,15 @@ const homeTemplateHtml = `<!DOCTYPE html>
350352
var autoscroll = document.getElementById('autoscroll');
351353
var listenabled = document.getElementById('list');
352354
var messages = [];
355+
var MESSAGES_MAX_COUNT = 2000;
353356
354357
function appendLog(msg) {
355-
if (listenabled.checked || (typeof msg === 'string' && msg.indexOf('{') !== 0 && msg.indexOf('list') !== 0)) {
358+
var startsWithBracked = msg.indexOf('{') == 0;
359+
var startsWithList = msg.indexOf('list') == 0;
360+
361+
if (listenabled.checked || (typeof msg === 'string' && !startsWithBracked && !startsWithList)) {
356362
messages.push(msg);
357-
if (messages.length > 2000) {
363+
if (messages.length > MESSAGES_MAX_COUNT) {
358364
messages.shift();
359365
}
360366
log.innerHTML = messages.join('<br>');
@@ -397,102 +403,142 @@ const homeTemplateHtml = `<!DOCTYPE html>
397403
});
398404
} else {
399405
appendLog($('<div><b>Your browser does not support WebSockets.</b></div>'))
400-
}
406+
}
407+
408+
$("#input").focus();
401409
});
402410
</script>
403411
<style type="text/css">
404-
html {
412+
html, body {
405413
overflow: hidden;
414+
height: 100%;
406415
}
407416
408-
body {
409-
overflow: hidden;
410-
padding: 0;
411-
margin: 0;
412-
width: 100%;
417+
body {
418+
margin: 0px;
419+
padding: 0px;
420+
background: #F8F9F9;
421+
font-size: 16px;
422+
font-family: "Open Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
423+
}
424+
425+
#container {
426+
display: flex;
427+
flex-direction: column;
413428
height: 100%;
414-
background: #00979d;
415-
font-family: 'Lucida Grande', Lucida, Verdana, sans-serif;
429+
width: 100%;
416430
}
417431
418432
#log {
419-
background: white;
420-
margin: 0;
421-
padding: .5em;
422-
position: absolute;
423-
top: .5em;
424-
left: .5em;
425-
right: .5em;
426-
bottom: 3em;
427-
overflow: auto;
433+
flex-grow: 1;
434+
font-family: "Roboto Mono", "Courier", "Lucida Grande", Verdana, sans-serif;
435+
background-color: #DAE3E3;
436+
margin: 15px 15px 10px;
437+
padding: 8px 10px;
438+
overflow-y: auto;
428439
}
429440
430-
.buttons {
431-
align-items: center;
432-
display: flex;
433-
padding: 0 .5em;
434-
margin: 0;
435-
position: absolute;
436-
bottom: 1em;
437-
left: 0;
438-
width: calc(100% - 1em);
439-
overflow: hidden;
441+
#footer {
442+
display: flex;
443+
flex-wrap: wrap;
444+
justify-content: space-between;
445+
margin: 0px 15px 0px;
440446
}
441447
442-
#form {
443-
display: inline-block;
448+
#form {
449+
display: flex;
450+
flex-grow: 1;
451+
margin-bottom: 15px;
444452
}
445453
446-
#export {
447-
float: right;
448-
margin-left: auto;
454+
#input {
455+
flex-grow: 1;
456+
}
457+
458+
#secondary-controls div {
459+
display: inline-block;
460+
padding: 10px 15px;
449461
}
450462
451463
#autoscroll,
452464
#list {
453-
margin-left: 2em;
454-
vertical-align: middle;
465+
vertical-align: middle;
466+
width: 20px;
467+
height: 20px;
455468
}
456469
457-
@media screen and (max-width: 950px) {
458-
#form {
459-
max-width: 60%;
460-
}
461470
462-
#input {
463-
max-width: 55%;
464-
}
471+
#export {
472+
margin-bottom: 15px;
465473
}
466-
@media screen and (max-width: 825px) {
467-
.buttons {
468-
flex-direction: column;
469-
}
470474
471-
#log {
472-
bottom: 7em;
473-
}
475+
.button {
476+
background-color: #b5c8c9;
477+
border: 1px solid #b5c8c9;
478+
border-radius: 2px 2px 0 0;
479+
box-shadow: 0 4px #95a5a6;
480+
color: #000;
481+
cursor: pointer;
482+
font-size: 14px;
483+
letter-spacing: 1.28px;
484+
line-height: normal;
485+
outline: none;
486+
padding: 9px 18px;
487+
text-align: center;
488+
text-transform: uppercase;
489+
transition: box-shadow .1s ease-out, transform .1s ease-out;
490+
}
474491
475-
#autoscroll,
476-
#list {
477-
margin-left: 0;
478-
margin-top: .5em;
479-
}
492+
.button:hover {
493+
box-shadow: 0 2px #95a5a6;
494+
outline: none;
495+
transform: translateY(2px);
480496
}
497+
498+
.button:active {
499+
box-shadow: none;
500+
transform: translateY(4px);
501+
}
502+
503+
.textfield {
504+
background-color: #dae3e3;
505+
width: auto;
506+
height: auto;
507+
padding: 10px 8px;
508+
margin-left: 8px;
509+
vertical-align: top;
510+
border: none;
511+
font-family: "Open Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
512+
font-size: 1em;
513+
outline: none;
514+
}
515+
481516
</style>
482517
</head>
483-
<body>
484-
<div id="log"></div>
485-
<div class="buttons">
486-
<form id="form">
487-
<input type="submit" value="Send" />
488-
<input type="text" id="input" size="64"/>
489-
</form>
490-
<div><input name="pause" type="checkbox" checked id="autoscroll"/> Autoscroll</div>
491-
<div><input name="list" type="checkbox" checked id="list"/> Toggle List</div>
492-
<button id="export">Export Log</button>
493-
</div>
494-
</body>
518+
<body>
519+
<div id="container">
520+
<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>
521+
<div id="footer">
522+
<form id="form">
523+
<input type="submit" class="button" value="Send" />
524+
<input type="text" id="input" class="textfield" />
525+
</form>
526+
<div id="secondary-controls">
527+
<div>
528+
<input name="pause" type="checkbox" checked id="autoscroll" />
529+
<label for="autoscroll">Autoscroll</label>
530+
</div>
531+
<div>
532+
<input name="list" type="checkbox" checked id="list" />
533+
<label for="list">List&nbsp;Command&nbsp;Enabled</label>
534+
</div>
535+
<button id="export" class="button">Export&nbsp;Log</button>
536+
</div>
537+
</div>
538+
</div>
539+
</body>
495540
</html>
541+
496542
`
497543

498544
func parseIni(filename string) (args []string, err error) {

0 commit comments

Comments
 (0)