UnityTrafficSimulation/rest_tester.html

<!DOCTYPE html>
<html>
<head>
	<title>REST API tester</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Raleway|Roboto&amp;subset=latin-ext" rel="stylesheet">
	<style>

		* {
			margin: 0;
			box-sizing: border-box;
			font: 400 1.25rem "Open Sans";
			overflow: hidden;
		}
		*:focus {
			outline: none;
		}

		::-moz-selection {
			background: #9E5360;
			color: white;
		}
		::selection { 
			background: #9E5360;
			color: white;
		}

		html {
			height: 100%;
		}

		body {
			height: 100%;

			flex-direction: column;

			background: #549F93;
		}
		.center, body {
			display: flex;
			justify-content: center;
			align-content: center;
			align-items: center;
			padding: 0;
		}
		.center {
			width: 80%;
			background-color: transparent;

		}
		label {
			margin-left: 10vmax;
		}
		textarea, button, span {
			display: block;
			margin: 0 auto 1rem auto;
			resize: none;	
		}

		input[type="checkbox"] {
			width: 25px;
			height: 25px;
			margin-left: 12.5px;
		}

		textarea {
			width: 90%;
			padding: 0.5em;
		}

		div, span {
			background-color: white;
			border-radius: 50px;
			padding: 2rem;
			margin: 1rem;
			width: 60%;
			min-width: 500px;
		}

		button {
			background-color: #549F93;
			padding: 0.3rem 0.7rem;
			min-width: 20%;
			cursor: pointer;
			border-radius: 50px;
			border: none;
			color: white;
		}
		
	</style>
	<script>
		const states = [
			'{ "N": "red", "E": "green", "S": "red", "W": "green" }',
			'{ "N": "yellow", "E": "yellow", "S": "yellow", "W": "yellow" }',
			'{ "N": "green", "E": "red", "S": "green", "W": "red" }',
			'{ "N": "yellow", "E": "yellow", "S": "yellow", "W": "yellow" }'
		];
		const stateIntervals = [
			7000, 2000, 7000, 2000
		];
		const URIs = ["NW", "NE", "SE", "SW"];

		let currentStates = [0, 1, 2, 3];
		let autoTLSActive = false;

		function autoTLS(i) {
			if(!document.getElementById("autoTLS").checked) {
				autoTLSActive = false;
				return;
			}

			document.getElementById("verb").value = "PUT";
			document.getElementById("url").value = "http://localhost:8080/trafficLights/" + URIs[i];
			document.getElementById("data").value = states[currentStates[i]];
			send();

			
			setTimeout(function() {
				autoTLS(i);
			}, stateIntervals[currentStates[i]]);

			currentStates[i]++;
			currentStates[i] %= 4;
		}

		function send() {
			if(!autoTLSActive && document.getElementById("autoTLS").checked) {
				autoTLSActive = true;

				for(let i = 0; i < 4; i++) autoTLS(i);
			}
			else {
				let xhr = new XMLHttpRequest();
				xhr.open(document.getElementById("verb").value, document.getElementById("url").value, true);

				xhr.onreadystatechange = function() {
					if(this.readyState == XMLHttpRequest.DONE) {
						document.getElementById("response").innerHTML = "Response code: " + this.status + ", data: " + this.responseText;
					}
				}

				const verb = document.getElementById("verb").value;
				
				if(verb == "PUT" || verb == "POST") {
					xhr.setRequestHeader("Content-Type", "application/json");

					let value = document.getElementById("data").value;
					if(verb == "POST") {
						value = value.replace(/\\/g, '\\\\');
						value = value.replace(/"/g, '\\"');
					}
					

					xhr.send(value); 
				}
				else {
					xhr.send();
				}
			}
		}


		function sendIfEnter(event) {
			if(event.key == "Enter") {
				event.preventDefault();
				send();
			}
		}
			
	</script>
</head>
<body onkeydown="sendIfEnter(event)">
	<div>
		<p>URL:</p>
		<textarea name="url" id="url" rows="3">http://localhost:8080/trafficLights</textarea>
		<p>Data:</p>
		<textarea name="data" id="data" rows="6"></textarea>
		

		<div class="center">
			<select name="verb" id="verb">
				<option value="GET">GET</option>
				<option value="PUT">PUT</option>
				<option value="POST">POST</option>
				<option value="DELETE">DELETE</option>
			</select>

			<label>Auto TLS<input type="checkbox" name="autoTLS" value="autoTLS" id="autoTLS"></label>
		</div>
		<button onclick="send()">Send</button>
	</div>


	<span id="response">Response:</span>

</body>
</html>