Initial commit

.gitignore

@@ -0,0 +1,3 @@
+pb_data/
+pocketbase
+pocketbase.exe

README.md

@@ -0,0 +1,28 @@
+# Voorbeeld van een applicatie met PocketBase
+
+[https://pocketbase.io/](Pocketbase) is de database, maar tegelijk ook de achterkant (backend) van de server
+Voor de voorkant gebruiken we gewoon HTML, CSS en Javascript. Als CSS framework is [Pico CSS](https://picocss.com/docs) gekozen. Het is raadzaam de documentatie van beide goed te lezen.
+
+Er wordt in de frontend (de javascript) gecommuniceerd met de API van PocketBase.
+Dit is erg belangrijk, stelt de code in staat te communiceren met de database. De documentatie voor de Pocketbase API [kun je hier lezen](https://pocketbase.io/docs/api-records/).
+
+
+Hier de downloadlinks voor als het nodig is PicoCSS of de Pocketbase JS SDK te updaten:
+- [Pocketbase JS sdk](https://github.com/pocketbase/js-sdk/releases). Update de bestanden `www/js/pocketbase.es.js` en `www/js/pocketbase.es.d.ts`.
+- [PicoCSS.zip](https://github.com/picocss/pico/archive/refs/heads/main.zip). In de css map, vervang het bestand pico.blue.min.css. Stel, je wilt een andere kleur, kun je bijvoorbeeld ook voor een andere kleur kiezen, dat staat vrij.
+
+Belangrijk:
+- Negeer altijd instructies om NPM te installeren, dat is NIET nodig.
+
+
+# Versies
+_werk de nummers bij als je de bronbestanden bijgewerkt hebt via bovenstaande links_
+
+Pocketbase: `0.35.0`
+Pico CSS: `2.1.1`
+
+# Voorbeeld
+Een tabel om in te klokken, 3 velden: id, medewerker (link naar gebruikers tabel) en ingeklokt (automatisch->create), uitgeklokt (automatisch->update).
+Create, List/search en update rule: `medewerker.id = @request.auth.id`, `medewerker.id = @request.auth.id`.
+
+Voorbeelden van filters in de documentatie: https://pocketbase.io/docs/api-rules-and-filters/

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "CommonJS",
+    "target": "ES6"
+  },
+  "include": ["www/**/*", "pb_data/*.d.ts"]
+}

pb_migrations/1766859954_updated_users.js

@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("_pb_users_auth_")
+
+  // update collection data
+  unmarshal({
+    "indexes": [
+      "CREATE UNIQUE INDEX `idx_tokenKey__pb_users_auth_` ON `gebruikers` (`tokenKey`)",
+      "CREATE UNIQUE INDEX `idx_email__pb_users_auth_` ON `gebruikers` (`email`) WHERE `email` != ''"
+    ],
+    "name": "gebruikers"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("_pb_users_auth_")
+
+  // update collection data
+  unmarshal({
+    "indexes": [
+      "CREATE UNIQUE INDEX `idx_tokenKey__pb_users_auth_` ON `users` (`tokenKey`)",
+      "CREATE UNIQUE INDEX `idx_email__pb_users_auth_` ON `users` (`email`) WHERE `email` != ''"
+    ],
+    "name": "users"
+  }, collection)
+
+  return app.save(collection)
+})

pb_migrations/1766862082_updated_gebruikers.js

@@ -0,0 +1,20 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("_pb_users_auth_")
+
+  // update collection data
+  unmarshal({
+    "listRule": ""
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("_pb_users_auth_")
+
+  // update collection data
+  unmarshal({
+    "listRule": "id = @request.auth.id"
+  }, collection)
+
+  return app.save(collection)
+})

pb_migrations/1766862129_updated_gebruikers.js

@@ -0,0 +1,22 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("_pb_users_auth_")
+
+  // update collection data
+  unmarshal({
+    "createRule": null,
+    "listRule": "id = @request.auth.id"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("_pb_users_auth_")
+
+  // update collection data
+  unmarshal({
+    "createRule": "",
+    "listRule": ""
+  }, collection)
+
+  return app.save(collection)
+})

pb_migrations/1766862167_updated_gebruikers.js

@@ -0,0 +1,87 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("_pb_users_auth_")
+
+  // update collection data
+  unmarshal({
+    "oauth2": {
+      "mappedFields": {
+        "avatarURL": "",
+        "name": ""
+      }
+    }
+  }, collection)
+
+  // remove field
+  collection.fields.removeById("file376926767")
+
+  // update field
+  collection.fields.addAt(6, new Field({
+    "autogeneratePattern": "",
+    "hidden": false,
+    "id": "text1579384326",
+    "max": 255,
+    "min": 0,
+    "name": "naam",
+    "pattern": "",
+    "presentable": false,
+    "primaryKey": false,
+    "required": false,
+    "system": false,
+    "type": "text"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("_pb_users_auth_")
+
+  // update collection data
+  unmarshal({
+    "oauth2": {
+      "mappedFields": {
+        "avatarURL": "avatar",
+        "name": "name"
+      }
+    }
+  }, collection)
+
+  // add field
+  collection.fields.addAt(7, new Field({
+    "hidden": false,
+    "id": "file376926767",
+    "maxSelect": 1,
+    "maxSize": 0,
+    "mimeTypes": [
+      "image/jpeg",
+      "image/png",
+      "image/svg+xml",
+      "image/gif",
+      "image/webp"
+    ],
+    "name": "avatar",
+    "presentable": false,
+    "protected": false,
+    "required": false,
+    "system": false,
+    "thumbs": null,
+    "type": "file"
+  }))
+
+  // update field
+  collection.fields.addAt(6, new Field({
+    "autogeneratePattern": "",
+    "hidden": false,
+    "id": "text1579384326",
+    "max": 255,
+    "min": 0,
+    "name": "name",
+    "pattern": "",
+    "presentable": false,
+    "primaryKey": false,
+    "required": false,
+    "system": false,
+    "type": "text"
+  }))
+
+  return app.save(collection)
+})

pb_migrations/1766865917_created_klokken.js

@@ -0,0 +1,60 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "_pb_users_auth_",
+        "hidden": false,
+        "id": "relation948496446",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "medewerker",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2939903645",
+        "name": "datumtijd",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_4227797064",
+    "indexes": [],
+    "listRule": null,
+    "name": "klokken",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4227797064");
+
+  return app.delete(collection);
+})

pb_migrations/1766866192_updated_klokken.js

@@ -0,0 +1,61 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4227797064")
+
+  // update collection data
+  unmarshal({
+    "createRule": "medewerker.id = @request.auth.id",
+    "updateRule": "medewerker.id = @request.auth.id"
+  }, collection)
+
+  // add field
+  collection.fields.addAt(3, new Field({
+    "hidden": false,
+    "id": "autodate820045582",
+    "name": "uitgeklokt",
+    "onCreate": false,
+    "onUpdate": true,
+    "presentable": false,
+    "system": false,
+    "type": "autodate"
+  }))
+
+  // update field
+  collection.fields.addAt(2, new Field({
+    "hidden": false,
+    "id": "autodate2939903645",
+    "name": "ingeklokt",
+    "onCreate": true,
+    "onUpdate": false,
+    "presentable": false,
+    "system": false,
+    "type": "autodate"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4227797064")
+
+  // update collection data
+  unmarshal({
+    "createRule": null,
+    "updateRule": null
+  }, collection)
+
+  // remove field
+  collection.fields.removeById("autodate820045582")
+
+  // update field
+  collection.fields.addAt(2, new Field({
+    "hidden": false,
+    "id": "autodate2939903645",
+    "name": "datumtijd",
+    "onCreate": true,
+    "onUpdate": false,
+    "presentable": false,
+    "system": false,
+    "type": "autodate"
+  }))
+
+  return app.save(collection)
+})

pb_migrations/1766866668_updated_klokken.js

@@ -0,0 +1,20 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4227797064")
+
+  // update collection data
+  unmarshal({
+    "listRule": "medewerker.id = @request.auth.id"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4227797064")
+
+  // update collection data
+  unmarshal({
+    "listRule": null
+  }, collection)
+
+  return app.save(collection)
+})

pb_migrations/1766868538_created_berichten.js

@@ -0,0 +1,74 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": "afzender = @request.auth.id",
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "_pb_users_auth_",
+        "hidden": false,
+        "id": "relation1489550391",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "afzender",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text2895984270",
+        "max": 0,
+        "min": 0,
+        "name": "bericht",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "autodate1587919980",
+        "name": "verstuurd",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_4257786651",
+    "indexes": [],
+    "listRule": "",
+    "name": "berichten",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4257786651");
+
+  return app.delete(collection);
+})

pb_migrations/1766869940_updated_berichten.js

@@ -0,0 +1,20 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4257786651")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.id != ''"
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_4257786651")
+
+  // update collection data
+  unmarshal({
+    "listRule": ""
+  }, collection)
+
+  return app.save(collection)
+})

