<!doctype html>
<html>
	<title>Traffic Light Simmulation Frontend</title>
	<style>
	.wrapper {
		display: flex;
		max-width: 500px;
	}
	.wrapper > div {
		background: #AAAAAA;
		margin: .1em;
		flex: 1;
	}
	div.light {
		background-size: 100px;
		background-repeat: no-repeat;
		min-height: 230px;
		min-width: 100px;
	}
	div.north {
		background-image: url(/static/trafficlightfrontend/red.png);
	}
	</style>
	<body>
		<p>Traffic light demo:</p>
		<p><strong>Status: </strong><span id="status">Awaiting first update...</span></p>
		<p><strong>Period: </strong><span id="period">Awaiting first update...</span></p>
		<p><strong>Time: </strong><span id="time">Awaiting first update...</span></p>
		<div class="wrapper">
			<div></div>
			<div></div>
			<div>NORTH</div>
			<div id="north" class="light north"></div>
			<div id="north-right" class="light"></div>
			<div></div>
			<div></div>
		</div>
		<div class="wrapper">
			<div>WEST</div>
			<div id="west" class="light"></div>
			<div></div>
			<div></div>
			<div></div>
			<div id="east" class="light"></div>
			<div>EAST</div>
		</div>
		<div class="wrapper">
			<div></div>
			<div></div>
			<div>SOUTH</div>
			<div id="south" class="light"></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
	<script>
		function sleep(ms)
		{
			return new Promise(resolve => setTimeout(resolve, ms))
		}

		async function ready()
		{
			const req = new XMLHttpRequest();

			req.onload = function() 
			{
				// console.dir(this);
				if (this.status != 200)
				{
					console.log("Failed update: status " + this.status)
					return;
				}
				light_status = JSON.parse(this.responseText);

				let static_path_prefix = "/static/trafficlightfrontend/";
				document.getElementById("status").innerHTML = JSON.stringify(light_status.current_state);
				document.getElementById("period").innerHTML = light_status.current_period_verbose_name;
				document.getElementById("time").innerHTML = light_status.simulation_time;

				document.getElementById("north").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state.north + ".png)";
				document.getElementById("north-right").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state["north-right"] + "-right.png)";
				document.getElementById("west").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state.west + ".png)";
				document.getElementById("east").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state.east + ".png)";
				document.getElementById("south").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state.south + ".png)";
			};

			while (true)
			{
				await sleep(250);
				console.log("Tick");
				req.open("GET", "/frontend/status", false);

				// Note try/catch for exceptions is the only way to account for net::ERR_CONNECTION_REFUSED - this is NOT dealt with by XMLHttpRequest event hooks.
				// In the case of net::ERR_CONNECTION_REFUSED should throw DOMException with name "NetworkError".
				try
				{
					req.send();
				}
				catch (err)
				{
					console.dir(err);
				}
			}
		}

		document.addEventListener("DOMContentLoaded", ready);
	</script>
</html>
