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

move to templ

Browse source
This commit is contained in:
bronku 2026-06-11 08:48:01 +02:00
parent 31a33cc220
commit bb32802324
34 changed files with 1011 additions and 528 deletions
Download patch file Download diff file Expand all files Collapse all files

33
server/templates/cake.gohtml
View file

@ -1,33 +0,0 @@
{{define "title"}}
Ciasto {{if .ID}}#{{.ID}}{{else}}nowe{{end}}
{{end}}
{{define "main"}}
<div class="form-card">
<section class="card">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">cake</span>
{{if .ID}}Edytuj ciasto #{{.ID}}{{else}}Nowe ciasto{{end}}
</h2>
</div>
<form method="post" class="card-body">
<input type="hidden" name="id" value="{{.ID}}">
<div class="form-group">
<label>Nazwa *</label>
<input class="form-input" type="text" name="name" value="{{.Name}}" placeholder="Nazwa ciasta">
</div>
<div class="form-group">
<label>Cena</label>
<input class="form-input" type="number" name="price" min="0" value="{{.Price}}">
</div>
<div class="form-actions">
<a href="/cakes" class="btn btn-outline">Anuluj</a>
<button type="submit" class="btn btn-primary">
<span class="material-symbols-outlined">save</span>
Zapisz ciasto
</button>
</div>
</form>
</section>
</div>
{{end}}

46
server/templates/cake.templ Normal file
View file

@ -0,0 +1,46 @@
package templates
import (
"strconv"
"git.bronku.xyz/bronku/cake-order-tracker/models"
)
templ CakePage(cake models.Cake) {
@Layout(cakeTitle(cake), CakeForm(cake))
}
templ CakeForm(cake models.Cake) {
<div class="form-card">
<section class="card">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">cake</span>
if cake.ID != 0 {
Edytuj ciasto #{ strconv.Itoa(cake.ID) }
} else {
Nowe ciasto
}
</h2>
</div>
<form method="post" class="card-body">
<input type="hidden" name="id" value={ strconv.Itoa(cake.ID) } />
<div class="form-group">
<label>Nazwa *</label>
<input class="form-input" type="text" name="name" value={ cake.Name } placeholder="Nazwa ciasta" />
</div>
<div class="form-group">
<label>Cena</label>
<input class="form-input" type="number" name="price" min="0" value={ strconv.Itoa(cake.Price) } />
</div>
<div class="form-actions">
<a href="/cakes" class="btn btn-outline">Anuluj</a>
<button type="submit" class="btn btn-primary">
<span class="material-symbols-outlined">save</span>
Zapisz ciasto
</button>
</div>
</form>
</section>
</div>
}

61
server/templates/cakes.gohtml
View file

@ -1,61 +0,0 @@
{{define "title"}}
Katalog
{{end}}
{{define "main"}}
<section class="card">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">inventory_2</span>
Zarządzanie katalogiem
</h2>
<a href="/cake" class="btn btn-primary btn-sm">
<span class="material-symbols-outlined">add</span>
Nowe ciasto
</a>
</div>
<div class="table-container">
<table class="data-table">
<thead>
<tr>
<th style="width:32px"></th>
<th>Nazwa</th>
<th>SKU</th>
<th class="right">Cena bazowa</th>
<th class="center"></th>
</tr>
</thead>
<tbody>
{{range .}}
<tr>
<td>
<div class="catalogue-item-icon icon-cake" style="width:28px;height:28px">
<span class="material-symbols-outlined" style="font-size:14px">cake</span>
</div>
</td>
<td style="font-weight:500">{{.Name}}</td>
<td class="text-on-surface-variant">#{{.ID}}</td>
<td class="text-right">{{.Price}} PLN</td>
<td class="text-center">
<a href="/cake/{{.ID}}" class="action-btn">
<span class="material-symbols-outlined">edit</span>
</a>
</td>
</tr>
{{end}}
</tbody>
</table>
</div>
<div class="table-footer">
<span>Pokazuje 1-{{len .}} z {{len .}}</span>
<div class="pagination">
<button class="pagination-btn" disabled>
<span class="material-symbols-outlined">chevron_left</span>
</button>
<button class="pagination-btn active">1</button>
<button class="pagination-btn" disabled>
<span class="material-symbols-outlined">chevron_right</span>
</button>
</div>
</div>
</section>
{{end}}