pb_migrations/1766870430_created_berichten_bekijken.js

@@ -0,0 +1,76 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 0,
+        "min": 0,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "_clone_7KTY",
+        "max": 0,
+        "min": 0,
+        "name": "bericht",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "_clone_HF2I",
+        "name": "verstuurd",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "_clone_ItTJ",
+        "max": 255,
+        "min": 0,
+        "name": "naam",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      }
+    ],
+    "id": "pbc_147944274",
+    "indexes": [],
+    "listRule": null,
+    "name": "berichten_bekijken",
+    "system": false,
+    "type": "view",
+    "updateRule": null,
+    "viewQuery": "SELECT berichten.id, berichten.bericht, berichten.verstuurd, gebruikers.naam FROM berichten\nINNER JOIN gebruikers ON gebruikers.id = berichten.afzender",
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_147944274");
+
+  return app.delete(collection);
+})

pb_migrations/1766870460_updated_berichten_bekijken.js

@@ -0,0 +1,126 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_147944274")
+
+  // update collection data
+  unmarshal({
+    "listRule": ""
+  }, collection)
+
+  // remove field
+  collection.fields.removeById("_clone_7KTY")
+
+  // remove field
+  collection.fields.removeById("_clone_HF2I")
+
+  // remove field
+  collection.fields.removeById("_clone_ItTJ")
+
+  // add field
+  collection.fields.addAt(1, new Field({
+    "autogeneratePattern": "",
+    "hidden": false,
+    "id": "_clone_oLDn",
+    "max": 0,
+    "min": 0,
+    "name": "bericht",
+    "pattern": "",
+    "presentable": false,
+    "primaryKey": false,
+    "required": false,
+    "system": false,
+    "type": "text"
+  }))
+
+  // add field
+  collection.fields.addAt(2, new Field({
+    "hidden": false,
+    "id": "_clone_bb1h",
+    "name": "verstuurd",
+    "onCreate": true,
+    "onUpdate": false,
+    "presentable": false,
+    "system": false,
+    "type": "autodate"
+  }))
+
+  // add field
+  collection.fields.addAt(3, new Field({
+    "autogeneratePattern": "",
+    "hidden": false,
+    "id": "_clone_gXjC",
+    "max": 255,
+    "min": 0,
+    "name": "naam",
+    "pattern": "",
+    "presentable": false,
+    "primaryKey": false,
+    "required": false,
+    "system": false,
+    "type": "text"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_147944274")
+
+  // update collection data
+  unmarshal({
+    "listRule": null
+  }, collection)
+
+  // add field
+  collection.fields.addAt(1, new Field({
+    "autogeneratePattern": "",
+    "hidden": false,
+    "id": "_clone_7KTY",
+    "max": 0,
+    "min": 0,
+    "name": "bericht",
+    "pattern": "",
+    "presentable": false,
+    "primaryKey": false,
+    "required": false,
+    "system": false,
+    "type": "text"
+  }))
+
+  // add field
+  collection.fields.addAt(2, new Field({
+    "hidden": false,
+    "id": "_clone_HF2I",
+    "name": "verstuurd",
+    "onCreate": true,
+    "onUpdate": false,
+    "presentable": false,
+    "system": false,
+    "type": "autodate"
+  }))
+
+  // add field
+  collection.fields.addAt(3, new Field({
+    "autogeneratePattern": "",
+    "hidden": false,
+    "id": "_clone_ItTJ",
+    "max": 255,
+    "min": 0,
+    "name": "naam",
+    "pattern": "",
+    "presentable": false,
+    "primaryKey": false,
+    "required": false,
+    "system": false,
+    "type": "text"
+  }))
+
+  // remove field
+  collection.fields.removeById("_clone_oLDn")
+
+  // remove field
+  collection.fields.removeById("_clone_bb1h")
+
+  // remove field
+  collection.fields.removeById("_clone_gXjC")
+
+  return app.save(collection)
+})

www/chat.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="color-scheme" content="light dark">
+    <title>Chat demo</title>
+
+    <!-- Link Pico CSS bestand aan deze pagina -->
+    <link rel="stylesheet" href="css/vendor/pico.blue.min.css">
+
+    <!-- <script defer type="module" src="js/chat.js"></script> -->
+    <script defer type="module" src="js/chat-onveilig.js"></script>
+</head>
+
+<body>
+    <main class="container">
+        <nav>
+            <ul>
+                <li>
+                    <strong>Demo van Pocketbase</strong>
+                </li>
+            </ul>
+            <ul>
+                <li>
+                    <a class="outline" role="button" href="index.html">Home</a>
+                </li>
+            </ul>
+        </nav>
+        <div class="grid">
+            <article id="berichten">
+
+            </article>
+            <article>
+                <h2>Bericht versturen</h2>
+                <form id="verstuurform">
+                    <textarea name="bericht" placeholder="Type je bericht..."></textarea>
+                    <button>Versturen</button>
+                </form>
+            </article>
+        </div>
+    </main>
+</body>
+
+</html>

www/css/index.css

@@ -0,0 +1,3 @@
+.verborgen {
+    display: none;
+}

www/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="color-scheme" content="light dark">
+    <title>PocketDB Demo</title>
+
+    <!-- Link Pico CSS bestand aan deze pagina -->
+    <link rel="stylesheet" href="css/vendor/pico.blue.min.css">
+
+    <script defer type="module" src="js/home.js"></script>
+</head>
+
+<body>
+    <main class="container">
+        <nav>
+            <ul>
+                <li>
+                    <strong>Demo van Pocketbase</strong>
+                </li>
+            </ul>
+            <ul>
+                <li>
+                    <a class="secondary outline" role="button" href="chat.html">Chat</a>
+                </li>
+            </ul>
+        </nav>
+        <article>
+            <h1>Welkom, <span id="naam"></span></h1>
+
+            <button id="klokknop">Inklokken</button>
+            <button id="uitlogknop" class="outline">Uitloggen</button>
+
+
+        </article>
+    </main>
+</body>
+
+</html>

www/inloggen.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="nl" data-theme="light">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="color-scheme" content="light dark">
+    <title>Demo - Inloggen</title>
+
+    <!-- Link Pico CSS bestand aan deze pagina -->
+    <link rel="stylesheet" href="css/vendor/pico.blue.min.css">
+    <!-- En onze eigen CSS -->
+    <link rel="stylesheet" href="css/index.css">
+
+    <script defer type="module" src="js/inloggen.js"></script>
+</head>
+
+<body>
+    <main class="container">
+        <article>
+            <h1>Inloggen</h1>
+            <form id="loginform">
+                <fieldset>
+                    <label>
+                        Email
+                        <input type="email" name="email" placeholder="E-mail" />
+                    </label>
+                    <label>
+                        Wachtwoord
+                        <input type="password" name="wachtwoord" placeholder="Wachtwoord" />
+                        <small class="verborgen" id="foutmelding">Gebruikersnaam of wachtwoord onjuist</small>
+                    </label>
+                </fieldset>
+
+                <button>Inloggen</button>
+            </form>
+        </article>
+    </main>
+</body>
+
+</html>

www/js/chat-onveilig.js

@@ -0,0 +1,58 @@
+import { database, alleenIngelogd } from "./index.js";
+
+alleenIngelogd();
+
+// Berichten versturen
+/** @type {HTMLFormElement} */
+const formulier = document.getElementById('verstuurform');
+
+formulier.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    const gegevens = new FormData(formulier);
+    await verstuurBericht(gegevens.get('bericht'))
+    formulier.reset();
+});
+
+async function verstuurBericht(bericht) {
+    await database.collection('berichten').create({
+        afzender: database.authStore.record.id,
+        bericht
+    });
+}
+
+// Laad 20 nieuwste berichten in, soorteer bij verstuurd (hoog naar laag)
+const berichten = await database.collection('berichten').getList(1, 20, {
+    sort: '-verstuurd',
+    expand: 'afzender'
+});
+
+const berichtenlijst = document.getElementById('berichten');
+
+let berichtenHtml = [];
+
+berichten.items.forEach(bericht => {
+    berichtenHtml.push(`<article>
+        <h3>${bericht.expand.afzender.naam}</h3>
+        <p>${bericht.verstuurd}</p>
+        <h5>${bericht.bericht}</h5>
+        </article>`);
+});
+
+berichtenlijst.innerHTML = berichtenHtml.join('\n');
+
+// Schrijf in op nieuwe berichten (Create) en werk dan de berichtenlijst bij
+database.collection('berichten').subscribe('*', function(event) {
+    if(event.action !== 'create') {
+        return;
+    }
+
+    const bericht = event.record;
+    berichtenlijst.innerHTML = `<article>
+        <h3>${bericht.expand.afzender.naam}</h3>
+        <p>${bericht.verstuurd}</p>
+        <h5>${bericht.bericht}</h5>
+        </article>` + '\n' + berichtenlijst.innerHTML;
+}, {
+    expand: 'afzender'
+});
+

