function/templates/dashboard/http_functions/client.html

{% extends 'dashboard.html' %}

{% block page %}

{{ render_partial('dashboard/http_functions/header.html', title='Try', user_id=user_id, function_id=function_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" id="client-u{{ user_id }}-f{{ function_id }}">
</div>

<script>
    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: this.method,
                body: !['GET', 'HEAD'].includes(this.method) ? this.body : undefined,
                headers
            })
                .then(response => response.text())
                .then(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 %}