Improved webinterface
This commit is contained in:
a_voel02
175
html/index.html
175
html/index.html
@ -1,87 +1,116 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style type="text/css">
|
||||
textarea {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Pixelserver Interface</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Pixelserver</h1>
|
||||
|
||||
<h2>Kommando:</h2>
|
||||
<div id='container' style="display: none;">
|
||||
<form id='in' onSubmit="return request()">
|
||||
<select id="list"></select>
|
||||
<input id="args" />
|
||||
<button id="execute">Ausführen</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<h2>Log:</h2>
|
||||
<div id='log'>
|
||||
<textarea id='logs' style="width: 500px; height: 500px;"></textarea>
|
||||
</div>
|
||||
<script>
|
||||
function getRaw(from, callback){
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
callback(xhttp.responseText);
|
||||
}
|
||||
};
|
||||
xhttp.open("GET", from, true);
|
||||
xhttp.send();
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
function getJSON(from, callback){
|
||||
getRaw(from, function(text){
|
||||
callback(JSON.parse(text));
|
||||
});
|
||||
}
|
||||
|
||||
function post(from, data){
|
||||
var formdata = new FormData();
|
||||
for (var key in data) {
|
||||
formdata.append(key, data[key]);
|
||||
}
|
||||
let xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
//callback(xhttp.responseText);
|
||||
}
|
||||
};
|
||||
xhttp.open("POST", from, true);
|
||||
xhttp.send(formdata);
|
||||
}
|
||||
|
||||
function populateForm(parameters){
|
||||
let list = document.getElementById("list");
|
||||
|
||||
parameters.map ( e => {
|
||||
})
|
||||
for (var i in parameters) {
|
||||
let app = parameters[i];
|
||||
let name = app["name"];
|
||||
let guiname = app["guiname"];
|
||||
let persistent = app["persistent"];
|
||||
let element = document.createElement("option");
|
||||
element.value = name;
|
||||
element.innerHTML = guiname;
|
||||
element.dataset.persistent = persistent;
|
||||
list.appendChild(element);
|
||||
}
|
||||
|
||||
list.onchange = function(){
|
||||
let app = document.getElementById('list');
|
||||
let persistent = app.options[app.selectedIndex].dataset.persistent;
|
||||
console.log(persistent);
|
||||
if (persistent == "true"){
|
||||
document.getElementById("args").style.display = "none";
|
||||
}else{
|
||||
document.getElementById("args").style.display = "inline";
|
||||
}
|
||||
}
|
||||
list.onchange();
|
||||
document.getElementById("container").style.display = "block";
|
||||
}
|
||||
|
||||
<body>
|
||||
<div id='container'>
|
||||
<form id='in'>
|
||||
</form>
|
||||
</div>
|
||||
<div id='log'>
|
||||
<textarea id='logs'>
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
<script>
|
||||
function request(){
|
||||
let app = document.getElementById('list');
|
||||
let val = app.options[app.selectedIndex].value;
|
||||
let parameter = document.getElementById('args').value;
|
||||
let url = "/apps/start/" + val;
|
||||
/*if (parameter != ""){
|
||||
url += "/" + parameter;
|
||||
}*/
|
||||
post(url, {"param": parameter});
|
||||
//console.log(url);
|
||||
//getRaw("GET", url, function(){});
|
||||
return false;
|
||||
}
|
||||
|
||||
function generateInput(parameters){
|
||||
let container = document.getElementById('in');
|
||||
function updateLog(){
|
||||
getRaw("/apps/log", function(text){
|
||||
document.getElementById('logs').innerText = text;
|
||||
});
|
||||
}
|
||||
|
||||
let list = document.createElement("select");
|
||||
list.id = "list_";
|
||||
container.appendChild(list);
|
||||
|
||||
/*updateLog();
|
||||
setInterval(updateLog, 1000);*/
|
||||
|
||||
//let json = JSON.parse(parameters);
|
||||
parameters.map ( e => {
|
||||
let element = document.createElement("option");
|
||||
element.value = e;
|
||||
element.innerHTML = e;
|
||||
list.appendChild(element);
|
||||
})
|
||||
getJSON("/apps/list", populateForm);
|
||||
|
||||
let arguments = document.createElement("input");
|
||||
arguments.id = "args";
|
||||
container.appendChild(arguments);
|
||||
|
||||
let button = document.createElement("Button");
|
||||
button.innerHTML = "Execute";
|
||||
container.appendChild(button);
|
||||
button.onclick = request;
|
||||
|
||||
//container.appendChild(foo);
|
||||
}
|
||||
|
||||
|
||||
function request(){
|
||||
let app = document.querySelector('#list_');
|
||||
let val = app.options[app.selectedIndex].value;
|
||||
let parameter = document.getElementById('args').value;
|
||||
console.log(parameter);
|
||||
fetch("/apps/start/" + val + "/" + parameter).then(console.log);
|
||||
|
||||
}
|
||||
|
||||
|
||||
//async function initLog(){
|
||||
// socket = new WebSocket ( "/logs" );
|
||||
// socket.onmessage = function ( evt ) { document.getElementById('logs').innerHTML += evt.data; };
|
||||
//}
|
||||
|
||||
var sleep = time => new Promise(resolve => setTimeout(resolve, time))
|
||||
var poll = (promiseFn, time) => promiseFn().then(
|
||||
sleep(time).then(() => poll(promiseFn, time)))
|
||||
poll(() => new Promise(() => fetch("/apps/log").then(res => res.text().then(e => { document.getElementById('logs').innerHTML = e;})) ), 1000)
|
||||
|
||||
let apps = fetch("/apps/list").then(res => res.json().then(generateInput));
|
||||
|
||||
//generateInput("[ \"bla\", \"foo\", \"baz\" ]");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user