ftracker/web/index.html

105 lines
2.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>FTracker</title>
<script>
var cbt = {
'arrival': 'I have read and will adhere to the <a href="/guidelines" target="_blank">protection guidelines</a>',
'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>
<form>
<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>
// Prefill the name field if it was successfully entered before
var savedName = localStorage.getItem('name')
if (savedName)
document.getElementById('name').value = savedName
form = document.querySelector('form')
form.onsubmit= function(e) {
e.preventDefault()
console.log(e)
var name = e.srcElement[0].value
var agreed = e.srcElement[1].checked
var payload = (qp.action == 'arrival') ?
{
'room': qp.room,
'name': name,
'agreetoguidelines': agreed
} :
{
'name': name,
'cleanedworkspace': agreed
}
console.log(payload)
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>"
localStorage.setItem('name', name)
} 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>