139 lines
4.6 KiB
HTML
139 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>WF Compiler Demo</title>
|
|
<link rel="stylesheet" href="./default.css">
|
|
</head>
|
|
<body>
|
|
<div class="content">
|
|
<h1 class="content-title">WFC Demo</h1>
|
|
|
|
<ul>
|
|
<li><a href="/chat.html">Websocket Chatroom</a></li>
|
|
<li><a href="/ws-test-echo.html">Websocket Echo Test</a></li>
|
|
</ul>
|
|
|
|
<div class="content-body">
|
|
<textarea disabled id="wfc-output"></textarea>
|
|
<input autofocus id="wfc-input"></input>
|
|
|
|
<h2>Settings</h2>
|
|
<input type="checkbox" checked id="auto-resize-output">Auto-resize output</input> <br>
|
|
<input type="checkbox" checked id="auto-scroll" >Auto-scroll output to bottom</input>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let ielt = document.getElementById('wfc-input');
|
|
let oelt = document.getElementById('wfc-output');
|
|
let MAX_OELT_HEIGHT = 300;
|
|
|
|
function auto_resize_output() {
|
|
// if the user has manually resized their output, we do nothing
|
|
if (document.getElementById('auto-resize-output').checked) {
|
|
// resize it automagically up to 500px
|
|
if (oelt.scrollHeight < MAX_OELT_HEIGHT) {
|
|
oelt.style.height = String(oelt.scrollHeight) + 'px';
|
|
}
|
|
else {
|
|
oelt.style.height = String(MAX_OELT_HEIGHT) + 'px';
|
|
}
|
|
}
|
|
}
|
|
|
|
function auto_scroll_to_bottom() {
|
|
if (document.getElementById('auto-scroll').checked) {
|
|
// scroll to bottom
|
|
oelt.scrollTop = oelt.scrollHeight;
|
|
}
|
|
}
|
|
|
|
async function on_server_return(response) {
|
|
console.log('on_server_return:', response);
|
|
if (response.ok) {
|
|
let jsbs = await response.json();
|
|
console.log('jsbs', jsbs);
|
|
// jsbs: {ok: true, result: string} | {ok: false, error: string}
|
|
if (jsbs.ok) {
|
|
// this means got a result back from server
|
|
// put it in
|
|
oelt.value += jsbs.result;
|
|
oelt.value += '\n';
|
|
}
|
|
else {
|
|
// this is an error at the WFC level
|
|
oelt.value += jsbs.error;
|
|
oelt.value += '\n';
|
|
}
|
|
}
|
|
// this means we sent an invalid request
|
|
else {
|
|
oelt.value += 'HTTP ERROR, SEE BROWSER CONSOLE\n'
|
|
}
|
|
}
|
|
|
|
function on_some_bullshit(x) {
|
|
console.log('on_some_bullshit:', x);
|
|
oelt.value += 'NETWORK ERROR, SEE BROWSER CONSOLE\n'
|
|
}
|
|
|
|
function fetch_wfcin(user_line) {
|
|
let req_body_obj = {wfcin: user_line};
|
|
// let req_body_str = JSON.stringify(req_body_obj, undefined, 4);
|
|
let req_body_str = JSON.stringify(req_body_obj);
|
|
|
|
let req_options = {method: 'POST',
|
|
headers: {'content-type': 'application/json'},
|
|
body: req_body_str};
|
|
|
|
let response_promise = fetch('/wfcin', req_options);
|
|
|
|
response_promise.then(on_server_return, on_some_bullshit);
|
|
|
|
// this is a promise for a response
|
|
//console.log(response_promise);
|
|
}
|
|
|
|
// when user hits any key
|
|
function on_input_key(evt) {
|
|
if (evt.key === 'Enter') {
|
|
// don't do default thing
|
|
evt.preventDefault();
|
|
// grab contents
|
|
let contents = ielt.value;
|
|
// if contents are nonempty
|
|
let nonempty_contents = contents.trim().length > 0;
|
|
if (nonempty_contents) {
|
|
// put in output
|
|
// // if it's nonempty add a newline
|
|
// if (oelt.value.length > 0) {
|
|
// oelt.value += '\n';
|
|
// }
|
|
oelt.value += '> ' + contents + '\n';
|
|
oelt.hidden = false;
|
|
|
|
// query backend for result
|
|
fetch_wfcin(contents.trim());
|
|
|
|
// clear input
|
|
ielt.value = '';
|
|
|
|
// auto-resize
|
|
auto_resize_output();
|
|
auto_scroll_to_bottom();
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
function main() {
|
|
ielt.addEventListener('keydown', on_input_key);
|
|
}
|
|
|
|
main();
|
|
</script>
|
|
</body>
|
|
</html>
|