70
server/templates/cakes.templ Normal file
View file

@ -0,0 +1,70 @@
package templates
import (
"strconv"
"git.bronku.xyz/bronku/cake-order-tracker/models"
)
templ CakesPage(cakes []models.Cake) {
@Layout("Katalog", CakesMain(cakes))
}
templ CakesMain(cakes []models.Cake) {
<section class="card">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">inventory_2</span>
Zarządzanie katalogiem
</h2>
<a href="/cake" class="btn btn-primary btn-sm">
<span class="material-symbols-outlined">add</span>
Nowe ciasto
</a>
</div>
<div class="table-container">
<table class="data-table">
<thead>
<tr>
<th style="width:32px"></th>
<th>Nazwa</th>
<th>SKU</th>
<th class="right">Cena bazowa</th>
<th class="center"></th>
</tr>
</thead>
<tbody>
for _, c := range cakes {
<tr>
<td>
<div class="catalogue-item-icon icon-cake" style="width:28px;height:28px">
<span class="material-symbols-outlined" style="font-size:14px">cake</span>
</div>
</td>
<td style="font-weight:500">{ c.Name }</td>
<td class="text-on-surface-variant">#{ strconv.Itoa(c.ID) }</td>
<td class="text-right">{ strconv.Itoa(c.Price) } PLN</td>
<td class="text-center">
<a href={ templ.URL("/cake/" + strconv.Itoa(c.ID)) } class="action-btn">
<span class="material-symbols-outlined">edit</span>
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="table-footer">
<span>Pokazuje 1-{ strconv.Itoa(len(cakes)) } z { strconv.Itoa(len(cakes)) }</span>
<div class="pagination">
<button class="pagination-btn" disabled>
<span class="material-symbols-outlined">chevron_left</span>
</button>
<button class="pagination-btn active">1</button>
<button class="pagination-btn" disabled>
<span class="material-symbols-outlined">chevron_right</span>
</button>
</div>
</div>
</section>
}

13
server/templates/confirmation.gohtml
View file

@ -1,13 +0,0 @@
{{define "title"}}
Potwierdzone
{{end}}
{{define "main"}}
<div class="confirmation">
<span class="material-symbols-outlined" style="font-size:48px;color:var(--success-text)">check_circle</span>
<h2>{{.ID}} — zapisano</h2>
<a href="/orders" class="btn btn-primary" style="margin-top:16px">
<span class="material-symbols-outlined">arrow_back</span>
Powrót do zamówień
</a>
</div>
{{end}}

18
server/templates/confirmation.templ Normal file
View file

@ -0,0 +1,18 @@
package templates
import "strconv"
templ Confirmation(title string, id int) {
@Layout(title, ConfirmationBody(id))
}
templ ConfirmationBody(id int) {
<div class="confirmation">
<span class="material-symbols-outlined" style="font-size:48px;color:var(--success-text)">check_circle</span>
<h2>{ strconv.Itoa(id) } — zapisano</h2>
<a href="/orders" class="btn btn-primary" style="margin-top:16px">
<span class="material-symbols-outlined">arrow_back</span>
Powrót do zamówień
</a>
</div>
}

84
server/templates/helpers.go Normal file
View file

@ -0,0 +1,84 @@
package templates
import (
"fmt"
"strconv"
"strings"
"git.bronku.xyz/bronku/cake-order-tracker/models"
)
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 {
if order.ID != 0 {
return "Edytuj zamówienie #" + strconv.Itoa(order.ID)
}
return "Nowe zamówienie"
}
func orderSubtotal(order models.Order) int {
sub := 0
for _, c := range order.Cakes {
sub += c.Price * c.Amount
}
return sub
}
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) int {
total := 0
for _, o := range orders {
for _, c := range o.Cakes {
total += c.Price * c.Amount
}
}
return total
}
func cakeItemsDesc(cakes []models.Cake) string {
desc := ""
for i, c := range cakes {
if i > 0 {
desc += ", "
}
desc += c.Name + " (x" + strconv.Itoa(c.Amount) + ")"
}
return desc
}
func orderScript(order models.Order) string {
var b strings.Builder
b.WriteString("<script>")
if order.ID != 0 {
for _, c := range order.Cakes {
b.WriteString(fmt.Sprintf("updateCatalogueQty(%d,%d);", c.ID, c.Amount))
}
}
b.WriteString("updateTotals();</script>")
return b.String()
}

