jurgenr/PantryHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge laatste worktree in master

Browse Source 
Neemt de laatste PantryHub-implementatie over in de hoofdbranch.\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
jurgenr
2026-08-07 20:46:00 +02:00
parent c07d503d83 ce68182c08
commit 5f9fffdb72
21 changed files with 345 additions and 1128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/auth/login.ejs
+4
View File
@@ -78,6 +78,10 @@
</form>
<p class="text-secondary mt-3">
Nog geen account? <a href="/register">Registreren</a>
</p>
</div>
views/layouts/main.ejs
+26 -13
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="nl" data-household-id="<%= user?.household_id || '' %>">
<!doctype html>
<html lang="nl">
<head>
@@ -7,26 +7,39 @@
</head>
<body>
<div class="page">
<%- include("../partials/navbar") %>
<main class="container-xl mt-4">
<%- include("../partials/flash") %>
<div class="page-wrapper">
<%- body %>
</main>
<div class="container-xl">
<%- include("../partials/footer") %>
<%- include("../partials/flash") %>
<%- body %>
<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>
</div>
<%- include("../partials/footer") %>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
</html>
views/lists/index.ejs
+11 -65
View File
@@ -1,96 +1,42 @@
<div class="page-header mb-4">
<h1>🛒 Boodschappenlijsten</h1>
<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>
<% if (lists.length === 0) { %>
<p class="text-secondary">Je hebt nog geen boodschappenlijsten.</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>
<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') %>
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-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>
<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>
views/lists/show.ejs
+38 -190
View File
@@ -1,221 +1,69 @@
<div class="page-header mb-4">
<a href="/lists" class="btn btn-link btn-icon">&larr;</a>
<a href="/lists" class="btn btn-link">&larr; Terug</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) { %>
<% 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 class="list-group-item d-flex align-items-center">
<form method="post" action="/lists/<%= list.id %>/items/<%= item.id %>/toggle">
<button class="btn btn-sm me-2" type="submit" aria-label="Product afvinken">
<%= item.checked ? "☑" : "☐" %>
</button>
</form>
<div class="flex-grow-1">
<strong<% if (item.checked) { %> style="text-decoration: line-through"<% } %>>
<%= item.product_name %>
</strong>
<% if (item.amount !== 1) { %><span class="badge bg-info"><%= item.amount %></span><% } %>
<div class="small text-secondary"><%= item.category_icon || "" %> <%= item.category_name || "Geen categorie" %></div>
</div>
<form class="delete-item-form" method="post" action="/lists/<%= list.id %>/items/<%= item.id %>">
<button class="btn btn-sm btn-link text-danger" type="submit">Verwijder</button>
</form>
</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-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 method="post" action="/lists/<%= list.id %>/items">
<label class="form-label" for="product-id">Product</label>
<select id="product-id" class="form-select mb-3" name="product_id" required>
<option value="">Kies een product</option>
<% (products || []).forEach(product => { %>
<option value="<%= product.id %>"><%= product.name %></option>
<% }); %>
</select>
<label class="form-label" for="amount">Hoeveelheid</label>
<input id="amount" class="form-control mb-3" type="number" name="amount"
value="1" min="0.5" step="0.5" required>
<button class="btn btn-primary w-100" type="submit">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;
document.querySelectorAll(".delete-item-form").forEach((form) => {
form.addEventListener("submit", async (event) => {
event.preventDefault();
if (!confirm("Product verwijderen?")) return;
const response = await fetch(form.action, { method: "DELETE" });
if (response.ok) window.location.reload();
});
});
// 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>
views/partials/flash.ejs
+9 -63
View File
@@ -1,66 +1,12 @@
<% 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 (success && success.length) { %>
<div class="alert alert-success" role="alert"><%= success[0] %></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 (error && error.length) { %>
<div class="alert alert-danger" role="alert"><%= error[0] %></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 (info && info.length) { %>
<div class="alert alert-info" role="alert"><%= info[0] %></div>
<% } %>
<% if (warning && warning.length) { %>
<div class="alert alert-warning" role="alert"><%= warning[0] %></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>
<% } %>
views/partials/head.ejs
+10 -16
View File
@@ -2,29 +2,23 @@
<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 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="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/tabler-icons.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link
href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.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));
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/service-worker.js", { updateViaCache: "none" });
}
</script>
<link
href="/css/style.css"
rel="stylesheet">
views/partials/navbar.ejs
+16 -91
View File
@@ -1,99 +1,24 @@
<header class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<div class="container-xl">
<a class="navbar-brand fw-bold" href="/">
🛒 PantryHub
</a>
<a class="navbar-brand" href="/">
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarMenu">
🛒 PantryHub
<span class="navbar-toggler-icon"></span>
</button>
<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>
</a>
<% if (user) { %>
<div class="navbar-nav flex-row ms-auto">
<a class="nav-link" href="/">Dashboard</a>
<a class="nav-link" href="/lists">Lijsten</a>
<a class="nav-link" href="/products">Producten</a>
<a class="nav-link" href="/household">Huishouden</a>
<a class="nav-link text-danger" href="/logout">Uitloggen</a>
</div>
<% } %>
</div>
</header>
views/products/index.ejs
+24 -120
View File
@@ -1,149 +1,53 @@
<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-body">
<% if(products.length === 0) { %>
<% if (products.length === 0) { %>
<p class="text-secondary">Nog geen producten.</p>
<% } else { %>
<div class="list-group">
<%
const grouped = {};
products.forEach(p => {
const cat = p.category_name || 'Overig';
if (!grouped[cat]) grouped[cat] = [];
grouped[cat].push(p);
});
%>
<% Object.keys(grouped).sort().forEach(cat => { %>
<div class="list-group-item list-group-item-info">
<strong><%= cat %></strong>
<% products.forEach(product => { %>
<div class="list-group-item">
<strong><%= product.category_icon || "" %> <%= product.name %></strong>
<div class="text-secondary"><%= product.category_name || "Geen categorie" %></div>
</div>
<% grouped[cat].forEach(product => { %>
<div class="list-group-item">
<div class="d-flex justify-content-between">
<strong>
<%= product.category_icon || "" %>
<%= product.name %>
</strong>
<small class="text-secondary">
<% if(product.barcode) { %>
📊 <%= product.barcode %>
<% } %>
</small>
</div>
</div>
<% }) %>
<% }) %>
<% }); %>
</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-header"><h3 class="card-title">Nieuw product</h3></div>
<div class="card-body">
<form method="post" action="/products">
<label class="form-label" for="product-name">Productnaam</label>
<input id="product-name" class="form-control mb-3" type="text" name="name"
placeholder="bijv. Melk" maxlength="120" required>
<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>
<label class="form-label" for="category-id">Categorie</label>
<select id="category-id" class="form-select mb-3" name="category_id">
<option value="">Geen categorie</option>
<% (categories || []).forEach(category => { %>
<option value="<%= category.id %>"><%= category.icon || "" %> <%= category.name %></option>
<% }); %>
</select>
<button class="btn btn-primary w-100" type="submit">Product toevoegen</button>
</form>
</div>
</div>
</div>
</div>
</div>