98 lines
2.6 KiB
Text
98 lines
2.6 KiB
Text
{{define "title"}}
|
|
Zamówienia
|
|
{{end}}
|
|
{{define "main"}}
|
|
<main>
|
|
<form class="search-container" hx-get="/orders/search" hx-target="#results-table"
|
|
hx-trigger="keyup delay:500ms, change">
|
|
<label class="search-box">
|
|
<input type="search" name="q" placeholder="Wyszukaj po numerze zamówienia">
|
|
</label>
|
|
<label>Data początkowa
|
|
<input type="date" value="{{.First}}" name="from">
|
|
</label>
|
|
<label>Data końcowa
|
|
<input type="date" value="{{.Last}}" name="to">
|
|
</label>
|
|
</form>
|
|
<div id="results-table">
|
|
{{template "orders-table" .Orders}}
|
|
</div>
|
|
</main>
|
|
<style>
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.active {
|
|
background-color: #e6f2ff;
|
|
}
|
|
</style>
|
|
<script>
|
|
function toggleDetails(row,event) {
|
|
// Access the next row (details row)
|
|
const detailsRow=row.nextElementSibling;
|
|
|
|
// Check if the details row is hidden
|
|
if(detailsRow.classList.contains('hidden')) {
|
|
// If hidden, show it (HTMX will populate it)
|
|
detailsRow.classList.remove('hidden');
|
|
row.classList.add('active');
|
|
} else {
|
|
// If visible, hide it
|
|
detailsRow.classList.add('hidden');
|
|
row.classList.remove('active');
|
|
|
|
// Prevent HTMX from making a request when we're just hiding
|
|
if(event) {
|
|
event.stopPropagation();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
{{end}}
|
|
{{define "orders-table"}}
|
|
<table id="orders_table">
|
|
<thead>
|
|
<tr>
|
|
<th>Numer zamówienia</th>
|
|
<th>Klient</th>
|
|
<th>Lokalizacja</th>
|
|
<th>Data zamówienia</th>
|
|
<th>Pozostało do zapłaty</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .}}
|
|
<tr class="clickable" hx-get="/order_info/{{.ID}}" hx-target="next tr" hx-swap="innerHTML"
|
|
onclick="toggleDetails(this, event)">
|
|
<th><a href="/order/{{.ID}}">{{.ID}}</a></th>
|
|
<th>{{.Surname}} {{.Name}} {{.Phone}}</th>
|
|
<th>{{.Location}}</th>
|
|
<th>{{.Date.Format "2006-01-02"}}</th>
|
|
<th>{{.Total}}</th>
|
|
<th>{{.Status}}</th>
|
|
</tr>
|
|
<tr class="hidden">
|
|
<td colspan="6" class="details-content"></td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
{{end}}
|
|
{{define "order_info"}}
|
|
{{with .Order}}
|
|
<td colspan="6" class="details-content">
|
|
<table>
|
|
{{range .Cakes}}
|
|
<tr>
|
|
<th>{{.Name}}</th>
|
|
<th>{{.Price}}</th>
|
|
<th>{{.Amount}}</th>
|
|
</tr>
|
|
{{end}}
|
|
</table>
|
|
</td>
|
|
{{end}}
|
|
{{end}}
|