css reducion
This commit is contained in:
bronkuu
parent
5f156ab6a0
commit
b8cf13b7d5
20 changed files with 1603 additions and 1677 deletions
|
|
@ -1,6 +1,7 @@
|
|||
package templates
|
||||
|
||||
import (
|
||||
"encoding/json"
|
||||
"strconv"
|
||||
|
||||
"git.bronku.xyz/bronku/cake-order-tracker/models"
|
||||
|
|
@ -11,7 +12,7 @@ templ OrderPage(order models.Order, catalogue []models.Cake, allTags []models.Ta
|
|||
}
|
||||
|
||||
templ OrderForm(order models.Order, catalogue []models.Cake, allTags []models.Tag, blockedDates []models.BlockedDate) {
|
||||
<form method="post" class="split-pane" onsubmit="return confirmBlockedDate(this)" data-blocked-dates={ blockedDatesJSON(blockedDates) }>
|
||||
<form method="post" class="split-pane order-form" onsubmit="return confirmBlockedDate(this)" data-blocked-dates={ blockedDatesJSON(blockedDates) } data-state={ orderStateJSON(order) }>
|
||||
<input type="hidden" name="id" value={ strconv.Itoa(order.ID) }/>
|
||||
<div class="order-left">
|
||||
<section class="card">
|
||||
|
|
@ -23,19 +24,19 @@ templ OrderForm(order models.Order, catalogue []models.Cake, allTags []models.Ta
|
|||
</header>
|
||||
<div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<label>Imię *</label>
|
||||
<input class="form-input" type="text" name="name" value={ order.Name } placeholder="Jan"/>
|
||||
<input type="text" name="name" value={ order.Name } placeholder="Jan"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<label>Nazwisko *</label>
|
||||
<input class="form-input" type="text" name="surname" value={ order.Surname } placeholder="Kowalski"/>
|
||||
<input type="text" name="surname" value={ order.Surname } placeholder="Kowalski"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<label>Telefon</label>
|
||||
<input class="form-input" type="tel" name="phone" value={ order.Phone } placeholder="+48 123 456 789"/>
|
||||
<input type="tel" name="phone" value={ order.Phone } placeholder="+48 123 456 789"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<label>Lokalizacja</label>
|
||||
<div class="toggle-group">
|
||||
<input type="hidden" name="location" value={ order.Location }/>
|
||||
|
|
@ -43,17 +44,17 @@ templ OrderForm(order models.Order, catalogue []models.Cake, allTags []models.Ta
|
|||
<button type="button" class={ "toggle-btn", templ.KV("active", order.Location == "Somonino") } onclick="setLocation(this, 'Somonino')">Somonino</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<label>Data dostawy *</label>
|
||||
<input class="form-input" type="date" name="date" value={ order.Date.Format("2006-01-02") }/>
|
||||
<input type="date" name="date" value={ order.Date.Format("2006-01-02") }/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<label>Zaliczka</label>
|
||||
<input class="form-input" type="number" name="paid" min="0" step="0.01" value={ order.Paid.String() } oninput={ templ.JSFuncCall("updatePrepaid") }/>
|
||||
<input type="number" name="paid" min="0" step="0.01" value={ order.Paid.String() } oninput={ templ.JSFuncCall("updatePrepaid") }/>
|
||||
</div>
|
||||
<div class="form-group" style="grid-column:span 2">
|
||||
<div class="col-span-2">
|
||||
<label>Uwagi</label>
|
||||
<input class="form-input" type="text" placeholder="Alergie, specjalne życzenia..."/>
|
||||
<input type="text" placeholder="Alergie, specjalne życzenia..."/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -65,22 +66,22 @@ templ OrderForm(order models.Order, catalogue []models.Cake, allTags []models.Ta
|
|||
Torty specjalne
|
||||
</h2>
|
||||
</header>
|
||||
<div style="padding:1rem;text-align:center">
|
||||
<button type="button" class="btn outline" onclick="openSpecialCakeOverlay()">
|
||||
<div class="button-center">
|
||||
<button type="button" class="btn 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">
|
||||
<section class="card card-catalogue">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
Katalog produktów
|
||||
</h2>
|
||||
<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 class="search">
|
||||
<span class="material-symbols-outlined">search</span>
|
||||
<input type="text" placeholder="Filtruj produkty..." oninput="filterCatalogue(this)"/>
|
||||
</div>
|
||||
</header>
|
||||
if len(allTags) > 0 {
|
||||
|
|
@ -98,7 +99,7 @@ templ OrderForm(order models.Order, catalogue []models.Cake, allTags []models.Ta
|
|||
<div class="icon cake">
|
||||
<span class="material-symbols-outlined">cake</span>
|
||||
</div>
|
||||
<div style="min-width:0">
|
||||
<div>
|
||||
<div class="name">{ c.Name }</div>
|
||||
<div class="price">{ c.Price.String() } PLN</div>
|
||||
</div>
|
||||
|
|
@ -119,7 +120,7 @@ templ OrderForm(order models.Order, catalogue []models.Cake, allTags []models.Ta
|
|||
</section>
|
||||
</div>
|
||||
<aside class="order-aside">
|
||||
<section class="card grow">
|
||||
<section class="card">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">receipt_long</span>
|
||||
|
|
@ -129,7 +130,7 @@ templ OrderForm(order models.Order, catalogue []models.Cake, allTags []models.Ta
|
|||
<ul id="basket-items">
|
||||
for _, c := range order.Cakes {
|
||||
<li data-cake-id={ strconv.Itoa(c.ID) }>
|
||||
<div>
|
||||
<div class="basket-item-body">
|
||||
<div class="name">{ c.Name }</div>
|
||||
<div class="detail">{ c.Price.String() } PLN × <span class="qty">{ strconv.Itoa(c.Amount) }</span></div>
|
||||
</div>
|
||||
|
|
@ -142,11 +143,11 @@ templ OrderForm(order models.Order, catalogue []models.Cake, allTags []models.Ta
|
|||
}
|
||||
for _, s := range order.SpecialCakes {
|
||||
<li data-special-id={ strconv.Itoa(s.ID) }>
|
||||
<div>
|
||||
<div class="basket-item-body">
|
||||
<div class="name">{ s.Name }</div>
|
||||
<div class="detail">{ specialCakeDetail(s) }</div>
|
||||
if len(s.Tags) > 0 {
|
||||
<div class="tag-group">
|
||||
<div class="basket-item-tags">
|
||||
for _, t := range s.Tags {
|
||||
<span class="tag-chip sm">{ t.Name }</span>
|
||||
}
|
||||
|
|
@ -154,9 +155,9 @@ templ OrderForm(order models.Order, catalogue []models.Cake, allTags []models.Ta
|
|||
}
|
||||
</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>
|
||||
<div class="basket-item-actions">
|
||||
<button type="button" class="btn-icon" onclick="editSpecialCake(this)" title="Edytuj">
|
||||
<span class="material-symbols-outlined">edit</span>
|
||||
</button>
|
||||
<button type="button" class="remove" onclick="removeSpecialCake(this)" title="Usuń">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
|
|
@ -195,15 +196,13 @@ templ OrderForm(order models.Order, catalogue []models.Cake, allTags []models.Ta
|
|||
</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>
|
||||
}
|
||||
|
||||
func orderStateJSON(order models.Order) string {
|
||||
state := make(map[int]int)
|
||||
for _, c := range order.Cakes {
|
||||
state[c.ID] = c.Amount
|
||||
}
|
||||
b, _ := json.Marshal(state)
|
||||
return string(b)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue