38 lines
2.1 KiB
HTML
38 lines
2.1 KiB
HTML
{# Kavel bij een contact of relatie: de meters en de link naar het Omgevingsloket, 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>
|
|
<div data-kavel-gegevens hidden>
|
|
<dl class="props mb-2">
|
|
<dt>Kavel</dt><dd data-k="kavel_m2"></dd>
|
|
<dt>Bebouwd</dt><dd data-k="bebouwd_m2"></dd>
|
|
<dt>Vrij</dt><dd data-k="vrije_m2"></dd>
|
|
</dl>
|
|
<p style="margin:0 0 1rem"><a data-k="loket" href="#" target="_blank" rel="noopener noreferrer">Regels in het Omgevingsloket</a></p>
|
|
</div>
|
|
<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]); });
|
|
k('loket').href = r.loket;
|
|
if (r.link) open.href = r.link;
|
|
});
|
|
})();
|
|
</script>
|
|
{% endmacro %}
|