new ui
This commit is contained in:
bronku
parent
7c756e87c1
commit
d69d8c3857
24 changed files with 3421 additions and 859 deletions
|
|
@ -6,100 +6,153 @@
|
|||
{{end}}
|
||||
{{end}}
|
||||
{{define "main"}}
|
||||
<main>
|
||||
<form method="post" class="order">
|
||||
{{with .Order}}
|
||||
<div>
|
||||
<h2>Dane zamówienia</h2>
|
||||
<input hidden="hidden" name="id" value="{{.ID}}">
|
||||
<label>Imię
|
||||
<input type="text" name="name" value="{{.Name}}">
|
||||
</label>
|
||||
<label>Nazwisko
|
||||
<input type="text" name="surname" value="{{.Surname}}">
|
||||
</label>
|
||||
<label>Numer telefonu
|
||||
<input type="tel" name="phone" value="{{.Phone}}">
|
||||
</label>
|
||||
<label>Lokalizacja
|
||||
<select 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>
|
||||
</label>
|
||||
<label>Data dostawy
|
||||
<input type="date" name="date" value="{{.Date.Format "2006-01-02"}}">
|
||||
</label>
|
||||
<label>Status
|
||||
<select name="status">
|
||||
<option {{ if eq .Status "accepted" }}selected{{ end }} value="accepted">accepted</option>
|
||||
<option {{ if eq .Status "done" }}selected{{ end }} value="done">done</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Zaliczka
|
||||
<input type="number" name="paid" min="0" value="{{.Paid}}">
|
||||
</label>
|
||||
<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>
|
||||
<h2>Dodane ciasta</h2>
|
||||
<div class="scrollable" style="flex:1">
|
||||
<table id="basket_table">
|
||||
</table>
|
||||
</div>
|
||||
<ul id="basket" class="scrollable">
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Podsumowanie</h2>
|
||||
<label>
|
||||
<small>Do zapłaty:</small>
|
||||
<span id="total-price">100 PLN</span>
|
||||
</label>
|
||||
<button type="submit">Zapisz</button>
|
||||
</div>
|
||||
{{end}}
|
||||
{{with .Catalogue}}
|
||||
<div class="catalog-section">
|
||||
<h2>Katalog</h2>
|
||||
<div class="scrollable">
|
||||
<table>
|
||||
{{range .}}
|
||||
<tr>
|
||||
<th>{{.Name}}<br><small>{{.Category}} (#{{.ID}})</small></th>
|
||||
<th>{{.Price}} PLN</th>
|
||||
<th>
|
||||
<button type=button onClick="addCake({{.ID}},{{.Name}}, {{.Price}}, 1)">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
{{end}}
|
||||
</table>
|
||||
<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>Status</label>
|
||||
<select class="form-input" name="status">
|
||||
<option {{if eq .Status "accepted"}}selected{{end}} value="accepted">Przyjęte</option>
|
||||
<option {{if eq .Status "done"}}selected{{end}} value="done">Gotowe</option>
|
||||
</select>
|
||||
</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>
|
||||
{{end}}
|
||||
</form>
|
||||
</main>
|
||||
<template id="basket_element_template">
|
||||
<tr>
|
||||
<th class="cake-name">Name</th>
|
||||
<th class="cake-price">Price</th>
|
||||
<th>
|
||||
<label>
|
||||
<input type="number" min="0">
|
||||
</label>
|
||||
</th>
|
||||
<th class="cake-total">Total</th>
|
||||
<th>
|
||||
<button type=button>
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</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>
|
||||
</th>
|
||||
</tr>
|
||||
</template>
|
||||
<script>
|
||||
{{range .Order.Cakes}}
|
||||
addCake({{.ID}},{{.Name}}, {{.Price}}, {{.Amount}})
|
||||
{{end}}
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
{{end}}
|
||||
</form>
|
||||
<script>
|
||||
{{if .Order.ID}}
|
||||
{{range .Order.Cakes}}
|
||||
updateCatalogueQty({{.ID}}, {{.Amount}});
|
||||
{{end}}
|
||||
{{end}}
|
||||
updateTotals();
|
||||
</script>
|
||||
{{end}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue