feat: Ansprechpartner im OrganisationsMap Detail-Panel
Deploy / verify (push) Successful in 1m2s
Deploy / deploy (push) Successful in 1m11s

Marker-Klick zeigt jetzt zusätzlich Name, Rolle, Email und Telefon
der Kontaktpersonen pro Organisation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-06-04 13:02:47 +02:00
parent c9ba88ab80
commit fc81d973a5
2 changed files with 37 additions and 1 deletions
+1
View File
@@ -316,6 +316,7 @@ export interface OrganisationEntry {
whatsapp?: string;
youtube?: string;
location?: { text?: string; lat?: number; lng?: number };
contacts?: (string | ContactEntry)[];
}
/** Organisations-Block (_type: "organisations"). */
@@ -2,7 +2,7 @@
import "leaflet/dist/leaflet.css";
import { onMount, onDestroy } from "svelte";
import { getBlockLayoutClasses } from "$lib/block-layout";
import type { OrganisationsMapBlockData, OrganisationEntry } from "$lib/block-types";
import type { OrganisationsMapBlockData, OrganisationEntry, ContactEntry } from "$lib/block-types";
import Icon from "@iconify/svelte";
import "$lib/iconify-offline";
import { marked } from "$lib/markdown-safe";
@@ -33,6 +33,12 @@
: "",
);
const contacts = $derived(
(selectedOrg?.contacts ?? []).filter(
(c): c is ContactEntry => typeof c === "object" && c !== null && !!c.name,
),
);
function getLink(org: OrganisationEntry): string | null {
if (!org.link || typeof org.link === "string") return null;
return org.link.url ?? null;
@@ -156,6 +162,35 @@
</div>
{/if}
{#if contacts.length > 0}
<div class="mb-3 space-y-2 border-t border-stein-100 pt-3">
<p class="text-[0.65rem] font-semibold uppercase tracking-wider text-stein-500">Ansprechpartner</p>
{#each contacts as c}
<div class="text-xs">
<p class="font-semibold text-stein-800">{c.name}</p>
{#if c.role}
<p class="text-stein-500">{c.role}</p>
{/if}
{#if c.email}
<a href="mailto:{c.email}" class="mt-0.5 flex items-center gap-1 text-wald-700 hover:underline">
<Icon icon="mdi:email-outline" class="size-3 shrink-0" />
<span class="truncate">{c.email}</span>
</a>
{/if}
{#if c.phone}
<a href="tel:{c.phone.replace(/\s+/g, '')}" class="mt-0.5 flex items-center gap-1 text-wald-700 hover:underline">
<Icon icon="mdi:phone" class="size-3 shrink-0" />
{c.phone}
</a>
{/if}
{#if c.note}
<p class="mt-0.5 italic text-stein-500">{c.note}</p>
{/if}
</div>
{/each}
</div>
{/if}
{#if getLink(selectedOrg)}
<a
href={getLink(selectedOrg)}