Kavel bij lead/klant en relatie: kavelgegevens (m², bestemming, plannen, achtererf, natura, cultuur, monument, bouwjaar) in CRM-stijl boven de kaart; de kaart zelf alleen met de knoppen (kaart-app &weergave=kaart, gegevens via postMessage), geen scroll meer in het blok
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Machiel
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
b66d6a6fe6
commit
805448d515
+7
-1
@@ -248,8 +248,14 @@ dl.props dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
|
||||
.file .muted { padding: 0 0.5rem 0.35rem; font-size: 0.8rem; }
|
||||
.viewer-frame { aspect-ratio: 16 / 10; min-height: 320px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--blue); }
|
||||
.viewer-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
|
||||
.kaart-frame { height: 640px; max-height: 80vh; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--blue); }
|
||||
.kaart-frame { height: 520px; max-height: 75vh; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--blue); }
|
||||
.kaart-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
|
||||
.kavel .kavel-adres { margin: 0 0 0.75rem; }
|
||||
.kavel .kavel-kpi { padding: 0.75rem 1rem; }
|
||||
.kavel .kavel-kpi .value { font-size: clamp(1.1rem, 2.4vw, 1.5rem); margin: 0.2rem 0 0; }
|
||||
.kavel .kavel-kpi.vrij { background: var(--orange-tint-soft); border-color: var(--orange-line); }
|
||||
.kavel .kavel-kpi.vrij .value { color: var(--orange); }
|
||||
.kavel dl.props dt[hidden], .kavel dl.props dd[hidden] { display: none; }
|
||||
/* documenten met versies (contact, relatie, portaal) */
|
||||
.docs { margin-bottom: 1rem; }
|
||||
.doc { border-top: 1px solid var(--line); }
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
{# Kavel bij een contact of relatie: de kavelgegevens in CRM-stijl, daaronder alleen de kaart (kaart-app,
|
||||
&weergave=kaart). 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 kavel-status" data-kavel-status style="margin:0 0 1rem">Kavel wordt opgezocht…</p>
|
||||
<div data-kavel-gegevens hidden>
|
||||
<p class="kavel-adres"><strong data-k="adres"></strong> <span class="muted" data-k="perceel"></span></p>
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-4"><div class="kpi kavel-kpi"><div class="muted">Kavel</div><div class="value" data-k="kavel_m2"></div></div></div>
|
||||
<div class="col-4"><div class="kpi kavel-kpi"><div class="muted">Bebouwd</div><div class="value" data-k="bebouwd_m2"></div></div></div>
|
||||
<div class="col-4"><div class="kpi kavel-kpi vrij"><div class="muted">Vrije meters</div><div class="value" data-k="vrije_m2"></div></div></div>
|
||||
</div>
|
||||
<dl class="props mb-3">
|
||||
<dt>Bestemming</dt><dd data-k="bestemming"></dd>
|
||||
<dt data-rij="plannen">Geldend plan</dt><dd data-rij="plannen" data-k="plannen"></dd>
|
||||
<dt data-rij="paraplu">Parapluplannen</dt><dd data-rij="paraplu" data-k="paraplu"></dd>
|
||||
<dt>Achtererfgebied</dt><dd data-k="achtererf"></dd>
|
||||
<dt>Natura 2000</dt><dd data-k="natura2000"></dd>
|
||||
<dt>Cultuurgebied</dt><dd data-k="cultuurgebied"></dd>
|
||||
<dt>Rijksmonument</dt><dd data-k="rijksmonument"></dd>
|
||||
<dt>Bouwjaar</dt><dd data-k="bouwjaar"></dd>
|
||||
</dl>
|
||||
<p class="muted" style="font-size:.85rem" data-k="multi" hidden></p>
|
||||
<p style="font-size:.9rem"><a data-k="loket" href="#" target="_blank" rel="noopener noreferrer">Regels in het Omgevingsloket</a> <span class="muted">· indicatieve waarden</span></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²`;
|
||||
const janee = (v, ja) => v == null ? 'onbekend' : v ? ja : 'nee';
|
||||
const links = (el, lijst) => {
|
||||
el.replaceChildren(...lijst.flatMap((p, i) => {
|
||||
const a = document.createElement('a');
|
||||
a.href = p.url; a.target = '_blank'; a.rel = 'noopener noreferrer';
|
||||
a.textContent = p.naam + (p.datum ? ` (${p.datum.slice(0, 4)})` : '');
|
||||
return i ? [document.createElement('br'), a] : [a];
|
||||
}));
|
||||
card.querySelectorAll(`[data-rij="${el.dataset.k}"]`).forEach(r => { r.hidden = !lijst.length; });
|
||||
};
|
||||
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;
|
||||
k('adres').textContent = r.adres;
|
||||
k('perceel').textContent = [r.kavelnummer && `perceel ${r.kavelnummer}`].filter(Boolean).join(' · ');
|
||||
k('kavel_m2').textContent = m2(r.kavel_m2);
|
||||
k('bebouwd_m2').textContent = m2(r.bebouwd_m2);
|
||||
k('vrije_m2').textContent = m2(r.vrije_m2);
|
||||
k('bestemming').textContent = r.bestemming || '—';
|
||||
links(k('plannen'), r.plannen || []);
|
||||
links(k('paraplu'), r.paraplu || []);
|
||||
k('achtererf').textContent = r.achtererf || '—';
|
||||
k('natura2000').textContent = janee(r.natura2000, 'ja, raakt de kavel');
|
||||
k('cultuurgebied').textContent = janee(r.cultuurgebied, 'ja, ligt erin');
|
||||
k('rijksmonument').textContent = janee(r.rijksmonument, 'ja, op de kavel');
|
||||
k('bouwjaar').textContent = r.bouwjaar || '—';
|
||||
const multi = k('multi');
|
||||
multi.hidden = !(r.adressen_op_kavel > 1);
|
||||
multi.textContent = multi.hidden ? '' : `Let op: op ${r.aantal_percelen > 1 ? 'deze percelen' : 'dit perceel'} liggen ${r.adressen_op_kavel} adressen; kavel en bebouwd gelden voor het hele perceel.`;
|
||||
k('loket').href = r.loket;
|
||||
if (r.link) open.href = r.link;
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endmacro %}
|
||||
@@ -1,6 +1,7 @@
|
||||
{% extends 'base.html' %}
|
||||
{% from '_compose.html' import compose %}
|
||||
{% from '_documents.html' import documents_list with context %}
|
||||
{% from '_kaart.html' import kaart_block %}
|
||||
{% block title %}{{ c.name }}{% endblock %}
|
||||
{% block content %}
|
||||
<div class="head">
|
||||
@@ -96,13 +97,7 @@
|
||||
</div></div>
|
||||
{% endif %}
|
||||
|
||||
{% if kaart %}
|
||||
<div class="card"><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">Openen</a></div></div>
|
||||
<div class="kaart-frame"><iframe src="{{ kaart }}" title="Kaart van de kavel" loading="lazy"></iframe></div>
|
||||
</div></div>
|
||||
{% endif %}
|
||||
{% if kaart %}{{ kaart_block(kaart) }}{% endif %}
|
||||
|
||||
<div class="card o-2"><div class="card-body">
|
||||
<h2>Taken</h2>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
{% extends 'base.html' %}
|
||||
{% from '_documents.html' import documents_list with context %}
|
||||
{% from '_kaart.html' import kaart_block %}
|
||||
{% block title %}{{ r.name }}{% endblock %}
|
||||
{% block content %}
|
||||
<div class="head">
|
||||
@@ -78,13 +79,7 @@
|
||||
</div></div>
|
||||
{% endif %}
|
||||
|
||||
{% if kaart %}
|
||||
<div class="card"><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">Openen</a></div></div>
|
||||
<div class="kaart-frame"><iframe src="{{ kaart }}" title="Kaart van de kavel" loading="lazy"></iframe></div>
|
||||
</div></div>
|
||||
{% endif %}
|
||||
{% if kaart %}{{ kaart_block(kaart) }}{% endif %}
|
||||
|
||||
{% if r.kind == 'partner' %}
|
||||
<div class="card"><div class="card-body">
|
||||
|
||||
Reference in New Issue
Block a user