order form
This commit is contained in:
bronku
parent
2465956fc2
commit
4666618151
2 changed files with 165 additions and 189 deletions
|
|
@ -71,36 +71,16 @@ main {
|
|||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-flow: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
@media (max-width: 48em) {
|
||||
.topnav {
|
||||
padding: 0 var(--space-sm);
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.topnav > nav > a span:not(.material-symbols-outlined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topnav > .cta span:not(.material-symbols-outlined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topnav > .cta {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
.topnav > h1 {
|
||||
font-size: 1rem;
|
||||
#order {
|
||||
display: grid;
|
||||
grid-template-columns: auto 20rem;
|
||||
grid-template-rows: auto auto auto 1fr;
|
||||
> aside {
|
||||
grid-column: 2;
|
||||
grid-row: span;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,182 +9,178 @@ import (
|
|||
)
|
||||
|
||||
templ OrderForm(dto dto.OrderPage) {
|
||||
<form method="post" class="split-pane order-form" onsubmit="return confirmBlockedDate(this)" data-blocked-dates={ blockedDatesJSON(dto.BlockedDates) } data-state={ orderStateJSON(dto.Order) }>
|
||||
<form method="post" id="order" onsubmit="return confirmBlockedDate(this)" data-blocked-dates={ blockedDatesJSON(dto.BlockedDates) } data-state={ orderStateJSON(dto.Order) }>
|
||||
<input type="hidden" name="id" value={ dto.Order.ID }/>
|
||||
<div class="order-left">
|
||||
<section class="card">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">person_add</span>
|
||||
Dane klienta
|
||||
</h2>
|
||||
</header>
|
||||
<div>
|
||||
<div class="form-grid">
|
||||
<div>
|
||||
<label>Imię *</label>
|
||||
<input type="text" name="name" value={ dto.Order.Name } placeholder="Jan"/>
|
||||
</div>
|
||||
<div>
|
||||
<label>Nazwisko *</label>
|
||||
<input type="text" name="surname" value={ dto.Order.Surname } placeholder="Kowalski"/>
|
||||
</div>
|
||||
<div>
|
||||
<label>Telefon</label>
|
||||
<input type="tel" name="phone" value={ dto.Order.Phone } placeholder="+48 123 456 789"/>
|
||||
</div>
|
||||
<div>
|
||||
<label>Lokalizacja</label>
|
||||
<div class="toggle-group">
|
||||
<input type="hidden" name="location" value={ dto.Order.Location }/>
|
||||
<button type="button" class={ "toggle-btn", templ.KV("active", dto.Order.Location == "Kartuzy") } onclick="setLocation(this, 'Kartuzy')">Kartuzy</button>
|
||||
<button type="button" class={ "toggle-btn", templ.KV("active", dto.Order.Location == "Somonino") } onclick="setLocation(this, 'Somonino')">Somonino</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>Data dostawy *</label>
|
||||
<input type="date" name="date" value={ dto.Order.Date.Format("2006-01-02") }/>
|
||||
</div>
|
||||
<div>
|
||||
<label>Zaliczka</label>
|
||||
<input type="number" name="paid" min="0" step="0.01" value={ dto.Order.Paid.String() } oninput={ templ.JSFuncCall("updatePrepaid") }/>
|
||||
<section class="card">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">person_add</span>
|
||||
Dane klienta
|
||||
</h2>
|
||||
</header>
|
||||
<div>
|
||||
<div class="form-grid">
|
||||
<div>
|
||||
<label>Imię *</label>
|
||||
<input type="text" name="name" value={ dto.Order.Name } placeholder="Jan"/>
|
||||
</div>
|
||||
<div>
|
||||
<label>Nazwisko *</label>
|
||||
<input type="text" name="surname" value={ dto.Order.Surname } placeholder="Kowalski"/>
|
||||
</div>
|
||||
<div>
|
||||
<label>Telefon</label>
|
||||
<input type="tel" name="phone" value={ dto.Order.Phone } placeholder="+48 123 456 789"/>
|
||||
</div>
|
||||
<div>
|
||||
<label>Lokalizacja</label>
|
||||
<div class="toggle-group">
|
||||
<input type="hidden" name="location" value={ dto.Order.Location }/>
|
||||
<button type="button" class={ "toggle-btn", templ.KV("active", dto.Order.Location == "Kartuzy") } onclick="setLocation(this, 'Kartuzy')">Kartuzy</button>
|
||||
<button type="button" class={ "toggle-btn", templ.KV("active", dto.Order.Location == "Somonino") } onclick="setLocation(this, 'Somonino')">Somonino</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">cake_add</span>
|
||||
Torty specjalne
|
||||
</h2>
|
||||
</header>
|
||||
<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 card-catalogue">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
Katalog produktów
|
||||
</h2>
|
||||
<div class="search">
|
||||
<span class="material-symbols-outlined">search</span>
|
||||
<input type="text" placeholder="Filtruj produkty..." oninput="filterCatalogue(this)"/>
|
||||
<div>
|
||||
<label>Data dostawy *</label>
|
||||
<input type="date" name="date" value={ dto.Order.Date.Format("2006-01-02") }/>
|
||||
</div>
|
||||
</header>
|
||||
if len(dto.Tags) > 0 {
|
||||
<div class="tag-row">
|
||||
for _, t := range dto.Tags {
|
||||
<button type="button" class="tag-chip" data-tag={ t.Name } onclick="toggleCatalogueTagFilter(this)">{ t.Name }</button>
|
||||
}
|
||||
<div>
|
||||
<label>Zaliczka</label>
|
||||
<input type="number" name="paid" min="0" step="0.01" value={ dto.Order.Paid.String() } oninput={ templ.JSFuncCall("updatePrepaid") }/>
|
||||
</div>
|
||||
}
|
||||
<div class="catalogue-scroll">
|
||||
<ul id="catalogue-grid">
|
||||
for _, c := range dto.Catalogue {
|
||||
<li data-name={ c.Name } data-tags={ tagNames(c.Tags) }>
|
||||
<div>
|
||||
<div class="icon cake">
|
||||
<span class="material-symbols-outlined">cake</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="name">{ c.Name }</div>
|
||||
<div class="price">{ c.Price.String() } PLN</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="qty minus" onclick={ templ.JSFuncCall("changeCake", c.ID, c.Name, c.Price.String(), -1) }>
|
||||
<span class="material-symbols-outlined">remove</span>
|
||||
</button>
|
||||
<span class="value" id={ "qty-" + strconv.Itoa(c.ID) }>0</span>
|
||||
<button type="button" class="qty plus" onclick={ templ.JSFuncCall("changeCake", c.ID, c.Name, c.Price.String(), 1) }>
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<aside class="order-aside">
|
||||
<section class="card">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">receipt_long</span>
|
||||
Podsumowanie
|
||||
</h2>
|
||||
</header>
|
||||
<ul id="basket-items">
|
||||
for _, c := range dto.Order.Cakes {
|
||||
<li data-cake-id={ strconv.Itoa(c.ID) }>
|
||||
<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>
|
||||
<div class="price">{ c.Total().String() } PLN</div>
|
||||
<button type="button" class="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) }/>
|
||||
</li>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">cake_add</span>
|
||||
Torty specjalne
|
||||
</h2>
|
||||
</header>
|
||||
<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 card-catalogue">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
Katalog produktów
|
||||
</h2>
|
||||
<div class="search">
|
||||
<span class="material-symbols-outlined">search</span>
|
||||
<input type="text" placeholder="Filtruj produkty..." oninput="filterCatalogue(this)"/>
|
||||
</div>
|
||||
</header>
|
||||
if len(dto.Tags) > 0 {
|
||||
<div class="tag-row">
|
||||
for _, t := range dto.Tags {
|
||||
<button type="button" class="tag-chip" data-tag={ t.Name } onclick="toggleCatalogueTagFilter(this)">{ t.Name }</button>
|
||||
}
|
||||
for _, s := range dto.Order.SpecialCakes {
|
||||
<li data-special-id={ strconv.Itoa(s.ID) }>
|
||||
<div class="basket-item-body">
|
||||
<div class="name">{ s.Name }</div>
|
||||
<div class="detail">{ s.Detail() }</div>
|
||||
if len(s.Tags) > 0 {
|
||||
<div class="basket-item-tags">
|
||||
for _, t := range s.Tags {
|
||||
<span class="tag-chip sm">{ t.Name }</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div class="catalogue-scroll">
|
||||
<ul id="catalogue-grid">
|
||||
for _, c := range dto.Catalogue {
|
||||
<li data-name={ c.Name } data-tags={ tagNames(c.Tags) }>
|
||||
<div>
|
||||
<div class="icon cake">
|
||||
<span class="material-symbols-outlined">cake</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="name">{ c.Name }</div>
|
||||
<div class="price">{ c.Price.String() } PLN</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price">{ s.Price.String() } PLN</div>
|
||||
<div class="basket-item-actions">
|
||||
<button type="button" class="btn-icon" onclick="editSpecialCake(this)" title="Edytuj">
|
||||
<span class="material-symbols-outlined">edit</span>
|
||||
<div class="actions">
|
||||
<button type="button" class="qty minus" onclick={ templ.JSFuncCall("changeCake", c.ID, c.Name, c.Price.String(), -1) }>
|
||||
<span class="material-symbols-outlined">remove</span>
|
||||
</button>
|
||||
<button type="button" class="remove" onclick="removeSpecialCake(this)" title="Usuń">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
<span class="value" id={ "qty-" + strconv.Itoa(c.ID) }>0</span>
|
||||
<button type="button" class="qty plus" onclick={ templ.JSFuncCall("changeCake", c.ID, c.Name, c.Price.String(), 1) }>
|
||||
<span class="material-symbols-outlined">add</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">
|
||||
<span>Subtotal</span>
|
||||
<span id="subtotal-price">{ dto.Order.Subtotal().String() } PLN</span>
|
||||
</div>
|
||||
<div class="total-row">
|
||||
<span>Zaliczka</span>
|
||||
<span id="paid-amount">{ dto.Order.Paid.String() } PLN</span>
|
||||
</div>
|
||||
<div class="total-row grand">
|
||||
<span>Do zapłaty</span>
|
||||
<span id="total-price">{ dto.Order.Total().String() } PLN</span>
|
||||
</div>
|
||||
<button type="submit" class="btn-finalize">
|
||||
<span class="material-symbols-outlined">check_circle</span>
|
||||
Finalizuj zamówienie
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<aside class="card">
|
||||
<header>
|
||||
<h2>
|
||||
<span class="material-symbols-outlined">receipt_long</span>
|
||||
Podsumowanie
|
||||
</h2>
|
||||
</header>
|
||||
<ul id="basket-items">
|
||||
for _, c := range dto.Order.Cakes {
|
||||
<li data-cake-id={ strconv.Itoa(c.ID) }>
|
||||
<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>
|
||||
<div class="price">{ c.Total().String() } PLN</div>
|
||||
<button type="button" class="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) }/>
|
||||
</li>
|
||||
}
|
||||
for _, s := range dto.Order.SpecialCakes {
|
||||
<li data-special-id={ strconv.Itoa(s.ID) }>
|
||||
<div class="basket-item-body">
|
||||
<div class="name">{ s.Name }</div>
|
||||
<div class="detail">{ s.Detail() }</div>
|
||||
if len(s.Tags) > 0 {
|
||||
<div class="basket-item-tags">
|
||||
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-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>
|
||||
</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">
|
||||
<span>Subtotal</span>
|
||||
<span id="subtotal-price">{ dto.Order.Subtotal().String() } PLN</span>
|
||||
</div>
|
||||
</section>
|
||||
<div class="total-row">
|
||||
<span>Zaliczka</span>
|
||||
<span id="paid-amount">{ dto.Order.Paid.String() } PLN</span>
|
||||
</div>
|
||||
<div class="total-row grand">
|
||||
<span>Do zapłaty</span>
|
||||
<span id="total-price">{ dto.Order.Total().String() } PLN</span>
|
||||
</div>
|
||||
<button type="submit" class="btn-finalize">
|
||||
<span class="material-symbols-outlined">check_circle</span>
|
||||
Finalizuj zamówienie
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</form>
|
||||
@SpecialCakeOverlay(dto.Tags)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue