Basic web frontend
This commit is contained in:
		@ -28,7 +28,7 @@ POST /departure
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
[Response]
 | 
			
		||||
OK
 | 
			
		||||
200 OK
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -3,6 +3,14 @@ from .core import *
 | 
			
		||||
# Start the flask server if run from terminal
 | 
			
		||||
if __name__ == "__main__":
 | 
			
		||||
 | 
			
		||||
	@app.route('/')
 | 
			
		||||
	def get_root():
 | 
			
		||||
		return app.send_static_file('index.html')
 | 
			
		||||
 | 
			
		||||
	@app.route('/<path:path>')
 | 
			
		||||
	def get_file(path):
 | 
			
		||||
		return app.send_static_file(path)
 | 
			
		||||
 | 
			
		||||
	# Just allow everything to avoid the hassle when running locally.
 | 
			
		||||
	@app.after_request
 | 
			
		||||
	def add_headers(response):
 | 
			
		||||
 | 
			
		||||
@ -18,12 +18,7 @@ namelist = NameList(namefile)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
from flask import Flask, request
 | 
			
		||||
app = Flask(__name__)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@app.route('/')
 | 
			
		||||
def get_root():
 | 
			
		||||
	return "Error: No Endpoint selected. See docs/API.md for reference.", 404
 | 
			
		||||
app = Flask(__name__, static_folder='../web')
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@app.route('/arrival', methods=['POST'])
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										
											BIN
										
									
								
								web/favicon.ico
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								web/favicon.ico
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 4.1 KiB  | 
							
								
								
									
										95
									
								
								web/index.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										95
									
								
								web/index.html
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,95 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html>
 | 
			
		||||
	<head>
 | 
			
		||||
		<title>FTracker</title>
 | 
			
		||||
		<script>
 | 
			
		||||
			var cbt = {
 | 
			
		||||
				'arrival': 'I have read the protection <a href="/guidelines">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 action="#">
 | 
			
		||||
				<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>
 | 
			
		||||
			form = document.querySelector('form')
 | 
			
		||||
			form.onsubmit= function(e) {
 | 
			
		||||
				e.preventDefault()
 | 
			
		||||
				console.log(e)
 | 
			
		||||
 | 
			
		||||
				var payload = (qp.action == 'arrival') ?
 | 
			
		||||
					{
 | 
			
		||||
						'room': qp.room,
 | 
			
		||||
						'name': e.srcElement[0].value,
 | 
			
		||||
						'agreetoguidelines': e.srcElement[1].checked
 | 
			
		||||
					} :
 | 
			
		||||
					{
 | 
			
		||||
						'name': e.srcElement[0].value,
 | 
			
		||||
						'cleanedworkspace': e.srcElement[1].checked
 | 
			
		||||
					}
 | 
			
		||||
 | 
			
		||||
				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>"
 | 
			
		||||
 | 
			
		||||
					} 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)
 | 
			
		||||
						})
 | 
			
		||||
 | 
			
		||||
					}
 | 
			
		||||
				})
 | 
			
		||||
 | 
			
		||||
				console.log(payload)
 | 
			
		||||
			}
 | 
			
		||||
		</script>
 | 
			
		||||
	</body>
 | 
			
		||||
</html>
 | 
			
		||||
		Reference in New Issue
	
	Block a user