admin/windwiderstand
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(windkarte): Legend-Toggle — Status ein-/ausblendbar per Klick
Deploy / verify (push) Successful in 54s
Details
Deploy / deploy (push) Successful in 1m1s
Details

Browse Source 
Klick auf Legendenitem blendet den Status aus (opacity 0, kein Klick,
kein Hover). Panel schließt sich wenn der Status des gewählten Gebiets
ausgeblendet wird. Visuell: opacity + line-through auf versteckten Items.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-05-13 15:09:14 +02:00
parent 7d4f52ba02
commit 0f6a58fed4
2 changed files with 59 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/WindkarteMap.svelte
+35 -3
View File
@@ -8,13 +8,37 @@
onselect,
onready = null,
initialGebietsNr = null,
hiddenStatuses = [],
}: {
areas: WindArea[];
onselect: (area: WindArea | null, center: [number, number] | null) => void;
onready?: ((ctrl: { reset: () => void }) => void) | null;
initialGebietsNr?: string | null;
hiddenStatuses?: string[];
} = $props();
// Mirror prop into plain variable so Leaflet event handlers read current value.
let _hidden: string[] = [];
$effect(() => {
_hidden = hiddenStatuses;
if (!geojsonLayer) return;
restyleAll(selectedSlug);
// Deselect if selected area's status was just hidden.
if (selectedSlug) {
geojsonLayer.eachLayer((l) => {
const f = (l as import("leaflet").Path & { feature?: GeoJSON.Feature }).feature;
if (f?.properties?.name === selectedSlug) {
const s = f.properties?.status ?? "rechtskraeftig";
if (_hidden.includes(s)) {
selectedSlug = null;
onselect(null, null);
bufferLayer?.clearLayers();
}
}
});
}
});
let mapEl: HTMLDivElement;
let map: import("leaflet").Map | null = null;
let bufferLayer: import("leaflet").LayerGroup | null = null;
@@ -46,7 +70,11 @@
const f = (l as import("leaflet").Path & { feature?: GeoJSON.Feature }).feature;
if (!f) return;
const s = f.properties?.status ?? "rechtskraeftig";
(l as import("leaflet").Path).setStyle(style(s, f.properties?.name === sel));
if (_hidden.includes(s)) {
(l as import("leaflet").Path).setStyle({ opacity: 0, fillOpacity: 0, weight: 0 });
} else {
(l as import("leaflet").Path).setStyle(style(s, f.properties?.name === sel));
}
});
}
@@ -168,19 +196,23 @@
// Hover highlight
layer.on("mouseover", () => {
const s = feature.properties?.status ?? "rechtskraeftig";
if (_hidden.includes(s)) return;
if (feature.properties?.name !== selectedSlug) {
const s = feature.properties?.status ?? "rechtskraeftig";
(layer as import("leaflet").Path).setStyle(style(s, false, true));
}
});
layer.on("mouseout", () => {
const s = feature.properties?.status ?? "rechtskraeftig";
if (_hidden.includes(s)) return;
if (feature.properties?.name !== selectedSlug) {
const s = feature.properties?.status ?? "rechtskraeftig";
(layer as import("leaflet").Path).setStyle(style(s, false, false));
}
});
layer.on("click", async (e) => {
const s = feature.properties?.status ?? "rechtskraeftig";
if (_hidden.includes(s)) return;
L.DomEvent.stopPropagation(e);
await selectFeature(L, feature, layer, area);
});
src/lib/components/blocks/WindkarteBlock.svelte
+24 -12
View File
@@ -21,6 +21,13 @@ let areas = $state<WindArea[]>([]);
let mapReady = $state(false);
let initialGebietsNr = $state<string | null>(null);
let resetMap: (() => void) | null = null;
let hiddenStatuses = $state<string[]>([]);
function toggleStatus(status: string) {
hiddenStatuses = hiddenStatuses.includes(status)
? hiddenStatuses.filter((s) => s !== status)
: [...hiddenStatuses, status];
}
const MapComponent = browser
? import("$lib/components/WindkarteMap.svelte").then((m) => m.default)
@@ -105,6 +112,7 @@ let areas = $state<WindArea[]>([]);
<Map
{areas}
{initialGebietsNr}
{hiddenStatuses}
onselect={handleSelect}
onready={(ctrl) => { resetMap = ctrl.reset; }}
/>
@@ -127,18 +135,22 @@ let areas = $state<WindArea[]>([]);
<!-- Legend -->
<div class="mt-2 flex flex-wrap gap-x-5 gap-y-1.5 text-xs text-stein-400">
<span class="flex items-center gap-1.5">
<span class="inline-block size-2.5 rounded-sm" style="background:#2d7a45; opacity:.7"></span>
{t(T.windkarte_legend_rechtskraeftig)}
</span>
<span class="flex items-center gap-1.5">
<span class="inline-block size-2.5 rounded-sm" style="background:#b08a52; opacity:.7"></span>
{t(T.windkarte_legend_entwurf_2)}
</span>
<span class="flex items-center gap-1.5">
<span class="inline-block size-2.5 rounded-sm" style="background:#d4752a; opacity:.7"></span>
{t(T.windkarte_legend_entwurf_2_voraussichtlich)}
</span>
{#each [
{ status: "rechtskraeftig", color: "#2d7a45", label: t(T.windkarte_legend_rechtskraeftig) },
{ status: "entwurf_2", color: "#b08a52", label: t(T.windkarte_legend_entwurf_2) },
{ status: "entwurf_2_voraussichtlich", color: "#d4752a", label: t(T.windkarte_legend_entwurf_2_voraussichtlich) },
] as item}
<button
type="button"
onclick={() => toggleStatus(item.status)}
class="flex items-center gap-1.5 transition-opacity cursor-pointer select-none
{hiddenStatuses.includes(item.status) ? 'opacity-35' : 'opacity-100'}"
title={hiddenStatuses.includes(item.status) ? 'Einblenden' : 'Ausblenden'}
>
<span class="inline-block size-2.5 rounded-sm shrink-0" style="background:{item.color}; opacity:.7"></span>
<span class="{hiddenStatuses.includes(item.status) ? 'line-through' : ''}">{item.label}</span>
</button>
{/each}
<span class="flex items-center gap-x-3 gap-y-1 flex-wrap text-stein-300">
<span class="text-stein-400">{t(T.windkarte_legend_distances)}</span>
{#each [{ color: "#e35651", label: "200 m" }, { color: "#b08a52", label: "600 m" }, { color: "#436e85", label: "1 km" }] as ring}