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 {
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" {
@ -100,7 +100,7 @@ func (h *Server) cakes(r *http.Request) (templ.Component, int, error) {
}
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
@ -114,7 +114,7 @@ func (h *Server) cake(r *http.Request) (templ.Component, int, error) {
return nil, http.StatusInternalServerError, err
}
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
}
@ -135,7 +135,7 @@ func (h *Server) cake(r *http.Request) (templ.Component, int, error) {
}
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
@ -148,7 +148,7 @@ func (h *Server) blocked(r *http.Request) (templ.Component, int, error) {
}
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
@ -171,7 +171,7 @@ func (h *Server) order(r *http.Request) (templ.Component, int, error) {
url := strings.Split(r.URL.Path, "/")
if len(url) < 3 || url[2] == "" {
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
}
@ -187,7 +187,7 @@ func (h *Server) order(r *http.Request) (templ.Component, int, error) {
}
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

42
server/static/components.css
View file

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

14
server/static/layout.css
View file

@ -108,11 +108,21 @@ main {
.main-content {
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;
flex-direction: column;
gap: var(--space-md);
min-height: 0;
flex: 1;
}
@media (max-width: 64em) {

2
server/static/order.js
View file

@ -265,7 +265,7 @@ function toggleCakeTagFilter(btn) {
activeCakeTags.push(tag);
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++) {
if (activeCakeTags.length === 0) { rows[i].classList.remove('hide'); continue; }
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) {
@Layout("Terminy zablokowane", templ.NopComponent, BlockedMain(blocked))
@Layout("Terminy zablokowane", BlockedMain(blocked))
}
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) {
@Layout(CakeTitle(cake), templ.NopComponent, CakeForm(cake, allTags))
@Layout(CakeTitle(cake), CakeForm(cake, allTags))
}
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) {
@Layout("Katalog", templ.NopComponent, CakesMain(cakes, allTags))
@Layout("Katalog", CakesMain(cakes, allTags))
}
templ CakesMain(cakes []models.Cake, allTags []models.Tag) {
<section class="card">
<section class="card" id="cakes-card">
<header>
<h2>
<span class="material-symbols-outlined">inventory_2</span>
@ -30,10 +30,9 @@ templ CakesMain(cakes []models.Cake, allTags []models.Tag) {
}
</div>
}
<table class="data-table" id="cakes-table">
<table class="data-table">
<thead>
<tr>
<th></th>
<th>Nazwa</th>
<th>SKU</th>
<th>Tagi</th>
@ -44,11 +43,6 @@ templ CakesMain(cakes []models.Cake, allTags []models.Tag) {
<tbody>
for _, c := range cakes {
<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="text-muted">#{ strconv.Itoa(c.ID) }</td>
<td>

2
server/templates/confirmation.templ
View file

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

18
server/templates/layout.templ
View file

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

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) {
@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) {
<div class="horizontal-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=" + 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?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?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="#orders-results" class="preset-btn">Jutro</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>
<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>
<input type="date" name="from" value={ first }/>
<label>Do</label>
@ -27,32 +27,31 @@ templ DateForm(first, last, today, tomorrow, special string) {
</div>
}
templ OrdersMain(counts models.OrderCounts, cakeCounts []models.CakeCount, orders []models.Order, first, last, special string) {
<div class="metrics-grid">
<div>
<span class="label">
<span class="material-symbols-outlined">receipt_long</span>
Aktywne
</span>
<span class="value">{ strconv.Itoa(counts.Active) }</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>
templ OrdersMain(counts models.OrderCounts, cakeCounts []models.CakeCount, orders []models.Order, first, last, special, today, tomorrow string) {
@DateForm(first, last, today, tomorrow, special)
<div class="metric">
<span class="label">
<span class="material-symbols-outlined">receipt_long</span>
Aktywne
</span>
<span class="value">{ strconv.Itoa(counts.Active) }</span>
<span class="change">Wszystkie niezrealizowane</span>
</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)
</div>
}
templ OrdersContent(orders []models.Order, cakeCounts []models.CakeCount, first, last, special string) {
<section class="card">
<section class="card" id="orders-card">
<header>
<h2>
<span class="material-symbols-outlined">list_alt</span>
@ -60,9 +59,9 @@ templ OrdersContent(orders []models.Order, cakeCounts []models.CakeCount, first,
</h2>
<div class="header-actions">
<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>
<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>
</div>
<div class="search">
@ -158,25 +157,33 @@ templ OrderRow(order models.Order) {
}
templ CakeBreakdown(cakeCounts []models.CakeCount) {
<section class="card">
<section class="card" id="breakdown-card">
<header>
<h2>
<span class="material-symbols-outlined">cake</span>
Zapotrzebowanie
</h2>
</header>
<div>
<ul class="breakdown-list">
<table>
<thead>
<tr>
<th>Nazwa</th>
<th class="text-right">Ilość</th>
</tr>
</thead>
<tbody>
for _, cc := range cakeCounts {
<li class="breakdown-item">
<span>{ cc.Name }</span>
<span class="breakdown-amount">{ strconv.Itoa(cc.Amount) }</span>
</li>
<tr>
<td>{ cc.Name }</td>
<td class="text-right font-bold">{ strconv.Itoa(cc.Amount) }</td>
</tr>
}
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>
</div>
</tbody>
</table>
</section>
}