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

WIP: Add light/dark theme with toggle in navbar (dark theme styling incomplete - dont care for now)

Browse Source
This commit is contained in:
Peter Stockings
2025-11-23 22:00:41 +11:00
parent fc494a9355
commit 89a17f68ab
15 changed files with 463 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,6 +16,54 @@ history_url=url_for('http.history', function_id=function_id)) }}
<div class="mx-auto w-full pt-4" id="client-u{{ user_id }}-f{{ function_id }}">
</div>
<script>
function formatTime(milliseconds) {
if (milliseconds < 1000) {
return `${milliseconds.toFixed(2)} ms`; // Display milliseconds directly if less than 1 second
}
const seconds = milliseconds / 1000;
if (seconds < 60) {
return `${seconds.toFixed(2)} s`; // Display seconds if less than 1 minute
}
const minutes = seconds / 60;
if (minutes < 60) {
return `${minutes.toFixed(2)} min`; // Display minutes if less than 1 hour
}
const hours = minutes / 60;
return `${hours.toFixed(2)} h`; // Display hours for longer durations
}
function formatSize(bytes) {
if (bytes < 1024) {
return `${bytes} bytes`;
} else if (bytes < 1024 * 1024) {
return `${(bytes / 1024).toFixed(2)} KB`;
} else if (bytes < 1024 * 1024 * 1024) {
{% extends 'dashboard.html' %}
{% block page %}
{
{
render_partial('dashboard/http_functions/header.html', user_id = user_id, function_id = function_id,
active_tab = 'client',
show_edit_form = True,
show_logs = True,
show_client = True,
show_history = True,
edit_url = url_for('http.editor', function_id = function_id),
cancel_url = url_for('http.overview'),
logs_url = url_for('http.logs', function_id = function_id),
history_url = url_for('http.history', function_id = function_id))
}
}
<div class="mx-auto w-full pt-4" id="client-u{{ user_id }}-f{{ function_id }}">
</div>
<script>
function formatTime(milliseconds) {
if (milliseconds < 1000) {
@@ -51,24 +99,24 @@ history_url=url_for('http.history', function_id=function_id)) }}
var KeyValueList = (initialVnode) => {
return {
view: (vnode) => {
return m("div.px-4.py-4.rounded-b-lg.border.border-t-0.border-gray-300", [
return m("div.px-4.py-4.rounded-b-lg.border.border-t-0.border-gray-300.dark:border-gray-700.bg-white.dark:bg-gray-800", [
m("div", [
m("div.flex-col.space-y-2.mb-3", vnode.attrs.list.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", {
m("input.px-4.py-1.5.w-full.border.border-gray-300.dark:border-gray-600.rounded-md.hover:border-orange-500.focus:outline-orange-500.bg-white.dark:bg-gray-700.text-gray-900.dark:text-white", {
placeholder: "Key",
value: key,
oninput: (e) => vnode.attrs.list[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", {
m("input.ml-3.px-4.py-1.5.w-full.border.border-gray-300.dark:border-gray-600.rounded-md.hover:border-orange-500.focus:outline-orange-500.bg-white.dark:bg-gray-700.text-gray-900.dark:text-white", {
placeholder: "Value",
value: value,
oninput: (e) => vnode.attrs.list[index].value = e.target.value
}),
m("button.ml-4.px-4.rounded-md.text-red-500.border.border-red-300.hover:bg-red-100", {
m("button.ml-4.px-4.rounded-md.text-red-500.border.border-red-300.hover:bg-red-100.dark:border-red-800.dark:hover:bg-red-900/30", {
onclick: () => vnode.attrs.list.splice(index, 1)
}, "Remove")
]))),
m("button.px-6.py-1.rounded-md.text-orange-600.border.border-orange-400.hover:bg-orange-100", {
m("button.px-6.py-1.rounded-md.text-orange-600.border.border-orange-400.hover:bg-orange-100.dark:text-orange-400.dark:border-orange-500.dark:hover:bg-orange-900/30", {
onclick: () => vnode.attrs.list.push({ key: '', value: '' })
}, "Add")
])
@@ -85,7 +133,7 @@ history_url=url_for('http.history', function_id=function_id)) }}
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"
class: "block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
})
}
return tabMappings[this.activeTab];
@@ -150,13 +198,13 @@ history_url=url_for('http.history', function_id=function_id)) }}
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", {
m("select.px-4.py-2.border.rounded-md.border-gray-300.hover:border-orange-500.focus:outline-none.bg-gray-100.dark:bg-gray-700.dark:border-gray-600.dark:text-white", {
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", {
m("input.ml-3.w-full.px-4.py-2.border.rounded-md.border-gray-300.hover:border-orange-500.focus:outline-orange-500.bg-white.dark:bg-gray-700.dark:border-gray-600.dark:text-white", {
onchange: (e) => this.url = e.target.value,
value: this.url,
placeholder: "URL"
@@ -175,14 +223,14 @@ history_url=url_for('http.history', function_id=function_id)) }}
// Tabs for query params, headers, and body
m("div", [
// Tab headers
m("ul.flex.mt-5.border.border-gray-300.rounded-t-lg", [
m("ul.flex.mt-5.border.border-gray-300.dark:border-gray-700.rounded-t-lg.bg-gray-50.dark:bg-gray-800", [
[
{ name: "Query Params", count: this.queryParams.filter(p => p.key && p.value).length },
{ name: "Headers", count: this.headers.filter(p => p.key && p.value).length },
{ name: "Body", count: null }
].map(({ name, count }, index) =>
m("li.mr-3.py-2.px-4.border-orange-400.focus:outline-none.hover:text-orange-500.cursor-pointer", {
class: this.activeTab === name ? "border-b-2 text-orange-600" : "",
m("li.mr-3.py-2.px-4.border-orange-400.focus:outline-none.hover:text-orange-500.cursor-pointer.text-gray-700.dark:text-gray-300", {
class: this.activeTab === name ? "border-b-2 text-orange-600 dark:text-orange-400" : "",
onclick: () => this.activeTab = name
}, `${name}${count ? ` (${count})` : ``}`))
]),
@@ -193,17 +241,17 @@ history_url=url_for('http.history', function_id=function_id)) }}
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"
class: "block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
}) : ''
]),
this.response ? m("div.my-4.p-4.shadow.rounded-lg", [
this.response ? m("div.my-4.p-4.shadow.rounded-lg.bg-white.dark:bg-gray-800.border.border-gray-200.dark:border-gray-700", [
m("div.flex.items-center.mb-4.justify-between", [
m("ul.flex.border.border-gray-300.rounded-t-lg", [{ name: 'Browser Preview', count: null }, { name: 'Headers', count: this.responseHeaders.length }, { name: 'Body', count: null }].map(({ name, count }) =>
m("li.mr-3.py-2.px-4.border-orange-400.focus:outline-none.hover:text-orange-500.cursor-pointer", {
class: this.activeResponseTab === name ? "border-b-2 text-orange-600" : "",
m("ul.flex.border.border-gray-300.dark:border-gray-700.rounded-t-lg.bg-gray-50.dark:bg-gray-800", [{ name: 'Browser Preview', count: null }, { name: 'Headers', count: this.responseHeaders.length }, { name: 'Body', count: null }].map(({ name, count }) =>
m("li.mr-3.py-2.px-4.border-orange-400.focus:outline-none.hover:text-orange-500.cursor-pointer.text-gray-700.dark:text-gray-300", {
class: this.activeResponseTab === name ? "border-b-2 text-orange-600 dark:text-orange-400" : "",
onclick: () => this.activeResponseTab = name
}, `${name}${count ? ` (${count})` : ``}`))),
m("svg", { class: "h-6 w-6 cursor-pointer", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", onclick: () => this.response = '' },
m("svg", { class: "h-6 w-6 cursor-pointer text-gray-500 dark:text-gray-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", onclick: () => this.response = '' },
m("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M6 18L18 6M6 6l12 12" })
)
]),
@@ -225,15 +273,15 @@ history_url=url_for('http.history', function_id=function_id)) }}
)
])
]) : null,
this.activeResponseTab == 'Body' ? m("div.overflow-auto.max-h-64.bg-gray-100.p-2.rounded-lg", [
m("pre.text-sm", this.response)
this.activeResponseTab == 'Body' ? m("div.overflow-auto.max-h-64.bg-gray-100.dark:bg-gray-900.p-2.rounded-lg", [
m("pre.text-sm.text-gray-900.dark:text-gray-300", this.response)
]) : null,
this.activeResponseTab == 'Browser Preview' ? m("div.p-2.rounded-lg", m.trust(this.response)) : null,
this.activeResponseTab == 'Browser Preview' ? m("div.p-2.rounded-lg.bg-white", m.trust(this.response)) : null,
m("div.flex", [
m("div.grow", ""),
m("div.flex.space-x-2.pt-1", [{ key: 'Status', value: this.status }, { key: 'Time', value: formatTime(this.duration) }, { key: 'Size', value: formatSize(this.responseSize) }].map(({ key, value }) =>
m("div.flex.items-center.justify-between", [
m("span.text-gray-600", `${key}:`),
m("span.text-gray-600.dark:text-gray-400", `${key}:`),
m("span.font-semibold.pl-1.text-green-400", value)
])))
])