www/js/chat-veilig.js

@@ -0,0 +1,54 @@
+import { database, alleenIngelogd } from "./index.js";
+
+alleenIngelogd();
+
+// Berichten versturen
+/** @type {HTMLFormElement} */
+const formulier = document.getElementById('verstuurform');
+
+formulier.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    const gegevens = new FormData(formulier);
+    await verstuurBericht(gegevens.get('bericht'))
+    formulier.reset();
+});
+
+async function verstuurBericht(bericht) {
+    await database.collection('berichten').create({
+        afzender: database.authStore.record.id,
+        bericht
+    });
+}
+
+// Laad 20 nieuwste berichten in, soorteer bij verstuurd (hoog naar laag)
+const berichten = await database.collection('berichten_bekijken').getList(1, 20, {
+    sort: '-verstuurd'
+});
+
+const berichtenlijst = document.getElementById('berichten');
+
+let berichtenHtml = [];
+
+berichten.items.forEach(bericht => {
+    berichtenHtml.push(`<article>
+        <h3>${bericht.naam}</h3>
+        <p>${bericht.verstuurd}</p>
+        <h5>${bericht.bericht}</h5>
+        </article>`);
+});
+
+berichtenlijst.innerHTML = berichtenHtml.join('\n');
+
+// Schrijf in op nieuwe berichten (Create) en werk dan de berichtenlijst bij
+// Helaas kan dit niet, subscriben op een view...
+database.collection('berichten_bekijken').subscribe('*', function(event) {
+    const bericht = event.record;
+    berichtenlijst.innerHTML = `<article>
+        <h3>${bericht.naam}</h3>
+        <p>${bericht.verstuurd}</p>
+        <h5>${bericht.bericht}</h5>
+        </article>` + '\n' + berichtenlijst.innerHTML;
+}, {
+    expand: 'afzender'
+});
+

