Initial
This commit is contained in:
commit
36a53f343e
1 changed files with 300431 additions and 0 deletions
196
rest_tester.html
Normal file
196
rest_tester.html
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>REST API tester</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Raleway|Roboto&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>
|
||||
Loading…
Reference in a new issue