feat: add web UI for managing products

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013gwc3aCiyQxmCWQke8RvEz
2026-09-05 15:17:42 +02:00
parent 3b0e824c5b
commit f73ea41a6c
3 changed files with 177 additions and 0 deletions
@@ -0,0 +1,43 @@
+const express = require('express');
+const basicAuth = require('express-basic-auth');
+const { renderIndex } = require('./views');
+
+function createApp(deps) {
+  const {
+    listProducts, addProduct, deleteProduct,
+    checkAllProducts, authUser, authPass,
+  } = deps;
+
+  const app = express();
+  app.use(express.urlencoded({ extended: false }));
+  app.use(basicAuth({ users: { [authUser]: authPass }, challenge: true }));
+
+  app.get('/', (req, res) => {
+    const products = listProducts();
+    const message = req.query.checked ? 'Controle uitgevoerd.' : undefined;
+    res.send(renderIndex({ products, message }));
+  });
+
+  app.post('/products', (req, res) => {
+    const { name, url } = req.body;
+    if (name && url) {
+      addProduct({ name, url });
+    }
+    res.redirect('/');
+  });
+
+  app.post('/products/:id/delete', (req, res) => {
+    deleteProduct(Number(req.params.id));
+    res.redirect('/');
+  });
+
+  app.post('/check-now', async (req, res) => {
+    const products = listProducts();
+    await checkAllProducts(products);
+    res.redirect('/?checked=1');
+  });
+
+  return app;
+}
+
+module.exports = { createApp };
@@ -0,0 +1,63 @@
+function escapeHtml(str) {
+  return String(str).replace(/[&<>"']/g, (c) => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+  }[c]));
+}
+
+function formatPrice(price) {
+  return price == null ? '—' : `€${Number(price).toFixed(2).replace('.', ',')}`;
+}
+
+function renderProductRow(product) {
+  return `
+    <tr>
+      <td>${escapeHtml(product.name)}</td>
+      <td><a href="${escapeHtml(product.url)}" target="_blank" rel="noopener">bekijken</a></td>
+      <td>${formatPrice(product.last_price)}</td>
+      <td>${product.last_checked_at ? escapeHtml(product.last_checked_at) : '—'}</td>
+      <td>${escapeHtml(product.last_check_status || '—')}</td>
+      <td>
+        <form method="post" action="/products/${product.id}/delete" onsubmit="return confirm('Product verwijderen?');">
+          <button type="submit">Verwijder</button>
+        </form>
+      </td>
+    </tr>`;
+}
+
+function renderIndex({ products, message }) {
+  return `<!doctype html>
+<html lang="nl">
+<head>
+  <meta charset="utf-8">
+  <title>Korting — prijstracker</title>
+  <style>
+    body { font-family: system-ui, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
+    table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
+    th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid #ddd; }
+    .message { background: #eef; padding: 0.5rem 1rem; border-radius: 4px; }
+  </style>
+</head>
+<body>
+  <h1>Korting — prijstracker</h1>
+  ${message ? `<p class="message">${escapeHtml(message)}</p>` : ''}
+  <form method="post" action="/products">
+    <input name="name" placeholder="Naam" required>
+    <input name="url" type="url" placeholder="https://..." required>
+    <button type="submit">Toevoegen</button>
+  </form>
+  <form method="post" action="/check-now">
+    <button type="submit">Nu controleren</button>
+  </form>
+  <table>
+    <thead>
+      <tr><th>Naam</th><th>URL</th><th>Prijs</th><th>Laatst gecontroleerd</th><th>Status</th><th></th></tr>
+    </thead>
+    <tbody>
+      ${products.map(renderProductRow).join('')}
+    </tbody>
+  </table>
+</body>
+</html>`;
+}
+
+module.exports = { renderIndex, escapeHtml, formatPrice };