www/js/home.js

@@ -0,0 +1,52 @@
+import { alleenIngelogd, database } from "./index.js";
+
+// Controleer of iemand ingelogd is
+alleenIngelogd();
+
+// Toon naam van ingelogde gebruiker
+document.getElementById('naam').textContent =
+    database.authStore.record.naam;
+
+// Haal eerste record is waarop gebruiker NIET uitgeklokt is (dan is iemand namelijk ingeklokt)
+let ingeklokt = undefined;
+
+try {
+    const item = await database.collection('klokken').getFirstListItem('uitgeklokt = NULL');
+    ingeklokt = item.id;
+    document.getElementById('klokknop').textContent = 'Uitklokken';
+} catch {
+    // Niet ingeklokt, want niet gevonden
+}
+
+document.getElementById('klokknop').addEventListener('click', async () => {
+    try {
+        if (!ingeklokt) {
+            await inklokken();
+        } else {
+            await uitklokken();
+        }
+    } catch {
+        alert('In- of uitklokken mislukt');
+    }
+});
+
+document.getElementById('uitlogknop').addEventListener('click', () => {
+    database.authStore.clear();
+    window.location.href = 'inloggen.html';
+});
+
+async function inklokken() {
+    const item = await database.collection('klokken')
+        .create({ medewerker: database.authStore.record.id });
+
+    document.getElementById('klokknop').textContent = 'Uitklokken';
+    ingeklokt = item.id;
+}
+
+async function uitklokken() {
+    await database.collection('klokken')
+        .update(ingeklokt);
+
+    document.getElementById('klokknop').textContent = 'Inklokken';
+    ingeklokt = undefined;
+}

