start on a simple client with fields and buttons

This commit is contained in:
Maxime Bloch 2019-09-26 18:37:48 +02:00
parent b30d160844
commit 5228879c96
No known key found for this signature in database
GPG Key ID: CE32A7D95B7D6418
3 changed files with 62 additions and 0 deletions

11
client/index.css Normal file
View File

@ -0,0 +1,11 @@
.input-group {
padding: 10px;
}
input {
padding: 5px;
}
label {
margin-right: 10px;
}

33
client/index.html Normal file
View File

@ -0,0 +1,33 @@
<html>
<head>
<link href="index.css" rel="stylesheet" />
<script src="index.js"></script>
</head>
<body>
<form name="link">
<div class="input-group">
<label for="url-field">Watch server url</label>
<input name="url-field" type="text" required></input>
</div>
<div class="input-group">
<label for="run-field">Run id</label>
<input name="run-field" type="number" value="1" required></input>
</div>
<div class="input-group">
<label for="link-field"> Link id </label>
<input name="link-field" type="number" value="0" required></input>
</div>
<div class="input-group">
<input type="button" name="start" value="Start" onClick="call_backend" />
<input type="button" name="handoff" value="Handoff" onClick="call_backend" />
</div>
</form>
<p>Result: <span id="result" style="font-weight: bold;"></span></p>
</body>
</html>

18
client/index.js Normal file
View File

@ -0,0 +1,18 @@
let call_backend = function(e) {
console.log("Call backend");
type = event.target.getAttribute('name');
console.log(type);
var url = document.forms["link"]["url-field"].value;
var run = document.forms["link"]["run-field"].value;
var link = document.forms["link"]["link-field"].value;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result").innerHTML = xmlhttp.responseText;
};
};
xmlhttp.open("POST", url + "/link/" (type==="start" ? "start" : "handoff") + "/" + run + "/" + link, true);
xmlhttp.send();
}