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

Use mithril.js to make postman like client (Previously was static html with a sprinkling of js)

Browse Source
This commit is contained in:
Peter Stockings
2024-03-28 20:49:49 +11:00
parent 01d24c7b29
commit df458c2738
3 changed files with 130 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/base.html
View File

@@ -22,6 +22,8 @@
integrity="sha512-g9yptARGYXbHR9r3kTKIAzF+vvmgEieTxuuUUcHC5tKYFpLR3DR+lsisH2KZJG2Nwaou8jjYVRdbbbBQI3Bo5w==" integrity="sha512-g9yptARGYXbHR9r3kTKIAzF+vvmgEieTxuuUUcHC5tKYFpLR3DR+lsisH2KZJG2Nwaou8jjYVRdbbbBQI3Bo5w=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<style> <style>
@import url("https://rsms.me/inter/inter.css"); @import url("https://rsms.me/inter/inter.css");
@@ -75,7 +77,7 @@
</head> </head>
<body class="gradient leading-relaxed tracking-wide flex flex-col"> <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 %} {% block content %}

243
templates/dashboard/http_functions/client.html
View File

@@ -6,135 +6,142 @@
name=name, name=name,
show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show_logs=True) }} show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show_logs=True) }}
<div class="mx-auto w-full pt-4"> <div class="mx-auto w-full pt-4" id="client-u{{ user_id }}-f{{ function_id }}">
<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> </div>
<script> <script>
(function () { var RequestClient = {
const send_request_btn = document.getElementById('send-request'); // Initialize component state
const response_body_el = document.getElementById('response-body'); init: function () {
this.method = 'GET';
send_request_btn.addEventListener('click', () => { this.url = "{{ url_for('execute_http_function', user_id=user_id, function=name) }}";
const url = document.querySelector('input[name="url"]').value; this.body = '{}';
const method = document.querySelector('select[name="method"]').value; this.response = '';
let body = document.getElementById('request-body').value; this.activeTab = 'query params';
// If get or head then dont add body this.headers = [{ key: 'Content-Type', value: 'application/json' }, { key: '', value: '' }];
if (method === 'GET' || method === 'HEAD') { this.queryParams = [{ key: '', value: '' }];
body = null; },
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, { fetch(url, {
method, method: this.method,
body, body: !['GET', 'HEAD'].includes(this.method) ? this.body : undefined,
headers: { headers
}
}) })
.then(response => response.text()) .then(response => response.text())
.then(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> </script>
{% endblock %} {% endblock %}

4
templates/dashboard/http_functions/overview.html
View File

@@ -79,8 +79,8 @@
</button> </button>
<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" 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-get="{{ url_for('client', function_id=function.id) }}" hx-target="#container"
hx-target="#container" hx-swap="innerHTML" hx-push-url="true"> hx-swap="innerHTML" hx-push-url="true">
Try Try
</button> </button>
</div> </div>