peterstockings/function
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create http function header template and move all http function related templates into same directory

Browse Source
This commit is contained in:
Peter Stockings
2023-12-22 14:36:00 +11:00
parent 6fab33ea2b
commit c6554cf399
7 changed files with 96 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
templates/dashboard/http_functions/client.html Normal file
View File

@@ -0,0 +1,139 @@
{% extends 'base.html' %}
{% block content %}
{{ render_partial('dashboard/http_functions/header.html', title='Try', user_id=user_id, name=name,
show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show_logs=True) }}
<div class="mx-auto w-full pt-4">
<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_for('execute_http_function', user_id=user_id, function=name) }}">
<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 %}