ftracker/web/index.html

105 lines
2.3 KiB
HTML
Raw Normal View History

2020-12-01 13:08:40 +01:00
<!DOCTYPE html>
<html>
<head>
<title>FTracker</title>
<script>
var cbt = {
2020-12-01 14:06:05 +01:00
'arrival': 'I have read and will adhere to the <a href="/guidelines" target="_blank">protection guidelines</a>',
2020-12-01 13:08:40 +01:00
'departure': 'I have cleaned my workspace'
}
function getParams() {
var h = document.location.href
var qparam = h.split('?')[1] || null
if (qparam == null) {
alert("Query parameter(s) missing")
return null
}
var vals = qparam.split('=')
if (vals.length < 2 || !cbt.hasOwnProperty(vals[0])) {
alert("Invalid query parameter")
return null
}
return {
action: vals[0],
room: vals[1]
}
}
var qp = getParams()
</script>
</head>
<body>
<main>
<h1><script>
document.write(qp.action + " " + qp.room)
</script></h1>
2020-12-01 13:29:29 +01:00
<form>
2020-12-01 13:08:40 +01:00
<label>
Full Name:<br>
<input type="text" name="name" id="name" required>
</label><br>
<label>
<input type="checkbox" name="agree" id="agree" required>
<script>document.write(cbt[qp.action])</script>
</label><br>
<input type="submit">
</form>
</main>
<script>
2020-12-01 13:29:29 +01:00
// Prefill the name field if it was successfully entered before
var savedName = localStorage.getItem('name')
if (savedName)
document.getElementById('name').value = savedName
2020-12-01 13:08:40 +01:00
form = document.querySelector('form')
form.onsubmit= function(e) {
e.preventDefault()
console.log(e)
2020-12-01 13:29:29 +01:00
var name = e.srcElement[0].value
var agreed = e.srcElement[1].checked
2020-12-01 13:08:40 +01:00
var payload = (qp.action == 'arrival') ?
{
'room': qp.room,
2020-12-01 13:29:29 +01:00
'name': name,
'agreetoguidelines': agreed
2020-12-01 13:08:40 +01:00
} :
{
2020-12-01 13:29:29 +01:00
'name': name,
'cleanedworkspace': agreed
2020-12-01 13:08:40 +01:00
}
2020-12-01 13:29:29 +01:00
console.log(payload)
2020-12-01 13:08:40 +01:00
fetch("/" + qp.action, {
method: "POST",
body: JSON.stringify(payload)
}).then(res => {
console.log("Request complete! response:", res)
if (Math.floor(res.status / 100) == 2) {
form.innerHTML = "<h2>Done. Thanks!</h2>"
2020-12-01 13:29:29 +01:00
localStorage.setItem('name', name)
2020-12-01 13:08:40 +01:00
} else if (res.status == 409) {
// Conflict, more data requested
res.json().then(function (json) {
// TODO: Ask
alert(json.message)
})
} else {
// Any other generic error
res.text().then(function (text) {
alert(text)
})
}
})
}
</script>
</body>
</html>