www/js/index.js

@@ -0,0 +1,18 @@
+import PocketBase from './vendor/pocketbase.es.js';
+
+/**
+ * Database
+ */
+export const database = new PocketBase('http://localhost:8090');
+
+window.db = database;
+
+/**
+ * Controleer of iemand ingelogd is. Zo niet, stuur iemand naar inloggen.html
+ */
+export function alleenIngelogd() {
+    // Als iemand niet ingelogd is, stuur iemand naar inloggen.js
+    if (!database.authStore.isValid) {
+        window.location.href = 'inloggen.html';
+    }
+}

www/js/inloggen.js

@@ -0,0 +1,45 @@
+import { ClientResponseError } from './vendor/pocketbase.es.js';
+import { database } from './index.js';
+
+/** @type {HTMLFormElement} */
+const inlogformulier = document.getElementById('loginform');
+
+inlogformulier.addEventListener('submit', async (event) => {
+    event.preventDefault(); // Voorkomt dat de pagina gaat herladen
+
+    const formdata = new FormData(inlogformulier);
+
+    try {
+        const email = formdata.get('email');
+        const wachtwoord = formdata.get('wachtwoord');
+
+        await database.collection('gebruikers').authWithPassword(email, wachtwoord);
+
+        verbergFoutmeldingen();
+
+        // Inloggen gelukt, ga naar andere pagina
+        window.location.href = 'index.html';
+    } catch (e) {
+        /** @type {ClientResponseError} */
+        const error = e;
+
+        if (error.status === 400) {
+            toonFoutmeldingen();
+        }
+    }
+});
+
+function toonFoutmeldingen() {
+    // Toon foutmelding
+    document.getElementById('foutmelding').classList.remove('verborgen');
+
+    // Maak wachtwoord, email rood
+    Array.from(document.getElementsByTagName('input'))
+        .forEach(veld => veld.ariaInvalid = true);
+}
+
+function verbergFoutmeldingen() {
+    document.getElementById('foutmelding').classList.add('verborgen');
+    Array.from(document.getElementsByTagName('input'))
+        .forEach(veld => veld.ariaInvalid = undefined);
+}