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

www/js/vendor/pocketbase.es.js

@@ -0,0 +1,2 @@
+class ClientResponseError extends Error{constructor(e){super("ClientResponseError"),this.url="",this.status=0,this.response={},this.isAbort=!1,this.originalError=null,Object.setPrototypeOf(this,ClientResponseError.prototype),null!==e&&"object"==typeof e&&(this.url="string"==typeof e.url?e.url:"",this.status="number"==typeof e.status?e.status:0,this.isAbort=!!e.isAbort,this.originalError=e.originalError,null!==e.response&&"object"==typeof e.response?this.response=e.response:null!==e.data&&"object"==typeof e.data?this.response=e.data:this.response={}),this.originalError||e instanceof ClientResponseError||(this.originalError=e),"undefined"!=typeof DOMException&&e instanceof DOMException&&("AbortError"==e.name||20==e.code)&&(this.isAbort=!0),this.name="ClientResponseError "+this.status,this.message=this.response?.message,this.message||(this.isAbort?this.message="The request was autocancelled. You can find more info in https://github.com/pocketbase/js-sdk#auto-cancellation.":this.originalError?.cause?.message?.includes("ECONNREFUSED ::1")?this.message="Failed to connect to the PocketBase server. Try changing the SDK URL from localhost to 127.0.0.1 (https://github.com/pocketbase/js-sdk/issues/21).":this.message="Something went wrong."),this.cause=this.originalError}get data(){return this.response}toJSON(){return{...this}}}const e=/^[\u0009\u0020-\u007e\u0080-\u00ff]+$/;function cookieParse(e,t){const s={};if("string"!=typeof e)return s;const i=Object.assign({},t||{}).decode||defaultDecode;let n=0;for(;n<e.length;){const t=e.indexOf("=",n);if(-1===t)break;let r=e.indexOf(";",n);if(-1===r)r=e.length;else if(r<t){n=e.lastIndexOf(";",t-1)+1;continue}const o=e.slice(n,t).trim();if(void 0===s[o]){let n=e.slice(t+1,r).trim();34===n.charCodeAt(0)&&(n=n.slice(1,-1));try{s[o]=i(n)}catch(e){s[o]=n}}n=r+1}return s}function cookieSerialize(t,s,i){const n=Object.assign({},i||{}),r=n.encode||defaultEncode;if(!e.test(t))throw new TypeError("argument name is invalid");const o=r(s);if(o&&!e.test(o))throw new TypeError("argument val is invalid");let a=t+"="+o;if(null!=n.maxAge){const e=n.maxAge-0;if(isNaN(e)||!isFinite(e))throw new TypeError("option maxAge is invalid");a+="; Max-Age="+Math.floor(e)}if(n.domain){if(!e.test(n.domain))throw new TypeError("option domain is invalid");a+="; Domain="+n.domain}if(n.path){if(!e.test(n.path))throw new TypeError("option path is invalid");a+="; Path="+n.path}if(n.expires){if(!function isDate(e){return"[object Date]"===Object.prototype.toString.call(e)||e instanceof Date}(n.expires)||isNaN(n.expires.valueOf()))throw new TypeError("option expires is invalid");a+="; Expires="+n.expires.toUTCString()}if(n.httpOnly&&(a+="; HttpOnly"),n.secure&&(a+="; Secure"),n.priority){switch("string"==typeof n.priority?n.priority.toLowerCase():n.priority){case"low":a+="; Priority=Low";break;case"medium":a+="; Priority=Medium";break;case"high":a+="; Priority=High";break;default:throw new TypeError("option priority is invalid")}}if(n.sameSite){switch("string"==typeof n.sameSite?n.sameSite.toLowerCase():n.sameSite){case!0:a+="; SameSite=Strict";break;case"lax":a+="; SameSite=Lax";break;case"strict":a+="; SameSite=Strict";break;case"none":a+="; SameSite=None";break;default:throw new TypeError("option sameSite is invalid")}}return a}function defaultDecode(e){return-1!==e.indexOf("%")?decodeURIComponent(e):e}function defaultEncode(e){return encodeURIComponent(e)}const t="undefined"!=typeof navigator&&"ReactNative"===navigator.product||"undefined"!=typeof global&&global.HermesInternal;let s;function getTokenPayload(e){if(e)try{const t=decodeURIComponent(s(e.split(".")[1]).split("").map((function(e){return"%"+("00"+e.charCodeAt(0).toString(16)).slice(-2)})).join(""));return JSON.parse(t)||{}}catch(e){}return{}}function isTokenExpired(e,t=0){let s=getTokenPayload(e);return!(Object.keys(s).length>0&&(!s.exp||s.exp-t>Date.now()/1e3))}s="function"!=typeof atob||t?e=>{let t=String(e).replace(/=+$/,"");if(t.length%4==1)throw new Error("'atob' failed: The string to be decoded is not correctly encoded.");for(var s,i,n=0,r=0,o="";i=t.charAt(r++);~i&&(s=n%4?64*s+i:i,n++%4)?o+=String.fromCharCode(255&s>>(-2*n&6)):0)i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=".indexOf(i);return o}:atob;const i="pb_auth";class BaseAuthStore{constructor(){this.baseToken="",this.baseModel=null,this._onChangeCallbacks=[]}get token(){return this.baseToken}get record(){return this.baseModel}get model(){return this.baseModel}get isValid(){return!isTokenExpired(this.token)}get isSuperuser(){let e=getTokenPayload(this.token);return"auth"==e.type&&("_superusers"==this.record?.collectionName||!this.record?.collectionName&&"pbc_3142635823"==e.collectionId)}get isAdmin(){return console.warn("Please replace pb.authStore.isAdmin with pb.authStore.isSuperuser OR simply check the value of pb.authStore.record?.collectionName"),this.isSuperuser}get isAuthRecord(){return console.warn("Please replace pb.authStore.isAuthRecord with !pb.authStorLine truncated
+//# sourceMappingURL=pocketbase.es.js.map