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

flatter html

Browse source
This commit is contained in:
bronkuu 2026-06-15 20:15:12 +02:00
parent cf2e217030
commit a74c276cd3
11 changed files with 84 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

14
server/get.go
View file

@ -74,7 +74,7 @@ func (h *Server) orders(r *http.Request) (templ.Component, int, error) {
if err != nil { if err != nil {
return nil, http.StatusInternalServerError, err return nil, http.StatusInternalServerError, err
} }
return templates.MainContent("Panel główny", templates.DateForm(firstStr, lastStr, today, tomorrow, specialFilter), templates.OrdersMain(counts, cakeCounts, orders, firstStr, lastStr, specialFilter)), http.StatusOK, nil return templates.MainContent("Panel główny", templates.OrdersMain(counts, cakeCounts, orders, firstStr, lastStr, specialFilter, today, tomorrow)), http.StatusOK, nil
} }
if r.Header.Get("HX-Request") == "true" { if r.Header.Get("HX-Request") == "true" {
@ -100,7 +100,7 @@ func (h *Server) cakes(r *http.Request) (templ.Component, int, error) {
} }
if r.Header.Get("HX-Request") == "true" { if r.Header.Get("HX-Request") == "true" {
return templates.MainContent("Katalog", templ.NopComponent, templates.CakesMain(cakes, tags)), http.StatusOK, nil return templates.MainContent("Katalog", templates.CakesMain(cakes, tags)), http.StatusOK, nil
} }
return templates.CakesPage(cakes, tags), http.StatusOK, nil return templates.CakesPage(cakes, tags), http.StatusOK, nil
@ -114,7 +114,7 @@ func (h *Server) cake(r *http.Request) (templ.Component, int, error) {
return nil, http.StatusInternalServerError, err return nil, http.StatusInternalServerError, err
} }
if r.Header.Get("HX-Request") == "true" { if r.Header.Get("HX-Request") == "true" {
return templates.MainContent("Ciasto nowe", templ.NopComponent, templates.CakeForm(models.Cake{}, tags)), http.StatusOK, nil return templates.MainContent("Ciasto nowe", templates.CakeForm(models.Cake{}, tags)), http.StatusOK, nil
} }
return templates.CakePage(models.Cake{}, tags), http.StatusOK, nil return templates.CakePage(models.Cake{}, tags), http.StatusOK, nil
} }
@ -135,7 +135,7 @@ func (h *Server) cake(r *http.Request) (templ.Component, int, error) {
} }
if r.Header.Get("HX-Request") == "true" { if r.Header.Get("HX-Request") == "true" {
return templates.MainContent(templates.CakeTitle(data), templ.NopComponent, templates.CakeForm(data, tags)), http.StatusOK, nil return templates.MainContent(templates.CakeTitle(data), templates.CakeForm(data, tags)), http.StatusOK, nil
} }
return templates.CakePage(data, tags), http.StatusOK, nil return templates.CakePage(data, tags), http.StatusOK, nil
@ -148,7 +148,7 @@ func (h *Server) blocked(r *http.Request) (templ.Component, int, error) {
} }
if r.Header.Get("HX-Request") == "true" { if r.Header.Get("HX-Request") == "true" {
return templates.MainContent("Terminy zablokowane", templ.NopComponent, templates.BlockedMain(dates)), http.StatusOK, nil return templates.MainContent("Terminy zablokowane", templates.BlockedMain(dates)), http.StatusOK, nil
} }
return templates.BlockedPage(dates), http.StatusOK, nil return templates.BlockedPage(dates), http.StatusOK, nil
@ -171,7 +171,7 @@ func (h *Server) order(r *http.Request) (templ.Component, int, error) {
url := strings.Split(r.URL.Path, "/") url := strings.Split(r.URL.Path, "/")
if len(url) < 3 || url[2] == "" { if len(url) < 3 || url[2] == "" {
if r.Header.Get("HX-Request") == "true" { if r.Header.Get("HX-Request") == "true" {
return templates.MainContent("Nowe zamówienie", templ.NopComponent, templates.OrderForm(models.Order{Date: time.Now()}, catalogue, tags, blockedDates)), http.StatusOK, nil return templates.MainContent("Nowe zamówienie", templates.OrderForm(models.Order{Date: time.Now()}, catalogue, tags, blockedDates)), http.StatusOK, nil
} }
return templates.OrderPage(models.Order{Date: time.Now()}, catalogue, tags, blockedDates), http.StatusOK, nil return templates.OrderPage(models.Order{Date: time.Now()}, catalogue, tags, blockedDates), http.StatusOK, nil
} }
@ -187,7 +187,7 @@ func (h *Server) order(r *http.Request) (templ.Component, int, error) {
} }
if r.Header.Get("HX-Request") == "true" { if r.Header.Get("HX-Request") == "true" {
return templates.MainContent(templates.OrderTitle(order), templ.NopComponent, templates.OrderForm(order, catalogue, tags, blockedDates)), http.StatusOK, nil return templates.MainContent(templates.OrderTitle(order), templates.OrderForm(order, catalogue, tags, blockedDates)), http.StatusOK, nil
} }
return templates.OrderPage(order, catalogue, tags, blockedDates), http.StatusOK, nil return templates.OrderPage(order, catalogue, tags, blockedDates), http.StatusOK, nil

