bronku/cake-order-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

templates, handlers, CSS, JS: special cakes UI, HTMX nav, dashboard overhaul

Browse source 
Special cakes UI: overlay drawer, basket integration, catalogue tag
filter, form parsing, JS save/edit/remove.
HTMX navigation: MainContent component, nav links with hx-get,
handlers return partial on HX-Request.
Dashboard: metrics grid, CakeBreakdown, OrderRow with status select,
CakeCounts/OrderCounts, torty filter, tort badge, results-pane.
Collapsible sidebar: toggle button, localStorage, CSS transitions.
Location field: dropdown replaced with pill toggle.
Inline style cleanup: moved to CSS classes (tag-grid, grow, icon.sm,
header-actions, toggle-group, success-icon, etc.).
Dead CSS removal: pagination, status-chip, badge-pill, login-page.
Helpers: exported CakeTitle/OrderTitle, added tagNames, tagIDsComma,
orderItemsDesc, specialCakeDetail, removed unused helpers.
This commit is contained in:
bronkuu 2026-06-15 18:50:21 +02:00
parent 17b92a706a
commit 5a5372b831
18 changed files with 1153 additions and 422 deletions
Download patch file Download diff file Expand all files Collapse all files

111
server/templates/order.templ
View file

@ -6,14 +6,14 @@ import (
"git.bronku.xyz/bronku/cake-order-tracker/models"
)
templ OrderPage(order models.Order, catalogue []models.Cake) {
@Layout(orderTitle(order), templ.NopComponent, OrderForm(order, catalogue))
templ OrderPage(order models.Order, catalogue []models.Cake, allTags []models.Tag) {
@Layout(OrderTitle(order), templ.NopComponent, OrderForm(order, catalogue, allTags))
}
templ OrderForm(order models.Order, catalogue []models.Cake) {
<form method="post" class="split-pane" style="flex:1;min-height:0">
templ OrderForm(order models.Order, catalogue []models.Cake, allTags []models.Tag) {
<form method="post" class="split-pane">
<input type="hidden" name="id" value={ strconv.Itoa(order.ID) }/>
<div style="flex:1;display:flex;flex-direction:column;gap:1rem;min-width:0">
<div class="order-left">
<section class="card">
<header>
<h2>
@ -37,20 +37,11 @@ templ OrderForm(order models.Order, catalogue []models.Cake) {
</div>
<div class="form-group">
<label>Lokalizacja</label>
<select class="form-input" name="location">
<option
if order.Location == "Kartuzy" {
selected
}
value="Kartuzy"
>Kartuzy</option>
<option
if order.Location == "Somonino" {
selected
}
value="Somonino"
>Somonino</option>
</select>
<div class="toggle-group">
<input type="hidden" name="location" value={ order.Location }/>
<button type="button" class={ "toggle-btn", templ.KV("active", order.Location == "Kartuzy") } onclick="setLocation(this, 'Kartuzy')">Kartuzy</button>
<button type="button" class={ "toggle-btn", templ.KV("active", order.Location == "Somonino") } onclick="setLocation(this, 'Somonino')">Somonino</button>
</div>
</div>
<div class="form-group">
<label>Data dostawy *</label>
@ -67,24 +58,45 @@ templ OrderForm(order models.Order, catalogue []models.Cake) {
</div>
</div>
</section>
<section class="card">
<header>
<h2>
<span class="material-symbols-outlined">cake_add</span>
Torty specjalne
</h2>
</header>
<div style="padding:1rem;text-align:center">
<button type="button" class="btn outline" onclick="openSpecialCakeOverlay()">
<span class="material-symbols-outlined">add</span>
Dodaj tort specjalny
</button>
</div>
</section>
<section class="card" style="flex:1;min-height:12.5rem">
<header>
<h2>
<span class="material-symbols-outlined">inventory_2</span>
Katalog produktów
</h2>
<div style="position:relative;width:11.25rem">
<span class="material-symbols-outlined" style="position:absolute;left:0.5rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--on-surface-variant);pointer-events:none">search</span>
<input class="form-input" style="height:1.75rem;padding-left:1.75rem;font-size:0.75rem" type="text" placeholder="Filtruj produkty..." oninput="filterCatalogue(this)"/>
<div class="search-wrapper">
<span class="material-symbols-outlined search-icon">search</span>
<input class="search-input" type="text" placeholder="Filtruj produkty..." oninput="filterCatalogue(this)"/>
</div>
</header>
<div style="overflow-y:auto;padding:1rem">
if len(allTags) > 0 {
<div class="tag-row">
for _, t := range allTags {
<button type="button" class="tag-chip" data-tag={ t.Name } onclick="toggleCatalogueTagFilter(this)">{ t.Name }</button>
}
</div>
}
<div class="catalogue-scroll">
<ul id="catalogue-grid">
for _, c := range catalogue {
<li data-name={ c.Name }>
<li data-name={ c.Name } data-tags={ tagNames(c.Tags) }>
<div>
<div class="icon cake">
<span class="material-symbols-outlined" style="font-size:1rem">cake</span>
<span class="material-symbols-outlined">cake</span>
</div>
<div style="min-width:0">
<div class="name">{ c.Name }</div>
@ -106,8 +118,8 @@ templ OrderForm(order models.Order, catalogue []models.Cake) {
</div>
</section>
</div>
<aside style="width:20rem;flex-shrink:0;display:flex;flex-direction:column">
<section class="card" style="flex:1;display:flex;flex-direction:column">
<aside class="order-aside">
<section class="card grow">
<header>
<h2>
<span class="material-symbols-outlined">receipt_long</span>
@ -117,7 +129,7 @@ templ OrderForm(order models.Order, catalogue []models.Cake) {
<ul id="basket-items">
for _, c := range order.Cakes {
<li data-cake-id={ strconv.Itoa(c.ID) }>
<div style="flex:1;min-width:0;padding-right:0.5rem">
<div>
<div class="name">{ c.Name }</div>
<div class="detail">{ c.Price.String() } PLN × <span class="qty">{ strconv.Itoa(c.Amount) }</span></div>
</div>
@ -128,6 +140,37 @@ templ OrderForm(order models.Order, catalogue []models.Cake) {
<input type="hidden" name={ "cake[" + strconv.Itoa(c.ID) + "]" } value={ strconv.Itoa(c.Amount) }/>
</li>
}
for _, s := range order.SpecialCakes {
<li data-special-id={ strconv.Itoa(s.ID) }>
<div>
<div class="name">{ s.Name }</div>
<div class="detail">{ specialCakeDetail(s) }</div>
if len(s.Tags) > 0 {
<div class="tag-group">
for _, t := range s.Tags {
<span class="tag-chip sm">{ t.Name }</span>
}
</div>
}
</div>
<div class="price">{ s.Price.String() } PLN</div>
<div class="basket-actions">
<button type="button" class="action-btn" onclick="editSpecialCake(this)" title="Edytuj">
<span class="material-symbols-outlined" style="font-size:1rem">edit</span>
</button>
<button type="button" class="remove" onclick="removeSpecialCake(this)" title="Usuń">
<span class="material-symbols-outlined">close</span>
</button>
</div>
<input type="hidden" name="special_name[]" value={ s.Name }/>
<input type="hidden" name="special_price[]" value={ s.Price.String() }/>
<input type="hidden" name="special_size[]" value={ s.Size }/>
<input type="hidden" name="special_shape[]" value={ s.Shape }/>
<input type="hidden" name="special_flavour[]" value={ s.Flavour }/>
<input type="hidden" name="special_notes[]" value={ s.Notes }/>
<input type="hidden" name="special_tags[]" value={ tagIDsComma(s.Tags) }/>
</li>
}
</ul>
<div class="summary-totals">
<div class="total-row">
@ -150,5 +193,17 @@ templ OrderForm(order models.Order, catalogue []models.Cake) {
</section>
</aside>
</form>
@SpecialCakeOverlay(allTags)
@templ.Raw(orderScript(order))
<script>
function setLocation(btn, value) {
var group = btn.closest('.toggle-group');
group.querySelectorAll('.toggle-btn').forEach(function(b) { b.classList.remove('active'); });
btn.classList.add('active');
group.querySelector('input[type=hidden]').value = value;
}
</script>
}