proxy/index.html

191 lines
6.5 KiB
HTML
Raw Permalink Normal View History

2021-11-07 18:59:30 -06:00
<!DOCTYPE html>
<html>
<head>
<title>WebSocket demo</title>
</head>
<body>
<div id="menu">
<input type="text" id="input">
<button id="button">submit</button>
<br>
<button id="editbutton">edit this page</button>
<button id="send">send</button>
<button id="root">return to the root page</button>
<br>
<input type="text" id="username">
<input type="password" id="password">
<button id="login">login!</button>
<p id="loginstatus">not logged in!</p>
<hr>
</div>
<div id="content">
</div>
<div id="edit">
<p id="editpage"></p>
<textarea id="editbox"></textarea>
</div>
<style>
#edit {
display: none;
}
#content {
display: block;
}
</style>
<script>
function isAlphaNumeric(str) {
var code, i, len;
for (i = 0, len = str.length; i < len; i++) {
code = str.charCodeAt(i);
if (!(code > 47 && code < 58) && // numeric (0-9)
!(code > 64 && code < 91) && // upper alpha (A-Z)
!(code > 96 && code < 123)) { // lower alpha (a-z)
return false;
}
}
return true;
};
function getCommand(str) {
var ret = [];
for(var i = 0; i < str.length; i++) {
if(!isAlphaNumeric(str[i])) ret.push(str[i]);
else if(i == 0 && isAlphaNumeric(str[i])) return '';
else break;
}
return [ret.join(''), i];
};
var ws = new WebSocket("ws://192.168.1.30:8765/"),
messages = document.createElement('ul'),
editbutton = document.getElementById("editbutton"),
editdiv = document.getElementById("edit"),
textarea = document.getElementById("editbox"),
username = document.getElementById("username"),
password = document.getElementById("password"),
login = document.getElementById("login"),
loginstatus = document.getElementById("loginstatus"),
root = document.getElementById("root"),
currentpage = '',
editsend = document.getElementById("send"),
header = true;
buffer = [];
ws.onmessage = function (event) {
var commanddata = getCommand(event.data);
var preserve = false;
var link = false;
if(header) {
header = false;
return;
}
if(event.data === "auth succeed") {
loginstatus.innerHTML = "logged in";
load("test.for");
return;
}
buffer.push(event.data);
switch(commanddata[0]) {
case '#':
var elem = document.createElement('h1');
break;
case '##':
var elem = document.createElement('h2');
break;
case '###':
var elem = document.createElement('h3');
break;
case '####':
var elem = document.createElement('h4');
break;
case '#####':
var elem = document.createElement('h5');
break;
case '######':
var elem = document.createElement('h6');
break;
case '[[':
var elem = document.createElement('a');
link = true;
break;
default:
var elem = document.createElement('p');
preserve = true;
break;
}
var body = document.getElementById('content');
if(!preserve && !link) {
elem.innerHTML = event.data.slice(commanddata[1]);
} else if(link) {
var tmp = event.data.slice(commanddata[1]).split(']]')[0];
var splitted = tmp.split(':');
elem.innerHTML = splitted[0];
elem.href = "javascript:load(\'" + splitted[1] + "\');";
link = false;
} else {
elem.innerHTML = event.data;
}
body.appendChild(elem);
};
document.body.appendChild(messages);
ws.onopen = function(event) {
ws.send("get test.for");
currentpage = "test.for";
};
var button = document.getElementById("button"),
text = document.getElementById("input");
function load(page) {
var body = document.getElementById('content');
body.innerHTML = '';
input.value = page;
header = true;
ws.send("get " + page);
currentpage = page;
buffer = [];
};
button.onclick = function(event) {
load(text.value);
};
editbutton.onclick = function(event) {
editdiv.style.display = 'block';
var body = document.getElementById('content');
body.style.display = 'none';
for(var i = 0; i < buffer.length; i++) {
textarea.value += buffer[i] + '\n';
}
};
send.onclick = function(event) {
ws.send("put " + currentpage);
ws.send(textarea.value);
editdiv.style.display = 'none';
var body = document.getElementById('content');
body.style.display = 'block';
load(currentpage);
};
login.onclick = function(event) {
ws.send("auth " + username.value + " " + password.value);
}
root.onclick = function(event) {
load("test.for");
}
</script>
</body>
</html>