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

117
server/get.go
View file

@ -19,11 +19,11 @@ func weekInterval(t time.Time) (firstDay, lastDay time.Time) {
return monday, sunday
}
func (h *Server) orders(r *http.Request) (templ.Component, int, error) {
func parseDateRange(r *http.Request) (first, last time.Time) {
now := time.Now()
weekFirst, weekLast := weekInterval(now)
first, last := weekFirst, weekLast
first, last = weekFirst, weekLast
if from := r.URL.Query().Get("from"); from != "" {
if t, err := time.Parse(config.DateFormat, from); err == nil {
first = t
@ -34,23 +34,89 @@ func (h *Server) orders(r *http.Request) (templ.Component, int, error) {
last = t
}
}
today := now.Format(config.DateFormat)
tomorrow := now.AddDate(0, 0, 1).Format(config.DateFormat)
orders, err := h.s.GetOrders(first, last)
return templates.OrdersPage(first.Format(config.DateFormat), last.Format(config.DateFormat), today, tomorrow, orders), http.StatusOK, err
return
}
func (h *Server) cakes(_ *http.Request) (templ.Component, int, error) {
data, err := h.s.GetCakes()
return templates.CakesPage(data), http.StatusOK, err
func filterOrdersWithSpecialCakes(orders []models.Order) []models.Order {
var out []models.Order
for _, o := range orders {
if len(o.SpecialCakes) > 0 {
out = append(out, o)
}
}
return out
}
func (h *Server) orders(r *http.Request) (templ.Component, int, error) {
first, last := parseDateRange(r)
now := time.Now()
today := now.Format(config.DateFormat)
tomorrow := now.AddDate(0, 0, 1).Format(config.DateFormat)
specialFilter := r.URL.Query().Get("special")
orders, err := h.s.GetOrders(first, last)
if err != nil {
return nil, http.StatusInternalServerError, err
}
if specialFilter == "true" {
orders = filterOrdersWithSpecialCakes(orders)
}
cakeCounts, err := h.s.GetCakeCounts(first, last)
if err != nil {
return nil, http.StatusInternalServerError, err
}
firstStr := first.Format(config.DateFormat)
lastStr := last.Format(config.DateFormat)
if r.Header.Get("HX-Target") == "main" {
counts, err := h.s.GetOrderCounts()
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
}
if r.Header.Get("HX-Request") == "true" {
return templates.OrdersContent(orders, cakeCounts, firstStr, lastStr, specialFilter), http.StatusOK, nil
}
counts, err := h.s.GetOrderCounts()
if err != nil {
return nil, http.StatusInternalServerError, err
}
return templates.OrdersPage(firstStr, lastStr, today, tomorrow, specialFilter, counts, cakeCounts, orders), http.StatusOK, nil
}
func (h *Server) cakes(r *http.Request) (templ.Component, int, error) {
cakes, err := h.s.GetCakes()
if err != nil {
return nil, http.StatusInternalServerError, err
}
tags, err := h.s.GetTags()
if err != nil {
return nil, http.StatusInternalServerError, err
}
if r.Header.Get("HX-Request") == "true" {
return templates.MainContent("Katalog", templ.NopComponent, templates.CakesMain(cakes, tags)), http.StatusOK, nil
}
return templates.CakesPage(cakes, tags), http.StatusOK, nil
}
func (h *Server) cake(r *http.Request) (templ.Component, int, error) {
url := strings.Split(r.URL.Path, "/")
if len(url) < 3 || url[2] == "" {
return templates.CakePage(models.Cake{}), http.StatusOK, nil
tags, err := h.s.GetTags()
if err != nil {
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.CakePage(models.Cake{}, tags), http.StatusOK, nil
}
id, err := strconv.Atoi(url[2])
@ -63,19 +129,34 @@ func (h *Server) cake(r *http.Request) (templ.Component, int, error) {
return nil, http.StatusNotFound, err
}
return templates.CakePage(data), http.StatusOK, nil
tags, err := h.s.GetTags()
if err != nil {
return nil, http.StatusInternalServerError, err
}
if r.Header.Get("HX-Request") == "true" {
return templates.MainContent(templates.CakeTitle(data), templ.NopComponent, templates.CakeForm(data, tags)), http.StatusOK, nil
}
return templates.CakePage(data, tags), http.StatusOK, nil
}
func (h *Server) order(r *http.Request) (templ.Component, int, error) {
var err error
catalogue, err := h.s.GetCakes()
if err != nil {
return nil, http.StatusInternalServerError, err
}
tags, err := h.s.GetTags()
if err != nil {
return nil, http.StatusInternalServerError, err
}
url := strings.Split(r.URL.Path, "/")
if len(url) < 3 || url[2] == "" {
return templates.OrderPage(models.Order{Date: time.Now()}, catalogue), http.StatusOK, nil
if r.Header.Get("HX-Request") == "true" {
return templates.MainContent("Nowe zamówienie", templ.NopComponent, templates.OrderForm(models.Order{Date: time.Now()}, catalogue, tags)), http.StatusOK, nil
}
return templates.OrderPage(models.Order{Date: time.Now()}, catalogue, tags), http.StatusOK, nil
}
id, err := strconv.Atoi(url[2])
@ -88,5 +169,9 @@ func (h *Server) order(r *http.Request) (templ.Component, int, error) {
return nil, http.StatusNotFound, err
}
return templates.OrderPage(order, catalogue), http.StatusOK, nil
if r.Header.Get("HX-Request") == "true" {
return templates.MainContent(templates.OrderTitle(order), templ.NopComponent, templates.OrderForm(order, catalogue, tags)), http.StatusOK, nil
}
return templates.OrderPage(order, catalogue, tags), http.StatusOK, nil
}

80
server/post.go
View file

@ -29,6 +29,22 @@ func (h *Server) postCake(r *http.Request) (templ.Component, int, error) {
if err != nil {
return nil, http.StatusBadRequest, err
}
for _, idStr := range r.Form["tag"] {
tagID, err := strconv.Atoi(idStr)
if err != nil {
continue
}
n.Tags = append(n.Tags, models.Tag{ID: tagID})
}
if newTag := strings.TrimSpace(r.FormValue("new_tag")); newTag != "" {
tagID, err := h.s.CreateTag(newTag)
if err != nil {
return nil, http.StatusInternalServerError, err
}
n.Tags = append(n.Tags, models.Tag{ID: tagID, Name: newTag})
}
n.ID, err = h.s.SaveCake(n)
return templates.Confirmation("Potwierdzone", n.ID), http.StatusAccepted, err
}
@ -67,6 +83,47 @@ func (h *Server) postOrder(r *http.Request) (templ.Component, int, error) {
n.Cakes = append(n.Cakes, e)
}
specialNames := r.Form["special_name[]"]
specialPrices := r.Form["special_price[]"]
specialSizes := r.Form["special_size[]"]
specialShapes := r.Form["special_shape[]"]
specialFlavours := r.Form["special_flavour[]"]
specialNotes := r.Form["special_notes[]"]
specialTags := r.Form["special_tags[]"]
specialNewTags := r.Form["special_new_tag[]"]
for i := range specialNames {
price, err := models.ParsePrice(specialPrices[i])
if err != nil {
continue
}
var tags []models.Tag
if i < len(specialTags) && specialTags[i] != "" {
for _, idStr := range strings.Split(specialTags[i], ",") {
id, err := strconv.Atoi(strings.TrimSpace(idStr))
if err == nil {
tags = append(tags, models.Tag{ID: id})
}
}
}
if newTag := strings.TrimSpace(safeStr(specialNewTags, i)); newTag != "" {
tagID, err := h.s.CreateTag(newTag)
if err == nil {
tags = append(tags, models.Tag{ID: tagID, Name: newTag})
}
}
n.SpecialCakes = append(n.SpecialCakes, models.SpecialCake{
Name: specialNames[i],
Price: price,
Size: safeStr(specialSizes, i),
Shape: safeStr(specialShapes, i),
Flavour: safeStr(specialFlavours, i),
Notes: safeStr(specialNotes, i),
Tags: tags,
})
}
n.Accepted = time.Now()
n.Name = strings.TrimSpace(r.FormValue("name"))
n.Surname = strings.TrimSpace(r.FormValue("surname"))
@ -77,3 +134,26 @@ func (h *Server) postOrder(r *http.Request) (templ.Component, int, error) {
n.ID, err = h.s.SaveOrder(n)
return templates.Confirmation("Potwierdzone", n.ID), http.StatusAccepted, err
}
func safeStr(s []string, i int) string {
if i < len(s) {
return s[i]
}
return ""
}
func (h *Server) updateStatus(r *http.Request) (templ.Component, int, error) {
id, err := strconv.Atoi(r.PathValue("id"))
if err != nil {
return nil, http.StatusBadRequest, err
}
order, err := h.s.GetOrder(id)
if err != nil {
return nil, http.StatusNotFound, err
}
order.Status = r.FormValue("status")
if _, err := h.s.SaveOrder(order); err != nil {
return nil, http.StatusInternalServerError, err
}
return templates.OrderRow(order), http.StatusOK, nil
}

1
server/server.go
View file

@ -36,6 +36,7 @@ func New(store *store.Store) *Server {
mux.HandleFunc("GET /cake/", server.render(server.cake))
mux.HandleFunc("GET /cakes", server.render(server.cakes))
mux.HandleFunc("POST /order/", server.render(server.postOrder))
mux.HandleFunc("POST /order/{id}/status", server.render(server.updateStatus))
mux.HandleFunc("POST /cake/", server.render(server.postCake))
fs := http.FileServerFS(static)

4
server/static/basket.css
View file

@ -42,6 +42,10 @@
white-space: nowrap;
}
.basket-actions .action-btn .material-symbols-outlined {
font-size: 1rem;
}
.remove {
color: var(--error);
cursor: pointer;

31
server/static/card.css
View file

@ -55,7 +55,7 @@
/* ========== METRICS GRID ========== */
.metrics-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
> div {
@ -128,21 +128,21 @@
gap: 1rem;
flex: 1;
min-height: 0;
}
> div:first-child {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.order-left {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
> aside {
width: 20rem;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.order-aside {
width: 20rem;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
@media (max-width: 64em) {
@ -150,7 +150,7 @@
flex-direction: column;
}
.split-pane > aside {
.order-aside {
width: 100%;
}
}
@ -237,5 +237,6 @@
.text-muted {
color: var(--on-surface-variant);
font-weight: 400;
}
}

353
server/static/component.css
View file

@ -60,61 +60,31 @@
}
}
/* ========== STATUS CHIPS ========== */
.status-chip {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
border-radius: var(--border-radius-full);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
&.ready,
&.done {
background: var(--success-bg);
color: var(--success-text);
}
&.decorating {
background: var(--warning-bg);
color: var(--warning-text);
}
&.baking {
background: var(--danger-bg);
color: var(--danger-text);
}
&.queued {
background: var(--info-bg);
color: var(--info-text);
}
&.accepted {
background: #fff3e0;
color: #e65100;
}
}
/* ========== BADGE PILLS ========== */
.badge-pill {
/* ========== TAG CHIPS ========== */
.tag-chip {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
border-radius: var(--border-radius-full);
font-size: 0.75rem;
font-weight: 600;
color: var(--on-surface-variant);
background: var(--surface-container-high);
border: 1px solid var(--outline-variant);
cursor: pointer;
user-select: none;
transition: all var(--transition);
&.signature {
background: var(--primary-container);
color: var(--primary);
&.sm {
font-size: 0.625rem;
padding: 0.125rem 0.375rem;
}
&.seasonal {
background: var(--surface-container-high);
color: var(--on-surface);
&:hover,
&.active {
color: var(--primary);
border-color: var(--primary);
background: var(--primary-container);
}
}
@ -138,46 +108,154 @@
}
}
/* ========== PAGINATION ========== */
.pagination {
display: flex;
gap: 0.25rem;
align-items: center;
.btn {
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--outline-variant);
border-radius: var(--border-radius-sm);
background: transparent;
cursor: pointer;
color: var(--on-surface-variant);
transition: all var(--transition);
font-size: 0.75rem;
&:hover {
background: var(--surface-container-low);
}
&:disabled {
opacity: 0.5;
cursor: default;
}
&.active {
background: var(--primary);
color: var(--on-primary);
border-color: var(--primary);
}
.material-symbols-outlined {
font-size: 1rem;
}
}
/* ========== OVERLAY / DRAWER ========== */
.overlay {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
}
.overlay.open {
display: flex;
justify-content: flex-end;
}
.overlay-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
}
.overlay-panel {
position: relative;
width: 22rem;
max-width: 100vw;
height: 100%;
background: var(--surface);
display: flex;
flex-direction: column;
box-shadow: -0.25rem 0 1.5rem rgba(0, 0, 0, 0.15);
animation: slideIn 0.2s ease;
}
@keyframes slideIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.overlay-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--outline-variant);
}
.overlay-header h2 {
font-size: 1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.overlay-header .close-btn {
background: none;
border: none;
cursor: pointer;
color: var(--on-surface-variant);
padding: 0.25rem;
border-radius: var(--border-radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
.overlay-header .close-btn:hover {
background: var(--surface-container-high);
color: var(--on-surface);
}
.overlay-body {
flex: 1;
overflow-y: auto;
padding: 1.25rem;
}
.overlay-footer {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
padding: 1rem 1.25rem;
border-top: 1px solid var(--outline-variant);
}
/* ========== CARD HEADER ACTIONS ========== */
.header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* ========== TORT BADGE ========== */
.tort-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border-radius: var(--border-radius-full);
background: var(--primary-container);
color: var(--primary);
flex-shrink: 0;
vertical-align: middle;
margin-right: 0.25rem;
}
.tort-badge .material-symbols-outlined {
font-size: 0.75rem;
}
/* ========== SEARCH INPUT UTILITY ========== */
.search-wrapper { position: relative; width: 11.25rem; }
.search-icon { position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 1rem; color: var(--on-surface-variant); pointer-events: none; }
.search-input { height: 1.75rem; padding-left: 1.75rem; padding-right: 0.5rem; font-size: 0.75rem; border: 1px solid var(--outline-variant); border-radius: var(--border-radius-sm); background: var(--surface-container-lowest); color: var(--on-surface); outline: none; width: 100%; }
/* ========== STATUS SELECT ========== */
.status-select { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.375rem; border: 1px solid var(--outline-variant); border-radius: var(--border-radius-sm); background: var(--surface); color: var(--on-surface); cursor: pointer; }
/* ========== FONT UTILITIES ========== */
.font-bold { font-weight: 700; }
/* ========== CAKE BREAKDOWN LIST ========== */
.breakdown-list { list-style: none; padding: 0; margin: 0; }
.breakdown-item { display: flex; justify-content: space-between; padding: 0.375rem 0; border-bottom: 1px solid var(--outline-variant); }
.breakdown-amount { font-weight: 600; }
.breakdown-empty { color: var(--on-surface-variant); font-size: 0.75rem; }
/* ========== FILTER BAR (catalogue/cakes page) ========== */
.filter-bar { padding: 0.5rem 1rem; border-bottom: 1px solid var(--outline-variant); display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.filter-bar .filter-label { font-size: 0.75rem; font-weight: 600; color: var(--on-surface-variant); align-self: center; margin-right: 0.25rem; }
/* ========== CATALOGUE TAG ROW ========== */
.tag-row { padding: 0.5rem 1rem 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
/* ========== CATALOGUE SCROLL ========== */
.catalogue-scroll { overflow-y: auto; padding: 1rem; }
/* ========== BASKET ACTIONS ========== */
.basket-actions { display: flex; flex-direction: column; gap: 0.125rem; }
/* ========== TAG GROUP ========== */
.tag-group { margin-top: 0.25rem; display: flex; flex-wrap: wrap; gap: 0.125rem; }
/* ========== OVERLAY FORM ========== */
.overlay-form { display: flex; flex-direction: column; gap: 0.75rem; }
/* ========== TAG CONTAINER ========== */
.tag-grid { display: flex; flex-wrap: wrap; gap: 0.25rem; }
/* ========== FONT UTILITIES ========== */
.font-medium { font-weight: 500; }
/* ========== FLEX UTILITIES ========== */
.grow { flex: 1; }
.icon.sm { width: 1.75rem; height: 1.75rem; }
.icon.sm .material-symbols-outlined { font-size: 1rem; }
/* ========== RESULTS PANE ========== */
#results-pane { display: flex; flex-direction: column; gap: 1rem; }
/* ========== CONFIRMATION ========== */
section.confirmation {
@ -189,109 +267,14 @@ section.confirmation {
gap: 0.5rem;
text-align: center;
.success-icon {
font-size: 3rem;
color: var(--success-text);
}
h2 {
font-size: 1.25rem;
font-weight: 600;
color: var(--on-surface);
}
}
/* ========== LOGIN PAGE ========== */
.login-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 100dvh;
background-color: var(--surface-container-low);
}
.login-card {
background-color: var(--surface);
border: 1px solid var(--outline-variant);
border-radius: var(--border-radius-md);
padding: 2.5rem;
box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 25rem;
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0.25rem;
background: linear-gradient(
90deg,
var(--primary),
var(--primary-container)
);
}
.icon {
display: flex;
justify-content: center;
margin-bottom: 1.5rem;
color: var(--primary);
}
h1 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--on-background);
text-align: center;
letter-spacing: -0.02em;
}
form {
display: flex;
flex-direction: column;
gap: 1rem;
}
label {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--on-surface-variant);
}
input {
padding: 0.5rem 0.75rem;
border: 1px solid var(--outline-variant);
border-radius: var(--border-radius-sm);
font-size: 1rem;
font-family: inherit;
background-color: var(--surface);
color: var(--on-surface);
transition: border-color var(--transition);
&:focus {
outline: none;
border-color: var(--primary);
}
}
button {
padding: 0.5rem 2rem;
background-color: var(--primary);
color: #fff;
border: none;
border-radius: var(--border-radius-md);
font-size: 1rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: opacity var(--transition);
margin-top: 0.5rem;
&:hover {
opacity: 0.9;
}
}
}

34
server/static/form.css
View file

@ -81,6 +81,40 @@ form {
}
}
/* ========== TOGGLE GROUP ========== */
.toggle-group {
display: flex;
height: 2rem;
border-radius: var(--border-radius-sm);
border: 1px solid var(--outline-variant);
overflow: hidden;
}
.toggle-btn {
flex: 1;
border: none;
background: var(--surface-container-lowest);
color: var(--on-surface-variant);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
padding: 0 0.5rem;
}
.toggle-btn:not(:last-child) {
border-right: 1px solid var(--outline-variant);
}
.toggle-btn.active {
background: var(--primary);
color: var(--on-primary);
}
.toggle-btn:not(.active):hover {
background: var(--surface-container-high);
}
.form-actions {
display: flex;
justify-content: flex-end;

112
server/static/layout.css
View file

@ -11,23 +11,54 @@ aside.sidebar {
flex-direction: column;
padding: 1rem;
z-index: 40;
transition: width 0.2s ease, padding 0.2s ease;
.brand {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
padding: 0 0.5rem;
h1 {
font-size: 1.25rem;
font-weight: 700;
color: var(--primary);
letter-spacing: -0.01em;
line-height: 1.3;
.collapse-btn {
background: none;
border: none;
cursor: pointer;
color: var(--on-surface-variant);
padding: 0.25rem;
border-radius: var(--border-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
&:hover {
background: var(--surface-container-high);
color: var(--on-surface);
}
.material-symbols-outlined {
font-size: 1.25rem;
}
}
p {
font-size: 0.75rem;
color: var(--on-surface-variant);
margin-top: 0.25rem;
.brand-text {
overflow: hidden;
white-space: nowrap;
h1 {
font-size: 1.25rem;
font-weight: 700;
color: var(--primary);
letter-spacing: -0.01em;
line-height: 1.3;
}
p {
font-size: 0.75rem;
color: var(--on-surface-variant);
margin-top: 0.25rem;
}
}
}
@ -140,6 +171,47 @@ aside.sidebar {
}
}
/* ---------- COLLAPSED ---------- */
body.sidebar-collapsed aside.sidebar {
width: 3.5rem;
padding: 0.5rem;
.brand .brand-text {
display: none;
}
.cta {
padding: 0;
width: 2.5rem;
height: 2.5rem;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
span:not(.material-symbols-outlined) {
display: none;
}
}
nav a.link {
justify-content: center;
padding: 0.75rem 0.5rem;
span:not(.material-symbols-outlined) {
display: none;
}
}
footer .user .info {
display: none;
}
}
body.sidebar-collapsed main {
margin-left: 3.5rem;
width: calc(100% - 3.5rem);
}
/* ========== MAIN LAYOUT ========== */
main {
margin-left: var(--sidebar-width);
@ -147,6 +219,7 @@ main {
display: flex;
flex-direction: column;
height: 100dvh;
transition: margin-left 0.2s ease, width 0.2s ease;
}
/* ========== TOP NAVBAR ========== */
@ -228,14 +301,13 @@ header.topnav {
}
@media (max-width: 48em) {
aside.sidebar {
body:not(.sidebar-collapsed) aside.sidebar {
width: 3.5rem;
padding: 0.5rem;
.brand h1,
.brand p,
nav a.link span:not(.material-symbols-outlined),
.brand .brand-text,
.cta span:not(.material-symbols-outlined),
nav a.link span:not(.material-symbols-outlined),
.user .info {
display: none;
}
@ -258,6 +330,18 @@ header.topnav {
}
}
body.sidebar-collapsed aside.sidebar {
width: 0;
padding: 0;
overflow: hidden;
border-right: none;
}
body.sidebar-collapsed main {
margin-left: 0;
width: 100%;
}
main {
margin-left: 3.5rem;
width: calc(100% - 3.5rem);

200
server/static/order.js
View file

@ -1,3 +1,144 @@
var editingSpecialId = null;
function openSpecialCakeOverlay() {
editingSpecialId = null;
document.getElementById("sc-overlay-title").textContent = "Dodaj tort specjalny";
document.getElementById("sc-name").value = "";
document.getElementById("sc-price").value = "";
document.getElementById("sc-size").value = "";
document.getElementById("sc-shape").value = "";
document.getElementById("sc-flavour").value = "";
document.getElementById("sc-notes").value = "";
document.getElementById("sc-new-tag").value = "";
var cbs = document.querySelectorAll(".sc-tag-cb");
for (var i = 0; i < cbs.length; i++) cbs[i].checked = false;
document.getElementById("sc-overlay").classList.add("open");
document.getElementById("sc-name").focus();
}
function closeSpecialCakeOverlay() {
document.getElementById("sc-overlay").classList.remove("open");
editingSpecialId = null;
}
function getOverlayFormData() {
return {
name: document.getElementById("sc-name").value.trim(),
price: document.getElementById("sc-price").value,
size: document.getElementById("sc-size").value.trim(),
shape: document.getElementById("sc-shape").value,
flavour: document.getElementById("sc-flavour").value.trim(),
notes: document.getElementById("sc-notes").value.trim(),
tagIds: (function() {
var ids = [];
var cbs = document.querySelectorAll(".sc-tag-cb:checked");
for (var i = 0; i < cbs.length; i++) ids.push(cbs[i].value);
return ids;
})(),
tagNames: (function() {
var names = [];
var cbs = document.querySelectorAll(".sc-tag-cb:checked");
for (var i = 0; i < cbs.length; i++)
names.push(cbs[i].closest(".tag-chip").textContent.trim());
return names;
})(),
newTag: document.getElementById("sc-new-tag").value.trim()
};
}
function buildSpecialCakeHTML(d) {
var parts = [];
if (d.size) parts.push(d.size);
if (d.flavour) parts.push(d.flavour);
if (d.shape === "round") parts.push("okragly");
else if (d.shape === "square") parts.push("kwadrat");
if (d.notes) parts.push("notatka: " + d.notes);
var detail = parts.length ? parts.join(", ") : "";
var tagHtml = d.tagNames.length > 0 || d.newTag ? '<div style="margin-top:0.25rem;display:flex;flex-wrap:wrap;gap:0.125rem">' : "";
for (var i = 0; i < d.tagNames.length; i++)
tagHtml += '<span class="tag-chip" style="font-size:0.625rem;padding:0.125rem 0.375rem">' + d.tagNames[i] + "</span>";
if (d.newTag)
tagHtml += '<span class="tag-chip" style="font-size:0.625rem;padding:0.125rem 0.375rem">' + d.newTag + "</span>";
if (d.tagNames.length > 0 || d.newTag) tagHtml += "</div>";
var priceVal = Number(d.price).toFixed(2);
var tagIdsStr = d.tagIds.join(",");
var html =
'<div style="flex:1;min-width:0;padding-right:0.5rem">' +
'<div class="name">' + d.name + '</div>' +
'<div class="detail">' + detail + '</div>' +
tagHtml +
'</div>' +
'<div class="price">' + priceVal + ' PLN</div>' +
'<div style="display:flex;flex-direction:column;gap:0.125rem">' +
'<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" style="font-size:1rem">close</span></button>' +
'</div>' +
'<input type="hidden" name="special_name[]" value="' + d.name + '">' +
'<input type="hidden" name="special_price[]" value="' + d.price + '">' +
'<input type="hidden" name="special_size[]" value="' + d.size + '">' +
'<input type="hidden" name="special_shape[]" value="' + d.shape + '">' +
'<input type="hidden" name="special_flavour[]" value="' + d.flavour + '">' +
'<input type="hidden" name="special_notes[]" value="' + d.notes + '">' +
'<input type="hidden" name="special_tags[]" value="' + tagIdsStr + '">';
if (d.newTag)
html += '<input type="hidden" name="special_new_tag[]" value="' + d.newTag + '">';
return html;
}
function saveSpecialCake() {
var d = getOverlayFormData();
if (!d.name) return;
if (editingSpecialId) {
var item = document.querySelector('#basket-items li[data-special-id="' + editingSpecialId + '"]');
if (item) {
item.innerHTML = buildSpecialCakeHTML(d);
}
} else {
d.id = Date.now();
var item = document.createElement("li");
item.setAttribute("data-special-id", d.id);
item.innerHTML = buildSpecialCakeHTML(d);
document.getElementById("basket-items").appendChild(item);
}
closeSpecialCakeOverlay();
updateTotals();
}
function editSpecialCake(btn) {
var item = btn.closest("li");
var id = item.getAttribute("data-special-id");
editingSpecialId = id;
document.getElementById("sc-overlay-title").textContent = "Edytuj tort specjalny";
var hidden = item.querySelectorAll('input[type="hidden"]');
var vals = {};
for (var i = 0; i < hidden.length; i++) {
var name = hidden[i].getAttribute("name");
vals[name] = hidden[i].value;
}
document.getElementById("sc-name").value = vals["special_name[]"] || "";
document.getElementById("sc-price").value = vals["special_price[]"] || "";
document.getElementById("sc-size").value = vals["special_size[]"] || "";
document.getElementById("sc-shape").value = vals["special_shape[]"] || "";
document.getElementById("sc-flavour").value = vals["special_flavour[]"] || "";
document.getElementById("sc-notes").value = vals["special_notes[]"] || "";
var currentTagIds = (vals["special_tags[]"] || "").split(",").filter(function(x) { return x; });
document.getElementById("sc-new-tag").value = "";
var cbs = document.querySelectorAll(".sc-tag-cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = currentTagIds.indexOf(cbs[i].value) >= 0;
}
document.getElementById("sc-overlay").classList.add("open");
document.getElementById("sc-name").focus();
}
function removeSpecialCake(btn) {
var item = btn.closest("li");
item.remove();
updateTotals();
}
function changeCake(id, name, price, delta) {
var input = document.querySelector('[name="cake[' + id + ']"]');
if (input != null) {
@ -55,20 +196,24 @@ var subtotal = 0;
function updatePrepaid() {
var paid = Number(document.querySelector('[name="paid"]')?.value || 0);
document.getElementById("paid-amount").innerText = paid + " PLN";
document.getElementById("total-price").innerText = subtotal - paid + " PLN";
document.getElementById("paid-amount").innerText = paid.toFixed(2) + " PLN";
document.getElementById("total-price").innerText = (subtotal - paid).toFixed(2) + " PLN";
}
function updateTotals() {
subtotal = 0;
var items = document.querySelectorAll("#basket-items li");
items.forEach(function (item) {
var priceText = item.querySelector(".detail").innerText;
var priceText = item.querySelector(".price").innerText;
var price = Number(priceText.split(" ")[0]);
var qty = Number(item.querySelector(".qty").innerText);
subtotal += price * qty;
if (item.hasAttribute("data-special-id")) {
subtotal += price;
} else {
var qty = Number(item.querySelector(".qty").innerText);
subtotal += price * qty;
}
});
document.getElementById("subtotal-price").innerText = subtotal + " PLN";
document.getElementById("subtotal-price").innerText = subtotal.toFixed(2) + " PLN";
updatePrepaid();
}
@ -77,11 +222,48 @@ function updateCatalogueQty(id, qty) {
if (el) el.innerText = qty;
}
function filterCatalogue(input) {
var query = input.value.toLowerCase();
var activeCatalogueTags = [];
function toggleCatalogueTagFilter(btn) {
var tag = btn.getAttribute("data-tag");
var idx = activeCatalogueTags.indexOf(tag);
if (idx >= 0) {
activeCatalogueTags.splice(idx, 1);
btn.classList.remove("active");
} else {
activeCatalogueTags.push(tag);
btn.classList.add("active");
}
applyCatalogueFilters();
}
function getCatalogueTextQuery() {
var input = document.querySelector(
'#catalogue-grid').closest('.card').querySelector('input[type="text"]'
);
return input ? input.value.toLowerCase() : "";
}
function applyCatalogueFilters() {
var query = getCatalogueTextQuery();
var items = document.querySelectorAll("#catalogue-grid > li");
items.forEach(function (item) {
var name = item.getAttribute("data-name").toLowerCase();
item.style.display = name.includes(query) ? "" : "none";
var matchesText = name.includes(query);
var matchesTags = true;
if (activeCatalogueTags.length > 0) {
var itemTags = (item.getAttribute("data-tags") || "").split(",");
for (var i = 0; i < activeCatalogueTags.length; i++) {
if (itemTags.indexOf(activeCatalogueTags[i]) < 0) {
matchesTags = false;
break;
}
}
}
item.style.display = matchesText && matchesTags ? "" : "none";
});
}
function filterCatalogue(input) {
applyCatalogueFilters();
}

21
server/templates/cake.templ
View file

@ -6,11 +6,11 @@ import (
"git.bronku.xyz/bronku/cake-order-tracker/models"
)
templ CakePage(cake models.Cake) {
@Layout(cakeTitle(cake), templ.NopComponent, CakeForm(cake))
templ CakePage(cake models.Cake, allTags []models.Tag) {
@Layout(CakeTitle(cake), templ.NopComponent, CakeForm(cake, allTags))
}
templ CakeForm(cake models.Cake) {
templ CakeForm(cake models.Cake, allTags []models.Tag) {
<div class="form-card">
<section class="card">
<header>
@ -33,6 +33,21 @@ templ CakeForm(cake models.Cake) {
<label>Cena</label>
<input class="form-input" type="number" name="price" min="0" value={ cake.Price.String() }/>
</div>
<div class="form-group">
<label>Tagi</label>
<div class="tag-grid">
for _, t := range allTags {
<label class="tag-chip">
<input type="checkbox" name="tag" value={ strconv.Itoa(t.ID) } style="display:none"
if cakeHasTag(cake.Tags, t.ID) { checked }/>
{ t.Name }
</label>
}
</div>
<div class="horizontal-group" style="margin-top:0.375rem">
<input class="form-input grow" type="text" name="new_tag" placeholder="Nowy tag..."/>
</div>
</div>
<div class="form-actions">
<a href="/cakes" class="btn outline">Anuluj</a>
<button type="submit" class="btn primary">

49
server/templates/cakes.templ
View file

@ -6,11 +6,11 @@ import (
"git.bronku.xyz/bronku/cake-order-tracker/models"
)
templ CakesPage(cakes []models.Cake) {
@Layout("Katalog", templ.NopComponent, CakesMain(cakes))
templ CakesPage(cakes []models.Cake, allTags []models.Tag) {
@Layout("Katalog", templ.NopComponent, CakesMain(cakes, allTags))
}
templ CakesMain(cakes []models.Cake) {
templ CakesMain(cakes []models.Cake, allTags []models.Tag) {
<section class="card">
<header>
<h2>
@ -22,27 +22,41 @@ templ CakesMain(cakes []models.Cake) {
Nowe ciasto
</a>
</header>
if len(allTags) > 0 {
<div class="filter-bar">
<span class="filter-label">Tagi:</span>
for _, t := range allTags {
<button type="button" class="tag-chip" data-tag={ t.Name } onclick="toggleCakeTagFilter(this)">{ t.Name }</button>
}
</div>
}
<div class="table-container">
<table class="data-table">
<table class="data-table" id="cakes-table">
<thead>
<tr>
<th style="width:2rem"></th>
<th>Nazwa</th>
<th>SKU</th>
<th>Tagi</th>
<th class="right">Cena bazowa</th>
<th class="center"></th>
</tr>
</thead>
<tbody>
for _, c := range cakes {
<tr>
<tr data-tags={ tagNames(c.Tags) }>
<td>
<div class="icon cake" style="width:1.75rem;height:1.75rem">
<span class="material-symbols-outlined" style="font-size:1rem">cake</span>
<div class="icon cake sm">
<span class="material-symbols-outlined">cake</span>
</div>
</td>
<td style="font-weight:500">{ c.Name }</td>
<td class="font-medium">{ c.Name }</td>
<td class="text-muted">#{ strconv.Itoa(c.ID) }</td>
<td>
for _, t := range c.Tags {
<span class="tag-chip">{ t.Name }</span>
}
</td>
<td class="text-right">{ c.Price.String() } PLN</td>
<td class="text-center">
<a href={ templ.URL("/cake/" + strconv.Itoa(c.ID)) } class="action-btn">
@ -55,4 +69,23 @@ templ CakesMain(cakes []models.Cake) {
</table>
</div>
</section>
<script>
var activeCakeTags = [];
function toggleCakeTagFilter(btn) {
var tag = btn.getAttribute('data-tag');
var idx = activeCakeTags.indexOf(tag);
if (idx >= 0) { activeCakeTags.splice(idx, 1); btn.classList.remove('active'); }
else { activeCakeTags.push(tag); btn.classList.add('active'); }
var rows = document.querySelectorAll('#cakes-table tbody tr');
for (var i = 0; i < rows.length; i++) {
if (activeCakeTags.length === 0) { rows[i].style.display = ''; continue; }
var rowTags = (rows[i].getAttribute('data-tags') || '').split(',');
var match = false;
for (var j = 0; j < activeCakeTags.length; j++) {
if (rowTags.indexOf(activeCakeTags[j]) >= 0) { match = true; break; }
}
rows[i].style.display = match ? '' : 'none';
}
}
</script>
}

2
server/templates/confirmation.templ
View file

@ -8,7 +8,7 @@ templ Confirmation(title string, id int) {
templ ConfirmationBody(id int) {
<section class="confirmation">
<span class="material-symbols-outlined" style="font-size:3rem;color:var(--success-text)">check_circle</span>
<span class="material-symbols-outlined success-icon">check_circle</span>
<h2>{ strconv.Itoa(id) } — zapisano</h2>
<a href="/orders" class="btn primary" style="margin-top:1rem">
<span class="material-symbols-outlined">arrow_back</span>

68
server/templates/helpers.go
View file

@ -8,46 +8,22 @@ import (
"git.bronku.xyz/bronku/cake-order-tracker/models"
)
func cakeTitle(cake models.Cake) string {
func CakeTitle(cake models.Cake) string {
if cake.ID != 0 {
return "Ciasto #" + strconv.Itoa(cake.ID)
}
return "Ciasto nowe"
}
func orderTitle(order models.Order) string {
func OrderTitle(order models.Order) string {
if order.ID != 0 {
return "Edytuj zamówienie #" + strconv.Itoa(order.ID)
}
return "Nowe zamówienie"
}
func countPending(orders []models.Order) int {
n := 0
for _, o := range orders {
if o.Status != "done" {
n++
}
}
return n
}
func countDone(orders []models.Order) int {
n := 0
for _, o := range orders {
if o.Status == "done" {
n++
}
}
return n
}
func estimateRevenue(orders []models.Order) models.Price {
var total models.Price
for _, o := range orders {
total += o.Total()
}
return total
func specialCakeDetail(sc models.SpecialCake) string {
return sc.Detail()
}
func cakeItemsDesc(cakes []models.Cake) string {
@ -61,6 +37,42 @@ func cakeItemsDesc(cakes []models.Cake) string {
return desc
}
func cakeHasTag(tags []models.Tag, id int) bool {
for _, t := range tags {
if t.ID == id {
return true
}
}
return false
}
func tagIDsComma(tags []models.Tag) string {
ids := make([]string, len(tags))
for i, t := range tags {
ids[i] = strconv.Itoa(t.ID)
}
return strings.Join(ids, ",")
}
func tagNames(tags []models.Tag) string {
names := make([]string, len(tags))
for i, t := range tags {
names[i] = t.Name
}
return strings.Join(names, ",")
}
func orderItemsDesc(order models.Order) string {
desc := cakeItemsDesc(order.Cakes)
for _, s := range order.SpecialCakes {
if desc != "" {
desc += ", "
}
desc += s.Name + " *"
}
return desc
}
func orderScript(order models.Order) string {
var b strings.Builder
b.WriteString("<script>")

52
server/templates/layout.templ
View file

@ -17,7 +17,7 @@ templ Layout(title string, header, main templ.Component) {
<aside class="sidebar">
@Nav()
</aside>
<main>
<main id="main">
<header class="topnav">
<h1>{ title }</h1>
@header
@ -27,16 +27,56 @@ templ Layout(title string, header, main templ.Component) {
</div>
</main>
<script>
function filterOrders(input) {
var q = input.value.toLowerCase();
var table = input.closest('.card').querySelector('.data-table');
if (!table) return;
var rows = table.querySelectorAll('tbody tr');
for (var i = 0; i < rows.length; i++) {
var id = rows[i].children[0].textContent.toLowerCase();
var customer = rows[i].children[1].textContent.toLowerCase();
rows[i].style.display = id.includes(q) || customer.includes(q) ? '' : 'none';
}
}
(function() {
var path = window.location.pathname;
var links = document.querySelectorAll('.link');
for (var i = 0; i < links.length; i++) {
if (links[i].getAttribute('href') === path) {
links[i].classList.add('active');
function setActiveLink() {
var path = window.location.pathname;
var links = document.querySelectorAll('.link');
for (var i = 0; i < links.length; i++) {
links[i].classList.toggle('active', links[i].getAttribute('href') === path);
}
}
function setSidebarState() {
var collapsed = localStorage.getItem('sidebarCollapsed') === 'true';
document.body.classList.toggle('sidebar-collapsed', collapsed);
}
setActiveLink();
setSidebarState();
document.addEventListener('htmx:afterSettle', setActiveLink);
})();
function toggleSidebar() {
var collapsed = document.body.classList.toggle('sidebar-collapsed');
localStorage.setItem('sidebarCollapsed', collapsed);
}
</script>
</body>
</html>
}
templ MainContent(title string, header, main templ.Component) {
<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>
</main>
}

15
server/templates/nav.templ
View file

@ -1,16 +1,25 @@
package templates
templ Nav() {
<a href="/order" class="cta">
<div class="brand">
<button type="button" class="collapse-btn" onclick="toggleSidebar()" title="Zwiń / Rozwiń">
<span class="material-symbols-outlined">menu</span>
</button>
<div class="brand-text">
<h1>Cake Order</h1>
<p>Tracker</p>
</div>
</div>
<a href="/order" class="cta" hx-get="/order" hx-target="#main" hx-push-url="true">
<span class="material-symbols-outlined">add</span>
<span>Nowe zamówienie</span>
</a>
<nav>
<a href="/orders" class="link">
<a href="/orders" class="link" hx-get="/orders" hx-target="#main" hx-push-url="true">
<span class="material-symbols-outlined">dashboard</span>
<span>Panel główny</span>
</a>
<a href="/cakes" class="link">
<a href="/cakes" class="link" hx-get="/cakes" hx-target="#main" hx-push-url="true">
<span class="material-symbols-outlined">inventory_2</span>
<span>Katalog</span>
</a>

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>
}

246
server/templates/orders.templ
View file

@ -6,147 +6,181 @@ import (
"git.bronku.xyz/bronku/cake-order-tracker/models"
)
templ OrdersPage(first, last, today, tomorrow string, orders []models.Order) {
@Layout("Panel główny", DateForm(first, last, today, tomorrow), OrdersMain(orders))
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))
}
templ DateForm(first, last, today, tomorrow string) {
templ DateForm(first, last, today, tomorrow, special string) {
<div class="horizontal-group" style="gap:0.5rem;flex-wrap:wrap">
<div class="preset-group">
<a href={ templ.URL("/orders?from=" + today + "&to=" + today) } class="preset-btn">Dzisiaj</a>
<a href={ templ.URL("/orders?from=" + tomorrow + "&to=" + tomorrow) } class="preset-btn">Jutro</a>
<a href="/orders" 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="#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>
</div>
<form method="GET" action="/orders" class="horizontal-group" style="align-items:center;gap:0.25rem">
<form method="GET" action="/orders" class="horizontal-group" style="align-items:center;gap:0.25rem" hx-get="/orders" hx-target="#results-pane" hx-trigger="change, keyup delay:500ms">
<label>Od</label>
<input type="date" name="from" value={ first }/>
<label>Do</label>
<input type="date" name="to" value={ last }/>
<button type="submit" class="btn primary sm">Filtruj</button>
<input type="hidden" name="special" value={ special }/>
</form>
</div>
}
templ OrdersMain(orders []models.Order) {
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>
Zamówienia dzisiaj
</span>
<span class="value">{ len(orders) }</span>
<span class="change positive">
<span class="material-symbols-outlined">arrow_upward</span>
Wszystkie aktywne
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">cake</span>
Do realizacji
</span>
<span class="value">{ strconv.Itoa(countPending(orders)) }</span>
<span class="change warning">
<span class="material-symbols-outlined">priority_high</span>
Oczekujące
</span>
</div>
<div>
<span class="label">
<span class="material-symbols-outlined">check_circle</span>
Gotowe do odbioru
</span>
<span class="value">{ strconv.Itoa(countDone(orders)) }</span>
<span class="change">Zrealizowane</span>
</div>
<div>
<span class="label">
<span class="material-symbols-outlined">payments</span>
Przychód (szac.)
</span>
<span class="value">{ estimateRevenue(orders).String() } PLN</span>
<span class="change positive">
<span class="material-symbols-outlined">trending_up</span>
W bieżącym miesiącu
<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 id="results-pane">
@OrdersContent(orders, cakeCounts, first, last, special)
</div>
}
templ OrdersContent(orders []models.Order, cakeCounts []models.CakeCount, first, last, special string) {
<section class="card">
<header>
<h2>
<span class="material-symbols-outlined">list_alt</span>
Aktywne zamówienia
</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 type="text" style="height:1.75rem;padding-left:1.75rem;padding-right:0.5rem;font-size:0.75rem;border:1px solid var(--outline-variant);border-radius:var(--border-radius-sm);background:var(--surface-container-lowest);color:var(--on-surface);outline:none;width:100%" placeholder="Szukaj..." oninput="filterOrders(this)"/>
<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"
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"
class={ "preset-btn", templ.KV("active", special != "true") }>Wszystkie</a>
</div>
<div class="search-wrapper">
<span class="material-symbols-outlined search-icon">search</span>
<input type="text" class="search-input" placeholder="Szukaj..." oninput="filterOrders(this)"/>
</div>
</div>
</header>
<div class="table-container" id="results-table">
@OrdersTable(orders)
<div class="table-container">
<table class="data-table">
<thead>
<tr>
<th>ID zamówienia</th>
<th>Klient</th>
<th>Data odbioru</th>
<th>Pozycje</th>
<th class="right">Suma</th>
<th class="center">Status</th>
<th class="center"></th>
</tr>
</thead>
<tbody>
for _, o := range orders {
@OrderRow(o)
}
</tbody>
</table>
</div>
</section>
<script>
function filterOrders(input) {
var q = input.value.toLowerCase();
var rows = document.querySelectorAll('#results-table tbody tr');
for (var i = 0; i < rows.length; i++) {
var id = rows[i].children[0].textContent.toLowerCase();
var customer = rows[i].children[1].textContent.toLowerCase();
rows[i].style.display = id.includes(q) || customer.includes(q) ? '' : 'none';
}
}
</script>
@CakeBreakdown(cakeCounts)
}
templ OrdersTable(orders []models.Order) {
<table class="data-table">
<thead>
<tr>
<th>ID zamówienia</th>
<th>Klient</th>
<th>Data odbioru</th>
<th>Pozycje</th>
<th class="right">Suma</th>
<th class="center">Status</th>
<th class="center"></th>
</tr>
</thead>
<tbody>
for _, o := range orders {
<tr>
<td><a href={ templ.URL("/order/" + strconv.Itoa(o.ID)) } class="order-id">#{ strconv.Itoa(o.ID) }</a></td>
<td class="customer">{ o.Surname } { o.Name }<br/><span class="text-muted" style="font-size:0.75rem;font-weight:400">{ o.Phone }</span></td>
<td class="text-muted">{ o.Date.Format("2006-01-02 15:04") }</td>
<td>
<span class="truncate" title={ cakeItemsDesc(o.Cakes) }>
for i, c := range o.Cakes {
if i > 0 {
{ ", " }
}
{ c.Name } (x{ strconv.Itoa(c.Amount) })
}
</span>
</td>
<td class="text-right" style="font-weight:700">{ o.Total().String() } PLN</td>
<td class="text-center">
<span class={ "status-chip " + o.Status }>
if o.Status == "accepted" {
Przyjęte
} else if o.Status == "done" {
Gotowe
} else {
Oczekujące
}
</span>
</td>
<td class="text-center">
<a href={ templ.URL("/order/" + strconv.Itoa(o.ID)) } class="action-btn">
<span class="material-symbols-outlined">edit</span>
</a>
</td>
</tr>
templ OrderRow(order models.Order) {
<tr>
<td><a href={ templ.URL("/order/" + strconv.Itoa(order.ID)) } class="order-id">#{ strconv.Itoa(order.ID) }</a></td>
<td class="customer">{ order.Surname } { order.Name }<br/><span class="text-muted">{ order.Phone }</span></td>
<td class="text-muted">{ order.Date.Format("2006-01-02 15:04") }</td>
<td>
if len(order.SpecialCakes) > 0 {
<span class="tort-badge" title="Tort specjalny">
<span class="material-symbols-outlined">cake</span>
</span>
}
</tbody>
</table>
<span class="truncate" title={ orderItemsDesc(order) }>
for i, c := range order.Cakes {
if i > 0 {
{ ", " }
}
{ c.Name } (x{ strconv.Itoa(c.Amount) })
}
for _, s := range order.SpecialCakes {
{ ", " }
{ s.Name }*
}
</span>
</td>
<td class="text-right font-bold">{ order.Total().String() } PLN</td>
<td class="text-center">
<select name="status" class="status-select"
hx-post={ templ.URL("/order/" + strconv.Itoa(order.ID) + "/status") }
hx-trigger="change"
hx-target="closest tr"
hx-swap="outerHTML">
<option value="pending"
if order.Status == "pending" {
selected
}
>Oczekujące</option>
<option value="accepted"
if order.Status == "accepted" {
selected
}
>Przyjęte</option>
<option value="production"
if order.Status == "production" {
selected
}
>W realizacji</option>
<option value="ready"
if order.Status == "ready" {
selected
}
>Do odbioru</option>
<option value="picked_up"
if order.Status == "picked_up" {
selected
}
>Wydane</option>
</select>
</td>
<td class="text-center">
<a href={ templ.URL("/order/" + strconv.Itoa(order.ID)) } class="action-btn">
<span class="material-symbols-outlined">edit</span>
</a>
</td>
</tr>
}
templ CakeBreakdown(cakeCounts []models.CakeCount) {
<section class="card">
<header>
<h2>
<span class="material-symbols-outlined">cake</span>
Zapotrzebowanie
</h2>
</header>
<div>
<ul class="breakdown-list">
for _, cc := range cakeCounts {
<li class="breakdown-item">
<span>{ cc.Name }</span>
<span class="breakdown-amount">{ strconv.Itoa(cc.Amount) }</span>
</li>
}
if len(cakeCounts) == 0 {
<li class="breakdown-empty">Brak ciast w tym okresie</li>
}
</ul>
</div>
</section>
}

79
server/templates/overlay.templ Normal file
View file

@ -0,0 +1,79 @@
package templates
import (
"strconv"
"git.bronku.xyz/bronku/cake-order-tracker/models"
)
templ SpecialCakeOverlay(allTags []models.Tag) {
<div id="sc-overlay" class="overlay">
<div class="overlay-backdrop" onclick="closeSpecialCakeOverlay()"></div>
<div class="overlay-panel">
<div class="overlay-header">
<h2>
<span class="material-symbols-outlined">cake_add</span>
<span id="sc-overlay-title">Dodaj tort specjalny</span>
</h2>
<button type="button" class="close-btn" onclick="closeSpecialCakeOverlay()">
<span class="material-symbols-outlined">close</span>
</button>
</div>
<div class="overlay-body">
<div class="overlay-form">
<div class="form-group">
<label>Nazwa *</label>
<input class="form-input" type="text" id="sc-name" placeholder="Nazwa tortu"/>
</div>
<div class="form-group">
<label>Cena *</label>
<input class="form-input" type="number" id="sc-price" min="0" step="0.01" placeholder="0.00"/>
</div>
<div class="form-group">
<label>Wielkość</label>
<input class="form-input" type="text" id="sc-size" placeholder="np. 20cm, 30x40"/>
</div>
<div class="form-group">
<label>Kształt</label>
<select class="form-input" id="sc-shape">
<option value="">—</option>
<option value="round">Okrągły</option>
<option value="square">Kwadrat</option>
</select>
</div>
<div class="form-group">
<label>Smak</label>
<input class="form-input" type="text" id="sc-flavour" placeholder="np. czekoladowy"/>
</div>
<div class="form-group">
<label>Notatki</label>
<input class="form-input" type="text" id="sc-notes" placeholder="Dodatkowe informacje"/>
</div>
if len(allTags) > 0 {
<div class="form-group">
<label>Tagi</label>
<div class="tag-grid" id="sc-overlay-tags">
for _, t := range allTags {
<label class="tag-chip">
<input type="checkbox" class="sc-tag-cb" value={ strconv.Itoa(t.ID) } style="display:none"/>
{ t.Name }
</label>
}
</div>
<div class="horizontal-group" style="margin-top:0.375rem">
<input class="form-input grow" type="text" id="sc-new-tag" placeholder="Nowy tag..."/>
</div>
</div>
}
</div>
</div>
<div class="overlay-footer">
<button type="button" class="btn outline" onclick="closeSpecialCakeOverlay()">Anuluj</button>
<button type="button" class="btn primary" onclick="saveSpecialCake()">
<span class="material-symbols-outlined">check</span>
Zapisz
</button>
</div>
</div>
</div>
}