43
server/templates/layout.templ Normal file
View file

@ -0,0 +1,43 @@
package templates
templ Layout(title string, main templ.Component) {
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{ title } — Zamówienia ciast</title>
<link rel="stylesheet" href="/static/fonts/inter.css" />
<link rel="stylesheet" href="/static/fonts/material.css" />
<script src="/static/htmx2.04.js" defer></script>
<script src="/static/order.js"></script>
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<aside class="sidebar">
@Nav()
</aside>
<div class="app-body">
<header class="topnav">
<div class="topnav-left">
<h1 class="topnav-title">{ title }</h1>
</div>
</header>
<div class="main-content">
@main
</div>
</div>
<script>
(function() {
var path = window.location.pathname;
var links = document.querySelectorAll('.sidebar-link');
for (var i = 0; i < links.length; i++) {
if (links[i].getAttribute('href') === path) {
links[i].classList.add('active');
}
}
})();
</script>
</body>
</html>
}

43
server/templates/layout/layout.gohtml
View file

@ -1,43 +0,0 @@
{{define "layout"}}
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{template "title" .}} — Zamówienia ciast</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,0&display=swap" rel="stylesheet">
<script src="/static/htmx2.04.js" defer></script>
<script src="/static/order.js"></script>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<aside class="sidebar">
{{template "nav" .}}
</aside>
<div class="app-body">
<header class="topnav">
<div class="topnav-left">
<h1 class="topnav-title">{{template "title" .}}</h1>
</div>
</header>
<div class="main-content">
{{template "main" .}}
</div>
</div>
<script>
(function() {
var path = window.location.pathname;
var links = document.querySelectorAll('.sidebar-link');
for (var i = 0; i < links.length; i++) {
if (links[i].getAttribute('href') === path) {
links[i].classList.add('active');
}
}
})();
</script>
</body>
</html>
{{end}}

16
server/templates/layout/nav.gohtml
View file

@ -1,16 +0,0 @@
{{define "nav"}}
<a href="/order" class="sidebar-cta">
<span class="material-symbols-outlined">add</span>
<span>Nowe zamówienie</span>
</a>
<div class="sidebar-nav">
<a href="/orders" class="sidebar-link">
<span class="material-symbols-outlined">dashboard</span>
<span>Panel główny</span>
</a>
<a href="/cakes" class="sidebar-link">
<span class="material-symbols-outlined">inventory_2</span>
<span>Katalog</span>
</a>
</div>
{{end}}

18
server/templates/nav.templ Normal file
View file

@ -0,0 +1,18 @@
package templates
templ Nav() {
<a href="/order" class="sidebar-cta">
<span class="material-symbols-outlined">add</span>
<span>Nowe zamówienie</span>
</a>
<div class="sidebar-nav">
<a href="/orders" class="sidebar-link">
<span class="material-symbols-outlined">dashboard</span>
<span>Panel główny</span>
</a>
<a href="/cakes" class="sidebar-link">
<span class="material-symbols-outlined">inventory_2</span>
<span>Katalog</span>
</a>
</div>
}

151
server/templates/order.gohtml
View file

