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

Disable send request button and display animation when request is already started

Browse Source
This commit is contained in:
Peter Stockings
2024-03-29 20:19:52 +11:00
parent c2cf448528
commit 163a1dbc5f
1 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,6 +73,7 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
var RequestClient = { var RequestClient = {
// Initialize component state // Initialize component state
init: function () { init: function () {
this.isLoading = false;
this.method = 'GET'; this.method = 'GET';
this.url = "{{ url_for('execute_http_function', user_id=user_id, function=name) }}"; this.url = "{{ url_for('execute_http_function', user_id=user_id, function=name) }}";
this.body = '{}'; this.body = '{}';
@@ -87,6 +88,7 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
this.queryParams = [{ key: '', value: '' }]; this.queryParams = [{ key: '', value: '' }];
}, },
sendRequest: function () { sendRequest: function () {
this.isLoading = true;
let startTime = performance.now(); let startTime = performance.now();
let url = this.url; let url = this.url;
const query = this.queryParams.filter(p => p.key && p.value) const query = this.queryParams.filter(p => p.key && p.value)
@@ -107,6 +109,7 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
headers headers
}) })
.then(response => { .then(response => {
this.isLoading = false;
let endTime = performance.now(); let endTime = performance.now();
this.duration = endTime - startTime; this.duration = endTime - startTime;
this.status = response.status; this.status = response.status;
@@ -139,8 +142,14 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
}), }),
m("button.ml-3.px-6.py-2.rounded-md.font-semibold.text-white.bg-orange-500.hover:bg-orange-600", { m("button.ml-3.px-6.py-2.rounded-md.font-semibold.text-white.bg-orange-500.hover:bg-orange-600", {
type: "button", type: "button",
onclick: () => this.sendRequest() onclick: () => this.sendRequest(),
}, "Send") disabled: this.isLoading
}, this.isLoading
? m("svg", { class: "animate-spin h-5 w-5 text-white", viewBox: "0 0 24 24" },
m("circle", { class: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "4", fill: "none" }),
m("path", { class: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
)
: "Send")
]), ]),
// Tabs for query params, headers, and body // Tabs for query params, headers, and body
m("div", [ m("div", [