92 lines
3.3 KiB
Plaintext
92 lines
3.3 KiB
Plaintext
<div class="page-header mb-4">
|
|
<h1>Boodschappenlijsten</h1>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<% if (lists.length === 0) { %>
|
|
<p class="text-secondary">Je hebt nog geen boodschappenlijsten.</p>
|
|
<% } else { %>
|
|
<div class="list-group">
|
|
<% lists.forEach(list => { %>
|
|
<div class="list-group-item d-flex justify-content-between align-items-center">
|
|
|
|
<!-- Link + info -->
|
|
<a href="/lists/<%= list.id %>" class="flex-grow-1 text-decoration-none">
|
|
<div class="d-flex justify-content-between">
|
|
<strong><%= list.name %></strong>
|
|
<span><%= list.checked_count || 0 %>/<%= list.item_count || 0 %> gedaan</span>
|
|
</div>
|
|
<small class="text-muted">
|
|
Aangemaakt <%= new Date(list.created_at).toLocaleDateString("nl-NL") %>
|
|
</small>
|
|
</a>
|
|
|
|
<!-- Delete button -->
|
|
<button class="btn btn-sm btn-danger ms-3 delete-list-button"
|
|
type="button"
|
|
data-list-id="<%= list.id %>"
|
|
aria-label="Lijst <%= list.name %> verwijderen">
|
|
🗑️
|
|
</button>
|
|
|
|
</div>
|
|
<% }); %>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header"><h3 class="card-title">Nieuwe lijst</h3></div>
|
|
<div class="card-body">
|
|
<form method="post" action="/lists">
|
|
<label class="form-label" for="list-name">Lijstnaam</label>
|
|
<input id="list-name" class="form-control mb-3" type="text" name="name"
|
|
placeholder="bijv. Weekboodschappen" required maxlength="120">
|
|
<button class="btn btn-primary w-100" type="submit">Lijst aanmaken</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelectorAll(".delete-list-button").forEach((button) => {
|
|
button.addEventListener("click", async () => {
|
|
const listId = button.dataset.listId;
|
|
const listName = button.closest(".list-group-item")?.querySelector("strong")?.textContent?.trim() || "deze lijst";
|
|
|
|
if (!confirm(`"${listName}" verwijderen?`)) return;
|
|
|
|
const response = await fetch(`/lists/${listId}`, {
|
|
method: "DELETE",
|
|
headers: { Accept: "application/json" }
|
|
});
|
|
|
|
if (response.ok) {
|
|
window.location.reload();
|
|
return;
|
|
}
|
|
|
|
let message = "Lijst kon niet worden verwijderd.";
|
|
try {
|
|
const data = await response.json();
|
|
if (data.error) message = data.error;
|
|
} catch (_) {
|
|
// ignore json parse errors
|
|
}
|
|
|
|
alert(message);
|
|
});
|
|
});
|
|
</script>
|