Werk hoofdapplicatie bij
Legt de bestaande wijzigingen in de hoofdworktree vast voordat de laatste worktree wordt gemerged.\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -0,0 +1,221 @@
|
||||
<div class="page-header mb-4">
|
||||
|
||||
<a href="/lists" class="btn btn-link btn-icon">←</a>
|
||||
|
||||
<h1><%= list.name %></h1>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-8">
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<% if(items.length === 0) { %>
|
||||
|
||||
<p class="text-secondary">Nog geen producten op de lijst.</p>
|
||||
|
||||
<% } else { %>
|
||||
|
||||
<div class="list-group">
|
||||
|
||||
<% items.forEach(item => { %>
|
||||
|
||||
<div class="list-group-item">
|
||||
|
||||
<div class="d-flex align-items-center">
|
||||
|
||||
<form method="post" action="/lists/<%= list.id %>/items/<%= item.id %>/toggle" style="display: inline;">
|
||||
|
||||
<input type="hidden" name="_method" value="POST">
|
||||
|
||||
<button class="btn btn-sm" style="border: none; background: none; padding: 0; margin-right: 10px;"
|
||||
onclick="this.closest('form').submit(); return false;">
|
||||
|
||||
<i class="icon icon-check" style="font-size: 20px; <% if(item.checked) { %>color: #00a651;<% } else { %>color: #ccc;<% } %>"></i>
|
||||
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
<div class="flex-grow-1">
|
||||
|
||||
<strong <% if(item.checked) { %>style="text-decoration: line-through; color: #999;"<% } %>>
|
||||
|
||||
<%= item.product_name %>
|
||||
|
||||
</strong>
|
||||
|
||||
<% if(item.amount && item.amount !== 1) { %>
|
||||
|
||||
<span class="badge bg-info"><%= item.amount %></span>
|
||||
|
||||
<% } %>
|
||||
|
||||
<br>
|
||||
|
||||
<small class="text-secondary">
|
||||
|
||||
<%= item.category_icon || "" %> <%= item.category_name || "Geen categorie" %>
|
||||
|
||||
</small>
|
||||
|
||||
</div>
|
||||
|
||||
<form class="delete-item-form" action="/lists/<%= list.id %>/items/<%= item.id %>" style="display: inline;">
|
||||
|
||||
<button class="btn btn-sm btn-link text-danger" style="border: none;">✕</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<% }) %>
|
||||
|
||||
</div>
|
||||
|
||||
<% } %>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="card-header">
|
||||
|
||||
<h3 class="card-title">Product toevoegen</h3>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<form method="post" action="/lists/<%= list.id %>/items" id="addItemForm">
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<label class="form-label">Product</label>
|
||||
|
||||
<input type="text" id="productSearch" class="form-control" placeholder="Zoek product..." autocomplete="off">
|
||||
|
||||
<div id="productList" class="list-group mt-2" style="display: none; max-height: 300px; overflow-y: auto;"></div>
|
||||
|
||||
<input type="hidden" id="productId" name="product_id" required>
|
||||
|
||||
<small id="selectedProduct" class="text-secondary"></small>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<label class="form-label">Hoeveelheid</label>
|
||||
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
name="amount"
|
||||
value="1"
|
||||
step="0.5"
|
||||
min="0.5">
|
||||
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary w-100" type="submit" id="submitBtn" disabled>
|
||||
|
||||
Toevoegen
|
||||
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let allProducts = [];
|
||||
|
||||
// Load products from API
|
||||
fetch('/api/products')
|
||||
.then(r => r.json())
|
||||
.then(products => {
|
||||
allProducts = products;
|
||||
});
|
||||
|
||||
// Product search
|
||||
document.getElementById('productSearch').addEventListener('input', function() {
|
||||
const search = this.value.toLowerCase();
|
||||
const listEl = document.getElementById('productList');
|
||||
|
||||
if (!search) {
|
||||
listEl.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
const filtered = allProducts.filter(p =>
|
||||
p.name.toLowerCase().includes(search) ||
|
||||
(p.category_name && p.category_name.toLowerCase().includes(search))
|
||||
);
|
||||
|
||||
listEl.replaceChildren();
|
||||
|
||||
filtered.forEach(product => {
|
||||
const category = `${product.category_icon || ''} ${product.category_name || 'Geen categorie'}`.trim();
|
||||
const button = document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.className = 'list-group-item list-group-item-action text-start';
|
||||
|
||||
const name = document.createElement('strong');
|
||||
name.textContent = product.name;
|
||||
const categoryLabel = document.createElement('small');
|
||||
categoryLabel.className = 'text-secondary';
|
||||
categoryLabel.textContent = category;
|
||||
|
||||
button.append(name, document.createElement('br'), categoryLabel);
|
||||
button.addEventListener('click', () => selectProduct(product.id, product.name, category));
|
||||
listEl.append(button);
|
||||
});
|
||||
|
||||
listEl.style.display = 'block';
|
||||
});
|
||||
|
||||
function selectProduct(id, name, category) {
|
||||
document.getElementById('productId').value = id;
|
||||
document.getElementById('productSearch').value = '';
|
||||
document.getElementById('selectedProduct').textContent = name + ' - ' + category;
|
||||
document.getElementById('productList').style.display = 'none';
|
||||
document.getElementById('submitBtn').disabled = false;
|
||||
}
|
||||
|
||||
// Handle form deletion
|
||||
document.querySelectorAll('.delete-item-form').forEach(form => {
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
if(confirm('Zeker weten?')) {
|
||||
fetch(form.action, { method: 'DELETE' })
|
||||
.then(r => r.json())
|
||||
.then(() => window.location.reload());
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Close product list when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('#productSearch') && !e.target.closest('#productList')) {
|
||||
document.getElementById('productList').style.display = 'none';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user