<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Kentekens van Gisteren (RDW)</title>
<style>
body { font-family: Arial, sans-serif; margin: 2em; }
#result { margin-top: 1em; }
ul { list-style: none; padding: 0; }
li { padding: 0.2em 0; }
table { width: 100%; border-collapse: collapse; margin-top: 1em; }
th, td { border: 1px solid #ccc; padding: 4px 8px; text-align: left; }
th { background-color: #f2f2f2; }
</style>
</head>
<body>
<h1>Kentekens van Gisteren (RDW)</h1>
<label for="dateSelect">Datum:</label>
<input type="date" id="dateSelect" max="{{maxDate}}" />
<label for="soortSelect">Voertuigsoort:</label>
<select id="soortSelect">
<option value="Personenauto">Personenauto</option>
<option value="Bromfiets">Bromfiets</option>
</select>
<button id="fetchBtn">Haal kentekens op</button>
<div id="result"></div>
<script>
// Configuratie bovenin
const RDW_KENTEKEN_ENDPOINT = 'm9d7-ebf2.json';
const RDW_DETAIL_ENDPOINT = '8ys7-d773.json';
const APP_TOKEN = 'Je_eigen_app-token';
const BATCH_SIZE = 100;
function getYesterdayDate() {
const d = new Date();
d.setDate(d.getDate() - 1);
// RDW gebruikt formaat: yyyy-mm-dd
return d.toISOString().slice(0, 10);
}
document.getElementById('fetchBtn').onclick = async function() {
const resultDiv = document.getElementById('result');
resultDiv.textContent = 'Bezig met ophalen...';
let date = document.getElementById('dateSelect').value;
if (!date) {
date = getYesterdayDate();
}
const soort = document.getElementById('soortSelect').value;
let allData = [];
let offset = 0;
const limit = 1000;
let keepFetching = true;
while (keepFetching) {
const url = `${RDW_BASE_URL}/${RDW_KENTEKEN_ENDPOINT}?$select=kenteken,datum_tenaamstelling_dt&datum_eerste_toelating_dt=${date}&voertuigsoort=${encodeURIComponent(soort)}&$limit=${limit}&$offset=${offset}`;
const response = await fetch(url, {
headers: {
'X-App-Token': APP_TOKEN
}
});
if (!response.ok) throw new Error('Netwerkfout');
const data = await response.json();
allData = allData.concat(data);
if (data.length < limit) {
keepFetching = false;
} else {
offset += limit;
}
}
// Filter op exacte datum (yyyy-mm-dd)
const filtered = allData.filter(item => item.datum_tenaamstelling_dt && item.datum_tenaamstelling_dt.startsWith(date));
// Alleen kentekens tonen
const kentekens = filtered.map(item => item.kenteken);
if (kentekens.length === 0) {
resultDiv.textContent = 'Geen kentekens gevonden voor deze datum.';
return;
}
// Toon aantal gevonden kentekens
const countDiv = document.createElement('div');
countDiv.textContent = `Aantal gevonden kentekens: ${kentekens.length}`;
resultDiv.textContent = '';
resultDiv.appendChild(countDiv);
// Progressie indicator
const progressDiv = document.createElement('div');
progressDiv.style.margin = '1em 0';
progressDiv.style.fontFamily = 'monospace';
progressDiv.textContent = 'Details ophalen...';
resultDiv.appendChild(progressDiv);
// Haal detailrecords op voor deze kentekens uit endpoint 8ys7-d773 als JSON, nu in batches van 100 (parallel)
resultDiv.textContent = '';
resultDiv.appendChild(countDiv);
resultDiv.appendChild(progressDiv);
let allDetails = [];
for (let i = 0; i < kentekens.length; i += BATCH_SIZE) {
const batch = kentekens.slice(i, i + BATCH_SIZE);
progressDiv.innerHTML = `Details ophalen voor kentekens: <span style=\"color: #0074d9; font-weight: bold;\">${batch[0]}</span> t/m <span style=\"color: #0074d9; font-weight: bold;\">${batch[batch.length-1]}</span> (${i+1}-${i+batch.length}/${kentekens.length})`;
// Start alle fetches parallel
const fetches = batch.map(async kenteken => {
const detailsUrl = `${RDW_BASE_URL}/${RDW_DETAIL_ENDPOINT}?kenteken=${kenteken}`;
try {
const resp = await fetch(detailsUrl, {
headers: { 'X-App-Token': APP_TOKEN }
});
if (!resp.ok) return [];
const json = await resp.json();
return json;
} catch (e) {
return [];
}
});
// Verzamel resultaten
const results = await Promise.all(fetches);
results.forEach(json => {
if (json && json.length > 0) {
allDetails = allDetails.concat(json);
}
});
await new Promise(r => setTimeout(r, 50)); // UI update
}
progressDiv.textContent = 'Details ophalen voltooid.';
// Bepaal dynamisch alle kolommen die voorkomen
const allKeys = new Set();
allDetails.forEach(row => Object.keys(row).forEach(k => allKeys.add(k)));
const headers = Array.from(allKeys);
// Maak een tabel
const table = document.createElement('table');
table.style.borderCollapse = 'collapse';
const thead = document.createElement('thead');
const headerRow = document.createElement('tr');
headers.forEach(h => {
const th = document.createElement('th');
th.textContent = h;
th.style.border = '1px solid #ccc';
th.style.padding = '4px 8px';
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
const tbody = document.createElement('tbody');
allDetails.forEach(row => {
const tr = document.createElement('tr');
headers.forEach(h => {
const td = document.createElement('td');
td.textContent = row[h] || '';
td.style.border = '1px solid #ccc';
td.style.padding = '4px 8px';
tr.appendChild(td);
});
tbody.appendChild(tr);
});
table.appendChild(tbody);
resultDiv.appendChild(table);
};
// Zet standaardwaarde en max op vandaag voor de datumselector
window.onload = function() {
const dateInput = document.getElementById('dateSelect');
const today = new Date().toISOString().slice(0, 10);
dateInput.max = today;
dateInput.value = getYesterdayDate();
};
</script>
</body>
</html>