@ -1,151 +0,0 @@
{{define "title"}}
{{if .Order.ID}}
Edytuj zamówienie #{{.Order.ID}}
{{else}}
Nowe zamówienie
{{end}}
{{end}}
{{define "main"}}
<form method="post" class="split-pane" style="flex:1;min-height:0">
{{$catalogue := .Catalogue}}
{{with .Order}}
<input type="hidden" name="id" value="{{.ID}}">
<div class="split-pane-left">
<section class="card">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">person_add</span>
Dane klienta
</h2>
</div>
<div class="card-body">
<div class="form-grid">
<div class="form-group">
<label>Imię *</label>
<input class="form-input" type="text" name="name" value="{{.Name}}" placeholder="Jan">
</div>
<div class="form-group">
<label>Nazwisko *</label>
<input class="form-input" type="text" name="surname" value="{{.Surname}}" placeholder="Kowalski">
</div>
<div class="form-group">
<label>Telefon</label>
<input class="form-input" type="tel" name="phone" value="{{.Phone}}" placeholder="+48 123 456 789">
</div>
<div class="form-group">
<label>Lokalizacja</label>
<select class="form-input" name="location">
<option {{if eq .Location "Kartuzy"}}selected{{end}} value="Kartuzy">Kartuzy</option>
<option {{if eq .Location "Somonino"}}selected{{end}} value="Somonino">Somonino</option>
</select>
</div>
<div class="form-group">
<label>Data dostawy *</label>
<input class="form-input" type="date" name="date" value="{{.Date.Format "2006-01-02"}}">
</div>
<div class="form-group">
<label>Zaliczka</label>
<input class="form-input" type="number" name="paid" min="0" value="{{.Paid}}">
</div>
<div class="form-group" style="grid-column:span 2">
<label>Uwagi</label>
<input class="form-input" type="text" placeholder="Alergie, specjalne życzenia...">
</div>
</div>
</div>
</section>
<section class="card" style="flex:1;min-height:200px">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">inventory_2</span>
Katalog produktów
</h2>
<div class="topnav-search" style="width:180px">
<span class="material-symbols-outlined" style="left:6px;font-size:14px">search</span>
<input class="form-input" style="height:28px;padding-left:26px;font-size:12px" type="text" placeholder="Filtruj produkty..." oninput="filterCatalogue(this)">
</div>
</div>
<div class="card-body" style="overflow-y:auto">
<div class="catalogue-grid" id="catalogue-grid">
{{range $catalogue}}
<div class="catalogue-item" data-name="{{.Name}}">
<div class="catalogue-item-top">
<div class="catalogue-item-icon icon-cake">
<span class="material-symbols-outlined" style="font-size:16px">cake</span>
</div>
<div style="min-width:0">
<div class="catalogue-item-name">{{.Name}}</div>
<div class="catalogue-item-price">{{.Price}} PLN</div>
</div>
</div>
<div class="catalogue-item-actions">
<button type="button" class="qty-btn qty-minus" onclick="changeCake({{.ID}},'{{.Name}}',{{.Price}},-1)">
<span class="material-symbols-outlined">remove</span>
</button>
<span class="qty-value" id="qty-{{.ID}}">0</span>
<button type="button" class="qty-btn qty-plus" onclick="changeCake({{.ID}},'{{.Name}}',{{.Price}},1)">
<span class="material-symbols-outlined">add</span>
</button>
</div>
</div>
{{end}}
</div>
</div>
</section>
</div>
<aside class="split-pane-right">
<section class="card" style="flex:1;display:flex;flex-direction:column">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">receipt_long</span>
Podsumowanie
</h2>
</div>
<div class="summary-lineitems" id="basket_items">
{{$sub := 0}}
{{range .Cakes}}
{{$sub = add $sub (mult .Price .Amount)}}
<div class="summary-item" data-cake-id="{{.ID}}">
<div class="summary-item-info">
<div class="summary-item-name cake-name">{{.Name}}</div>
<div class="summary-item-detail cake-price">{{.Price}} PLN × <span class="cake-qty">{{.Amount}}</span></div>
</div>
<div class="summary-item-price cake-total">{{.Total}} PLN</div>
<button type="button" class="summary-item-remove" onclick="removeCake(this)">
<span class="material-symbols-outlined">close</span>
</button>
<input type="hidden" name="cake[{{.ID}}]" value="{{.Amount}}">
</div>
{{end}}
</div>
<div class="summary-totals">
<div class="summary-total-row">
<span>Subtotal</span>
<span id="subtotal-price">{{$sub}} PLN</span>
</div>
<div class="summary-total-row">
<span>Zaliczka</span>
<span id="paid-amount">{{.Paid}} PLN</span>
</div>
<div class="summary-total-row total">
<span>Do zapłaty</span>
<span id="total-price">{{add $sub (mult .Paid -1)}} PLN</span>
</div>
<button type="submit" class="btn-finalize">
<span class="material-symbols-outlined">check_circle</span>
Finalizuj zamówienie
</button>
</div>
</section>
</aside>
{{end}}
</form>
<script>
{{if .Order.ID}}
{{range .Order.Cakes}}
updateCatalogueQty({{.ID}}, {{.Amount}});
{{end}}
{{end}}
updateTotals();
</script>
{{end}}

