<!DOCTYPE html>
<html>
<head>
	<title>Kiosk</title>
	{% load static %}

	{# jQuery #}
	<script type="text/javascript" src="{% static "jquery.js" %}"></script>

	{# Bootstrap #}
	<script type="text/javascript" src="{% static "bootstrap/js/bootstrap.js" %}"></script>
	<link rel="stylesheet" type="text/css" href="{% static "bootstrap/css/bootstrap.css" %}"/>
	<link rel="stylesheet" type="text/css" href="{% static "bootstrap/css/bootstrap-theme.css" %}"/>

	{# NEMO #}
	<script type="text/javascript" src="{% static "nemo.js" %}"></script>
	<link rel="stylesheet" type="text/css" href="{% static "nemo.css" %}"/>

	<!--suppress CssUnusedSymbol -->
	<style>
		.btn-extra-large
		{
			margin-top: 50px;
			margin-bottom: 50px;
			font-size: 36px;
		}
	</style>
</head>
<body>
<div class="container-fluid">
	<div id="default_content">
		<h1>Scan your badge to control tools</h1>
		<div id="occupancy"></div>
	</div>
	<div id="error" style="display: none"><h1>There was a problem communicating with the web server. Please visit the user office for assistance.</h1></div>
	<div id="status" style="display: none"></div>
	<div><h1 style="color:lightgrey" id="badge_number"></h1></div>
</div>
<script type="text/javascript">
	$(window).keypress(on_keypress).keydown(on_keydown);
	let record_badge_number = false;
	let badge_number = "";
	let timeout_handle = null;
	let occupancy = new URLSearchParams(window.location.search).get('occupancy');

	if(occupancy)
	{
		fetch_occupancy();
		setInterval(fetch_occupancy, 30000);
	}

	{# Note that keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as F2, .keydown() or .keyup() is a better choice. #}

	function on_keypress(event)
	{
		if(record_badge_number)
		{
			badge_number += String.fromCharCode(event.which);
			$("#badge_number").html(badge_number);
		}
	}
	function on_keydown(event)
	{
		if(event.which === 113) {# The F2 key activates badge number recording #}
		{
			record_badge_number = !record_badge_number;
			if(!record_badge_number)
			{
				clear_timeout();
				load_choices(badge_number);
				$("#badge_number").html(badge_number + ", sent");
				badge_number = "";
			}
		}
	}
	function load_complete(response, status, xml_http_request)
	{
		if(status === "error")
		{
			$("#default_content").hide();
			$("#status").hide();
			$("#error").show();
			revert(15);
		}
		$("#badge_number").html("");
	}
	function revert(delay)
	{
		clear_timeout();
		delay = delay * 1000;
		timeout_handle = setTimeout(revert_to_default_content, delay);
	}
	function revert_to_default_content()
	{
		fetch_occupancy();
		clear_timeout();
		$("#status").hide();
		$("#error").hide();
		$("#badge_number").html("");
		$("#default_content").show();
	}
	function clear_timeout()
	{
		if(timeout_handle != null)
			clearTimeout(timeout_handle);
		timeout_handle = null;
	}
	function select_project(element, project_id)
	{
		$(".project-choice").removeClass('active');
		$(element).addClass('active');
		$("#project_id").val(project_id);
		$("#start").show();
	}
	function load_choices(badge_number)
	{
		let data = {
			'location': '{{ location }}',
			'badge_number': badge_number
		};
		$("#default_content").hide();
		$("#error").hide();
		$("#status").html("<h1>Loading choices...</h1>").show().load('{% url 'kiosk_choices' %}?' + $.param(data), undefined, load_complete);
	}
	function tool_information(url)
	{
		$("#default_content").hide();
		$("#error").hide();
		$("#status").html("<h1>Loading tool information...</h1>").show().load(url, undefined, load_complete);
	}
	function view_category(url)
	{
		$("#default_content").hide();
		$("#error").hide();
		$("#status").html("<h1>Loading category...</h1>").show().load(url, undefined, load_complete);
	}
	function enable_tool()
	{
		$("#default_content").hide();
		$("#error").hide();
		let data = serialize('#tool_control');
		$("#status").html("<h1>Enabling tool...</h1>").show().load('{% url 'enable_tool_from_kiosk' %}', data, load_complete);
	}
	function disable_tool()
	{
		$("#default_content").hide();
		$("#error").hide();
		let data = serialize('#tool_control');
		$("#status").html("<h1>Disabling tool...</h1>").show().load('{% url 'disable_tool_from_kiosk' %}', data, load_complete);
	}
	function csrf_token()
	{
		return '{{ csrf_token }}';
	}
	function fetch_occupancy()
	{
		ajax_get('{% url 'occupancy' %}', {'occupancy': occupancy}, function(response) { $("#occupancy").html(response); });
	}
</script>
</body>
</html>