<!doctype html>
<html>
	<title>Traffic Light Simmulation Frontend</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:normal,bold,italic" />
	<style>
	body {
		font-family: 'Roboto Condensed';
	}
	.wrapper {
		display: flex;
		max-width: 600px;
		font-family: 'Roboto Condensed';
	}
	.wrapper > div {
		margin: .1em;
		align-self: center;
		flex: 1;
		text-align: center;
	}
	div.light {
		background-size: 100px;
		background-repeat: no-repeat;
		min-height: 230px;
		min-width: 100px;
		width: 100px;
	}
	div.north {
		background-image: url(/static/trafficlightfrontend/red.png);
	}
	span#state-data {
		color: #666666;
		font-family: monospace;
	}
	</style>
	<body>
		<h1>Traffic light Simulation Demo</h1>
		<p><strong>Period: </strong><span id="period">Awaiting first update...</span></p>
		<p><strong>Simulation time: </strong><span id="time">Awaiting first update...</span></p>
		<p><strong>Remaining state time: </strong><span id="time-remaining">Awaiting first update...</span> second(s)</p>
		<p><strong>Current state index: </strong><span id="state-index">Awaiting first update...</span></p>
		<p><strong>Current state data: </strong><span id="state-data">Awaiting first update...</span></p>
		<hr />
		<div class="wrapper">
			<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>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() 
			{
				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("period").innerHTML = light_status.current_period_verbose_name;
				document.getElementById("time").innerHTML = light_status.simulation_time;
				// Important note: Due to marginal overshoot of scheduled timing, it is possible for time-remaining to be very slightly negative
				// It is undesirable to present this on the frontend, and therefore zero is the lowest number displayed
				document.getElementById("time-remaining").innerHTML = Math.max(0, Math.round(light_status.time_remaining * 1000) / 1000).toFixed(3);
				document.getElementById("state-index").innerHTML = light_status.current_state_index;
				document.getElementById("state-data").innerHTML = JSON.stringify(light_status.current_state_data);

				document.getElementById("north").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state_data.north + ".png)";
				document.getElementById("north-right").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state_data["north-right"] + "-right.png)";
				document.getElementById("west").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state_data.west + ".png)";
				document.getElementById("east").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state_data.east + ".png)";
				document.getElementById("south").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state_data.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>