42
server/static/components.css
View file

@ -214,13 +214,7 @@
font-size: 0.875rem; font-size: 0.875rem;
} }
.metrics-grid { .metric {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
}
.metrics-grid > div {
background: var(--surface-white); background: var(--surface-white);
border: 1px solid var(--outline-dim); border: 1px solid var(--outline-dim);
border-radius: var(--radius-md); border-radius: var(--radius-md);
@ -230,7 +224,7 @@
gap: var(--space-xs); gap: var(--space-xs);
} }
.metrics-grid .label { .metric .label {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 500; font-weight: 500;
color: var(--on-surface-dim); color: var(--on-surface-dim);
@ -240,17 +234,17 @@
gap: var(--space-xs); gap: var(--space-xs);
} }
.metrics-grid .label .material-symbols-outlined { .metric .label .material-symbols-outlined {
font-size: 1rem; font-size: 1rem;
} }
.metrics-grid .value { .metric .value {
font-size: 1.75rem; font-size: 1.75rem;
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.2;
} }
.metrics-grid .change { .metric .change {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
} }
@ -657,10 +651,6 @@ textarea + label {
flex-direction: column; flex-direction: column;
} }
.col-span-2 {
grid-column: span 2;
}
.horizontal-group { .horizontal-group {
display: flex; display: flex;
gap: var(--space-sm); gap: var(--space-sm);
@ -729,27 +719,6 @@ textarea + label {
color: var(--success-text); color: var(--success-text);
} }
.breakdown-list {
list-style: none;
}
.breakdown-item {
display: flex;
justify-content: space-between;
padding: 0.375rem var(--space-md);
margin: 0 calc(-1 * var(--space-md));
border-bottom: 1px solid var(--outline-dim);
}
.breakdown-amount {
font-weight: 600;
}
.breakdown-empty {
color: var(--on-surface-dim);
font-size: 0.875rem;
}
.icon { .icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
@ -770,7 +739,6 @@ textarea + label {
.text-muted { color: var(--on-surface-dim); font-weight: 400; } .text-muted { color: var(--on-surface-dim); font-weight: 400; }
.font-bold { font-weight: 700; } .font-bold { font-weight: 700; }
.font-medium { font-weight: 500; } .font-medium { font-weight: 500; }
.grow { flex: 1; }
.empty-state { .empty-state {
text-align: center; text-align: center;

14
server/static/layout.css
View file

@ -108,11 +108,21 @@ main {
.main-content { .main-content {
padding: var(--space-md); padding: var(--space-md);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
align-content: start;
}
.main-content > .horizontal-group {
grid-column: 1 / -1;
}
#orders-results {
grid-column: 1 / -1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-md); gap: var(--space-md);
min-height: 0;
flex: 1;
} }
@media (max-width: 64em) { @media (max-width: 64em) {

2
server/static/order.js
View file

@ -265,7 +265,7 @@ function toggleCakeTagFilter(btn) {
activeCakeTags.push(tag); activeCakeTags.push(tag);
btn.classList.add('active'); btn.classList.add('active');
} }
var rows = document.querySelectorAll('#cakes-table tbody tr'); var rows = document.querySelectorAll('#cakes-card tbody tr');
for (var i = 0; i < rows.length; i++) { for (var i = 0; i < rows.length; i++) {
if (activeCakeTags.length === 0) { rows[i].classList.remove('hide'); continue; } if (activeCakeTags.length === 0) { rows[i].classList.remove('hide'); continue; }
var rowTags = (rows[i].getAttribute('data-tags') || '').split(','); var rowTags = (rows[i].getAttribute('data-tags') || '').split(',');

2
server/templates/blocked.templ
View file

@ -7,7 +7,7 @@ import (
) )
templ BlockedPage(blocked []models.BlockedDate) { templ BlockedPage(blocked []models.BlockedDate) {
@Layout("Terminy zablokowane", templ.NopComponent, BlockedMain(blocked)) @Layout("Terminy zablokowane", BlockedMain(blocked))
} }
templ BlockedMain(blocked []models.BlockedDate) { templ BlockedMain(blocked []models.BlockedDate) {

2
server/templates/cake.templ
View file

@ -7,7 +7,7 @@ import (
) )
templ CakePage(cake models.Cake, allTags []models.Tag) { templ CakePage(cake models.Cake, allTags []models.Tag) {
@Layout(CakeTitle(cake), templ.NopComponent, CakeForm(cake, allTags)) @Layout(CakeTitle(cake), CakeForm(cake, allTags))
} }
templ CakeForm(cake models.Cake, allTags []models.Tag) { templ CakeForm(cake models.Cake, allTags []models.Tag) {

12
server/templates/cakes.templ
View file

@ -7,11 +7,11 @@ import (
) )
templ CakesPage(cakes []models.Cake, allTags []models.Tag) { templ CakesPage(cakes []models.Cake, allTags []models.Tag) {
@Layout("Katalog", templ.NopComponent, CakesMain(cakes, allTags)) @Layout("Katalog", CakesMain(cakes, allTags))
} }
templ CakesMain(cakes []models.Cake, allTags []models.Tag) { templ CakesMain(cakes []models.Cake, allTags []models.Tag) {
<section class="card"> <section class="card" id="cakes-card">
<header> <header>
<h2> <h2>
<span class="material-symbols-outlined">inventory_2</span> <span class="material-symbols-outlined">inventory_2</span>
@ -30,10 +30,9 @@ templ CakesMain(cakes []models.Cake, allTags []models.Tag) {
} }
</div> </div>
} }
<table class="data-table" id="cakes-table"> <table class="data-table">
<thead> <thead>
<tr> <tr>
<th></th>
<th>Nazwa</th> <th>Nazwa</th>
<th>SKU</th> <th>SKU</th>
<th>Tagi</th> <th>Tagi</th>
@ -44,11 +43,6 @@ templ CakesMain(cakes []models.Cake, allTags []models.Tag) {
<tbody> <tbody>
for _, c := range cakes { for _, c := range cakes {
<tr data-tags={ tagNames(c.Tags) }> <tr data-tags={ tagNames(c.Tags) }>
<td>
<div class="icon cake">
<span class="material-symbols-outlined">cake</span>
</div>
</td>
<td class="font-medium">{ c.Name }</td> <td class="font-medium">{ c.Name }</td>
<td class="text-muted">#{ strconv.Itoa(c.ID) }</td> <td class="text-muted">#{ strconv.Itoa(c.ID) }</td>
<td> <td>

2
server/templates/confirmation.templ
View file

@ -3,7 +3,7 @@ package templates
import "strconv" import "strconv"
templ Confirmation(title string, id int) { templ Confirmation(title string, id int) {
@Layout(title, templ.NopComponent, ConfirmationBody(id)) @Layout(title, ConfirmationBody(id))
} }
templ ConfirmationBody(id int) { templ ConfirmationBody(id int) {

18
server/templates/layout.templ
View file

@ -1,6 +1,6 @@
package templates package templates
templ Layout(title string, header, main templ.Component) { templ Layout(title string, main templ.Component) {
<!DOCTYPE html> <!DOCTYPE html>
<html lang="pl"> <html lang="pl">
<head> <head>
@ -17,11 +17,10 @@ templ Layout(title string, header, main templ.Component) {
<aside> <aside>
@Nav() @Nav()
</aside> </aside>
<header class="topnav">
<h1>{ title }</h1>
</header>
<main id="main"> <main id="main">
<header class="topnav">
<h1>{ title }</h1>
@header
</header>
<div class="main-content"> <div class="main-content">
@main @main
</div> </div>
@ -30,13 +29,12 @@ templ Layout(title string, header, main templ.Component) {
</html> </html>
} }
templ MainContent(title string, header, main templ.Component) { templ MainContent(title string, main templ.Component) {
<header class="topnav" hx-swap-oob="true">
<h1>{ title }</h1>
</header>
<main id="main"> <main id="main">
<title hx-swap-oob="true">{ title } — Zamówienia ciast</title> <title hx-swap-oob="true">{ title } — Zamówienia ciast</title>
<header class="topnav">
<h1>{ title }</h1>
@header
</header>
<div class="main-content"> <div class="main-content">
@main @main
</div> </div>

2
server/templates/order.templ
View file

@ -8,7 +8,7 @@ import (
) )
templ OrderPage(order models.Order, catalogue []models.Cake, allTags []models.Tag, blockedDates []models.BlockedDate) { templ OrderPage(order models.Order, catalogue []models.Cake, allTags []models.Tag, blockedDates []models.BlockedDate) {
@Layout(OrderTitle(order), templ.NopComponent, OrderForm(order, catalogue, allTags, blockedDates)) @Layout(OrderTitle(order), OrderForm(order, catalogue, allTags, blockedDates))
} }
templ OrderForm(order models.Order, catalogue []models.Cake, allTags []models.Tag, blockedDates []models.BlockedDate) { templ OrderForm(order models.Order, catalogue []models.Cake, allTags []models.Tag, blockedDates []models.BlockedDate) {

81
server/templates/orders.templ
View file

@ -7,17 +7,17 @@ import (
) )
templ OrdersPage(first, last, today, tomorrow, special string, counts models.OrderCounts, cakeCounts []models.CakeCount, orders []models.Order) { templ OrdersPage(first, last, today, tomorrow, special string, counts models.OrderCounts, cakeCounts []models.CakeCount, orders []models.Order) {
@Layout("Panel główny", DateForm(first, last, today, tomorrow, special), OrdersMain(counts, cakeCounts, orders, first, last, special)) @Layout("Panel główny", OrdersMain(counts, cakeCounts, orders, first, last, special, today, tomorrow))
} }
templ DateForm(first, last, today, tomorrow, special string) { templ DateForm(first, last, today, tomorrow, special string) {
<div class="horizontal-group"> <div class="horizontal-group">
<div class="preset-group"> <div class="preset-group">
<a href={ templ.URL("/orders?from=" + today + "&to=" + today + "&special=" + special) } hx-get={ templ.URL("/orders?from=" + today + "&to=" + today + "&special=" + special) } hx-target="#results-pane" class="preset-btn">Dzisiaj</a> <a href={ templ.URL("/orders?from=" + today + "&to=" + today + "&special=" + special) } hx-get={ templ.URL("/orders?from=" + today + "&to=" + today + "&special=" + special) } hx-target="#orders-results" class="preset-btn">Dzisiaj</a>
<a href={ templ.URL("/orders?from=" + tomorrow + "&to=" + tomorrow + "&special=" + special) } hx-get={ templ.URL("/orders?from=" + tomorrow + "&to=" + tomorrow + "&special=" + special) } hx-target="#results-pane" class="preset-btn">Jutro</a> <a href={ templ.URL("/orders?from=" + tomorrow + "&to=" + tomorrow + "&special=" + special) } hx-get={ templ.URL("/orders?from=" + tomorrow + "&to=" + tomorrow + "&special=" + special) } hx-target="#orders-results" class="preset-btn">Jutro</a>
<a href={ templ.URL("/orders?special=" + special) } hx-get={ templ.URL("/orders?special=" + special) } hx-target="#results-pane" class="preset-btn">W tym tygodniu</a> <a href={ templ.URL("/orders?special=" + special) } hx-get={ templ.URL("/orders?special=" + special) } hx-target="#orders-results" class="preset-btn">W tym tygodniu</a>
</div> </div>
<form method="GET" action="/orders" class="horizontal-group" hx-get="/orders" hx-target="#results-pane" hx-trigger="change, keyup delay:500ms"> <form method="GET" action="/orders" class="horizontal-group" hx-get="/orders" hx-target="#orders-results" hx-trigger="change, keyup delay:500ms">
<label>Od</label> <label>Od</label>
<input type="date" name="from" value={ first }/> <input type="date" name="from" value={ first }/>
<label>Do</label> <label>Do</label>
@ -27,32 +27,31 @@ templ DateForm(first, last, today, tomorrow, special string) {
</div> </div>
} }
templ OrdersMain(counts models.OrderCounts, cakeCounts []models.CakeCount, orders []models.Order, first, last, special string) { templ OrdersMain(counts models.OrderCounts, cakeCounts []models.CakeCount, orders []models.Order, first, last, special, today, tomorrow string) {
<div class="metrics-grid"> @DateForm(first, last, today, tomorrow, special)
<div> <div class="metric">
<span class="label"> <span class="label">
<span class="material-symbols-outlined">receipt_long</span> <span class="material-symbols-outlined">receipt_long</span>
Aktywne Aktywne
</span> </span>
<span class="value">{ strconv.Itoa(counts.Active) }</span> <span class="value">{ strconv.Itoa(counts.Active) }</span>
<span class="change">Wszystkie niezrealizowane</span> <span class="change">Wszystkie niezrealizowane</span>
</div>
<div>
<span class="label">
<span class="material-symbols-outlined">today</span>
Na dziś
</span>
<span class="value">{ strconv.Itoa(counts.DueToday) }</span>
<span class="change">Do zrobienia</span>
</div>
</div> </div>
<div id="results-pane"> <div class="metric">
<span class="label">
<span class="material-symbols-outlined">today</span>
Na dziś
</span>
<span class="value">{ strconv.Itoa(counts.DueToday) }</span>
<span class="change">Do zrobienia</span>
</div>
<div id="orders-results">
@OrdersContent(orders, cakeCounts, first, last, special) @OrdersContent(orders, cakeCounts, first, last, special)
</div> </div>
} }
templ OrdersContent(orders []models.Order, cakeCounts []models.CakeCount, first, last, special string) { templ OrdersContent(orders []models.Order, cakeCounts []models.CakeCount, first, last, special string) {
<section class="card"> <section class="card" id="orders-card">
<header> <header>
<h2> <h2>
<span class="material-symbols-outlined">list_alt</span> <span class="material-symbols-outlined">list_alt</span>
@ -60,9 +59,9 @@ templ OrdersContent(orders []models.Order, cakeCounts []models.CakeCount, first,
</h2> </h2>
<div class="header-actions"> <div class="header-actions">
<div class="preset-group"> <div class="preset-group">
<a href={ templ.URL("/orders?special=true&from=" + first + "&to=" + last) } hx-get={ templ.URL("/orders?special=true&from=" + first + "&to=" + last) } hx-target="#results-pane" <a href={ templ.URL("/orders?special=true&from=" + first + "&to=" + last) } hx-get={ templ.URL("/orders?special=true&from=" + first + "&to=" + last) } hx-target="#orders-results"
class={ "preset-btn", templ.KV("active", special == "true") }>Torty</a> class={ "preset-btn", templ.KV("active", special == "true") }>Torty</a>
<a href={ templ.URL("/orders?from=" + first + "&to=" + last) } hx-get={ templ.URL("/orders?from=" + first + "&to=" + last) } hx-target="#results-pane" <a href={ templ.URL("/orders?from=" + first + "&to=" + last) } hx-get={ templ.URL("/orders?from=" + first + "&to=" + last) } hx-target="#orders-results"
class={ "preset-btn", templ.KV("active", special != "true") }>Wszystkie</a> class={ "preset-btn", templ.KV("active", special != "true") }>Wszystkie</a>
</div> </div>
<div class="search"> <div class="search">
@ -158,25 +157,33 @@ templ OrderRow(order models.Order) {
} }
templ CakeBreakdown(cakeCounts []models.CakeCount) { templ CakeBreakdown(cakeCounts []models.CakeCount) {
<section class="card"> <section class="card" id="breakdown-card">
<header> <header>
<h2> <h2>
<span class="material-symbols-outlined">cake</span> <span class="material-symbols-outlined">cake</span>
Zapotrzebowanie Zapotrzebowanie
</h2> </h2>
</header> </header>
<div> <table>
<ul class="breakdown-list"> <thead>
<tr>
<th>Nazwa</th>
<th class="text-right">Ilość</th>
</tr>
</thead>
<tbody>
for _, cc := range cakeCounts { for _, cc := range cakeCounts {
<li class="breakdown-item"> <tr>
<span>{ cc.Name }</span> <td>{ cc.Name }</td>
<span class="breakdown-amount">{ strconv.Itoa(cc.Amount) }</span> <td class="text-right font-bold">{ strconv.Itoa(cc.Amount) }</td>
</li> </tr>
} }
if len(cakeCounts) == 0 { if len(cakeCounts) == 0 {
<li class="breakdown-empty">Brak ciast w tym okresie</li> <tr>
<td colspan="2" class="empty-state">Brak ciast w tym okresie</td>
</tr>
} }
</ul> </tbody>
</div> </table>
</section> </section>
} }