171 lines
3.7 KiB
HTML
171 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>FTracker</title>
|
|
<meta name="theme-color" content="#c50e1f">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
background: #ddd;
|
|
font-family: sans-serif;
|
|
}
|
|
h1 {
|
|
margin: 0;
|
|
padding: 16px;
|
|
text-transform: uppercase;
|
|
color: #eee;
|
|
background: #c50e1f;
|
|
text-align: center;
|
|
}
|
|
form {
|
|
padding: 16px;
|
|
}
|
|
label {
|
|
display: block;
|
|
font-size: 16px;
|
|
margin-bottom: 16px;
|
|
color: #444;
|
|
}
|
|
label#agreelabel {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
}
|
|
label span {
|
|
width: calc(100% - 50px);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
line-height: normal;
|
|
}
|
|
input {
|
|
border: none;
|
|
padding: 16px;
|
|
font-size: 16px;
|
|
}
|
|
input[type=text] {
|
|
color: #000;
|
|
width: calc(100% - 32px);
|
|
}
|
|
input[type=submit] {
|
|
background: #c50e1f;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
width: 100%;
|
|
}
|
|
input[type=checkbox] {
|
|
transform: translateY(-3px);
|
|
float: left;
|
|
height: 32px;
|
|
width: 32px;
|
|
margin-right: 8px;
|
|
}
|
|
</style>
|
|
<script>
|
|
// 1st script, prepares values needed for writing document
|
|
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>
|
|
<h1><script>
|
|
document.write(qp.action + "<br>Room " + qp.room)
|
|
</script></h1>
|
|
<form>
|
|
<label>
|
|
Full Name:<br>
|
|
<input type="text" name="name" id="name" placeholder="John Doe" required>
|
|
</label>
|
|
<label id="agreelabel">
|
|
<input type="checkbox" name="agree" id="agree" required>
|
|
<span><script>document.write(cbt[qp.action])</script></span>
|
|
</label>
|
|
<input type="submit">
|
|
</form>
|
|
<script>
|
|
// Prefill the name field if it was successfully entered before
|
|
var savedName = localStorage.getItem('name')
|
|
if (savedName)
|
|
document.getElementById('name').value = savedName
|
|
|
|
// 2nd script, server API communication
|
|
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
|
|
|
|
// POST JSON. See docs/API.md
|
|
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) {
|
|
|
|
// Success
|
|
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 user for data and resend both
|
|
alert(json.message)
|
|
})
|
|
|
|
} else {
|
|
|
|
// Any other generic error
|
|
res.text().then(function (text) {
|
|
alert(text)
|
|
})
|
|
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|