start on a simple client with fields and buttons
This commit is contained in:
parent
b30d160844
commit
5228879c96
3 changed files with 62 additions and 0 deletions
11
client/index.css
Normal file
11
client/index.css
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
.input-group {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
33
client/index.html
Normal file
33
client/index.html
Normal 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
18
client/index.js
Normal 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();
|
||||||
|
}
|
Loading…
Reference in a new issue