moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(templates): prefix Datastar signals with underscore to mark as local

Browse source 
Datastar sends all non-underscore signals with every backend request.
UI-only signals (showForm, navOpen, isSubmitting, form ref, brew
parameters) were being serialized into pagination/search/sort URLs,
creating bloated requests. Prefix them with _ so Datastar's default
filterSignals excludes them from requests.
This commit is contained in:
Jon Seager 2026-02-03 13:37:50 +00:00
parent 16dd72b624
commit 546e105b10
No known key found for this signature in database
7 changed files with 63 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
CLAUDE.md
View file

@ -211,11 +211,11 @@ pub fn render_fragment<T: Template>(template: T, selector: &'static str) -> Resu
Templates use Datastar attributes for interactivity: Templates use Datastar attributes for interactivity:
```html ```html
<!-- Reactive state --> <!-- Local signals (underscore prefix = not sent to server) -->
<section data-signals:show-form="false" data-signals:is-submitting="false"> <section data-signals:_show-form="false" data-signals:_is-submitting="false">
<!-- Visibility binding --> <!-- Visibility binding -->
<div data-show="$showForm" style="display: none"> <div data-show="$_showForm" style="display: none">
<!-- Form content --> <!-- Form content -->
</div> </div>
@ -228,17 +228,17 @@ Templates use Datastar attributes for interactivity:
</form> </form>
<!-- Reset form on completion --> <!-- Reset form on completion -->
<form data-ref="form" <form data-ref="_form"
data-on:datastar-fetch="evt.detail.type === 'finished' && ($showForm = false, $form.reset())"> data-on:datastar-fetch="evt.detail.type === 'finished' && ($_showForm = false, $_form.reset())">
</section> </section>
``` ```
Key attributes: Key attributes:
- `data-signals:name="value"` - Reactive state signals - `data-signals:_name="value"` - Local signals (underscore prefix excludes from backend requests)
- `data-show="$signal"` - Conditional visibility - `data-show="$_signal"` - Conditional visibility
- `data-on:event="expression"` - Event handlers - `data-on:event="expression"` - Event handlers
- `data-ref="name"` - DOM element references - `data-ref="_name"` - DOM element references (underscore prefix for local refs)
- `@get/@post/@put/@delete(url, options)` - HTTP actions with automatic Datastar headers - `@get/@post/@put/@delete(url, options)` - HTTP actions with automatic Datastar headers
#### URL Generation #### URL Generation

16
templates/bags.html
View file

@ -1,5 +1,5 @@
{% extends "base.html" %} {% block title %}Brewlog · Bags{% endblock %} {% block content %} {% extends "base.html" %} {% block title %}Brewlog · Bags{% endblock %} {% block content %}
<section data-signals:show-form="false" data-signals:is-submitting="false"> <section data-signals:_show-form="false" data-signals:_is-submitting="false">
<header class="flex flex-wrap items-start justify-between gap-4"> <header class="flex flex-wrap items-start justify-between gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<h1 class="text-3xl font-semibold">Bags</h1> <h1 class="text-3xl font-semibold">Bags</h1>
@ -9,8 +9,8 @@
<button <button
type="button" type="button"
class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600" class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600"
data-class:hidden="$showForm" data-class:hidden="$_showForm"
data-on:click="$showForm = true" data-on:click="$_showForm = true"
aria-label="Add new bag" aria-label="Add new bag"
> >
<span aria-hidden="true">+</span> <span aria-hidden="true">+</span>
@ -34,7 +34,7 @@
{% else %} {% else %}
<div <div
class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm" class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm"
data-show="$showForm" data-show="$_showForm"
style="display: none" style="display: none"
> >
<div> <div>
@ -47,9 +47,9 @@
method="post" method="post"
action="/api/v1/bags" action="/api/v1/bags"
class="mt-4 flex flex-col gap-4" class="mt-4 flex flex-col gap-4"
data-on:submit="$isSubmitting = true; @post('/api/v1/bags?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#bag-list', mode: 'replace'}})" data-on:submit="$_isSubmitting = true; @post('/api/v1/bags?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#bag-list', mode: 'replace'}})"
data-ref="form" data-ref="_form"
data-on:datastar-fetch="evt.detail.type === 'finished' && $isSubmitting && ($showForm = false, $form && $form.reset(), $isSubmitting = false)" data-on:datastar-fetch="evt.detail.type === 'finished' && $_isSubmitting && ($_showForm = false, $_form && $_form.reset(), $_isSubmitting = false)"
> >
<div class="grid gap-4 sm:grid-cols-2"> <div class="grid gap-4 sm:grid-cols-2">
<label class="flex flex-col gap-1 text-sm"> <label class="flex flex-col gap-1 text-sm">
@ -94,7 +94,7 @@
<button <button
type="button" type="button"
class="rounded-md px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-200/50" class="rounded-md px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-200/50"
data-on:click="$showForm = false" data-on:click="$_showForm = false"
> >
Cancel Cancel
</button> </button>

40
templates/brews.html
View file

@ -1,5 +1,5 @@
{% extends "base.html" %} {% block title %}Brewlog · Brews{% endblock %} {% block content %} {% extends "base.html" %} {% block title %}Brewlog · Brews{% endblock %} {% block content %}
<section data-signals:show-form="false" data-signals:is-submitting="false" data-signals:temp="91.0" data-signals:grind="6.0" data-signals:volume="250" data-signals:weight="15.0"> <section data-signals:_show-form="false" data-signals:_is-submitting="false" data-signals:_temp="91.0" data-signals:_grind="6.0" data-signals:_volume="250" data-signals:_weight="15.0">
<header class="flex flex-wrap items-start justify-between gap-4"> <header class="flex flex-wrap items-start justify-between gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<h1 class="text-3xl font-semibold">Brews</h1> <h1 class="text-3xl font-semibold">Brews</h1>
@ -9,8 +9,8 @@
<button <button
type="button" type="button"
class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600" class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600"
data-class:hidden="$showForm" data-class:hidden="$_showForm"
data-on:click="$showForm = true" data-on:click="$_showForm = true"
aria-label="Add new brew" aria-label="Add new brew"
> >
<span aria-hidden="true">+</span> <span aria-hidden="true">+</span>
@ -40,7 +40,7 @@
{% else %} {% else %}
<div <div
class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm" class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm"
data-show="$showForm" data-show="$_showForm"
style="display: none" style="display: none"
> >
<div> <div>
@ -51,9 +51,9 @@
method="post" method="post"
action="/api/v1/brews" action="/api/v1/brews"
class="mt-4 flex flex-col gap-4 overflow-hidden" class="mt-4 flex flex-col gap-4 overflow-hidden"
data-on:submit="$isSubmitting = true; @post('/api/v1/brews?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#brew-list', mode: 'replace'}})" data-on:submit="$_isSubmitting = true; @post('/api/v1/brews?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#brew-list', mode: 'replace'}})"
data-ref="form" data-ref="_form"
data-on:datastar-fetch="evt.detail.type === 'finished' && $isSubmitting && ($showForm = false, $form && $form.reset(), $temp = 91.0, $grind = 6.0, $volume = 250, $weight = 15.0, $isSubmitting = false)" data-on:datastar-fetch="evt.detail.type === 'finished' && $_isSubmitting && ($_showForm = false, $_form && $_form.reset(), $_temp = 91.0, $_grind = 6.0, $_volume = 250, $_weight = 15.0, $_isSubmitting = false)"
> >
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"> <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<!-- Bag selector --> <!-- Bag selector -->
@ -102,9 +102,9 @@
<div class="flex flex-col gap-1 text-sm"> <div class="flex flex-col gap-1 text-sm">
<span class="text-stone-700">Coffee (g) *</span> <span class="text-stone-700">Coffee (g) *</span>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button type="button" class="btn-adjust" data-on:click="$weight = Math.max(1, $weight - 0.5)">-</button> <button type="button" class="btn-adjust" data-on:click="$_weight = Math.max(1, $_weight - 0.5)">-</button>
<input type="number" name="coffee_weight" step="any" min="1" required class="input-field flex-1 text-center" data-attr:value="$weight" data-on:input="$weight = this.valueAsNumber" /> <input type="number" name="coffee_weight" step="any" min="1" required class="input-field flex-1 text-center" data-attr:value="$_weight" data-on:input="$_weight = this.valueAsNumber" />
<button type="button" class="btn-adjust" data-on:click="$weight = $weight + 0.5">+</button> <button type="button" class="btn-adjust" data-on:click="$_weight = $_weight + 0.5">+</button>
</div> </div>
</div> </div>
@ -112,9 +112,9 @@
<div class="flex flex-col gap-1 text-sm"> <div class="flex flex-col gap-1 text-sm">
<span class="text-stone-700">Grind Setting *</span> <span class="text-stone-700">Grind Setting *</span>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button type="button" class="btn-adjust" data-on:click="$grind = Math.max(0, $grind - 0.5)">-</button> <button type="button" class="btn-adjust" data-on:click="$_grind = Math.max(0, $_grind - 0.5)">-</button>
<input type="number" name="grind_setting" step="any" min="0" required class="input-field flex-1 text-center" data-attr:value="$grind" data-on:input="$grind = this.valueAsNumber" /> <input type="number" name="grind_setting" step="any" min="0" required class="input-field flex-1 text-center" data-attr:value="$_grind" data-on:input="$_grind = this.valueAsNumber" />
<button type="button" class="btn-adjust" data-on:click="$grind = $grind + 0.5">+</button> <button type="button" class="btn-adjust" data-on:click="$_grind = $_grind + 0.5">+</button>
</div> </div>
</div> </div>
@ -122,9 +122,9 @@
<div class="flex flex-col gap-1 text-sm"> <div class="flex flex-col gap-1 text-sm">
<span class="text-stone-700">Water (ml) *</span> <span class="text-stone-700">Water (ml) *</span>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button type="button" class="btn-adjust" data-on:click="$volume = Math.max(10, $volume - 10)">-</button> <button type="button" class="btn-adjust" data-on:click="$_volume = Math.max(10, $_volume - 10)">-</button>
<input type="number" name="water_volume" step="any" min="10" required class="input-field flex-1 text-center" data-attr:value="$volume" data-on:input="$volume = this.valueAsNumber" /> <input type="number" name="water_volume" step="any" min="10" required class="input-field flex-1 text-center" data-attr:value="$_volume" data-on:input="$_volume = this.valueAsNumber" />
<button type="button" class="btn-adjust" data-on:click="$volume = $volume + 10">+</button> <button type="button" class="btn-adjust" data-on:click="$_volume = $_volume + 10">+</button>
</div> </div>
</div> </div>
@ -132,9 +132,9 @@
<div class="flex flex-col gap-1 text-sm"> <div class="flex flex-col gap-1 text-sm">
<span class="text-stone-700">Temp (C) *</span> <span class="text-stone-700">Temp (C) *</span>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button type="button" class="btn-adjust" data-on:click="$temp = Math.max(0, $temp - 0.5)">-</button> <button type="button" class="btn-adjust" data-on:click="$_temp = Math.max(0, $_temp - 0.5)">-</button>
<input type="number" name="water_temp" step="any" min="0" max="100" required class="input-field flex-1 text-center" data-attr:value="$temp" data-on:input="$temp = this.valueAsNumber" /> <input type="number" name="water_temp" step="any" min="0" max="100" required class="input-field flex-1 text-center" data-attr:value="$_temp" data-on:input="$_temp = this.valueAsNumber" />
<button type="button" class="btn-adjust" data-on:click="$temp = Math.min(100, $temp + 0.5)">+</button> <button type="button" class="btn-adjust" data-on:click="$_temp = Math.min(100, $_temp + 0.5)">+</button>
</div> </div>
</div> </div>
</div> </div>
@ -143,7 +143,7 @@
<button <button
type="button" type="button"
class="rounded-md px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-200/50" class="rounded-md px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-200/50"
data-on:click="$showForm = false" data-on:click="$_showForm = false"
> >
Cancel Cancel
</button> </button>

16
templates/gear.html
View file

@ -1,7 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Brewlog · Gear{% endblock %} {% block title %}Brewlog · Gear{% endblock %}
{% block content %} {% block content %}
<section data-signals:show-form="false" data-signals:is-submitting="false"> <section data-signals:_show-form="false" data-signals:_is-submitting="false">
<header class="flex flex-wrap items-start justify-between gap-4"> <header class="flex flex-wrap items-start justify-between gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<h1 class="text-3xl font-semibold">Gear</h1> <h1 class="text-3xl font-semibold">Gear</h1>
@ -11,8 +11,8 @@
<button <button
type="button" type="button"
class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600" class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600"
data-class:hidden="$showForm" data-class:hidden="$_showForm"
data-on:click="$showForm = true" data-on:click="$_showForm = true"
aria-label="Add new gear" aria-label="Add new gear"
> >
<span aria-hidden="true">+</span> <span aria-hidden="true">+</span>
@ -23,7 +23,7 @@
{% if is_authenticated %} {% if is_authenticated %}
<div <div
class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm" class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm"
data-show="$showForm" data-show="$_showForm"
style="display: none" style="display: none"
> >
<div> <div>
@ -36,9 +36,9 @@
method="post" method="post"
action="/api/v1/gear" action="/api/v1/gear"
class="mt-4 flex flex-col gap-4" class="mt-4 flex flex-col gap-4"
data-on:submit="$isSubmitting = true; @post('/api/v1/gear?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#gear-list', mode: 'replace'}})" data-on:submit="$_isSubmitting = true; @post('/api/v1/gear?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#gear-list', mode: 'replace'}})"
data-ref="form" data-ref="_form"
data-on:datastar-fetch="evt.detail.type === 'finished' && $isSubmitting && ($showForm = false, $form && $form.reset(), $isSubmitting = false)" data-on:datastar-fetch="evt.detail.type === 'finished' && $_isSubmitting && ($_showForm = false, $_form && $_form.reset(), $_isSubmitting = false)"
> >
<div class="grid gap-4 sm:grid-cols-2"> <div class="grid gap-4 sm:grid-cols-2">
<label class="flex flex-col gap-1 text-sm"> <label class="flex flex-col gap-1 text-sm">
@ -76,7 +76,7 @@
<button <button
type="button" type="button"
class="rounded-md px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-200/50" class="rounded-md px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-200/50"
data-on:click="$showForm = false" data-on:click="$_showForm = false"
> >
Cancel Cancel
</button> </button>

10
templates/nav.html
View file

@ -1,4 +1,4 @@
<nav class="relative rounded-lg border border-amber-300 bg-amber-100/80 p-3 text-sm text-stone-600" data-signals:nav-open="false"> <nav class="relative rounded-lg border border-amber-300 bg-amber-100/80 p-3 text-sm text-stone-600" data-signals:_nav-open="false">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="font-semibold uppercase tracking-[0.25em] text-amber-700"><a href="/timeline">B{rew}log</a></div> <div class="font-semibold uppercase tracking-[0.25em] text-amber-700"><a href="/timeline">B{rew}log</a></div>
<!-- Desktop links --> <!-- Desktop links -->
@ -18,17 +18,17 @@
{% endif %} {% endif %}
</div> </div>
<!-- Hamburger button (mobile only) --> <!-- Hamburger button (mobile only) -->
<button class="md:hidden p-1 text-amber-700" data-on:click="$navOpen = !$navOpen" aria-label="Toggle menu"> <button class="md:hidden p-1 text-amber-700" data-on:click="$_navOpen = !$_navOpen" aria-label="Toggle menu">
<svg data-show="!$navOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <svg data-show="!$_navOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" /> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg> </svg>
<svg data-show="$navOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="display:none"> <svg data-show="$_navOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="display:none">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
</button> </button>
</div> </div>
<!-- Mobile menu --> <!-- Mobile menu -->
<div class="md:hidden flex flex-col gap-2 pt-3 mt-3 border-t border-amber-300" data-show="$navOpen" style="display:none"> <div class="md:hidden flex flex-col gap-2 pt-3 mt-3 border-t border-amber-300" data-show="$_navOpen" style="display:none">
<a class="py-1 transition {% if nav_active == "roasters" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/roasters">Roasters</a> <a class="py-1 transition {% if nav_active == "roasters" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/roasters">Roasters</a>
<a class="py-1 transition {% if nav_active == "roasts" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/roasts">Roasts</a> <a class="py-1 transition {% if nav_active == "roasts" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/roasts">Roasts</a>
<a class="py-1 transition {% if nav_active == "bags" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/bags">Bags</a> <a class="py-1 transition {% if nav_active == "bags" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/bags">Bags</a>

14
templates/roasters.html
View file

@ -1,5 +1,5 @@
{% extends "base.html" %} {% block title %}Brewlog · Roasters{% endblock %} {% block content %} {% extends "base.html" %} {% block title %}Brewlog · Roasters{% endblock %} {% block content %}
<section data-signals:show-form="false"> <section data-signals:_show-form="false">
<header class="flex flex-wrap items-start justify-between gap-4"> <header class="flex flex-wrap items-start justify-between gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<h1 class="text-3xl font-semibold">Roasters</h1> <h1 class="text-3xl font-semibold">Roasters</h1>
@ -9,8 +9,8 @@
<button <button
type="button" type="button"
class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600" class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600"
data-class:hidden="$showForm" data-class:hidden="$_showForm"
data-on:click="$showForm = true" data-on:click="$_showForm = true"
aria-label="Add new roaster" aria-label="Add new roaster"
> >
<span aria-hidden="true">+</span> <span aria-hidden="true">+</span>
@ -21,7 +21,7 @@
{% if is_authenticated %} {% if is_authenticated %}
<div <div
class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm" class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm"
data-show="$showForm" data-show="$_showForm"
style="display: none" style="display: none"
> >
<div> <div>
@ -35,8 +35,8 @@
action="/api/v1/roasters" action="/api/v1/roasters"
class="mt-4 flex flex-col gap-4" class="mt-4 flex flex-col gap-4"
data-on:submit="@post('/api/v1/roasters?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#roaster-list', mode: 'replace'}})" data-on:submit="@post('/api/v1/roasters?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
data-ref="form" data-ref="_form"
data-on:datastar-fetch="evt.detail.type === 'finished' && ($showForm = false, $form && $form.reset())" data-on:datastar-fetch="evt.detail.type === 'finished' && ($_showForm = false, $_form && $_form.reset())"
> >
<div class="grid gap-4 sm:grid-cols-2"> <div class="grid gap-4 sm:grid-cols-2">
<label class="flex flex-col gap-1 text-sm"> <label class="flex flex-col gap-1 text-sm">
@ -86,7 +86,7 @@
<button <button
type="button" type="button"
class="rounded-md border border-amber-300 px-4 py-2 text-sm font-semibold text-stone-700 transition hover:border-amber-400 hover:text-stone-800" class="rounded-md border border-amber-300 px-4 py-2 text-sm font-semibold text-stone-700 transition hover:border-amber-400 hover:text-stone-800"
data-on:click="($showForm = false, $form && $form.reset())" data-on:click="($_showForm = false, $_form && $_form.reset())"
> >
Cancel Cancel
</button> </button>

14
templates/roasts.html
View file

@ -1,5 +1,5 @@
{% extends "base.html" %} {% block title %}Brewlog · Roasts{% endblock %} {% block content %} {% extends "base.html" %} {% block title %}Brewlog · Roasts{% endblock %} {% block content %}
<section data-signals:show-form="false"> <section data-signals:_show-form="false">
<header class="flex flex-wrap items-start justify-between gap-4"> <header class="flex flex-wrap items-start justify-between gap-4">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<h1 class="text-3xl font-semibold">Roasts</h1> <h1 class="text-3xl font-semibold">Roasts</h1>
@ -9,8 +9,8 @@
<button <button
type="button" type="button"
class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600" class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600"
data-class:hidden="$showForm" data-class:hidden="$_showForm"
data-on:click="$showForm = true" data-on:click="$_showForm = true"
aria-label="Add new roast" aria-label="Add new roast"
> >
<span aria-hidden="true">+</span> <span aria-hidden="true">+</span>
@ -35,7 +35,7 @@
{% else %} {% else %}
<div <div
class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm" class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm"
data-show="$showForm" data-show="$_showForm"
style="display: none" style="display: none"
> >
<div> <div>
@ -49,8 +49,8 @@
action="/api/v1/roasts" action="/api/v1/roasts"
class="mt-4 flex flex-col gap-4" class="mt-4 flex flex-col gap-4"
data-on:submit="@post('/api/v1/roasts?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#roast-list', mode: 'replace'}})" data-on:submit="@post('/api/v1/roasts?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
data-ref="form" data-ref="_form"
data-on:datastar-fetch="evt.detail.type === 'finished' && ($showForm = false, $form && $form.reset())" data-on:datastar-fetch="evt.detail.type === 'finished' && ($_showForm = false, $_form && $_form.reset())"
> >
<div class="grid gap-4 sm:grid-cols-2"> <div class="grid gap-4 sm:grid-cols-2">
<label class="flex flex-col gap-1 text-sm"> <label class="flex flex-col gap-1 text-sm">
@ -109,7 +109,7 @@
<button <button
type="button" type="button"
class="rounded-md border border-amber-300 px-4 py-2 text-sm font-semibold text-stone-700 transition hover:border-amber-400 hover:text-stone-800" class="rounded-md border border-amber-300 px-4 py-2 text-sm font-semibold text-stone-700 transition hover:border-amber-400 hover:text-stone-800"
data-on:click="($showForm = false, $form && $form.reset())" data-on:click="($_showForm = false, $_form && $_form.reset())"
> >
Cancel Cancel
</button> </button>