From 41597f87b5dda23c4ec856decee9a498750d5a2f Mon Sep 17 00:00:00 2001 From: Peter Meier Date: Thu, 11 Jun 2026 12:35:29 +0200 Subject: [PATCH] feat(windkarte): InfoAccordion, anlagen-Hinweis, Tooltip ohne Icons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Disclaimer aus CMS-Feld (hinweis_text) via InfoAccordion statt Hardcode - info_text-Feld für Block-Fließtext ergänzt - anlagen_geplant_hinweis-Feld in WindArea + Panel-Anzeige - Tooltip-Icons entfernt (square-outline/wind-turbine/map-marker inline SVGs) - Panel: square-outline → ruler-square für Fläche - Iconify-Subset neu generiert Co-Authored-By: Claude Sonnet 4.6 --- scripts/generate-icons.mjs | 2 + src/lib/block-types.ts | 6 ++ src/lib/components/InfoAccordion.svelte | 60 +++++++++++++++++++ src/lib/components/WindAreaPanel.svelte | 38 +++++++++++- src/lib/components/WindkarteMap.svelte | 26 +++++--- .../components/blocks/WindkarteBlock.svelte | 27 ++++----- src/lib/iconify-mdi-subset.generated.json | 18 ++++-- src/lib/translations.ts | 1 + src/lib/windkarte.ts | 1 + 9 files changed, 146 insertions(+), 33 deletions(-) create mode 100644 src/lib/components/InfoAccordion.svelte diff --git a/scripts/generate-icons.mjs b/scripts/generate-icons.mjs index 7ff3d2e..0cb3d3b 100644 --- a/scripts/generate-icons.mjs +++ b/scripts/generate-icons.mjs @@ -65,6 +65,8 @@ const EXTRA_ICONS = [ 'tag-outline', 'flag-outline', 'information-outline', + // Windkarte: dynamic wind-turbine used in panel + 'wind-turbine', // OrganisationsMapBlock: activate-overlay 'cursor-default-click-outline', // CalendarBlock: social-image modal button diff --git a/src/lib/block-types.ts b/src/lib/block-types.ts index 00807b1..c0ace94 100644 --- a/src/lib/block-types.ts +++ b/src/lib/block-types.ts @@ -486,6 +486,12 @@ export interface WindMapBlockData { subtitle?: string; /** Explizite Auswahl von wind_area-Slugs. Leer/null = alle published areas. */ areas?: (string | { _slug: string;[key: string]: unknown })[]; + /** Optionales Disclaimer-Accordion oberhalb der Karte. HTML/Markdown aus + * dem CMS — Komponente rendert es via {@html}. */ + hinweis_text?: string; + /** Beschreibender Fließtext direkt unter dem Titel (Statistik, Interaktions- + * Hinweise, Methodik). HTML aus dem CMS. */ + info_text?: string; layout?: BlockLayout; } diff --git a/src/lib/components/InfoAccordion.svelte b/src/lib/components/InfoAccordion.svelte new file mode 100644 index 0000000..9a85391 --- /dev/null +++ b/src/lib/components/InfoAccordion.svelte @@ -0,0 +1,60 @@ + + + +
+ + + {title} + + +
{@html body}
+
+ + diff --git a/src/lib/components/WindAreaPanel.svelte b/src/lib/components/WindAreaPanel.svelte index d22bcda..912c3af 100644 --- a/src/lib/components/WindAreaPanel.svelte +++ b/src/lib/components/WindAreaPanel.svelte @@ -3,6 +3,7 @@ import "$lib/iconify-offline"; import type { WindArea, TextFragment } from "$lib/windkarte"; import { useTranslate, T } from "$lib/translations"; + import InfoAccordion from "$lib/components/InfoAccordion.svelte"; let { area, @@ -119,22 +120,53 @@
{#if area.flaeche_ha != null}
- {t(T.windkarte_label_flaeche)} + + + {t(T.windkarte_label_flaeche)} + {area.flaeche_ha.toFixed(1)} ha
{/if} + {#if area.anlagen_geplant != null} +
+ + + {t(T.windkarte_label_anlagen_geplant)} + + + {area.anlagen_geplant} + {#if area.anlagen_geplant_hinweis} + + {/if} + +
+ {/if} {#if area.investor}
- {t(T.windkarte_label_investor)} + + + {t(T.windkarte_label_investor)} + {area.investor}
{/if}
+ {#if area.anlagen_geplant_hinweis} + + {/if} + {#if area.gemeinden && area.gemeinden.length > 0}
-

{t(T.windkarte_label_gemeinden)}

+

+ + {t(T.windkarte_label_gemeinden)} +

{#each area.gemeinden as g} {g} diff --git a/src/lib/components/WindkarteMap.svelte b/src/lib/components/WindkarteMap.svelte index 645348a..52dbc72 100644 --- a/src/lib/components/WindkarteMap.svelte +++ b/src/lib/components/WindkarteMap.svelte @@ -283,20 +283,30 @@ await selectFeature(L, feature, layer, area); }); - // Hover tooltip + // Hover tooltip — labels rendered bold via , an info glyph + // gets appended after the count when the editor supplied a hint + // string so users know there's more context in the side panel. const nrLabel = area.gebiets_nr ?? p.name ?? ""; const title = area.bezeichnung ? `${nrLabel} – ${area.bezeichnung}` : nrLabel; - const lines: string[] = []; - if (area.flaeche_ha != null) lines.push(`${t(T.windkarte_label_flaeche)}: ${area.flaeche_ha.toFixed(1)} ha`); - if (area.gemeinden && area.gemeinden.length > 0) { - lines.push(`${t(T.windkarte_label_gemeinden)}: ${area.gemeinden.join(', ')}`); - } const esc = (s: string) => s.replace(/&/g, '&').replace(//g, '>'); + const row = (label: string, value: string, suffix = "") => + `${esc(label)}: ${esc(value)}${suffix}`; + const lines: string[] = []; + if (area.flaeche_ha != null) { + lines.push(row(t(T.windkarte_label_flaeche), `${area.flaeche_ha.toFixed(1)} ha`)); + } + if (area.anlagen_geplant != null) { + const hint = area.anlagen_geplant_hinweis ? " *" : ""; + lines.push(row(t(T.windkarte_label_anlagen_geplant), `${area.anlagen_geplant}`, hint)); + } + if (area.gemeinden && area.gemeinden.length > 0) { + lines.push(row(t(T.windkarte_label_gemeinden), area.gemeinden.join(', '))); + } const tooltipHtml = - `
${esc(title)}
` + - (lines.length ? `
${lines.map(esc).join('
')}
` : ''); + `
${esc(title)}
` + + (lines.length ? `
${lines.join('
')}
` : ''); layer.bindTooltip(tooltipHtml, { sticky: true, className: "windkarte-tooltip" }); // Permanent label via divIcon marker at polygon center diff --git a/src/lib/components/blocks/WindkarteBlock.svelte b/src/lib/components/blocks/WindkarteBlock.svelte index 6c4d85f..5b9b53a 100644 --- a/src/lib/components/blocks/WindkarteBlock.svelte +++ b/src/lib/components/blocks/WindkarteBlock.svelte @@ -5,6 +5,7 @@ import type { WindMapBlockData } from "$lib/block-types"; import type { WindArea } from "$lib/windkarte"; import WindAreaPanel from "$lib/components/WindAreaPanel.svelte"; + import InfoAccordion from "$lib/components/InfoAccordion.svelte"; import { useTranslate, T } from "$lib/translations"; import { getBlockLayoutClasses } from "$lib/block-layout"; import Icon from "@iconify/svelte"; @@ -103,7 +104,7 @@ let areas = $state([]); data-block-type="wind_map" data-block-slug={block._slug} > - {#if block.title || block.subtitle} + {#if block.title || block.subtitle || block.info_text}
{#if block.title}

{block.title}

@@ -111,20 +112,18 @@ let areas = $state([]); {#if block.subtitle}

{block.subtitle}

{/if} + {#if block.info_text} +
{@html block.info_text}
+ {/if}
{/if} - -
- - - Hinweis zu den Daten - - -

- Diese Karte zeigt zu den Vorranggebieten die amtlichen Angaben aus den Prüfbögen, also Flächengröße und Windhöffigkeit. Wir hatten zusätzlich eigene Schätzwerte zu Anlagenzahl und Anlagenhöhe ergänzt. Diese waren keine amtlichen Festlegungen, der Regionalplan legt beides nicht fest, das entscheidet sich erst im Genehmigungsverfahren. Wir haben diese Schätzwerte entfernt, um Missverständnisse zu vermeiden. Wer einen Fehler findet, kann sich gern bei uns melden. -

-
+ + {#if block.hinweis_text} +
+ +
+ {/if}
@@ -235,10 +234,6 @@ let areas = $state([]); height: clamp(460px, 75vh, 620px); } - .data-disclaimer[open] :global(.disclaimer-chevron) { - transform: rotate(180deg); - } - /* Panel: mobile = bottom sheet, sm+ = right side panel */ .panel-slide { position: absolute; diff --git a/src/lib/iconify-mdi-subset.generated.json b/src/lib/iconify-mdi-subset.generated.json index 93f3ba6..c2a8fee 100644 --- a/src/lib/iconify-mdi-subset.generated.json +++ b/src/lib/iconify-mdi-subset.generated.json @@ -84,6 +84,18 @@ "download": { "body": "" }, + "ruler-square": { + "body": "" + }, + "wind-turbine": { + "body": "" + }, + "information-outline": { + "body": "" + }, + "domain": { + "body": "" + }, "loading": { "body": "" }, @@ -165,9 +177,6 @@ "vector-square": { "body": "" }, - "domain": { - "body": "" - }, "flag-outline": { "body": "" }, @@ -210,9 +219,6 @@ "alert-circle": { "body": "" }, - "information-outline": { - "body": "" - }, "play": { "body": "" }, diff --git a/src/lib/translations.ts b/src/lib/translations.ts index 80e4efc..bda2ead 100644 --- a/src/lib/translations.ts +++ b/src/lib/translations.ts @@ -207,6 +207,7 @@ const TRANSLATION_KEYS = [ "windkarte_status_entwurf_3", "windkarte_label_flaeche", "windkarte_label_anlagen_geplant", + "windkarte_label_anlagen_hinweis", "windkarte_label_hoehe_max", "windkarte_label_investor", "windkarte_label_gemeinden", diff --git a/src/lib/windkarte.ts b/src/lib/windkarte.ts index 08f69e0..05defa1 100644 --- a/src/lib/windkarte.ts +++ b/src/lib/windkarte.ts @@ -14,6 +14,7 @@ export type WindArea = { status?: "rechtskraeftig" | "entwurf_2" | "entwurf_2_voraussichtlich" | "entwurf_3"; flaeche_ha?: number; anlagen_geplant?: number; + anlagen_geplant_hinweis?: string; hoehe_max_m?: number; investor?: string; gemeinden?: string[];