144
server/templates/order.templ Normal file
View file

@ -0,0 +1,144 @@
package templates
import (
"strconv"
"git.bronku.xyz/bronku/cake-order-tracker/models"
)
templ OrderPage(order models.Order, catalogue []models.Cake) {
@Layout(orderTitle(order), OrderForm(order, catalogue))
}
templ OrderForm(order models.Order, catalogue []models.Cake) {
<form method="post" class="split-pane" style="flex:1;min-height:0">
<input type="hidden" name="id" value={ strconv.Itoa(order.ID) } />
<div class="split-pane-left">
<section class="card">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">person_add</span>
Dane klienta
</h2>
</div>
<div class="card-body">
<div class="form-grid">
<div class="form-group">
<label>Imię *</label>
<input class="form-input" type="text" name="name" value={ order.Name } placeholder="Jan" />
</div>
<div class="form-group">
<label>Nazwisko *</label>
<input class="form-input" type="text" name="surname" value={ order.Surname } placeholder="Kowalski" />
</div>
<div class="form-group">
<label>Telefon</label>
<input class="form-input" type="tel" name="phone" value={ order.Phone } placeholder="+48 123 456 789" />
</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>
<div class="form-group">
<label>Data dostawy *</label>
<input class="form-input" type="date" name="date" value={ order.Date.Format("2006-01-02") } />
</div>
<div class="form-group">
<label>Zaliczka</label>
<input class="form-input" type="number" name="paid" min="0" value={ strconv.Itoa(order.Paid) } />
</div>
<div class="form-group" style="grid-column:span 2">
<label>Uwagi</label>
<input class="form-input" type="text" placeholder="Alergie, specjalne życzenia..." />
</div>
</div>
</div>
</section>
<section class="card" style="flex:1;min-height:200px">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">inventory_2</span>
Katalog produktów
</h2>
<div class="topnav-search" style="width:180px">
<span class="material-symbols-outlined" style="left:6px;font-size:14px">search</span>
<input class="form-input" style="height:28px;padding-left:26px;font-size:12px" type="text" placeholder="Filtruj produkty..." oninput="filterCatalogue(this)" />
</div>
</div>
<div class="card-body" style="overflow-y:auto">
<div class="catalogue-grid" id="catalogue-grid">
for _, c := range catalogue {
<div class="catalogue-item" data-name={ c.Name }>
<div class="catalogue-item-top">
<div class="catalogue-item-icon icon-cake">
<span class="material-symbols-outlined" style="font-size:16px">cake</span>
</div>
<div style="min-width:0">
<div class="catalogue-item-name">{ c.Name }</div>
<div class="catalogue-item-price">{ strconv.Itoa(c.Price) } PLN</div>
</div>
</div>
<div class="catalogue-item-actions">
<button type="button" class="qty-btn qty-minus" onclick={ templ.JSFuncCall("changeCake", c.ID, c.Name, c.Price, -1) }>
<span class="material-symbols-outlined">remove</span>
</button>
<span class="qty-value" id={ "qty-" + strconv.Itoa(c.ID) }>0</span>
<button type="button" class="qty-btn qty-plus" onclick={ templ.JSFuncCall("changeCake", c.ID, c.Name, c.Price, 1) }>
<span class="material-symbols-outlined">add</span>
</button>
</div>
</div>
}
</div>
</div>
</section>
</div>
<aside class="split-pane-right">
<section class="card" style="flex:1;display:flex;flex-direction:column">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">receipt_long</span>
Podsumowanie
</h2>
</div>
<div class="summary-lineitems" id="basket_items">
for _, c := range order.Cakes {
<div class="summary-item" data-cake-id={ strconv.Itoa(c.ID) }>
<div class="summary-item-info">
<div class="summary-item-name cake-name">{ c.Name }</div>
<div class="summary-item-detail cake-price">{ strconv.Itoa(c.Price) } PLN × <span class="cake-qty">{ strconv.Itoa(c.Amount) }</span></div>
</div>
<div class="summary-item-price cake-total">{ strconv.Itoa(c.Total()) } PLN</div>
<button type="button" class="summary-item-remove" onclick="removeCake(this)">
<span class="material-symbols-outlined">close</span>
</button>
<input type="hidden" name={ "cake[" + strconv.Itoa(c.ID) + "]" } value={ strconv.Itoa(c.Amount) } />
</div>
}
</div>
<div class="summary-totals">
<div class="summary-total-row">
<span>Subtotal</span>
<span id="subtotal-price">{ strconv.Itoa(orderSubtotal(order)) } PLN</span>
</div>
<div class="summary-total-row">
<span>Zaliczka</span>
<span id="paid-amount">{ strconv.Itoa(order.Paid) } PLN</span>
</div>
<div class="summary-total-row total">
<span>Do zapłaty</span>
<span id="total-price">{ strconv.Itoa(orderSubtotal(order) - order.Paid) } PLN</span>
</div>
<button type="submit" class="btn-finalize">
<span class="material-symbols-outlined">check_circle</span>
Finalizuj zamówienie
</button>
</div>
</section>
</aside>
</form>
@templ.Raw(orderScript(order))
}

