Maurice/pocketdb-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
maurice
2025-12-27 22:43:37 +01:00
commit 890f3b5571
26 changed files with 2579 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
www/chat.html Normal file
View File

@@ -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>

3
www/css/index.css Normal file
View File

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

4
www/css/vendor/pico.blue.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

41
www/index.html Normal file
View File

@@ -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>

41
www/inloggen.html Normal file
View File

@@ -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>

58
www/js/chat-onveilig.js Normal file
View File

@@ -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'
});

54
www/js/chat-veilig.js Normal file
View File

@@ -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'
});

52
www/js/home.js Normal file
View File

@@ -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;
}

18
www/js/index.js Normal file
View File

@@ -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';
}
}

45
www/js/inloggen.js Normal file
View File

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

1583
www/js/vendor/pocketbase.es.d.ts vendored Normal file
View File

File diff suppressed because it is too large Load Diff

2
www/js/vendor/pocketbase.es.js vendored Normal file
View File

File diff suppressed because one or more lines are too long