34 lines
1.9 KiB
HTML
34 lines
1.9 KiB
HTML
{# Kavel bij een contact of relatie: de meters, daaronder alleen de kaart
|
|
(kaart-app, &weergave=kaart). Alle details staan op de volledige kaartpagina (knop). De kaart stuurt de gegevens
|
|
met postMessage ({type: 'kaveltoets', resultaat | fout}). #}
|
|
{% macro kaart_block(kaart) %}
|
|
<div class="card kavel"><div class="card-body">
|
|
<div class="card-top"><h2>Kavel</h2>
|
|
<div class="actions"><a class="btn btn-outline-primary btn-sm" href="{{ kaart }}" target="_blank" data-kavel-open>Volledig openen</a></div></div>
|
|
<p class="muted" data-kavel-status style="margin:0 0 1rem">Kavel wordt opgezocht…</p>
|
|
<dl class="kavel-meters" data-kavel-gegevens hidden>
|
|
<div><dt>Kavel</dt><dd data-k="kavel_m2"></dd></div>
|
|
<div><dt>Bebouwd</dt><dd data-k="bebouwd_m2"></dd></div>
|
|
<div><dt>Vrij</dt><dd data-k="vrije_m2"></dd></div>
|
|
</dl>
|
|
<div class="kaart-frame"><iframe src="{{ kaart }}&weergave=kaart" title="Kaart van de kavel" loading="lazy" data-kavel-frame></iframe></div>
|
|
</div></div>
|
|
<script>
|
|
(() => {
|
|
const card = document.currentScript.previousElementSibling;
|
|
const frame = card.querySelector('[data-kavel-frame]'), box = card.querySelector('[data-kavel-gegevens]');
|
|
const status = card.querySelector('[data-kavel-status]'), open = card.querySelector('[data-kavel-open]');
|
|
const k = (n) => card.querySelector(`[data-k="${n}"]`);
|
|
const m2 = (n) => n == null ? '—' : `${Number(n).toLocaleString('nl-NL')} m²`;
|
|
addEventListener('message', (e) => {
|
|
if (e.origin !== location.origin || e.source !== frame.contentWindow || !e.data || e.data.type !== 'kaveltoets') return;
|
|
if (e.data.fout) { status.textContent = e.data.fout; status.hidden = false; box.hidden = true; return; }
|
|
const r = e.data.resultaat;
|
|
status.hidden = true; box.hidden = false;
|
|
['kavel_m2', 'bebouwd_m2', 'vrije_m2'].forEach(n => { k(n).textContent = m2(r[n]); });
|
|
if (r.link) open.href = r.link;
|
|
});
|
|
})();
|
|
</script>
|
|
{% endmacro %}
|