126
server/templates/orders.gohtml
View file

@ -1,126 +0,0 @@
{{define "title"}}
Panel główny
{{end}}
{{define "main"}}
<div class="metrics-grid">
<div class="metric-card">
<span class="metric-label">
<span class="material-symbols-outlined">receipt_long</span>
Zamówienia dzisiaj
</span>
<span class="metric-value">{{len .Orders}}</span>
<span class="metric-change positive">
<span class="material-symbols-outlined">arrow_upward</span>
Wszystkie aktywne
</span>
</div>
<div class="metric-card">
<span class="metric-label">
<span class="material-symbols-outlined">cake</span>
Do realizacji
</span>
<span class="metric-value">
{{$pending := 0}}
{{range .Orders}}{{if ne .Status "done"}}{{$pending = add $pending 1}}{{end}}{{end}}
{{$pending}}
</span>
<span class="metric-change warning">
<span class="material-symbols-outlined">priority_high</span>
Oczekujące
</span>
</div>
<div class="metric-card">
<span class="metric-label">
<span class="material-symbols-outlined">check_circle</span>
Gotowe do odbioru
</span>
<span class="metric-value">
{{$done := 0}}
{{range .Orders}}{{if eq .Status "done"}}{{$done = add $done 1}}{{end}}{{end}}
{{$done}}
</span>
<span class="metric-change">Zrealizowane</span>
</div>
<div class="metric-card">
<span class="metric-label">
<span class="material-symbols-outlined">payments</span>
Przychód (szac.)
</span>
<span class="metric-value">
{{$total := 0}}
{{range .Orders}}{{range .Cakes}}{{$total = add $total (mult .Price .Amount)}}{{end}}{{end}}
{{$total}} PLN
</span>
<span class="metric-change positive">
<span class="material-symbols-outlined">trending_up</span>
W bieżącym miesiącu
</span>
</div>
</div>
<section class="card">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">list_alt</span>
Aktywne zamówienia
</h2>
<div style="display:flex;align-items:center;gap:8px">
<form hx-get="/orders/search" hx-target="#results-table" hx-trigger="keyup delay:500ms, change" style="display:flex;align-items:center;gap:8px">
<div class="form-group" style="flex-direction:row;align-items:center;gap:4px">
<label style="font-size:11px;white-space:nowrap">Od</label>
<input class="form-input" style="width:140px" type="date" value="{{.First}}" name="from">
</div>
<div class="form-group" style="flex-direction:row;align-items:center;gap:4px">
<label style="font-size:11px;white-space:nowrap">Do</label>
<input class="form-input" style="width:140px" type="date" value="{{.Last}}" name="to">
</div>
</form>
</div>
</div>
<div class="table-container" id="results-table">
{{template "orders-table" .Orders}}
</div>
</section>
{{end}}
{{define "orders-table"}}
<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>
{{range .}}
<tr>
<td><a href="/order/{{.ID}}" class="order-id">#{{.ID}}</a></td>
<td class="customer-name">{{.Surname}} {{.Name}}<br><span class="text-on-surface-variant" style="font-size:11px;font-weight:400">{{.Phone}}</span></td>
<td class="text-on-surface-variant">{{.Date.Format "2006-01-02 15:04"}}</td>
<td>
<span class="truncate" title="{{range .Cakes}}{{.Name}} (x{{.Amount}}), {{end}}">
{{range $i, $c := .Cakes}}{{if $i}}, {{end}}{{.Name}} (x{{.Amount}}){{end}}
</span>
</td>
<td class="text-right" style="font-weight:700">{{.Total}} PLN</td>
<td class="text-center">
<span class="status-chip {{.Status}}">
{{if eq .Status "accepted"}}Przyjęte
{{else if eq .Status "done"}}Gotowe
{{else}}Oczekujące{{end}}
</span>
</td>
<td class="text-center">
<a href="/order/{{.ID}}" class="action-btn">
<span class="material-symbols-outlined">edit</span>
</a>
</td>
</tr>
{{end}}
</tbody>
</table>
{{end}}

