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:
+64
-38
@@ -1,55 +1,81 @@
|
||||
<div class="card">
|
||||
<div class="row justify-content-center">
|
||||
|
||||
<div class="card-body">
|
||||
<div class="col-md-5">
|
||||
|
||||
<div class="card card-md">
|
||||
|
||||
<h2>
|
||||
Inloggen
|
||||
</h2>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="text-center mb-4">
|
||||
|
||||
<form method="post">
|
||||
<h2>🛒 PantryHub</h2>
|
||||
|
||||
<p class="text-secondary">Inloggen op je account</p>
|
||||
|
||||
<div class="mb-3">
|
||||
</div>
|
||||
|
||||
<label class="form-label">
|
||||
Email
|
||||
</label>
|
||||
<form method="post">
|
||||
|
||||
<input
|
||||
class="form-control"
|
||||
type="email"
|
||||
name="email"
|
||||
required>
|
||||
<div class="mb-3">
|
||||
|
||||
<label class="form-label">E-mailadres</label>
|
||||
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
name="email"
|
||||
placeholder="jouw@email.com"
|
||||
required>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
|
||||
<label class="form-label">Wachtwoord</label>
|
||||
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
name="password"
|
||||
placeholder="Wachtwoord"
|
||||
required>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
|
||||
<button class="btn btn-primary w-100">
|
||||
|
||||
Inloggen
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<div class="text-center">
|
||||
|
||||
<p class="text-secondary">
|
||||
|
||||
Nog geen account?
|
||||
|
||||
<a href="/register">Registreren</a>
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<label class="form-label">
|
||||
Wachtwoord
|
||||
</label>
|
||||
|
||||
<input
|
||||
class="form-control"
|
||||
type="password"
|
||||
name="password"
|
||||
required>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<button class="btn btn-primary">
|
||||
|
||||
Inloggen
|
||||
|
||||
</button>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
+77
-62
@@ -1,73 +1,88 @@
|
||||
<div class="card">
|
||||
<div class="row justify-content-center">
|
||||
|
||||
<div class="card-body">
|
||||
<div class="col-md-5">
|
||||
|
||||
<div class="card card-md">
|
||||
|
||||
<h2>
|
||||
Account maken
|
||||
</h2>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="text-center mb-4">
|
||||
|
||||
<form method="post">
|
||||
<h2>🛒 PantryHub</h2>
|
||||
|
||||
<p class="text-secondary">Account aanmaken</p>
|
||||
|
||||
<div class="mb-3">
|
||||
</div>
|
||||
|
||||
<label class="form-label">
|
||||
Naam
|
||||
</label>
|
||||
<form method="post">
|
||||
|
||||
<input
|
||||
class="form-control"
|
||||
name="name"
|
||||
required>
|
||||
<div class="mb-3">
|
||||
|
||||
<label class="form-label">Volledige naam</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="name"
|
||||
placeholder="Jouw naam"
|
||||
required>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<label class="form-label">E-mailadres</label>
|
||||
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
name="email"
|
||||
placeholder="jouw@email.com"
|
||||
required>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
|
||||
<label class="form-label">Wachtwoord</label>
|
||||
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
name="password"
|
||||
placeholder="Wachtwoord"
|
||||
required>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
|
||||
<button class="btn btn-primary w-100">
|
||||
|
||||
Account aanmaken
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<div class="text-center">
|
||||
|
||||
<p class="text-secondary">
|
||||
|
||||
Al een account?
|
||||
|
||||
<a href="/login">Inloggen</a>
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<label class="form-label">
|
||||
Email
|
||||
</label>
|
||||
|
||||
<input
|
||||
class="form-control"
|
||||
type="email"
|
||||
name="email"
|
||||
required>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<label class="form-label">
|
||||
Wachtwoord
|
||||
</label>
|
||||
|
||||
<input
|
||||
class="form-control"
|
||||
type="password"
|
||||
name="password"
|
||||
required>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<button class="btn btn-primary">
|
||||
|
||||
Registreren
|
||||
|
||||
</button>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
+109
-10
@@ -1,17 +1,116 @@
|
||||
<div class="mb-4">
|
||||
|
||||
<h1>
|
||||
Welkom <%= user.name %> 👋
|
||||
</h1>
|
||||
<h1>Welkom <%= user.name %> 👋</h1>
|
||||
|
||||
<p class="text-secondary">
|
||||
Huishouden: <strong><%= user.household_name || "Geen huishouden" %></strong>
|
||||
</p>
|
||||
|
||||
<p class="text-secondary">
|
||||
</div>
|
||||
|
||||
Huishouden:
|
||||
<strong>
|
||||
<%= user.household_name || "Geen huishouden" %>
|
||||
</strong>
|
||||
<div class="row">
|
||||
|
||||
</p>
|
||||
<div class="col-md-6">
|
||||
|
||||
</div>
|
||||
<div class="card">
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<h3 class="card-title">📊 Statistieken</h3>
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<div class="mb-2">Boodschappenlijsten: <strong><%= totalLists %></strong></div>
|
||||
|
||||
<% if(lists.length > 0) { %>
|
||||
|
||||
<div>Gemiddeld progress:
|
||||
<%
|
||||
const avg = lists.length > 0
|
||||
? Math.round(lists.reduce((sum, l) => sum + (l.checked_count || 0) / (l.item_count || 1), 0) / lists.length * 100)
|
||||
: 0;
|
||||
%>
|
||||
<strong><%= avg %>%</strong>
|
||||
</div>
|
||||
|
||||
<% } %>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<h3 class="card-title">🔗 Snelle links</h3>
|
||||
|
||||
<a href="/lists" class="btn btn-primary btn-block mb-2">
|
||||
|
||||
🛒 Naar boodschappenlijsten
|
||||
|
||||
</a>
|
||||
|
||||
<a href="/household" class="btn btn-secondary btn-block">
|
||||
|
||||
👨👩👧 Huishouden beheren
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<% if(lists.length > 0) { %>
|
||||
|
||||
<div class="row mt-4">
|
||||
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="card-header">
|
||||
|
||||
<h3 class="card-title">📝 Recente lijsten</h3>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list-group">
|
||||
|
||||
<% lists.forEach(list => { %>
|
||||
|
||||
<a href="/lists/<%= list.id %>" class="list-group-item list-group-item-action">
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
|
||||
<strong><%= list.name %></strong>
|
||||
|
||||
<small class="text-secondary">
|
||||
<%= list.checked_count || 0 %>/<%= list.item_count || 0 %> gedaan
|
||||
</small>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
<% }) %>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<% } %>
|
||||
|
||||
+83
-26
@@ -1,31 +1,88 @@
|
||||
<div class="card">
|
||||
<div class="page-header mb-4">
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<h2>
|
||||
<%= user.household_name %>
|
||||
</h2>
|
||||
|
||||
|
||||
<p>
|
||||
|
||||
Rol:
|
||||
|
||||
<strong>
|
||||
<%= user.role %>
|
||||
</strong>
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<button class="btn btn-primary">
|
||||
|
||||
Lid uitnodigen
|
||||
|
||||
</button>
|
||||
<h1>👨👩👧 <%= user.household_name %></h1>
|
||||
|
||||
<p class="text-secondary">Rol: <strong><%= user.role %></strong></p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-8">
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="card-header">
|
||||
|
||||
<h3 class="card-title">Leden</h3>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list-group">
|
||||
|
||||
<% members.forEach(member => { %>
|
||||
<div class="list-group-item">
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
|
||||
<div>
|
||||
<strong><%= member.name %></strong>
|
||||
<div class="text-secondary small"><%= member.email %></div>
|
||||
</div>
|
||||
|
||||
<span class="badge bg-primary"><%= member.role %></span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<% }) %>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="card-header">
|
||||
|
||||
<h3 class="card-title">Instellingen</h3>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<% if(user.role === 'OWNER') { %>
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<label class="form-label">Lid uitnodigen</label>
|
||||
|
||||
<p class="text-secondary small">Delen van deze code met anderen:</p>
|
||||
|
||||
<div class="input-group">
|
||||
|
||||
<input type="text" class="form-control" value="HOUSEHOLD_<%= user.household_id %>" readonly>
|
||||
|
||||
<button class="btn btn-outline-primary" onclick="navigator.clipboard.writeText('HOUSEHOLD_<%= user.household_id %>')">
|
||||
|
||||
Kopieren
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<% } %>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
+13
-24
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="nl">
|
||||
<!DOCTYPE html>
|
||||
<html lang="nl" data-household-id="<%= user?.household_id || '' %>">
|
||||
|
||||
<head>
|
||||
|
||||
@@ -7,37 +7,26 @@
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div class="page">
|
||||
|
||||
<%- include("../partials/navbar") %>
|
||||
|
||||
<main class="container-xl mt-4">
|
||||
|
||||
<div class="page-wrapper">
|
||||
<%- include("../partials/flash") %>
|
||||
|
||||
<%- body %>
|
||||
|
||||
<div class="container-xl">
|
||||
</main>
|
||||
|
||||
<%- body %>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<%- include("../partials/footer") %>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
|
||||
<%- include("../partials/footer") %>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.bundle.min.js"></script>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
|
||||
<script src="/js/app.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
<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. Maak er een aan!</p>
|
||||
|
||||
<% } else { %>
|
||||
|
||||
<div class="list-group">
|
||||
|
||||
<% lists.forEach(list => { %>
|
||||
|
||||
<a href="/lists/<%= list.id %>" class="list-group-item list-group-item-action">
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
|
||||
<strong><%= list.name %></strong>
|
||||
|
||||
<small class="text-secondary">
|
||||
<%= list.checked_count || 0 %>/<%= list.item_count || 0 %> gedaan
|
||||
</small>
|
||||
|
||||
</div>
|
||||
|
||||
<small class="text-muted">
|
||||
Aangemaakt <%= new Date(list.created_at).toLocaleDateString('nl-NL') %>
|
||||
</small>
|
||||
|
||||
</a>
|
||||
|
||||
<% }) %>
|
||||
|
||||
</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">
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<label class="form-label">Lijstnaam</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="name"
|
||||
placeholder="bijv. Weekboodschappen"
|
||||
required>
|
||||
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary w-100">
|
||||
|
||||
Lijst aanmaken
|
||||
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,66 @@
|
||||
<% if(success.length) { %>
|
||||
|
||||
<div class="alert alert-success alert-dismissible" role="alert">
|
||||
|
||||
<%= success[0] %>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="alert">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<% } %>
|
||||
|
||||
|
||||
<% if(error.length) { %>
|
||||
|
||||
<div class="alert alert-danger alert-dismissible" role="alert">
|
||||
|
||||
<%= error[0] %>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="alert">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<% } %>
|
||||
|
||||
|
||||
<% if(info.length) { %>
|
||||
|
||||
<div class="alert alert-info alert-dismissible" role="alert">
|
||||
|
||||
<%= info[0] %>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="alert">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<% } %>
|
||||
|
||||
|
||||
<% if(warning.length) { %>
|
||||
|
||||
<div class="alert alert-warning alert-dismissible" role="alert">
|
||||
|
||||
<%= warning[0] %>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="alert">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<% } %>
|
||||
+18
-6
@@ -2,17 +2,29 @@
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta name="theme-color" content="#0066cc">
|
||||
|
||||
<meta name="description" content="PantryHub - Realtime boodschappenapp">
|
||||
|
||||
<title>
|
||||
<%= title || "PantryHub" %>
|
||||
</title>
|
||||
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css"
|
||||
rel="stylesheet">
|
||||
<link rel="icon" href="/icons/icon.svg" type="image/svg+xml">
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css" rel="stylesheet">
|
||||
|
||||
<link
|
||||
href="/css/style.css"
|
||||
rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/tabler-icons.css" rel="stylesheet">
|
||||
|
||||
<link href="/css/style.css" rel="stylesheet">
|
||||
|
||||
<script>
|
||||
// Register service worker
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('/service-worker.js')
|
||||
.then(reg => console.log('✅ Service Worker registered'))
|
||||
.catch(err => console.log('❌ Service Worker registration failed:', err));
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,14 +1,99 @@
|
||||
<header class="navbar navbar-expand-md navbar-light d-print-none">
|
||||
<header class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
|
||||
|
||||
<div class="container-xl">
|
||||
<div class="container-xl">
|
||||
|
||||
<a class="navbar-brand" href="/">
|
||||
<a class="navbar-brand fw-bold" href="/">
|
||||
🛒 PantryHub
|
||||
</a>
|
||||
|
||||
🛒 PantryHub
|
||||
<button class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarMenu">
|
||||
|
||||
</a>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="navbarMenu">
|
||||
|
||||
<% if (user) { %>
|
||||
|
||||
<ul class="navbar-nav me-auto">
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/">Dashboard</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/lists">🛒 Lijsten</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/products">📦 Producten</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/household">👨👩👧 Huishouden</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
|
||||
<a class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
data-bs-toggle="dropdown">
|
||||
|
||||
👤 <%= user.name %>
|
||||
|
||||
</a>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
|
||||
<span class="dropdown-item-text text-muted">
|
||||
<%= user.household_name %>
|
||||
</span>
|
||||
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<a class="dropdown-item" href="/profile">
|
||||
Profiel
|
||||
</a>
|
||||
|
||||
<a class="dropdown-item" href="/settings">
|
||||
Instellingen
|
||||
</a>
|
||||
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<a class="dropdown-item text-danger"
|
||||
href="/logout">
|
||||
Uitloggen
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<% } else { %>
|
||||
|
||||
<div class="ms-auto">
|
||||
|
||||
<a href="/login" class="btn btn-primary">
|
||||
Inloggen
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<% } %>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
+112
-34
@@ -1,71 +1,149 @@
|
||||
<div class="page-header mb-4">
|
||||
|
||||
<h1>
|
||||
|
||||
📦 Producten
|
||||
|
||||
</h1>
|
||||
<h1>📦 Producten</h1>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-8">
|
||||
|
||||
<div class="card">
|
||||
<div class="card">
|
||||
|
||||
<div class="card-body">
|
||||
<div class="card-body">
|
||||
|
||||
<% if(products.length === 0) { %>
|
||||
|
||||
<% if(products.length === 0) { %>
|
||||
<p class="text-secondary">Nog geen producten.</p>
|
||||
|
||||
<% } else { %>
|
||||
|
||||
<p>
|
||||
<div class="list-group">
|
||||
|
||||
Nog geen producten.
|
||||
<%
|
||||
const grouped = {};
|
||||
products.forEach(p => {
|
||||
const cat = p.category_name || 'Overig';
|
||||
if (!grouped[cat]) grouped[cat] = [];
|
||||
grouped[cat].push(p);
|
||||
});
|
||||
%>
|
||||
|
||||
</p>
|
||||
<% Object.keys(grouped).sort().forEach(cat => { %>
|
||||
|
||||
<div class="list-group-item list-group-item-info">
|
||||
|
||||
<% } %>
|
||||
<strong><%= cat %></strong>
|
||||
|
||||
</div>
|
||||
|
||||
<% grouped[cat].forEach(product => { %>
|
||||
|
||||
<div class="list-group">
|
||||
<div class="list-group-item">
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
|
||||
<% products.forEach(product => { %>
|
||||
<strong>
|
||||
|
||||
<%= product.category_icon || "" %>
|
||||
|
||||
<div class="list-group-item">
|
||||
<%= product.name %>
|
||||
|
||||
</strong>
|
||||
|
||||
<strong>
|
||||
<small class="text-secondary">
|
||||
|
||||
<%= product.name %>
|
||||
<% if(product.barcode) { %>
|
||||
|
||||
</strong>
|
||||
📊 <%= product.barcode %>
|
||||
|
||||
<% } %>
|
||||
|
||||
<br>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
|
||||
<span class="text-secondary">
|
||||
</div>
|
||||
|
||||
<%= product.category_icon || "" %>
|
||||
<% }) %>
|
||||
|
||||
<%= product.category_name || "Geen categorie" %>
|
||||
<% }) %>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<% } %>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
|
||||
<div class="card">
|
||||
|
||||
<div class="card-header">
|
||||
|
||||
<h3 class="card-title">Nieuw product</h3>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<form method="post" action="/products">
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<label class="form-label">Productnaam</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="name"
|
||||
placeholder="bijv. Melk"
|
||||
required>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<label class="form-label">Categorie</label>
|
||||
|
||||
<select class="form-select" name="category_id">
|
||||
|
||||
<option value="">-- Geen categorie --</option>
|
||||
|
||||
<% if(categories) { %>
|
||||
|
||||
<% categories.forEach(cat => { %>
|
||||
|
||||
<option value="<%= cat.id %>">
|
||||
|
||||
<%= cat.icon || "" %> <%= cat.name %>
|
||||
|
||||
</option>
|
||||
|
||||
<% }) %>
|
||||
|
||||
<% } %>
|
||||
|
||||
</select>
|
||||
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary w-100">
|
||||
|
||||
Product toevoegen
|
||||
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<% }) %>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user