Externalize sexp to .sexpr files + render() API
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m20s

Replace all 676 inline sexp() string calls across 7 services with
render(component_name, **kwargs) calls backed by 46 external .sexpr
component definition files (587 defcomps total).

- Add render() function to shared/sexp/jinja_bridge.py
- Add load_service_components() helper and update load_sexp_dir() for *.sexpr
- Update parser keyword regex to support HTMX hx-on::event syntax
- Convert remaining inline HTML in route files to render() calls
- Add shared/sexp/templates/misc.sexp for cross-service utility components

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-28 16:14:58 +00:00
parent f4c2f4b6b8
commit f9d9697c67
64 changed files with 5041 additions and 4051 deletions

View File

@@ -66,7 +66,8 @@ def register():
try:
await svc_create_calendar(g.s, post_id, name)
except Exception as e:
return await make_response(f'<div class="text-red-600 text-sm">{e}</div>', 422)
from shared.sexp.jinja_bridge import render as render_comp
return await make_response(render_comp("error-inline", message=str(e)), 422)
from shared.sexp.page import get_template_context
from sexp.sexp_components import render_calendars_list_panel

View File

@@ -37,7 +37,7 @@ def register():
async def _container_nav_handler():
from quart import current_app
from shared.infrastructure.urls import events_url
from shared.sexp.jinja_bridge import sexp as render_sexp
from shared.sexp.jinja_bridge import render as render_comp
container_type = request.args.get("container_type", "page")
container_id = int(request.args.get("container_id", 0))
@@ -65,21 +65,21 @@ def register():
date_str = entry.start_at.strftime("%b %d, %Y at %H:%M")
if entry.end_at:
date_str += f" {entry.end_at.strftime('%H:%M')}"
html_parts.append(render_sexp(
'(~calendar-entry-nav :href href :name name :date-str date-str :nav-class nav-class)',
html_parts.append(render_comp(
"calendar-entry-nav",
href=events_url(entry_path), name=entry.name,
**{"date-str": date_str, "nav-class": nav_class},
date_str=date_str, nav_class=nav_class,
))
# Infinite scroll sentinel (kept as raw HTML — HTMX-specific)
if has_more and paginate_url_base:
html_parts.append(
f'<div id="entries-load-sentinel-{page}"'
f' hx-get="{paginate_url_base}?page={page + 1}"'
f' hx-trigger="intersect once"'
f' hx-swap="beforebegin"'
f' _="on htmx:afterRequest trigger scroll on #associated-entries-container"'
f' class="flex-shrink-0 w-1"></div>'
)
html_parts.append(render_comp(
"htmx-sentinel",
id=f"entries-load-sentinel-{page}",
hx_get=f"{paginate_url_base}?page={page + 1}",
hx_trigger="intersect once",
hx_swap="beforebegin",
**{"class": "flex-shrink-0 w-1"},
))
# Calendar links nav
if not any(e.startswith("calendar") for e in excludes):
@@ -88,9 +88,9 @@ def register():
)
for cal in calendars:
href = events_url(f"/{post_slug}/{cal.slug}/")
html_parts.append(render_sexp(
'(~calendar-link-nav :href href :name name :nav-class nav-class)',
href=href, name=cal.name, **{"nav-class": nav_class},
html_parts.append(render_comp(
"calendar-link-nav",
href=href, name=cal.name, nav_class=nav_class,
))
return "\n".join(html_parts)
@@ -125,6 +125,7 @@ def register():
async def _account_nav_item_handler():
from quart import current_app
from shared.infrastructure.urls import account_url
from shared.sexp.jinja_bridge import render as render_comp
styles = current_app.jinja_env.globals.get("styles", {})
nav_class = styles.get("nav_button", "")
@@ -138,12 +139,10 @@ def register():
# hx-* attributes that don't map neatly to a reusable component.
parts = []
for href, label in [(tickets_url, "tickets"), (bookings_url, "bookings")]:
parts.append(
f'<div class="relative nav-group">'
f'<a href="{href}" hx-get="{href}" hx-target="#main-panel"'
f' hx-select="{hx_select}" hx-swap="outerHTML"'
f' hx-push-url="true" class="{nav_class}">{label}</a></div>'
)
parts.append(render_comp(
"nav-group-link",
href=href, hx_select=hx_select, nav_class=nav_class, label=label,
))
return "\n".join(parts)
_handlers["account-nav-item"] = _account_nav_item_handler
@@ -176,7 +175,7 @@ def register():
async def _link_card_handler():
from shared.infrastructure.urls import events_url
from shared.sexp.jinja_bridge import sexp as render_sexp
from shared.sexp.jinja_bridge import render as render_comp
slug = request.args.get("slug", "")
keys_raw = request.args.get("keys", "")
@@ -194,8 +193,8 @@ def register():
g.s, "page", post.id,
)
cal_names = ", ".join(c.name for c in calendars) if calendars else ""
parts.append(render_sexp(
'(~link-card :title title :image image :subtitle subtitle :link link)',
parts.append(render_comp(
"link-card",
title=post.title, image=post.feature_image,
subtitle=cal_names, link=events_url(f"/{post.slug}"),
))
@@ -212,8 +211,8 @@ def register():
g.s, "page", post.id,
)
cal_names = ", ".join(c.name for c in calendars) if calendars else ""
return render_sexp(
'(~link-card :title title :image image :subtitle subtitle :link link)',
return render_comp(
"link-card",
title=post.title, image=post.feature_image,
subtitle=cal_names, link=events_url(f"/{post.slug}"),
)

View File

@@ -50,7 +50,8 @@ def register():
try:
await svc_create_market(g.s, post_id, name)
except Exception as e:
return await make_response(f'<div class="text-red-600 text-sm">{e}</div>', 422)
from shared.sexp.jinja_bridge import render as render_comp
return await make_response(render_comp("error-inline", message=str(e)), 422)
from shared.sexp.page import get_template_context
from sexp.sexp_components import render_markets_list_panel

96
events/sexp/admin.sexpr Normal file
View File

@@ -0,0 +1,96 @@
;; Events admin components
(defcomp ~events-calendar-admin-panel (&key description-html csrf description)
(section :class "max-w-3xl mx-auto p-4 space-y-10"
(div
(h2 :class "text-xl font-semibold" "Calendar configuration")
(div :id "cal-put-errors" :class "mt-2 text-sm text-red-600")
(div (label :class "block text-sm font-medium text-stone-700" "Description")
(raw! description-html))
(form :id "calendar-form" :method "post" :hx-target "#main-panel" :hx-select "#main-panel"
:hx-on::before-request "document.querySelector('#cal-put-errors').textContent='';"
:hx-on::response-error "document.querySelector('#cal-put-errors').innerHTML = event.detail.xhr.responseText;"
:hx-on::after-request "if (event.detail.successful) this.reset()"
:class "hidden space-y-4 mt-4" :autocomplete "off"
(input :type "hidden" :name "csrf_token" :value csrf)
(div (label :class "block text-sm font-medium text-stone-700" "Description")
(div description)
(textarea :name "description" :autocomplete "off" :rows "4" :class "w-full p-2 border rounded" description))
(div (button :class "px-3 py-2 rounded bg-stone-800 text-white" "Save"))))
(hr :class "border-stone-200")))
(defcomp ~events-entry-admin-link (&key href)
(a :href href :class "inline-flex items-center gap-1 px-2 py-1 text-xs text-stone-500 hover:text-stone-700 hover:bg-stone-100 rounded"
(i :class "fa fa-cog" :aria-hidden "true") " Admin"))
(defcomp ~events-entry-field (&key label content-html)
(div :class "flex flex-col mb-4"
(div :class "text-xs font-semibold uppercase tracking-wide text-stone-500" label)
(raw! content-html)))
(defcomp ~events-entry-name-field (&key name)
(div :class "mt-1 text-lg font-medium" name))
(defcomp ~events-entry-slot-assigned (&key slot-name flex-label)
(div :class "mt-1"
(span :class "px-2 py-1 rounded text-sm bg-blue-100 text-blue-700" slot-name)
(span :class "ml-2 text-xs text-stone-500" flex-label)))
(defcomp ~events-entry-slot-none ()
(div :class "mt-1" (span :class "text-sm text-stone-400" "No slot assigned")))
(defcomp ~events-entry-time-field (&key time-str)
(div :class "mt-1" time-str))
(defcomp ~events-entry-state-field (&key entry-id badge-html)
(div :class "mt-1" (div :id (str "entry-state-" entry-id) (raw! badge-html))))
(defcomp ~events-entry-cost-field (&key cost-html)
(div :class "mt-1" (span :class "font-medium text-green-600" (raw! cost-html))))
(defcomp ~events-entry-tickets-field (&key entry-id tickets-config-html)
(div :class "mt-1" :id (str "entry-tickets-" entry-id) (raw! tickets-config-html)))
(defcomp ~events-entry-date-field (&key date-str)
(div :class "mt-1" date-str))
(defcomp ~events-entry-posts-field (&key entry-id posts-panel-html)
(div :class "mt-1" :id (str "entry-posts-" entry-id) (raw! posts-panel-html)))
(defcomp ~events-entry-panel (&key entry-id list-container name-html slot-html time-html state-html cost-html
tickets-html buy-html date-html posts-html options-html pre-action edit-url)
(section :id (str "entry-" entry-id) :class list-container
(raw! name-html) (raw! slot-html) (raw! time-html) (raw! state-html) (raw! cost-html)
(raw! tickets-html) (raw! buy-html) (raw! date-html) (raw! posts-html)
(div :class "flex gap-2 mt-6"
(raw! options-html)
(button :type "button" :class pre-action
:hx-get edit-url :hx-target (str "#entry-" entry-id) :hx-swap "outerHTML"
"Edit"))))
(defcomp ~events-entry-title (&key name badge-html)
(<> (i :class "fa fa-clock") " " name " " (raw! badge-html)))
(defcomp ~events-entry-times (&key time-str)
(div :class "text-sm text-gray-600" time-str))
(defcomp ~events-entry-optioned-oob (&key entry-id title-html state-html)
(<> (div :id (str "entry-title-" entry-id) :hx-swap-oob "innerHTML" (raw! title-html))
(div :id (str "entry-state-" entry-id) :hx-swap-oob "innerHTML" (raw! state-html))))
(defcomp ~events-entry-options (&key entry-id buttons-html)
(div :id (str "calendar_entry_options_" entry-id) :class "flex flex-col md:flex-row gap-1"
(raw! buttons-html)))
(defcomp ~events-entry-option-button (&key url target csrf btn-type action-btn confirm-title confirm-text
label is-btn)
(form :hx-post url :hx-select target :hx-target target :hx-swap "outerHTML"
:hx-trigger (if is-btn "confirmed" nil)
(input :type "hidden" :name "csrf_token" :value csrf)
(button :type btn-type :class action-btn
:data-confirm "true" :data-confirm-title confirm-title
:data-confirm-text confirm-text :data-confirm-icon "question"
:data-confirm-confirm-text (str "Yes, " label " it")
:data-confirm-cancel-text "Cancel"
:data-confirm-event (if is-btn "confirmed" nil)
(i :class "fa-solid fa-rotate mr-2" :aria-hidden "true") label)))

102
events/sexp/calendar.sexpr Normal file
View File

@@ -0,0 +1,102 @@
;; Events calendar components
(defcomp ~events-calendar-nav-arrow (&key pill-cls href label)
(a :class (str pill-cls " text-xl") :href href
:hx-get href :hx-target "#main-panel" :hx-select "#main-panel" :hx-swap "outerHTML" :hx-push-url "true" label))
(defcomp ~events-calendar-month-label (&key month-name year)
(div :class "px-3 font-medium" (str month-name " " year)))
(defcomp ~events-calendar-weekday (&key name)
(div :class "py-1" name))
(defcomp ~events-calendar-day-short (&key day-str)
(span :class "sm:hidden text-[16px] text-stone-500" day-str))
(defcomp ~events-calendar-day-num (&key pill-cls href num)
(a :class pill-cls :href href :hx-get href :hx-target "#main-panel" :hx-select "#main-panel"
:hx-swap "outerHTML" :hx-push-url "true" num))
(defcomp ~events-calendar-entry-badge (&key bg-cls name state-label)
(div :class (str "flex items-center justify-between gap-1 text-[11px] rounded px-1 py-0.5 " bg-cls)
(span :class "truncate" name)
(span :class "shrink-0 text-[10px] font-semibold uppercase tracking-tight" state-label)))
(defcomp ~events-calendar-cell (&key cell-cls day-short-html day-num-html badges-html)
(div :class cell-cls
(div :class "flex justify-between items-center"
(div :class "flex flex-col" (raw! day-short-html) (raw! day-num-html)))
(div :class "mt-1 space-y-0.5" (raw! badges-html))))
(defcomp ~events-calendar-grid (&key arrows-html weekdays-html cells-html)
(section :class "bg-orange-100"
(header :class "flex items-center justify-center mt-2"
(nav :class "flex items-center gap-2 text-2xl" (raw! arrows-html)))
(div :class "rounded-2xl border border-stone-200 bg-white/80 p-4"
(div :class "hidden sm:grid grid-cols-7 text-center text-md font-semibold text-stone-700 mb-2" (raw! weekdays-html))
(div :class "grid grid-cols-1 sm:grid-cols-7 gap-px bg-stone-200 rounded-xl overflow-hidden" (raw! cells-html)))))
(defcomp ~events-calendars-create-form (&key create-url csrf)
(<>
(div :id "cal-create-errors" :class "mt-2 text-sm text-red-600")
(form :class "mt-4 flex gap-2 items-end" :hx-post create-url
:hx-target "#calendars-list" :hx-select "#calendars-list" :hx-swap "outerHTML"
:hx-on::before-request "document.querySelector('#cal-create-errors').textContent='';"
:hx-on::response-error "document.querySelector('#cal-create-errors').innerHTML = event.detail.xhr.responseText;"
(input :type "hidden" :name "csrf_token" :value csrf)
(div :class "flex-1"
(label :class "block text-sm text-gray-600" "Name")
(input :name "name" :type "text" :required true :class "w-full border rounded px-3 py-2"
:placeholder "e.g. Events, Gigs, Meetings"))
(button :type "submit" :class "border rounded px-3 py-2" "Add calendar"))))
(defcomp ~events-calendars-panel (&key form-html list-html)
(section :class "p-4"
(raw! form-html)
(div :id "calendars-list" :class "mt-6" (raw! list-html))))
(defcomp ~events-calendars-empty ()
(p :class "text-gray-500 mt-4" "No calendars yet. Create one above."))
(defcomp ~events-calendars-item (&key href cal-name cal-slug del-url csrf-hdr)
(div :class "mt-6 border rounded-lg p-4"
(div :class "flex items-center justify-between gap-3"
(a :class "flex items-baseline gap-3" :href href
:hx-get href :hx-target "#main-panel" :hx-select "#main-panel" :hx-swap "outerHTML" :hx-push-url "true"
(h3 :class "font-semibold" cal-name)
(h4 :class "text-gray-500" (str "/" cal-slug "/")))
(button :class "text-sm border rounded px-3 py-1 hover:bg-red-50 hover:border-red-400"
:data-confirm true :data-confirm-title "Delete calendar?"
:data-confirm-text "Entries will be hidden (soft delete)"
:data-confirm-icon "warning" :data-confirm-confirm-text "Yes, delete it"
:data-confirm-cancel-text "Cancel" :data-confirm-event "confirmed"
:hx-delete del-url :hx-trigger "confirmed"
:hx-target "#calendars-list" :hx-select "#calendars-list" :hx-swap "outerHTML"
:hx-headers csrf-hdr
(i :class "fa-solid fa-trash")))))
(defcomp ~events-calendar-description-display (&key description edit-url)
(div :id "calendar-description"
(if description
(p :class "text-stone-700 whitespace-pre-line break-all" description)
(p :class "text-stone-400 italic" "No description yet."))
(button :type "button" :class "mt-2 text-xs underline"
:hx-get edit-url :hx-target "#calendar-description" :hx-swap "outerHTML"
(i :class "fas fa-edit"))))
(defcomp ~events-calendar-description-title-oob (&key description)
(div :id "calendar-description-title" :hx-swap-oob "outerHTML"
:class "text-base font-normal break-words whitespace-normal min-w-0 break-all w-full text-center block"
description))
(defcomp ~events-calendar-description-edit-form (&key save-url cancel-url csrf description)
(div :id "calendar-description"
(form :hx-post save-url :hx-target "#calendar-description" :hx-swap "outerHTML"
(input :type "hidden" :name "csrf_token" :value csrf)
(textarea :name "description" :autocomplete "off" :rows "4"
:class "w-full p-2 border rounded" description)
(div :class "mt-2 flex gap-2 text-xs"
(button :type "submit" :class "px-3 py-1 rounded bg-stone-800 text-white" "Save")
(button :type "button" :class "px-3 py-1 rounded border"
:hx-get cancel-url :hx-target "#calendar-description" :hx-swap "outerHTML"
"Cancel")))))

84
events/sexp/day.sexpr Normal file
View File

@@ -0,0 +1,84 @@
;; Events day components
(defcomp ~events-day-entry-link (&key href name time-str)
(a :href href :class "flex items-center gap-2 px-3 py-2 hover:bg-stone-100 rounded transition text-sm border sm:whitespace-nowrap sm:flex-shrink-0"
(div :class "flex-1 min-w-0"
(div :class "font-medium truncate" name)
(div :class "text-xs text-stone-600 truncate" time-str))))
(defcomp ~events-day-entries-nav (&key inner-html)
(div :class "flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"
:id "day-entries-nav-wrapper"
(div :class "flex overflow-x-auto gap-1 scrollbar-thin"
(raw! inner-html))))
(defcomp ~events-day-table (&key list-container rows-html pre-action add-url)
(section :id "day-entries" :class list-container
(table :class "w-full text-sm border table-fixed"
(thead :class "bg-stone-100"
(tr
(th :class "p-2 text-left w-2/6" "Name")
(th :class "text-left p-2 w-1/6" "Slot/Time")
(th :class "text-left p-2 w-1/6" "State")
(th :class "text-left p-2 w-1/6" "Cost")
(th :class "text-left p-2 w-1/6" "Tickets")
(th :class "text-left p-2 w-1/6" "Actions")))
(tbody (raw! rows-html)))
(div :id "entry-add-container" :class "mt-4"
(button :type "button" :class pre-action
:hx-get add-url :hx-target "#entry-add-container" :hx-swap "innerHTML"
"+ Add entry"))))
(defcomp ~events-day-empty-row ()
(tr (td :colspan "6" :class "p-3 text-stone-500" "No entries yet.")))
(defcomp ~events-day-row-name (&key href pill-cls name)
(td :class "p-2 align-top w-2/6" (div :class "font-medium"
(a :href href :class pill-cls :hx-get href :hx-target "#main-panel" :hx-select "#main-panel"
:hx-swap "outerHTML" :hx-push-url "true" name))))
(defcomp ~events-day-row-slot (&key href pill-cls slot-name time-str)
(td :class "p-2 align-top w-1/6" (div :class "text-xs font-medium"
(a :href href :class pill-cls :hx-get href :hx-target "#main-panel" :hx-select "#main-panel"
:hx-swap "outerHTML" :hx-push-url "true" slot-name)
(span :class "text-stone-600 font-normal" (raw! time-str)))))
(defcomp ~events-day-row-time (&key start end)
(td :class "p-2 align-top w-1/6" (div :class "text-xs text-stone-600" (str start end))))
(defcomp ~events-day-row-state (&key state-id badge-html)
(td :class "p-2 align-top w-1/6" (div :id state-id (raw! badge-html))))
(defcomp ~events-day-row-cost (&key cost-str)
(td :class "p-2 align-top w-1/6" (span :class "font-medium text-green-600" cost-str)))
(defcomp ~events-day-row-tickets (&key price-str count-str)
(td :class "p-2 align-top w-1/6" (div :class "text-xs space-y-1"
(div :class "font-medium text-green-600" price-str)
(div :class "text-stone-600" count-str))))
(defcomp ~events-day-row-no-tickets ()
(td :class "p-2 align-top w-1/6" (span :class "text-xs text-stone-400" "No tickets")))
(defcomp ~events-day-row-actions ()
(td :class "p-2 align-top w-1/6"))
(defcomp ~events-day-row (&key tr-cls name-html slot-html state-html cost-html tickets-html actions-html)
(tr :class tr-cls (raw! name-html) (raw! slot-html) (raw! state-html) (raw! cost-html) (raw! tickets-html) (raw! actions-html)))
(defcomp ~events-day-admin-panel ()
(div :class "p-4 text-sm text-stone-500" "Admin options"))
(defcomp ~events-day-entries-nav-oob-empty ()
(div :id "day-entries-nav-wrapper" :hx-swap-oob "true"))
(defcomp ~events-day-entries-nav-oob (&key items-html)
(div :class "flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"
:id "day-entries-nav-wrapper" :hx-swap-oob "true"
(div :class "flex overflow-x-auto gap-1 scrollbar-thin" (raw! items-html))))
(defcomp ~events-day-nav-entry (&key href nav-btn name time-str)
(a :href href :class nav-btn
(div :class "flex-1 min-w-0"
(div :class "font-medium truncate" name)
(div :class "text-xs text-stone-600 truncate" time-str))))

103
events/sexp/entries.sexpr Normal file
View File

@@ -0,0 +1,103 @@
;; Events entry card components (all events / page summary)
(defcomp ~events-state-badge (&key cls label)
(span :class (str "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium " cls) label))
(defcomp ~events-entry-title-linked (&key href name)
(a :href href :class "hover:text-emerald-700"
(h2 :class "text-lg font-semibold text-stone-900" name)))
(defcomp ~events-entry-title-plain (&key name)
(h2 :class "text-lg font-semibold text-stone-900" name))
(defcomp ~events-entry-title-tile-linked (&key href name)
(a :href href :class "hover:text-emerald-700"
(h2 :class "text-base font-semibold text-stone-900 line-clamp-2" name)))
(defcomp ~events-entry-title-tile-plain (&key name)
(h2 :class "text-base font-semibold text-stone-900 line-clamp-2" name))
(defcomp ~events-entry-page-badge (&key href title)
(a :href href :class "inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 hover:bg-amber-200" title))
(defcomp ~events-entry-cal-badge (&key name)
(span :class "inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-sky-100 text-sky-700" name))
(defcomp ~events-entry-time-linked (&key href date-str)
(<> (a :href href :class "hover:text-stone-700" date-str) (raw! " &middot; ")))
(defcomp ~events-entry-time-plain (&key date-str)
(<> (span date-str) (raw! " &middot; ")))
(defcomp ~events-entry-cost (&key cost-html)
(div :class "mt-1 text-sm font-medium text-green-600" (raw! cost-html)))
(defcomp ~events-entry-card (&key title-html badges-html time-parts cost-html widget-html)
(article :class "rounded-xl bg-white shadow-sm border border-stone-200 p-4"
(div :class "flex flex-col sm:flex-row sm:items-start justify-between gap-3"
(div :class "flex-1 min-w-0"
(raw! title-html)
(div :class "flex flex-wrap items-center gap-1.5 mt-1" (raw! badges-html))
(div :class "mt-1 text-sm text-stone-500" (raw! time-parts))
(raw! cost-html))
(raw! widget-html))))
(defcomp ~events-entry-card-tile (&key title-html badges-html time-html cost-html widget-html)
(article :class "rounded-xl bg-white shadow-sm border border-stone-200 overflow-hidden"
(div :class "p-3"
(raw! title-html)
(div :class "flex flex-wrap items-center gap-1 mt-1" (raw! badges-html))
(div :class "mt-1 text-xs text-stone-500" (raw! time-html))
(raw! cost-html))
(raw! widget-html)))
(defcomp ~events-entry-tile-widget-wrapper (&key widget-html)
(div :class "border-t border-stone-100 px-3 py-2" (raw! widget-html)))
(defcomp ~events-entry-widget-wrapper (&key widget-html)
(div :class "shrink-0" (raw! widget-html)))
(defcomp ~events-date-separator (&key date-str)
(div :class "pt-2 pb-1"
(h3 :class "text-sm font-semibold text-stone-500 uppercase tracking-wide" date-str)))
(defcomp ~events-sentinel (&key page next-url)
(div :id (str "sentinel-" page) :class "h-4 opacity-0 pointer-events-none"
:hx-get next-url :hx-trigger "intersect once delay:250ms" :hx-swap "outerHTML"
:role "status" :aria-hidden "true"
(div :class "text-center text-xs text-stone-400" "loading...")))
(defcomp ~events-list-svg ()
(svg :xmlns "http://www.w3.org/2000/svg" :class "h-5 w-5" :fill "none"
:viewBox "0 0 24 24" :stroke "currentColor" :stroke-width "2"
(path :stroke-linecap "round" :stroke-linejoin "round" :d "M4 6h16M4 12h16M4 18h16")))
(defcomp ~events-tile-svg ()
(svg :xmlns "http://www.w3.org/2000/svg" :class "h-5 w-5" :fill "none"
:viewBox "0 0 24 24" :stroke "currentColor" :stroke-width "2"
(path :stroke-linecap "round" :stroke-linejoin "round"
:d "M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z")))
(defcomp ~events-view-toggle (&key list-href tile-href hx-select list-active tile-active list-svg tile-svg)
(div :class "hidden md:flex justify-end px-3 pt-3 gap-1"
(a :href list-href :hx-get list-href :hx-target "#main-panel" :hx-select hx-select
:hx-swap "outerHTML" :hx-push-url "true"
:class (str "p-1.5 rounded " list-active) :title "List view"
:_ "on click js localStorage.removeItem('events_view') end"
(raw! list-svg))
(a :href tile-href :hx-get tile-href :hx-target "#main-panel" :hx-select hx-select
:hx-swap "outerHTML" :hx-push-url "true"
:class (str "p-1.5 rounded " tile-active) :title "Tile view"
:_ "on click js localStorage.setItem('events_view','tile') end"
(raw! tile-svg))))
(defcomp ~events-grid (&key grid-cls cards-html)
(div :class grid-cls (raw! cards-html)))
(defcomp ~events-empty ()
(div :class "px-3 py-12 text-center text-stone-400"
(i :class "fa fa-calendar-xmark text-4xl mb-3" :aria-hidden "true")
(p :class "text-lg" "No upcoming events")))
(defcomp ~events-main-panel-body (&key toggle-html body-html)
(<> (raw! toggle-html) (raw! body-html) (div :class "pb-8")))

46
events/sexp/header.sexpr Normal file
View File

@@ -0,0 +1,46 @@
;; Events header components
(defcomp ~events-oob-header (&key parent-id child-id row-html)
(div :id parent-id :hx-swap-oob "outerHTML" :class "w-full"
(div :class "w-full"
(raw! row-html)
(div :id child-id))))
(defcomp ~events-post-label (&key feature-image title)
(<> (when feature-image (img :src feature-image :class "h-8 w-8 rounded-full object-cover border border-stone-300 flex-shrink-0"))
(span title)))
(defcomp ~events-post-cart-link (&key href count)
(a :href href :class "relative inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full border border-emerald-300 bg-emerald-50 text-emerald-800 hover:bg-emerald-100 transition"
(i :class "fa fa-shopping-cart" :aria-hidden "true")
(span count)))
(defcomp ~events-calendars-label ()
(<> (i :class "fa fa-calendar" :aria-hidden "true") (div "Calendars")))
(defcomp ~events-markets-label ()
(<> (i :class "fa fa-shopping-bag" :aria-hidden "true") (div "Markets")))
(defcomp ~events-payments-label ()
(<> (i :class "fa fa-credit-card" :aria-hidden "true") (div "Payments")))
(defcomp ~events-calendar-label (&key name description)
(div :class "flex flex-col md:flex-row md:gap-2 items-center min-w-0"
(div :class "flex flex-row items-center gap-2"
(i :class "fa fa-calendar")
(div :class "shrink-0" name))
(div :id "calendar-description-title"
:class "text-base font-normal break-words whitespace-normal min-w-0 break-all w-full text-center block"
description)))
(defcomp ~events-day-label (&key date-str)
(div :class "flex gap-1 items-center"
(i :class "fa fa-calendar-day")
(span date-str)))
(defcomp ~events-entry-label (&key entry-id title-html times-html)
(div :id (str "entry-title-" entry-id) :class "flex gap-1 items-center"
(raw! title-html) (raw! times-html)))
(defcomp ~events-header-child (&key inner-html)
(div :id "root-header-child" :class "w-full" (raw! inner-html)))

386
events/sexp/page.sexpr Normal file
View File

@@ -0,0 +1,386 @@
;; Events page-level components (slots, ticket types, buy form, cart, posts nav)
(defcomp ~events-slot-days-pills (&key days-inner-html)
(div :class "flex flex-wrap gap-1" (raw! days-inner-html)))
(defcomp ~events-slot-day-pill (&key day)
(span :class "px-2 py-0.5 rounded-full text-xs bg-slate-200" day))
(defcomp ~events-slot-no-days ()
(span :class "text-xs text-slate-400" "No days"))
(defcomp ~events-slot-panel (&key slot-id list-container days-html flexible time-str cost-str pre-action edit-url)
(section :id (str "slot-" slot-id) :class list-container
(div :class "flex flex-col"
(div :class "text-xs font-semibold uppercase tracking-wide text-stone-500" "Days")
(div :class "mt-1" (raw! days-html)))
(div :class "flex flex-col"
(div :class "text-xs font-semibold uppercase tracking-wide text-stone-500" "Flexible")
(div :class "mt-1" flexible))
(div :class "grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm"
(div :class "flex flex-col"
(div :class "text-xs font-semibold uppercase tracking-wide text-stone-500" "Time")
(div :class "mt-1" time-str))
(div :class "flex flex-col"
(div :class "text-xs font-semibold uppercase tracking-wide text-stone-500" "Cost")
(div :class "mt-1" cost-str)))
(button :type "button" :class pre-action :hx-get edit-url
:hx-target (str "#slot-" slot-id) :hx-swap "outerHTML" "Edit")))
(defcomp ~events-slot-description-oob (&key description)
(div :id "slot-description-title" :hx-swap-oob "outerHTML"
:class "text-base font-normal break-words whitespace-normal min-w-0 break-all w-full text-center block"
description))
(defcomp ~events-slots-empty-row ()
(tr (td :colspan "5" :class "p-3 text-stone-500" "No slots yet.")))
(defcomp ~events-slots-row (&key tr-cls slot-href pill-cls hx-select slot-name description
flexible days-html time-str cost-str action-btn del-url csrf-hdr)
(tr :class tr-cls
(td :class "p-2 align-top w-1/6"
(div :class "font-medium"
(a :href slot-href :class pill-cls :hx-get slot-href :hx-target "#main-panel"
:hx-select hx-select :hx-swap "outerHTML" :hx-push-url "true" slot-name))
(p :class "text-stone-500 whitespace-pre-line break-all w-full" description))
(td :class "p-2 align-top w-1/6" flexible)
(td :class "p-2 align-top w-1/6" (raw! days-html))
(td :class "p-2 align-top w-1/6" time-str)
(td :class "p-2 align-top w-1/6" cost-str)
(td :class "p-2 align-top w-1/6"
(button :class action-btn :type "button"
:data-confirm "true" :data-confirm-title "Delete slot?"
:data-confirm-text "This action cannot be undone."
:data-confirm-icon "warning" :data-confirm-confirm-text "Yes, delete it"
:data-confirm-cancel-text "Cancel" :data-confirm-event "confirmed"
:hx-delete del-url :hx-target "#slots-table" :hx-select "#slots-table"
:hx-swap "outerHTML" :hx-headers csrf-hdr :hx-trigger "confirmed"
(i :class "fa-solid fa-trash")))))
(defcomp ~events-slots-table (&key list-container rows-html pre-action add-url)
(section :id "slots-table" :class list-container
(table :class "w-full text-sm border table-fixed"
(thead :class "bg-stone-100"
(tr (th :class "p-2 text-left w-1/6" "Name")
(th :class "p-2 text-left w-1/6" "Flexible")
(th :class "text-left p-2 w-1/6" "Days")
(th :class "text-left p-2 w-1/6" "Time")
(th :class "text-left p-2 w-1/6" "Cost")
(th :class "text-left p-2 w-1/6" "Actions")))
(tbody (raw! rows-html)))
(div :id "slot-add-container" :class "mt-4"
(button :type "button" :class pre-action
:hx-get add-url :hx-target "#slot-add-container" :hx-swap "innerHTML"
"+ Add slot"))))
(defcomp ~events-ticket-type-col (&key label value)
(div :class "flex flex-col"
(div :class "text-xs font-semibold uppercase tracking-wide text-stone-500" label)
(div :class "mt-1" value)))
(defcomp ~events-ticket-type-panel (&key ticket-id list-container c1 c2 c3 pre-action edit-url)
(section :id (str "ticket-" ticket-id) :class list-container
(div :class "grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"
(raw! c1) (raw! c2) (raw! c3))
(button :type "button" :class pre-action :hx-get edit-url
:hx-target (str "#ticket-" ticket-id) :hx-swap "outerHTML" "Edit")))
(defcomp ~events-ticket-types-empty-row ()
(tr (td :colspan "4" :class "p-3 text-stone-500" "No ticket types yet.")))
(defcomp ~events-ticket-types-row (&key tr-cls tt-href pill-cls hx-select tt-name cost-str count
action-btn del-url csrf-hdr)
(tr :class tr-cls
(td :class "p-2 align-top w-1/3"
(div :class "font-medium"
(a :href tt-href :class pill-cls :hx-get tt-href :hx-target "#main-panel"
:hx-select hx-select :hx-swap "outerHTML" :hx-push-url "true" tt-name)))
(td :class "p-2 align-top w-1/4" cost-str)
(td :class "p-2 align-top w-1/4" count)
(td :class "p-2 align-top w-1/6"
(button :class action-btn :type "button"
:data-confirm "true" :data-confirm-title "Delete ticket type?"
:data-confirm-text "This action cannot be undone."
:data-confirm-icon "warning" :data-confirm-confirm-text "Yes, delete it"
:data-confirm-cancel-text "Cancel" :data-confirm-event "confirmed"
:hx-delete del-url :hx-target "#tickets-table" :hx-select "#tickets-table"
:hx-swap "outerHTML" :hx-headers csrf-hdr :hx-trigger "confirmed"
(i :class "fa-solid fa-trash")))))
(defcomp ~events-ticket-types-table (&key list-container rows-html action-btn add-url)
(section :id "tickets-table" :class list-container
(table :class "w-full text-sm border table-fixed"
(thead :class "bg-stone-100"
(tr (th :class "p-2 text-left w-1/3" "Name")
(th :class "text-left p-2 w-1/4" "Cost")
(th :class "text-left p-2 w-1/4" "Count")
(th :class "text-left p-2 w-1/6" "Actions")))
(tbody (raw! rows-html)))
(div :id "ticket-add-container" :class "mt-4"
(button :class action-btn :hx-get add-url :hx-target "#ticket-add-container" :hx-swap "innerHTML"
(i :class "fa fa-plus") " Add ticket type"))))
(defcomp ~events-ticket-config-display (&key price-str count-str show-js)
(div :class "space-y-2"
(div :class "flex items-center gap-2"
(span :class "text-sm font-medium text-stone-700" "Price:")
(span :class "font-medium text-green-600" (raw! price-str)))
(div :class "flex items-center gap-2"
(span :class "text-sm font-medium text-stone-700" "Available:")
(span :class "font-medium text-blue-600" count-str))
(button :type "button" :class "text-xs text-blue-600 hover:text-blue-800 underline"
:onclick show-js "Edit ticket config")))
(defcomp ~events-ticket-config-none (&key show-js)
(div :class "space-y-2"
(span :class "text-sm text-stone-400" "No tickets configured")
(button :type "button" :class "block text-xs text-blue-600 hover:text-blue-800 underline"
:onclick show-js "Configure tickets")))
(defcomp ~events-ticket-config-form (&key entry-id hidden-cls update-url csrf price-val count-val hide-js)
(form :id (str "ticket-form-" entry-id) :class (str hidden-cls " space-y-3 mt-2 p-3 border rounded bg-stone-50")
:hx-post update-url :hx-target (str "#entry-tickets-" entry-id) :hx-swap "innerHTML"
(input :type "hidden" :name "csrf_token" :value csrf)
(div (label :for (str "ticket-price-" entry-id) :class "block text-sm font-medium text-stone-700 mb-1"
(raw! "Ticket Price (&pound;)"))
(input :type "number" :id (str "ticket-price-" entry-id) :name "ticket_price"
:step "0.01" :min "0" :value price-val
:class "w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
:placeholder "e.g., 5.00"))
(div (label :for (str "ticket-count-" entry-id) :class "block text-sm font-medium text-stone-700 mb-1"
"Total Tickets")
(input :type "number" :id (str "ticket-count-" entry-id) :name "ticket_count"
:min "0" :value count-val
:class "w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
:placeholder "Leave empty for unlimited"))
(div :class "flex gap-2"
(button :type "submit" :class "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm" "Save")
(button :type "button" :class "px-4 py-2 bg-stone-200 text-stone-700 rounded hover:bg-stone-300 text-sm"
:onclick hide-js "Cancel"))))
(defcomp ~events-buy-not-confirmed (&key entry-id)
(div :id (str "ticket-buy-" entry-id) :class "rounded-xl border border-stone-200 bg-stone-50 p-4 text-sm text-stone-500"
(i :class "fa fa-ticket mr-1" :aria-hidden "true")
"Tickets available once this event is confirmed."))
(defcomp ~events-buy-info-sold (&key count)
(span (str count " sold")))
(defcomp ~events-buy-info-remaining (&key count)
(span (str count " remaining")))
(defcomp ~events-buy-info-basket (&key count)
(span :class "text-emerald-600 font-medium"
(i :class "fa fa-shopping-cart text-[0.6rem]" :aria-hidden "true")
(str " " count " in basket")))
(defcomp ~events-buy-info-bar (&key items-html)
(div :class "flex items-center gap-3 mb-3 text-xs text-stone-500" (raw! items-html)))
(defcomp ~events-buy-type-item (&key type-name cost-str adjust-controls-html)
(div :class "flex items-center justify-between p-3 rounded-lg bg-stone-50 border border-stone-100"
(div (div :class "font-medium text-sm" type-name)
(div :class "text-xs text-stone-500" cost-str))
(raw! adjust-controls-html)))
(defcomp ~events-buy-types-wrapper (&key items-html)
(div :class "space-y-2" (raw! items-html)))
(defcomp ~events-buy-default (&key price-str adjust-controls-html)
(<> (div :class "flex items-center justify-between mb-4"
(div (span :class "font-medium text-green-600" price-str)
(span :class "text-sm text-stone-500 ml-2" "per ticket")))
(raw! adjust-controls-html)))
(defcomp ~events-buy-panel (&key entry-id info-html body-html)
(div :id (str "ticket-buy-" entry-id) :class "rounded-xl border border-stone-200 bg-white p-4"
(h3 :class "text-sm font-semibold text-stone-700 mb-3"
(i :class "fa fa-ticket mr-1" :aria-hidden "true") "Tickets")
(raw! info-html) (raw! body-html)))
(defcomp ~events-adjust-form (&key adjust-url target extra-cls csrf entry-id tt-html count-val btn-html)
(form :hx-post adjust-url :hx-target target :hx-swap "outerHTML" :class extra-cls
(input :type "hidden" :name "csrf_token" :value csrf)
(input :type "hidden" :name "entry_id" :value entry-id)
(raw! tt-html)
(input :type "hidden" :name "count" :value count-val)
(raw! btn-html)))
(defcomp ~events-adjust-tt-hidden (&key ticket-type-id)
(input :type "hidden" :name "ticket_type_id" :value ticket-type-id))
(defcomp ~events-adjust-cart-plus ()
(button :type "submit"
:class "relative inline-flex items-center justify-center text-sm font-medium text-stone-500 hover:bg-emerald-50 rounded p-1"
(i :class "fa fa-cart-plus text-2xl" :aria-hidden "true")))
(defcomp ~events-adjust-minus ()
(button :type "submit"
:class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl"
"-"))
(defcomp ~events-adjust-plus ()
(button :type "submit"
:class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl"
"+"))
(defcomp ~events-adjust-cart-icon (&key href count)
(a :class "relative inline-flex items-center justify-center text-emerald-700" :href href
(span :class "relative inline-flex items-center justify-center"
(i :class "fa-solid fa-shopping-cart text-2xl" :aria-hidden "true")
(span :class "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
(span :class "flex items-center justify-center bg-black text-white rounded-full w-4 h-4 text-xs font-bold" count)))))
(defcomp ~events-adjust-controls (&key minus-html cart-icon-html plus-html)
(div :class "flex items-center gap-2" (raw! minus-html) (raw! cart-icon-html) (raw! plus-html)))
(defcomp ~events-buy-result (&key entry-id count-label tickets-html remaining-html my-tickets-href)
(div :id (str "ticket-buy-" entry-id) :class "rounded-xl border border-emerald-200 bg-emerald-50 p-4"
(div :class "flex items-center gap-2 mb-3"
(i :class "fa fa-check-circle text-emerald-600" :aria-hidden "true")
(span :class "font-semibold text-emerald-800" count-label))
(div :class "space-y-2 mb-4" (raw! tickets-html))
(raw! remaining-html)
(div :class "mt-3 flex gap-2"
(a :href my-tickets-href :class "text-sm text-emerald-700 hover:text-emerald-900 underline"
"View all my tickets"))))
(defcomp ~events-buy-result-ticket (&key href code-short)
(a :href href :class "flex items-center justify-between p-2 rounded-lg bg-white border border-emerald-100 hover:border-emerald-300 transition text-sm"
(div :class "flex items-center gap-2"
(i :class "fa fa-ticket text-emerald-500" :aria-hidden "true")
(span :class "font-mono text-xs text-stone-500" code-short))
(span :class "text-xs text-emerald-600 font-medium" "View ticket")))
(defcomp ~events-buy-result-remaining (&key text)
(p :class "text-xs text-stone-500" text))
(defcomp ~events-cart-icon-logo (&key blog-href logo)
(div :id "cart-mini" :hx-swap-oob "true"
(div :class "h-12 w-12 rounded-full overflow-hidden border border-stone-300 flex-shrink-0"
(a :href blog-href :class "h-full w-full font-bold text-5xl flex-shrink-0 flex flex-row items-center gap-1"
(img :src logo :class "h-full w-full rounded-full object-cover border border-stone-300 flex-shrink-0")))))
(defcomp ~events-cart-icon-badge (&key cart-href count)
(div :id "cart-mini" :hx-swap-oob "true"
(a :href cart-href :class "relative inline-flex items-center justify-center text-stone-700 hover:text-emerald-700"
(i :class "fa fa-shopping-cart text-5xl" :aria-hidden "true")
(span :class "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded-full bg-emerald-600 text-white text-sm w-5 h-5"
count))))
;; Inline ticket widget (for all-events/page-summary cards)
(defcomp ~events-tw-form (&key ticket-url target csrf entry-id count-val btn-html)
(form :action ticket-url :method "post" :hx-post ticket-url :hx-target target :hx-swap "outerHTML"
(input :type "hidden" :name "csrf_token" :value csrf)
(input :type "hidden" :name "entry_id" :value entry-id)
(input :type "hidden" :name "count" :value count-val)
(raw! btn-html)))
(defcomp ~events-tw-cart-plus ()
(button :type "submit" :class "relative inline-flex items-center justify-center text-stone-500 hover:bg-emerald-50 rounded p-1"
(i :class "fa fa-cart-plus text-2xl" :aria-hidden "true")))
(defcomp ~events-tw-minus ()
(button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "-"))
(defcomp ~events-tw-plus ()
(button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "+"))
(defcomp ~events-tw-cart-icon (&key qty)
(span :class "relative inline-flex items-center justify-center text-emerald-700"
(span :class "relative inline-flex items-center justify-center"
(i :class "fa-solid fa-shopping-cart text-xl" :aria-hidden "true")
(span :class "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
(span :class "flex items-center justify-center bg-black text-white rounded-full w-4 h-4 text-xs font-bold" qty)))))
(defcomp ~events-tw-widget (&key entry-id price-html inner-html)
(div :id (str "page-ticket-" entry-id) :class "flex items-center gap-2"
(span :class "text-green-600 font-medium text-sm" (raw! price-html))
(raw! inner-html)))
;; Entry posts panel
(defcomp ~events-entry-posts-panel (&key posts-html search-url entry-id)
(div :class "space-y-2"
(raw! posts-html)
(div :class "mt-3 pt-3 border-t"
(label :class "block text-xs font-medium text-stone-700 mb-1" "Add Post")
(input :type "text" :placeholder "Search posts..."
:class "w-full px-3 py-2 border rounded text-sm"
:hx-get search-url :hx-trigger "keyup changed delay:300ms, load"
:hx-target (str "#post-search-results-" entry-id) :hx-swap "innerHTML" :name "q")
(div :id (str "post-search-results-" entry-id) :class "mt-2 max-h-96 overflow-y-auto border rounded"))))
(defcomp ~events-entry-posts-list (&key items-html)
(div :class "space-y-2" (raw! items-html)))
(defcomp ~events-entry-posts-none ()
(p :class "text-sm text-stone-400" "No posts associated"))
(defcomp ~events-entry-post-item (&key img-html title del-url entry-id csrf-hdr)
(div :class "flex items-center justify-between gap-3 p-2 bg-stone-50 rounded border"
(raw! img-html) (span :class "text-sm flex-1" title)
(button :type "button" :class "text-xs text-red-600 hover:text-red-800 flex-shrink-0"
:data-confirm "true" :data-confirm-title "Remove post?"
:data-confirm-text (str "This will remove " title " from this entry")
:data-confirm-icon "warning" :data-confirm-confirm-text "Yes, remove it"
:data-confirm-cancel-text "Cancel" :data-confirm-event "confirmed"
:hx-delete del-url :hx-trigger "confirmed"
:hx-target (str "#entry-posts-" entry-id) :hx-swap "innerHTML"
:hx-headers csrf-hdr
(i :class "fa fa-times") " Remove")))
(defcomp ~events-post-img (&key src alt)
(img :src src :alt alt :class "w-8 h-8 rounded-full object-cover flex-shrink-0"))
(defcomp ~events-post-img-placeholder ()
(div :class "w-8 h-8 rounded-full bg-stone-200 flex-shrink-0"))
;; Entry posts nav OOB
(defcomp ~events-entry-posts-nav-oob-empty ()
(div :id "entry-posts-nav-wrapper" :hx-swap-oob "true"))
(defcomp ~events-entry-posts-nav-oob (&key items-html)
(div :class "flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"
:id "entry-posts-nav-wrapper" :hx-swap-oob "true"
(div :class "flex overflow-x-auto gap-1 scrollbar-thin" (raw! items-html))))
(defcomp ~events-entry-nav-post (&key href nav-btn img-html title)
(a :href href :class nav-btn (raw! img-html) (div :class "flex-1 min-w-0" (div :class "font-medium truncate" title))))
;; Post nav entries OOB
(defcomp ~events-post-nav-oob-empty ()
(div :id "entries-calendars-nav-wrapper" :hx-swap-oob "true"))
(defcomp ~events-post-nav-entry (&key href nav-btn name time-str)
(a :href href :class nav-btn
(div :class "w-8 h-8 rounded bg-stone-200 flex-shrink-0")
(div :class "flex-1 min-w-0"
(div :class "font-medium truncate" name)
(div :class "text-xs text-stone-600 truncate" time-str))))
(defcomp ~events-post-nav-calendar (&key href nav-btn name)
(a :href href :class nav-btn
(i :class "fa fa-calendar" :aria-hidden "true")
(div name)))
(defcomp ~events-post-nav-wrapper (&key items-html hyperscript)
(div :class "flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"
:id "entries-calendars-nav-wrapper" :hx-swap-oob "true"
(button :class "entries-nav-arrow hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"
:aria-label "Scroll left"
:_ "on click set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft - 200"
(i :class "fa fa-chevron-left"))
(div :id "associated-items-container"
:class "overflow-y-auto sm:overflow-x-auto sm:overflow-y-visible scrollbar-hide max-h-[50vh] sm:max-h-none"
:style "scroll-behavior: smooth;" :_ hyperscript
(div :class "flex flex-col sm:flex-row gap-1" (raw! items-html)))
(style ".scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }")
(button :class "entries-nav-arrow hidden flex-shrink-0 p-2 hover:bg-stone-200 rounded"
:aria-label "Scroll right"
:_ "on click set #associated-items-container.scrollLeft to #associated-items-container.scrollLeft + 200"
(i :class "fa fa-chevron-right"))))
;; Entry nav post link (with image)
(defcomp ~events-entry-nav-post-link (&key href img-html title)
(a :href href :class "flex items-center gap-2 px-3 py-2 hover:bg-stone-100 rounded transition text-sm border sm:whitespace-nowrap sm:flex-shrink-0"
(raw! img-html) (div :class "flex-1 min-w-0" (div :class "font-medium truncate" title))))

View File

@@ -0,0 +1,59 @@
;; Events payments components
(defcomp ~events-payments-panel (&key update-url csrf merchant-code placeholder input-cls sumup-configured checkout-prefix)
(section :class "p-4 max-w-lg mx-auto"
(div :id "payments-panel" :class "space-y-4 p-4 bg-white rounded-lg border border-stone-200"
(h3 :class "text-lg font-semibold text-stone-800"
(i :class "fa fa-credit-card text-purple-600 mr-1") " SumUp Payment")
(p :class "text-xs text-stone-400" "Configure per-page SumUp credentials. Leave blank to use the global merchant account.")
(form :hx-put update-url :hx-target "#payments-panel" :hx-swap "outerHTML" :hx-select "#payments-panel" :class "space-y-3"
(input :type "hidden" :name "csrf_token" :value csrf)
(div (label :class "block text-xs font-medium text-stone-600 mb-1" "Merchant Code")
(input :type "text" :name "merchant_code" :value merchant-code :placeholder "e.g. ME4J6100" :class input-cls))
(div (label :class "block text-xs font-medium text-stone-600 mb-1" "API Key")
(input :type "password" :name "api_key" :value "" :placeholder placeholder :class input-cls)
(when sumup-configured (p :class "text-xs text-stone-400 mt-0.5" "Key is set. Leave blank to keep current key.")))
(div (label :class "block text-xs font-medium text-stone-600 mb-1" "Checkout Reference Prefix")
(input :type "text" :name "checkout_prefix" :value checkout-prefix :placeholder "e.g. ROSE-" :class input-cls))
(button :type "submit" :class "px-4 py-1.5 text-sm font-medium text-white bg-purple-600 rounded hover:bg-purple-700 focus:ring-2 focus:ring-purple-500"
"Save SumUp Settings")
(when sumup-configured (span :class "ml-2 text-xs text-green-600"
(i :class "fa fa-check-circle") " Connected"))))))
(defcomp ~events-markets-create-form (&key create-url csrf)
(<>
(div :id "market-create-errors" :class "mt-2 text-sm text-red-600")
(form :class "mt-4 flex gap-2 items-end" :hx-post create-url
:hx-target "#markets-list" :hx-select "#markets-list" :hx-swap "outerHTML"
:hx-on::before-request "document.querySelector('#market-create-errors').textContent='';"
:hx-on::response-error "document.querySelector('#market-create-errors').innerHTML = event.detail.xhr.responseText;"
(input :type "hidden" :name "csrf_token" :value csrf)
(div :class "flex-1"
(label :class "block text-sm text-gray-600" "Name")
(input :name "name" :type "text" :required true :class "w-full border rounded px-3 py-2"
:placeholder "e.g. Farm Shop, Bakery"))
(button :type "submit" :class "border rounded px-3 py-2" "Add market"))))
(defcomp ~events-markets-panel (&key form-html list-html)
(section :class "p-4"
(raw! form-html)
(div :id "markets-list" :class "mt-6" (raw! list-html))))
(defcomp ~events-markets-empty ()
(p :class "text-gray-500 mt-4" "No markets yet. Create one above."))
(defcomp ~events-markets-item (&key href market-name market-slug del-url csrf-hdr)
(div :class "mt-6 border rounded-lg p-4"
(div :class "flex items-center justify-between gap-3"
(a :class "flex items-baseline gap-3" :href href
(h3 :class "font-semibold" market-name)
(h4 :class "text-gray-500" (str "/" market-slug "/")))
(button :class "text-sm border rounded px-3 py-1 hover:bg-red-50 hover:border-red-400"
:data-confirm true :data-confirm-title "Delete market?"
:data-confirm-text "Products will be hidden (soft delete)"
:data-confirm-icon "warning" :data-confirm-confirm-text "Yes, delete it"
:data-confirm-cancel-text "Cancel" :data-confirm-event "confirmed"
:hx-delete del-url :hx-trigger "confirmed"
:hx-target "#markets-list" :hx-select "#markets-list" :hx-swap "outerHTML"
:hx-headers csrf-hdr
(i :class "fa-solid fa-trash")))))

File diff suppressed because it is too large Load Diff

206
events/sexp/tickets.sexpr Normal file
View File

@@ -0,0 +1,206 @@
;; Events ticket components
(defcomp ~events-ticket-card (&key href entry-name type-name time-str cal-name badge-html code-prefix)
(a :href href :class "block rounded-xl border border-stone-200 bg-white p-4 hover:shadow-md transition"
(div :class "flex items-start justify-between gap-4"
(div :class "flex-1 min-w-0"
(div :class "font-semibold text-lg truncate" entry-name)
(when type-name (div :class "text-sm text-stone-600 mt-0.5" type-name))
(when time-str (div :class "text-sm text-stone-500 mt-1" time-str))
(when cal-name (div :class "text-xs text-stone-400 mt-0.5" cal-name)))
(div :class "flex flex-col items-end gap-1 flex-shrink-0"
(raw! badge-html)
(span :class "text-xs text-stone-400 font-mono" (str code-prefix "..."))))))
(defcomp ~events-tickets-panel (&key list-container has-tickets cards-html)
(section :id "tickets-list" :class list-container
(h1 :class "text-2xl font-bold mb-6" "My Tickets")
(if has-tickets
(div :class "space-y-4" (raw! cards-html))
(div :class "text-center py-12 text-stone-500"
(i :class "fa fa-ticket text-4xl mb-4 block" :aria-hidden "true")
(p :class "text-lg" "No tickets yet")
(p :class "text-sm mt-1" "Tickets will appear here after you purchase them.")))))
(defcomp ~events-ticket-detail (&key list-container back-href header-bg entry-name badge-html
type-name code time-date time-range cal-name
type-desc checkin-str qr-script)
(section :id "ticket-detail" :class (str list-container " max-w-lg mx-auto")
(a :href back-href :class "inline-flex items-center gap-1 text-sm text-stone-500 hover:text-stone-700 mb-4"
(i :class "fa fa-arrow-left" :aria-hidden "true") " Back to my tickets")
(div :class "rounded-2xl border border-stone-200 bg-white overflow-hidden"
(div :class (str "px-6 py-4 border-b border-stone-100 " header-bg)
(div :class "flex items-center justify-between"
(h1 :class "text-xl font-bold" entry-name)
(raw! badge-html))
(when type-name (div :class "text-sm text-stone-600 mt-1" type-name)))
(div :class "px-6 py-8 flex flex-col items-center border-b border-stone-100"
(div :id (str "ticket-qr-" code) :class "bg-white p-4 rounded-lg border border-stone-200")
(p :class "text-xs text-stone-400 mt-3 font-mono select-all" code))
(div :class "px-6 py-4 space-y-3"
(when time-date (div :class "flex items-start gap-3"
(i :class "fa fa-calendar text-stone-400 mt-0.5" :aria-hidden "true")
(div (div :class "text-sm font-medium" time-date)
(div :class "text-sm text-stone-500" time-range))))
(when cal-name (div :class "flex items-start gap-3"
(i :class "fa fa-map-pin text-stone-400 mt-0.5" :aria-hidden "true")
(div :class "text-sm" cal-name)))
(when type-desc (div :class "flex items-start gap-3"
(i :class "fa fa-tag text-stone-400 mt-0.5" :aria-hidden "true")
(div :class "text-sm" type-desc)))
(when checkin-str (div :class "flex items-start gap-3"
(i :class "fa fa-check-circle text-blue-500 mt-0.5" :aria-hidden "true")
(div :class "text-sm text-blue-700" checkin-str)))))
(script :src "https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js")
(script qr-script)))
(defcomp ~events-ticket-admin-stat (&key border bg text-cls label-cls value label)
(div :class (str "rounded-xl border " border " " bg " p-4 text-center")
(div :class (str "text-2xl font-bold " text-cls) value)
(div :class (str "text-xs " label-cls " uppercase tracking-wide") label)))
(defcomp ~events-ticket-admin-date (&key date-str)
(div :class "text-xs text-stone-500" date-str))
(defcomp ~events-ticket-admin-checkin-form (&key checkin-url code csrf)
(form :hx-post checkin-url :hx-target (str "#ticket-row-" code) :hx-swap "outerHTML"
(input :type "hidden" :name "csrf_token" :value csrf)
(button :type "submit" :class "px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition"
(i :class "fa fa-check mr-1" :aria-hidden "true") "Check in")))
(defcomp ~events-ticket-admin-checked-in (&key time-str)
(span :class "text-xs text-blue-600"
(i :class "fa fa-check-circle" :aria-hidden "true") (str " " time-str)))
(defcomp ~events-ticket-admin-row (&key code code-short entry-name date-html type-name badge-html action-html)
(tr :class "hover:bg-stone-50 transition" :id (str "ticket-row-" code)
(td :class "px-4 py-3" (span :class "font-mono text-xs" code-short))
(td :class "px-4 py-3" (div :class "font-medium" entry-name) (raw! date-html))
(td :class "px-4 py-3 text-sm" type-name)
(td :class "px-4 py-3" (raw! badge-html))
(td :class "px-4 py-3" (raw! action-html))))
(defcomp ~events-ticket-admin-panel (&key list-container stats-html lookup-url has-tickets rows-html)
(section :id "ticket-admin" :class list-container
(h1 :class "text-2xl font-bold mb-6" "Ticket Admin")
(div :class "grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8" (raw! stats-html))
(div :class "rounded-xl border border-stone-200 bg-white p-6 mb-8"
(h2 :class "text-lg font-semibold mb-4"
(i :class "fa fa-qrcode mr-2" :aria-hidden "true") "Scan / Look Up Ticket")
(div :class "flex gap-3 mb-4"
(input :type "text" :id "ticket-code-input" :name "code"
:placeholder "Enter or scan ticket code..."
:class "flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
:hx-get lookup-url :hx-trigger "keyup changed delay:300ms"
:hx-target "#lookup-result" :hx-include "this" :autofocus "true")
(button :type "button"
:class "px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
:onclick "document.getElementById('ticket-code-input').dispatchEvent(new Event('keyup'))"
(i :class "fa fa-search" :aria-hidden "true")))
(div :id "lookup-result"
(div :class "text-sm text-stone-400 text-center py-4" "Enter a ticket code to look it up")))
(div :class "rounded-xl border border-stone-200 bg-white overflow-hidden"
(h2 :class "text-lg font-semibold px-6 py-4 border-b border-stone-100" "Recent Tickets")
(if has-tickets
(div :class "overflow-x-auto"
(table :class "w-full text-sm"
(thead :class "bg-stone-50"
(tr (th :class "px-4 py-3 text-left font-medium text-stone-600" "Code")
(th :class "px-4 py-3 text-left font-medium text-stone-600" "Event")
(th :class "px-4 py-3 text-left font-medium text-stone-600" "Type")
(th :class "px-4 py-3 text-left font-medium text-stone-600" "State")
(th :class "px-4 py-3 text-left font-medium text-stone-600" "Actions")))
(tbody :class "divide-y divide-stone-100" (raw! rows-html))))
(div :class "px-6 py-8 text-center text-stone-500" "No tickets yet")))))
(defcomp ~events-checkin-error (&key message)
(div :class "rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-800"
(i :class "fa fa-exclamation-circle mr-2" :aria-hidden "true") message))
(defcomp ~events-checkin-success-row (&key code code-short entry-name date-html type-name badge-html time-str)
(tr :class "bg-blue-50" :id (str "ticket-row-" code)
(td :class "px-4 py-3" (span :class "font-mono text-xs" code-short))
(td :class "px-4 py-3" (div :class "font-medium" entry-name) (raw! date-html))
(td :class "px-4 py-3 text-sm" type-name)
(td :class "px-4 py-3" (raw! badge-html))
(td :class "px-4 py-3"
(span :class "text-xs text-blue-600"
(i :class "fa fa-check-circle" :aria-hidden "true") (str " " time-str)))))
(defcomp ~events-lookup-error (&key message)
(div :class "rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-800"
(i :class "fa fa-exclamation-circle mr-2" :aria-hidden "true") message))
(defcomp ~events-lookup-info (&key entry-name)
(div :class "font-semibold text-lg" entry-name))
(defcomp ~events-lookup-type (&key type-name)
(div :class "text-sm text-stone-600" type-name))
(defcomp ~events-lookup-date (&key date-str)
(div :class "text-sm text-stone-500 mt-1" date-str))
(defcomp ~events-lookup-cal (&key cal-name)
(div :class "text-xs text-stone-400 mt-0.5" cal-name))
(defcomp ~events-lookup-status (&key badge-html code)
(div :class "mt-2" (raw! badge-html) (span :class "text-xs text-stone-400 ml-2 font-mono" code)))
(defcomp ~events-lookup-checkin-time (&key date-str)
(div :class "text-xs text-blue-600 mt-1" (str "Checked in: " date-str)))
(defcomp ~events-lookup-checkin-btn (&key checkin-url code csrf)
(form :hx-post checkin-url :hx-target (str "#checkin-action-" code) :hx-swap "innerHTML"
(input :type "hidden" :name "csrf_token" :value csrf)
(button :type "submit"
:class "px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-semibold text-lg"
(i :class "fa fa-check mr-2" :aria-hidden "true") "Check In")))
(defcomp ~events-lookup-checked-in ()
(div :class "text-blue-600 text-center"
(i :class "fa fa-check-circle text-3xl" :aria-hidden "true")
(div :class "text-sm font-medium mt-1" "Checked In")))
(defcomp ~events-lookup-cancelled ()
(div :class "text-red-600 text-center"
(i :class "fa fa-times-circle text-3xl" :aria-hidden "true")
(div :class "text-sm font-medium mt-1" "Cancelled")))
(defcomp ~events-lookup-card (&key info-html code action-html)
(div :class "rounded-lg border border-stone-200 bg-stone-50 p-4"
(div :class "flex items-start justify-between gap-4"
(div :class "flex-1" (raw! info-html))
(div :id (str "checkin-action-" code) (raw! action-html)))))
(defcomp ~events-entry-tickets-admin-row (&key code code-short type-name badge-html action-html)
(tr :class "hover:bg-stone-50" :id (str "entry-ticket-row-" code)
(td :class "px-4 py-2 font-mono text-xs" code-short)
(td :class "px-4 py-2" type-name)
(td :class "px-4 py-2" (raw! badge-html))
(td :class "px-4 py-2" (raw! action-html))))
(defcomp ~events-entry-tickets-admin-checkin (&key checkin-url code csrf)
(form :hx-post checkin-url :hx-target (str "#entry-ticket-row-" code) :hx-swap "outerHTML"
(input :type "hidden" :name "csrf_token" :value csrf)
(button :type "submit" :class "px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700"
"Check in")))
(defcomp ~events-entry-tickets-admin-table (&key rows-html)
(div :class "overflow-x-auto rounded-xl border border-stone-200"
(table :class "w-full text-sm"
(thead :class "bg-stone-50"
(tr (th :class "px-4 py-2 text-left font-medium text-stone-600" "Code")
(th :class "px-4 py-2 text-left font-medium text-stone-600" "Type")
(th :class "px-4 py-2 text-left font-medium text-stone-600" "State")
(th :class "px-4 py-2 text-left font-medium text-stone-600" "Actions")))
(tbody :class "divide-y divide-stone-100" (raw! rows-html)))))
(defcomp ~events-entry-tickets-admin-empty ()
(div :class "text-center py-6 text-stone-500 text-sm" "No tickets for this entry"))
(defcomp ~events-entry-tickets-admin-panel (&key entry-name count-label body-html)
(div :class "space-y-4"
(div :class "flex items-center justify-between"
(h3 :class "text-lg font-semibold" (str "Tickets for: " entry-name))
(span :class "text-sm text-stone-500" count-label))
(raw! body-html)))