151 lines
3.6 KiB
HTML
151 lines
3.6 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
<style>
|
|
.footer {
|
|
background: #ccc;
|
|
padding:5px;
|
|
overflow: auto;
|
|
height:30px;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="console" class=code>
|
|
<br>
|
|
<br>
|
|
</div>
|
|
<div class=footer>
|
|
<form id="command_form" method="GET">
|
|
<input type=input id=commandline size=80>
|
|
</form>
|
|
</div>
|
|
<script type="text/javascript">
|
|
|
|
function getJSON(url, successHandler, errorHandler) {
|
|
var xhr = typeof XMLHttpRequest != 'undefined'
|
|
? new XMLHttpRequest()
|
|
: new ActiveXObject('Microsoft.XMLHTTP');
|
|
console.log("fired JSON request", url)
|
|
xhr.open('get', url, true);
|
|
xhr.onreadystatechange = function() {
|
|
console.log(xhr)
|
|
var status;
|
|
var data;
|
|
// https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate
|
|
if (xhr.readyState == 4) { // `DONE`
|
|
status = xhr.status;
|
|
if (status == 200) {
|
|
data = JSON.parse(xhr.responseText);
|
|
successHandler && successHandler(data);
|
|
} else {
|
|
errorHandler && errorHandler(status);
|
|
}
|
|
}
|
|
};
|
|
xhr.send();
|
|
};
|
|
|
|
var historyElement = document.getElementById("console")
|
|
// copy query
|
|
var evtSrc = new EventSource("http://localhost:5000/update");
|
|
|
|
function htmlEscape(str) {
|
|
return str
|
|
.replace(/&/g, '&')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>');
|
|
}
|
|
|
|
var our_id=""
|
|
var oldtop = -1
|
|
|
|
evtSrc.onmessage = function(e) {
|
|
var message = JSON.parse(e.data)
|
|
console.log(message)
|
|
if (message.type == "id") {
|
|
our_id = message.id
|
|
var test = "xxx"
|
|
getJSON(
|
|
"http://localhost:5000/console?id="+our_id,
|
|
function(message) { console.log('msg', message, test); },
|
|
function(status) { console.log('stat', status); }
|
|
);
|
|
} else if (message.type == 'command' || message.type == 'reply') {
|
|
pre = ""
|
|
post = ""
|
|
if (message.type == 'command') {
|
|
pre += "<font color='blue'><br>"
|
|
post += "</font>"
|
|
}
|
|
if (message.origin == 'self') {
|
|
pre += "<b>"
|
|
post = "</b>" + post
|
|
}
|
|
historyElement.innerHTML += pre + htmlEscape(message.line) + post + "<br>\n"
|
|
}
|
|
/*
|
|
var doc = document.documentElement
|
|
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
|
|
var h = window.innerHeight || window.clientHeight
|
|
var d = document.body.scrollHeight
|
|
*/
|
|
window.scrollTo(0,document.body.scrollHeight)
|
|
/*
|
|
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
|
|
var h = window.innerHeight
|
|
var d = document.body.scrollHeight
|
|
console.log(oldtop + oldh, top + h)
|
|
*/
|
|
};
|
|
|
|
evtSrc.onerror = function(e) {
|
|
historyElement.innerHTML += "connection lost"
|
|
evtSrc.close()
|
|
};
|
|
|
|
function do_command() {
|
|
celm = document.getElementById("commandline")
|
|
cmd = encodeURI(celm.value);
|
|
celm.value = ""
|
|
oldtop = -1
|
|
if (our_id != "") {
|
|
cmd += "&id=" + our_id
|
|
}
|
|
console.log("http://localhost:5000/sendcommand?command="+cmd)
|
|
getJSON(
|
|
"http://localhost:5000/sendcommand?command="+cmd,
|
|
function(message) { console.log('message', message); },
|
|
function(status) { console.log('status', status); }
|
|
);
|
|
}
|
|
|
|
function handle_submit(evt) {
|
|
evt.preventDefault()
|
|
do_command()
|
|
}
|
|
|
|
command_form = document.getElementById("command_form")
|
|
if (command_form.addEventListener) {
|
|
command_form.addEventListener("submit", handle_submit, true);
|
|
} else {
|
|
command_form.attachEvent('onsubmit', handle_submit);
|
|
}
|
|
|
|
window.onbeforeunload = closingCode;
|
|
function closingCode(){
|
|
console.log("CLOSE")
|
|
evtSrc.close()
|
|
return null;
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|