Initial commit

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);
+}