add a datastar action
This commit is contained in:
parent
33dbb143fd
commit
3fc999a69b
3 changed files with 142 additions and 2 deletions
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue