move to templ
This commit is contained in:
bronku
parent
31a33cc220
commit
bb32802324
34 changed files with 1011 additions and 528 deletions
144
server/templates/order.templ
Normal file
144
server/templates/order.templ
Normal 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))
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue