<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RDW Vehicle Search</title>
<style>
body { background-color: #f8f9fa; padding-top: 50px; }
.search-container { max-width: 800px; margin: auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.results-container { max-width: 1000px; margin: 30px auto; }
.loading { display: none; }
.kenteken-badge { font-family: monospace; font-weight: bold; letter-spacing: 1px; }
</style>
</head>
<body>
<div class="container">
<div class="text-center mt-3 mb-4">
<a href="/" class="btn btn-link">← Back to Viewer</a>
</div>
<div class="search-container">
<h2 class="text-center mb-4">RDW Open Data Search</h2>
<p class="text-muted text-center">Search the RDW database for matching vehicles</p>
<form id="searchForm">
<div class="row g-3">
<div class="col-md-6">
<label for="merk" class="form-label">Brand (Merk)</label>
<input type="text" class="form-control" id="merk" placeholder="e.g. TESLA">
</div>
<div class="col-md-6">
<label for="handelsbenaming" class="form-label">Model (Handelsbenaming)</label>
<input type="text" class="form-control" id="handelsbenaming" placeholder="e.g. MODEL 3">
</div>
<div class="col-md-4">
<label for="eerste_kleur" class="form-label">Color</label>
<input type="text" class="form-control" id="eerste_kleur" placeholder="e.g. WIT">
</div>
<div class="col-md-8">
<label for="voertuigsoort" class="form-label">Vehicle Type</label>
<select class="form-select" id="voertuigsoort">
<option value="">All Types</option>
<option value="Personenauto">Personenauto</option>
<option value="Bedrijfsauto">Bedrijfsauto</option>
<option value="Motorfiets">Motorfiets</option>
<option value="Aanhangwagen">Aanhangwagen</option>
</select>
</div>
<div class="col-md-6">
<label for="massa_min" class="form-label">Min Mass (kg)</label>
<input type="number" class="form-control" id="massa_min">
</div>
<div class="col-md-6">
<label for="massa_max" class="form-label">Max Mass (kg)</label>
<input type="number" class="form-control" id="massa_max">
</div>
<div class="col-md-12 d-flex gap-2">
<button type="submit" class="btn btn-primary flex-grow-1 py-2">Search Vehicles</button>
<button type="reset" class="btn btn-outline-secondary py-2">Clear</button>
</div>
</div>
</form>
</div>
<div id="loading" class="text-center mt-4 loading">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2">Searching RDW database...</p>
</div>
<div class="results-container">
<div id="resultsCount" class="mb-3 fw-bold"></div>
<div class="table-responsive">
<table class="table table-striped table-hover bg-white shadow-sm rounded" id="resultsTable" style="display:none;">
<thead class="table-dark">
<tr>
<th>Kenteken</th>
<th>Merk</th>
<th>Model</th>
<th>Kleur</th>
<th>Massa</th>
<th>Bouwjaar</th>
<th>Action</th>
</tr>
</thead>
<tbody id="resultsBody"></tbody>
</table>
</div>
</div>
</div>
<script>
document.getElementById('searchForm').addEventListener('submit', async (e) => {
e.preventDefault();
const merk = document.getElementById('merk').value.toUpperCase().trim();
const model = document.getElementById('handelsbenaming').value.toUpperCase().trim();
const kleur = document.getElementById('eerste_kleur').value.toUpperCase().trim();
const voertuigsoort = document.getElementById('voertuigsoort').value;
const massaMin = document.getElementById('massa_min').value;
const massaMax = document.getElementById('massa_max').value;
const loading = document.getElementById('loading');
const table = document.getElementById('resultsTable');
const resultsBody = document.getElementById('resultsBody');
const resultsCount = document.getElementById('resultsCount');
loading.style.display = 'block';
table.style.display = 'none';
resultsBody.innerHTML = '';
resultsCount.innerText = '';
// Build SoQL query using URLSearchParams for proper encoding
const params = new URLSearchParams();
let whereClauses = [];
if (merk) whereClauses.push(`merk LIKE '%${merk}%'`);
if (model) whereClauses.push(`handelsbenaming LIKE '%${model}%'`);
if (kleur) whereClauses.push(`eerste_kleur = '${kleur}'`);
if (voertuigsoort) whereClauses.push(`voertuigsoort = '${voertuigsoort}'`);
if (massaMin) whereClauses.push(`massa_rijklaar >= ${massaMin}`);
if (massaMax) whereClauses.push(`massa_rijklaar <= ${massaMax}`);
if (whereClauses.length > 0) {
params.append('$where', whereClauses.join(' AND '));
}
params.append('$limit', '50');
params.append('$order', 'datum_eerste_toelating DESC');
const fullUrl = `${API_URL}?${params.toString()}`;
console.log('Fetching from RDW:', fullUrl);
try {
const response = await fetch(fullUrl);
if (!response.ok) {
const errorBody = await response.text();
console.error('RDW API Error:', response.status, errorBody);
throw new Error(`API request failed with status ${response.status}: ${errorBody}`);
}
const data = await response.json();
loading.style.display = 'none';
if (data.length === 0) {
resultsCount.innerText = 'No matching vehicles found.';
return;
}
resultsCount.innerText = `Found ${data.length} vehicles (showing latest 50):`;
table.style.display = 'table';
data.forEach(v => {
const row = document.createElement('tr');
const bouwjaar = v.datum_eerste_toelating ? v.datum_eerste_toelating.substring(0, 4) : 'N/A';
// Ensure the link works even if opened via file://
const detailUrl = window.location.protocol === 'file:'
: `/api/data/${v.kenteken}`;
row.innerHTML = `
<td><span class="badge bg-warning text-dark kenteken-badge">${v.kenteken}</span></td>
<td>${v.merk}</td>
<td>${v.handelsbenaming}</td>
<td>${v.eerste_kleur || 'N/A'}</td>
<td>${v.massa_rijklaar || 'N/A'} kg</td>
<td>${bouwjaar}</td>
<td>
<a href="${detailUrl}" target="_blank" class="btn btn-sm btn-outline-primary">View Details</a>
</td>
`;
resultsBody.appendChild(row);
});
} catch (error) {
loading.style.display = 'none';
resultsCount.innerText = `Error: ${error.message}`;
console.error('Search Error:', error);
}
});
</script>
</body>
</html>