127 lines
7.1 KiB
HTML
127 lines
7.1 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="mx-auto w-full">
|
|
<form class="flex"><select
|
|
class="px-4 py-2 border rounded-md border-gray-300 hover:border-orange-500 focus:outline-none bg-gray-100"
|
|
name="method">
|
|
<option value="GET">GET</option>
|
|
<option value="POST">POST</option>
|
|
<option value="PUT">PUT</option>
|
|
<option value="PATCH">PATCH</option>
|
|
<option value="DELETE">DELETE</option>
|
|
</select><input
|
|
class="ml-3 w-full px-4 py-2 border rounded-md border-gray-300 hover:border-orange-500 focus:outline-orange-500"
|
|
name="url" value="{{ url }}"><button
|
|
class="ml-3 px-6 py-2 rounded-md font-semibold text-white bg-orange-500 hover:bg-orange-600" type="button"
|
|
id="send-request">Send</button></form>
|
|
<div class="react-tabs" data-rttabs="true">
|
|
<ul class="flex mt-5 border border-gray-300 rounded-t-lg" role="tablist">
|
|
<li class="mr-3 py-2 px-4 border-orange-400 focus:outline-none
|
|
hover:text-orange-500 cursor-pointer" role="tab" id="tab:r0:0" aria-selected="true" aria-disabled="false"
|
|
aria-controls="panel:r0:0" tabindex="0" data-rttab="true">Query Params</li>
|
|
<li class="mr-3 py-2 px-4 border-orange-400 focus:outline-none
|
|
hover:text-orange-500 cursor-pointer" role="tab" id="tab:r0:1" aria-selected="false" aria-disabled="false"
|
|
aria-controls="panel:r0:1" data-rttab="true">Headers</li>
|
|
<li class="mr-3 py-2 px-4 border-orange-400 focus:outline-none
|
|
hover:text-orange-500 cursor-pointer border-b-2 text-orange-600" role="tab" id="tab:r0:2"
|
|
aria-selected="false" aria-disabled="false" aria-controls="panel:r0:2" data-rttab="true">Body</li>
|
|
</ul>
|
|
<div class="react-tabs__tab-panel px-4 py-4 rounded-b-lg border border-t-0 border-gray-300 react-tabs__tab-panel--selected hidden"
|
|
role="tabpanel" id="panel:r0:0" aria-labelledby="tab:r0:0">
|
|
<div class="">
|
|
<div class="flex mb-3"><input
|
|
class="px-4 py-1.5 w-full border border-gray-300 rounded-md hover:border-orange-500 focus:outline-orange-500"
|
|
placeholder="Key" name="keyItem" value="Content-Type"><input
|
|
class="ml-3 px-4 py-1.5 w-full border border-gray-300 rounded-md hover:border-orange-500 focus:outline-orange-500"
|
|
placeholder="Value" name="valueItem" value="application/json"><button
|
|
class="ml-4 px-4 rounded-md text-red-500 border border-red-300 hover:bg-red-100">Remove</button>
|
|
</div><button
|
|
class="px-6 py-1 rounded-md text-orange-600 border border-orange-400 hover:bg-orange-100">Add</button>
|
|
</div>
|
|
</div>
|
|
<div class="react-tabs__tab-panel px-4 py-4 rounded-b-lg border border-t-0 border-gray-300 hidden"
|
|
role="tabpanel" id="panel:r0:1" aria-labelledby="tab:r0:1">
|
|
<div class="">
|
|
<div class="flex mb-3"><input
|
|
class="px-4 py-1.5 w-full border border-gray-300 rounded-md hover:border-orange-500 focus:outline-orange-500"
|
|
placeholder="Key" name="keyItem"><input
|
|
class="ml-3 px-4 py-1.5 w-full border border-gray-300 rounded-md hover:border-orange-500 focus:outline-orange-500"
|
|
placeholder="Value" name="valueItem"><button
|
|
class="ml-4 px-4 rounded-md text-red-500 border border-red-300 hover:bg-red-100">Remove</button>
|
|
</div><button
|
|
class="px-6 py-1 rounded-md text-orange-600 border border-orange-400 hover:bg-orange-100">Add</button>
|
|
</div>
|
|
</div>
|
|
<div class="react-tabs__tab-panel px-4 py-4 rounded-b-lg border border-t-0 border-gray-300" role="tabpanel"
|
|
id="panel:r0:2" aria-labelledby="tab:r0:2">
|
|
<div>
|
|
<textarea id="request-body" rows="4"
|
|
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
|
placeholder="Request body"></textarea>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="my-4"><span class="text-2xl font-medium">Response</span>
|
|
<div class="react-tabs" data-rttabs="true">
|
|
<ul class="flex mt-5 border border-gray-300 rounded-t-lg" role="tablist">
|
|
<li class="mr-3 py-2 px-4 border-orange-400 focus:outline-none hover:text-orange-500 cursor-pointer border-b-2 text-orange-600"
|
|
role="tab" id="tab:r1:0" aria-selected="true" aria-disabled="false" aria-controls="panel:r1:0"
|
|
tabindex="0" data-rttab="true">Response Body</li>
|
|
<li class="mr-3 py-2 px-4 border-orange-400 focus:outline-none hover:text-orange-500 cursor-pointer"
|
|
role="tab" id="tab:r1:1" aria-selected="false" aria-disabled="false" aria-controls="panel:r1:1"
|
|
data-rttab="true">Response Header</li>
|
|
</ul>
|
|
<div class="px-4 py-4 rounded-b-lg border border-t-0 border-gray-300">
|
|
<div class="react-tabs__tab-panel react-tabs__tab-panel--selected" role="tabpanel" id="panel:r1:0"
|
|
aria-labelledby="tab:r1:0">
|
|
<code id="response-body"></code>
|
|
</div>
|
|
<div class="react-tabs__tab-panel hidden" role="tabpanel" id="panel:r1:1" aria-labelledby="tab:r1:1">
|
|
<table class="text-left">
|
|
<thead>
|
|
<tr>
|
|
<th class="w-36 pb-1.5">Key</th>
|
|
<th class="w-60">Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
const send_request_btn = document.getElementById('send-request');
|
|
const response_body_el = document.getElementById('response-body');
|
|
|
|
send_request_btn.addEventListener('click', () => {
|
|
const url = document.querySelector('input[name="url"]').value;
|
|
const method = document.querySelector('select[name="method"]').value;
|
|
let body = document.getElementById('request-body').value;
|
|
// If get or head then dont add body
|
|
if (method === 'GET' || method === 'HEAD') {
|
|
body = null;
|
|
}
|
|
|
|
fetch(url, {
|
|
method,
|
|
body,
|
|
headers: {
|
|
}
|
|
})
|
|
.then(response => response.text())
|
|
.then(text => {
|
|
response_body_el.innerText = text;
|
|
});
|
|
|
|
})
|
|
})();
|
|
</script>
|
|
|
|
{% endblock %} |