Use mithril.js to make postman like client (Previously was static html with a sprinkling of js)
This commit is contained in:
Peter Stockings
@@ -22,6 +22,8 @@
|
||||
integrity="sha512-g9yptARGYXbHR9r3kTKIAzF+vvmgEieTxuuUUcHC5tKYFpLR3DR+lsisH2KZJG2Nwaou8jjYVRdbbbBQI3Bo5w=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
|
||||
<script src="https://unpkg.com/mithril/mithril.js"></script>
|
||||
|
||||
<style>
|
||||
@import url("https://rsms.me/inter/inter.css");
|
||||
|
||||
@@ -75,7 +77,7 @@
|
||||
</head>
|
||||
|
||||
<body class="gradient leading-relaxed tracking-wide flex flex-col">
|
||||
<div class="container mx-auto p-4 min-h-screen h-full">
|
||||
<div class="container mx-auto p-4 lg:p-1 min-h-screen h-full">
|
||||
|
||||
{% block content %}
|
||||
|
||||
|
||||
@@ -6,135 +6,142 @@
|
||||
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 class="mx-auto w-full pt-4" id="client-u{{ user_id }}-f{{ function_id }}">
|
||||
</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;
|
||||
var RequestClient = {
|
||||
// Initialize component state
|
||||
init: function () {
|
||||
this.method = 'GET';
|
||||
this.url = "{{ url_for('execute_http_function', user_id=user_id, function=name) }}";
|
||||
this.body = '{}';
|
||||
this.response = '';
|
||||
this.activeTab = 'query params';
|
||||
this.headers = [{ key: 'Content-Type', value: 'application/json' }, { key: '', value: '' }];
|
||||
this.queryParams = [{ key: '', value: '' }];
|
||||
},
|
||||
sendRequest: function () {
|
||||
let url = this.url;
|
||||
const query = this.queryParams.filter(p => p.key && p.value)
|
||||
.map(p => `${encodeURIComponent(p.key)}=${encodeURIComponent(p.value)}`)
|
||||
.join('&');
|
||||
if (query) {
|
||||
url += '?' + query;
|
||||
}
|
||||
|
||||
const headers = this.headers.reduce((acc, { key, value }) => {
|
||||
if (key && value) acc[key] = value;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
fetch(url, {
|
||||
method,
|
||||
body,
|
||||
headers: {
|
||||
}
|
||||
method: this.method,
|
||||
body: !['GET', 'HEAD'].includes(this.method) ? this.body : undefined,
|
||||
headers
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(text => {
|
||||
response_body_el.innerText = text;
|
||||
this.response = text;
|
||||
m.redraw();
|
||||
});
|
||||
},
|
||||
view: function () {
|
||||
return m("div.mx-auto.w-full.pt-4", [
|
||||
m("form.flex", [
|
||||
m("select.px-4.py-2.border.rounded-md.border-gray-300.hover:border-orange-500.focus:outline-none.bg-gray-100", {
|
||||
onchange: (e) => this.method = e.target.value,
|
||||
value: this.method
|
||||
}, ["GET", "POST", "PUT", "PATCH", "DELETE"].map(method =>
|
||||
m("option", { value: method }, method)
|
||||
)),
|
||||
m("input.ml-3.w-full.px-4.py-2.border.rounded-md.border-gray-300.hover:border-orange-500.focus:outline-orange-500", {
|
||||
onchange: (e) => this.url = e.target.value,
|
||||
value: this.url,
|
||||
placeholder: "URL"
|
||||
}),
|
||||
m("button.ml-3.px-6.py-2.rounded-md.font-semibold.text-white.bg-orange-500.hover:bg-orange-600", {
|
||||
type: "button",
|
||||
onclick: () => this.sendRequest()
|
||||
}, "Send")
|
||||
]),
|
||||
// Tabs for query params, headers, and body
|
||||
m("div", [
|
||||
// Tab headers
|
||||
m("ul.flex.mt-5.border.border-gray-300.rounded-t-lg", [
|
||||
["Query Params", "Headers", "Body"].map((tab, index) => m("li.mr-3.py-2.px-4.border-orange-400.focus:outline-none.hover:text-orange-500.cursor-pointer", {
|
||||
class: this.activeTab === tab.toLowerCase() ? "border-b-2 text-orange-600" : "",
|
||||
onclick: () => this.activeTab = tab.toLowerCase()
|
||||
}, tab))
|
||||
]),
|
||||
// Tab content
|
||||
this.activeTab === 'query params' ? m("div.px-4.py-4.rounded-b-lg.border.border-t-0.border-gray-300", [
|
||||
m("div", [
|
||||
m("div.flex-col.space-y-2.mb-3", this.queryParams.map(({ key, value }, index) => m('div.flex', [
|
||||
m("input.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: key,
|
||||
oninput: (e) => this.queryParams[index].key = e.target.value
|
||||
}),
|
||||
m("input.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: value,
|
||||
oninput: (e) => this.queryParams[index].value = e.target.value
|
||||
}),
|
||||
m("button.ml-4.px-4.rounded-md.text-red-500.border.border-red-300.hover:bg-red-100", {
|
||||
onclick: () => this.queryParams.splice(index, 1)
|
||||
}, "Remove")
|
||||
]))),
|
||||
m("button.px-6.py-1.rounded-md.text-orange-600.border.border-orange-400.hover:bg-orange-100", {
|
||||
onclick: () => this.queryParams.push({ key: '', value: '' })
|
||||
}, "Add")
|
||||
])
|
||||
])
|
||||
: '',
|
||||
this.activeTab === 'headers' ? m("div.px-4.py-4.rounded-b-lg.border.border-t-0.border-gray-300", [
|
||||
m("div", [
|
||||
m("div.flex-col.space-y-2.mb-3", this.headers.map(({ key, value }, index) => m('div.flex', [
|
||||
m("input.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: key,
|
||||
oninput: (e) => this.headers[index].key = e.target.value
|
||||
}),
|
||||
m("input.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: value,
|
||||
oninput: (e) => this.headers[index].value = e.target.value
|
||||
}),
|
||||
m("button.ml-4.px-4.rounded-md.text-red-500.border.border-red-300.hover:bg-red-100", {
|
||||
onclick: () => this.headers.splice(index, 1)
|
||||
}, "Remove")
|
||||
]))),
|
||||
m("button.px-6.py-1.rounded-md.text-orange-600.border.border-orange-400.hover:bg-orange-100", {
|
||||
onclick: () => this.headers.push({ key: '', value: '' })
|
||||
}, "Add")
|
||||
])
|
||||
])
|
||||
: '',
|
||||
this.activeTab === 'body' ? m("textarea#request-body", {
|
||||
oninput: (e) => this.body = e.target.value,
|
||||
value: this.body,
|
||||
rows: 4,
|
||||
class: "block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300"
|
||||
}) : ''
|
||||
]),
|
||||
m("div.my-4", [
|
||||
m("span.text-2xl.font-medium", "Response"),
|
||||
m("pre", this.response)
|
||||
])
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
})
|
||||
})();
|
||||
RequestClient.init();
|
||||
m.mount(document.getElementById('client-u{{ user_id }}-f{{ function_id }}'), RequestClient);
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
@@ -79,8 +79,8 @@
|
||||
</button>
|
||||
<button
|
||||
class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 text-gray-800"
|
||||
hx-get="{{ url_for('client', user_id=function.user_id, function_id=function.id) }}"
|
||||
hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
|
||||
hx-get="{{ url_for('client', function_id=function.id) }}" hx-target="#container"
|
||||
hx-swap="innerHTML" hx-push-url="true">
|
||||
Try
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user