1.2
This commit is contained in:
Flatlogic Bot
parent
9f0736e0bb
commit
897ddcfef1
@ -42,7 +42,7 @@ $mock_data = [
|
||||
'oppervlakte' => 1573, // in m²
|
||||
|
||||
// Energielabel
|
||||
'energielabel' => 'A++',
|
||||
'energielabel' => getEnergylabelData('3011 AD', '40'),
|
||||
'geschatte_energiekosten' => 450, // per maand
|
||||
|
||||
// Verkoophistorie
|
||||
@ -65,4 +65,19 @@ $mock_data = [
|
||||
// Simulate network delay
|
||||
sleep(1);
|
||||
|
||||
echo json_encode($mock_data);
|
||||
echo json_encode($mock_data);
|
||||
|
||||
function getEnergylabelData($zip, $number) {
|
||||
// In a real app, you would get this from a secure place (e.g., environment variables)
|
||||
$apiKey = getenv('ENERGIE_LABEL_API_KEY');
|
||||
|
||||
// If no API key is set, we can't continue.
|
||||
if (!$apiKey || $apiKey === 'YOUR_API_KEY_HERE') {
|
||||
// We return a placeholder for now, so the frontend knows to show the "API key needed" state.
|
||||
return 'API_KEY_MISSING';
|
||||
}
|
||||
|
||||
// TODO: Replace with actual API call to EP-Online using the $apiKey.
|
||||
// For now, we'll return a mock value to prove the flow works.
|
||||
return 'A++';
|
||||
}
|
||||
|
||||
@ -5,8 +5,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const resultsContainer = document.getElementById('results-container');
|
||||
const examples = document.querySelectorAll('.example-link');
|
||||
|
||||
let wozChart = null; // To hold the chart instance
|
||||
|
||||
// Helper to format currency
|
||||
const formatCurrency = (value) => new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR', minimumFractionDigits: 0 }).format(value);
|
||||
|
||||
@ -71,22 +69,20 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
document.getElementById('info-eigendomssituatie').textContent = data.eigendomssituatie;
|
||||
document.getElementById('info-type').textContent = data.type;
|
||||
document.getElementById('info-bouwjaar').textContent = data.bouwjaar;
|
||||
document.getElementById('info-oppervlakte').textContent = `${data.oppervlakte} m²`;
|
||||
document.getElementById('info-oppervlakte').textContent = data.oppervlakte;
|
||||
|
||||
// --- WOZ Waarde ---
|
||||
document.getElementById('info-woz-waarde').textContent = formatCurrency(data.woz_waarde);
|
||||
renderWozChart(data.woz_ontwikkeling);
|
||||
|
||||
// --- Energielabel ---
|
||||
document.getElementById('info-energielabel').textContent = data.energielabel;
|
||||
document.getElementById('info-energiekosten').textContent = `${formatCurrency(data.geschatte_energiekosten)}`;
|
||||
|
||||
// --- Buurtstatistieken ---
|
||||
document.getElementById('info-gem-woz').textContent = formatCurrency(data.buurtstatistieken.gemiddelde_woz);
|
||||
document.getElementById('info-inwoners').textContent = data.buurtstatistieken.inwoners.toLocaleString('nl-NL');
|
||||
document.getElementById('info-gem-leeftijd').textContent = `${data.buurtstatistieken.gemiddelde_leeftijd} jaar`;
|
||||
document.getElementById('info-groen-score').textContent = `${data.buurtstatistieken.groen_score} / 10`;
|
||||
document.getElementById('info-veiligheid-score').textContent = `${data.buurtstatistieken.veiligheid_score} / 10`;
|
||||
document.getElementById('info-groen-score').textContent = data.buurtstatistieken.groen_score;
|
||||
document.getElementById('info-veiligheid-score').textContent = data.buurtstatistieken.veiligheid_score;
|
||||
|
||||
// --- Verkoophistorie ---
|
||||
const historyBody = document.getElementById('verkoophistorie-body');
|
||||
@ -105,49 +101,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
resultsContainer.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const renderWozChart = (wozData) => {
|
||||
const ctx = document.getElementById('woz-chart').getContext('2d');
|
||||
const labels = wozData.map(d => d.jaar);
|
||||
const values = wozData.map(d => d.waarde);
|
||||
|
||||
if (wozChart) {
|
||||
wozChart.destroy(); // Destroy previous chart instance
|
||||
}
|
||||
|
||||
wozChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'WOZ-Waarde',
|
||||
data: values,
|
||||
borderColor: '#0066cc',
|
||||
backgroundColor: 'rgba(0, 102, 204, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointBackgroundColor: '#0066cc',
|
||||
pointRadius: 4,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
ticks: {
|
||||
callback: (value) => formatCurrency(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const displayError = (message) => {
|
||||
alert(message);
|
||||
};
|
||||
|
||||
11
index.php
11
index.php
@ -27,8 +27,7 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
|
||||
<!-- Chart.js for graphs -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -94,18 +93,14 @@
|
||||
</div>
|
||||
|
||||
<!-- Card: WOZ Waarde -->
|
||||
<div class="info-card card-large">
|
||||
<div class="info-card">
|
||||
<div class="card-header">
|
||||
<span class="card-icon">📈</span>
|
||||
<h4 class="card-title">WOZ-Waarde</h4>
|
||||
<h4 class="card-title">Gemiddelde WOZ-Waarde (Buurt)</h4>
|
||||
</div>
|
||||
<div class="woz-main">
|
||||
<p class="woz-label">Huidige Waarde</p>
|
||||
<p id="info-woz-waarde" class="woz-value"></p>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<canvas id="woz-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Energielabel -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user