133
server/templates/orders.templ Normal file
View file

@ -0,0 +1,133 @@
package templates
import (
"strconv"
"git.bronku.xyz/bronku/cake-order-tracker/models"
)
templ OrdersPage(first, last string, orders []models.Order) {
@Layout("Panel główny", OrdersMain(first, last, orders))
}
templ OrdersMain(first, last string, orders []models.Order) {
<div class="metrics-grid">
<div class="metric-card">
<span class="metric-label">
<span class="material-symbols-outlined">receipt_long</span>
Zamówienia dzisiaj
</span>
<span class="metric-value">{ len(orders) }</span>
<span class="metric-change positive">
<span class="material-symbols-outlined">arrow_upward</span>
Wszystkie aktywne
</span>
</div>
<div class="metric-card">
<span class="metric-label">
<span class="material-symbols-outlined">cake</span>
Do realizacji
</span>
<span class="metric-value">{ strconv.Itoa(countPending(orders)) }</span>
<span class="metric-change warning">
<span class="material-symbols-outlined">priority_high</span>
Oczekujące
</span>
</div>
<div class="metric-card">
<span class="metric-label">
<span class="material-symbols-outlined">check_circle</span>
Gotowe do odbioru
</span>
<span class="metric-value">{ strconv.Itoa(countDone(orders)) }</span>
<span class="metric-change">Zrealizowane</span>
</div>
<div class="metric-card">
<span class="metric-label">
<span class="material-symbols-outlined">payments</span>
Przychód (szac.)
</span>
<span class="metric-value">{ strconv.Itoa(estimateRevenue(orders)) } PLN</span>
<span class="metric-change positive">
<span class="material-symbols-outlined">trending_up</span>
W bieżącym miesiącu
</span>
</div>
</div>
<section class="card">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">list_alt</span>
Aktywne zamówienia
</h2>
<div style="display:flex;align-items:center;gap:8px">
<form hx-get="/orders/search" hx-target="#results-table" hx-trigger="keyup delay:500ms, change" style="display:flex;align-items:center;gap:8px">
<div class="form-group" style="flex-direction:row;align-items:center;gap:4px">
<label style="font-size:11px;white-space:nowrap">Od</label>
<input class="form-input" style="width:140px" type="date" value={ first } name="from">
</div>
<div class="form-group" style="flex-direction:row;align-items:center;gap:4px">
<label style="font-size:11px;white-space:nowrap">Do</label>
<input class="form-input" style="width:140px" type="date" value={ last } name="to">
</div>
</form>
</div>
</div>
<div class="table-container" id="results-table">
@OrdersTable(orders)
</div>
</section>
}
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-name">{ o.Surname } { o.Name }<br /><span class="text-on-surface-variant" style="font-size:11px;font-weight:400">{ o.Phone }</span></td>
<td class="text-on-surface-variant">{ 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">{ strconv.Itoa(o.Total()) } 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>
}
</tbody>
</table>
}