add a datastar action

This commit is contained in:
Abel Luck 2026-03-30 12:48:32 +02:00
parent 33dbb143fd
commit 3fc999a69b
3 changed files with 142 additions and 2 deletions

View file

@ -87,7 +87,8 @@ def page_header() -> Renderable:
class_="rounded-full border border-white/15 bg-white/5 px-4 py-2.5 text-sm font-semibold text-white hover:bg-white/10",
)["Run scheduler health check"],
],
]
],
demo_action_panel(),
]
@ -121,6 +122,61 @@ def overview_section(*, active_jobs: str) -> Renderable:
]
def demo_action_panel() -> Renderable:
return h.div(
{"data-signals": "{decrementAmount: '1', decrementError: ''}"},
id="demo-decrement-panel",
class_="mt-6 rounded-[1.75rem] border border-white/10 bg-white/5 p-5 ring-1 ring-white/10",
)[
h.div(class_="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between")[
h.div(class_="max-w-2xl")[
h.p(
class_="text-xs font-semibold uppercase tracking-[0.22em] text-amber-300"
)["Demo action"],
h.h2(class_="mt-2 text-lg font-semibold text-white")[
"Decrement active jobs"
],
h.p(class_="mt-2 text-sm text-slate-300")[
"Uses Datastar signals plus a server action. Enter an odd number and the server will validate it before mutating state."
],
],
h.div(class_="flex flex-col gap-3 sm:flex-row sm:items-end")[
h.div(class_="min-w-40")[
h.label(
for_="decrement-amount",
class_="block text-xs font-semibold uppercase tracking-[0.18em] text-slate-300",
)["Odd decrement"],
h.input(
{
"data-bind:decrement-amount": True,
"data-preserve-attr:value": True,
},
id="decrement-amount",
name="decrement-amount",
type="number",
min="1",
step="1",
inputmode="numeric",
class_="mt-2 block w-full rounded-2xl border border-white/10 bg-slate-950/70 px-3.5 py-2.5 text-sm text-white shadow-sm placeholder:text-slate-500 focus:outline-hidden focus:ring-2 focus:ring-amber-400",
),
],
h.button(
{"data-on:click": "@post('/demo/decrement')"},
type="button",
class_="cursor-pointer rounded-full bg-amber-400 px-4 py-2.5 text-sm font-semibold text-slate-950 shadow-sm hover:bg-amber-300",
)["Decrement"],
],
],
h.p(
{
"data-show": "$decrementError !== ''",
"data-text": "$decrementError",
},
class_="mt-3 text-sm font-medium text-rose-300",
),
]
def source_form_section() -> Renderable:
return h.section(
class_="rounded-[2rem] bg-white/90 shadow-sm ring-1 ring-slate-200"