Web: API response (esp. request response)

web/index.html

@@ -42,6 +42,7 @@
 			input {
 				border: none;
 				padding: 16px;
+				margin: 4px 0;
 				font-size: 16px;
 			}
 			input[type=text] {
@@ -62,6 +63,21 @@
 				width: 32px;
 				margin-right: 8px;
 			}
+			.request {
+				display: block;
+				position: fixed;
+				background: #ddd;
+				top: 16px;
+				left: 16px;
+				width: calc(100% - 32px);
+				box-shadow: 0 1px 4px 0;
+			}
+			input[type=datetime-local] {
+				width: calc(100% - 24px);
+				padding: 12px;
+				font-size: 12px;
+				background: #fff;
+			}
 		</style>
 		<script>
 			// 1st script, prepares values needed for writing document
@@ -93,7 +109,7 @@
 		<h1><script>
 			document.write(qp.action + "<br>Room " + qp.room)
 		</script></h1>
-		<form>
+		<form id="mainform">
 			<label>
 				Full Name:<br>
 				<input type="text" name="name" id="name" placeholder="John Doe" required>
@@ -111,13 +127,20 @@
 				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, agreed
+			var mform = document.getElementById('mainform')
+			mform.onsubmit = function(e) {
 
-				var name = e.srcElement[0].value
-				var agreed = e.srcElement[1].checked
+				e.preventDefault()
+
+				name = e.srcElement[0].value
+				agreed = e.srcElement[1].checked
+
+				sendMainData()
+
+			}
+
+			function sendMainData() {
 
 				// POST JSON. See docs/API.md
 				var payload = (qp.action == 'arrival') ?
@@ -131,39 +154,119 @@
 						'cleanedworkspace': agreed
 					}
 
-				console.log(payload)
+				post("/" + qp.action, payload)
 
-				fetch("/" + qp.action, {
+			}
+
+			function post(url, payload) {
+
+				console.log("Sending payload:", payload)
+
+				return fetch(url, {
 					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)
-						})
-
-					}
+					handleResponse(res)
 				})
+
+			}
+
+			function handleResponse(res) {
+
+				console.log("Request complete! response:", res)
+
+				if (Math.floor(res.status / 100) == 2) {
+
+					// Success
+					mform = document.getElementById('mainform')
+					mform.innerHTML = "<h2>Done. Thanks!</h2>"
+					localStorage.setItem('name', name)
+
+				} else if (res.status == 409) {
+
+					// Conflict, more data requested
+					handleRequest(res)
+
+				} else {
+
+					// Any other generic error
+					res.text().then(function (text) {
+						alert(text)
+					})
+
+				}
+
+			}
+
+			function handleRequestSubmit(e, json) {
+
+				e.preventDefault()
+
+				var input = e.srcElement[0].value
+				var iso = new Date(input).toISOString()
+
+				// POST JSON. See docs/API.md
+				var payload = (json.request == 'arrival') ?
+					{
+						'room': qp.room,
+						'name': name,
+						'arrival': iso,
+						'agreetoguidelines': agreed
+					} :
+					{
+						'name': name,
+						'departure': iso,
+						'cleanedworkspace': agreed
+					}
+
+				return post("/" + json.request, payload)
+
+			}
+
+			function handleRequest(res) {
+
+				var reqt = {
+					'arrival': 'You probably forgot to sign in when you arrived. Please enter your arrival time now:',
+					'departure': 'You probably forgot to sign out when you left. Please enter your departure time now:'
+				}
+
+				mform.innerHTML = "<h2>Processing Request...</h2>"
+
+				res.json().then(function (json) {
+
+					var aInfo = ''
+					var minD = ''
+					if (json.request == 'departure') {
+						var d = new Date(json.arrival.time)
+						var dInfo = d.toString('en-GB').split(' ').slice(0,5).join(' ')
+						aInfo = `Your last arrival was on <b>${dInfo}</b> in room <b>${json.arrival.room}</b>.`
+						minD = `min="${json.arrival.time.split(':').slice(0,2).join(':')}"`
+					}
+
+					var now = new Date().toISOString().split(':').slice(0,2).join(':')
+
+					document.body.innerHTML +=
+						`<div class="request">
+							<h1>${json.request} missing!</h1>
+							<form id="reqform">
+								<label>
+									${reqt[json.request]}
+									<input type="datetime-local" id="datetime" ${minD} max="${now}" required>
+									${aInfo}
+								</label>
+								<input type="submit">
+							</form>
+						</div>`
+
+					rform = document.getElementById('reqform')
+					rform.onsubmit = async function(e) {
+						await handleRequestSubmit(e, json)
+						document.querySelector('.request').remove()
+						setTimeout(sendMainData, 200)
+					}
+
+				})
+
 			}
 		</script>
 	</body>