From fe8e301e65874135dab4f3cbed2a69d8aacc1ff8 Mon Sep 17 00:00:00 2001 From: Daniel Michelberger Date: Wed, 2 Sep 2026 13:13:22 +0200 Subject: [PATCH] feat: Marker mit eigenem Typ und frei waehlbarem Icon Auf dem Trail passt nicht immer ein vorgefertigter Typ - "Wespennest am Anlieger" legt niemand vorher an. Der Marker-Dialog fuehrt deshalb ein Dropdown, dessen erste Zeile "Eigener Typ" ist und ein Textfeld oeffnet. Das Icon steht ab jetzt am Marker selbst. Ein gewaehlter Typ schlaegt seines vor, ueberschreiben laesst es sich jederzeit: Dieselbe Art Hindernis sieht nicht immer gleich aus. Der Picker ist deshalb immer sichtbar und wandert als eigene Komponente auch in die Flag-Verwaltung. Schema: trail_markers.flag ist nicht mehr Pflicht, dafuer gibt es label und icon. Bestehende Marker bleiben gueltig - ohne eigene Angaben faellt die Anzeige auf den Typ zurueck. Damit braucht ein Trail auch keine Flag-Typen mehr, um ueberhaupt Meldungen aufnehmen zu koennen. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_014dh9W1i7aLSdPYJzQPid5o --- .../pb_migrations/1754400000_init_schema.js | 32 +++- .../1754500800_trail_markers_custom.js | 57 ++++++ frontend/src/lib/components/IconPicker.svelte | 64 +++++++ .../src/lib/stores/trailMarkers.svelte.ts | 14 +- frontend/src/lib/types.d.ts | 4 +- .../dashboard/settings/flags/+page.svelte | 37 +--- .../routes/dashboard/trails/[id]/+page.svelte | 179 +++++++++++++----- 7 files changed, 300 insertions(+), 87 deletions(-) create mode 100644 backend/pb_migrations/1754500800_trail_markers_custom.js create mode 100644 frontend/src/lib/components/IconPicker.svelte diff --git a/backend/pb_migrations/1754400000_init_schema.js b/backend/pb_migrations/1754400000_init_schema.js index a8ad793..bcfcf21 100644 --- a/backend/pb_migrations/1754400000_init_schema.js +++ b/backend/pb_migrations/1754400000_init_schema.js @@ -1512,10 +1512,40 @@ migrate((app) => { "minSelect": 0, "name": "flag", "presentable": false, - "required": true, + "required": false, "system": false, "type": "relation" }, + { + "autogeneratePattern": "", + "help": "", + "hidden": false, + "id": "text_marker_label", + "max": 120, + "min": 0, + "name": "label", + "pattern": "", + "presentable": false, + "primaryKey": false, + "required": false, + "system": false, + "type": "text" + }, + { + "autogeneratePattern": "", + "help": "", + "hidden": false, + "id": "text_marker_icon", + "max": 60, + "min": 0, + "name": "icon", + "pattern": "", + "presentable": false, + "primaryKey": false, + "required": false, + "system": false, + "type": "text" + }, { "help": "", "hidden": false, diff --git a/backend/pb_migrations/1754500800_trail_markers_custom.js b/backend/pb_migrations/1754500800_trail_markers_custom.js new file mode 100644 index 0000000..071f7f4 --- /dev/null +++ b/backend/pb_migrations/1754500800_trail_markers_custom.js @@ -0,0 +1,57 @@ +/// + +// Marker dürfen einen eigenen Text und ein eigenes Icon tragen. +// +// Bisher musste jede Meldung auf einen vorgefertigten Flag-Typ zeigen. Auf +// dem Trail passt aber nicht immer einer: „Wespennest am Anlieger" legt +// niemand vorher als Typ an. Deshalb: +// +// - flag ist nicht mehr Pflicht. Fehlt es, trägt der Marker seinen eigenen +// Text in label. +// - icon steht am Marker selbst. Beim Wählen eines Typs kommt dessen Icon als +// Vorschlag; ändern lässt es sich trotzdem, denn dieselbe Art Hindernis +// sieht nicht immer gleich aus. +// +// Bestehende Marker bleiben unverändert gültig: Sie haben ein flag und weder +// label noch icon, die Anzeige fällt dann auf den Typ zurück. + +migrate((app) => { + const markers = app.findCollectionByNameOrId('trail_markers') + + const flag = markers.fields.getByName('flag') + if (flag) { + flag.required = false + } + + if (!markers.fields.getByName('label')) { + markers.fields.add(new Field({ + id: 'text_marker_label', + name: 'label', + type: 'text', + max: 120, + })) + } + + if (!markers.fields.getByName('icon')) { + markers.fields.add(new Field({ + id: 'text_marker_icon', + name: 'icon', + type: 'text', + max: 60, + })) + } + + app.save(markers) +}, (app) => { + const markers = app.findCollectionByNameOrId('trail_markers') + + const flag = markers.fields.getByName('flag') + if (flag) { + flag.required = true + } + + markers.fields.removeByName('label') + markers.fields.removeByName('icon') + + app.save(markers) +}) diff --git a/frontend/src/lib/components/IconPicker.svelte b/frontend/src/lib/components/IconPicker.svelte new file mode 100644 index 0000000..3b82026 --- /dev/null +++ b/frontend/src/lib/components/IconPicker.svelte @@ -0,0 +1,64 @@ + + +
+ + +
+ + + + +
+ +

+ Jeder Name von lucide.dev + ist möglich — geschrieben wie „TreePine" oder „tree-pine". + {#if value.trim() && !iconExists(value)} + Diesen Namen gibt es dort nicht. + {/if} +

+ +
+ {#each FLAG_ICON_SUGGESTIONS as name (name)} + + {/each} +
+
diff --git a/frontend/src/lib/stores/trailMarkers.svelte.ts b/frontend/src/lib/stores/trailMarkers.svelte.ts index 7a1fbe4..7b9a112 100644 --- a/frontend/src/lib/stores/trailMarkers.svelte.ts +++ b/frontend/src/lib/stores/trailMarkers.svelte.ts @@ -94,7 +94,19 @@ export class TrailMarkerStore { }).catch((e) => console.warn('trail_markers subscribe failed:', e)) } - async create(data: { trail: string; flag: string; lat: number; lng: number; note?: string }) { + /** + * `flag` ist optional: Ein Marker darf mit eigenem `label` und `icon` + * auskommen, wenn kein vorgefertigter Typ passt. + */ + async create(data: { + trail: string + flag?: string + label?: string + icon?: string + lat: number + lng: number + note?: string + }) { const teamId = this.teams.activeId if (!teamId) throw new Error('Kein aktives Team') diff --git a/frontend/src/lib/types.d.ts b/frontend/src/lib/types.d.ts index df80871..847c28e 100644 --- a/frontend/src/lib/types.d.ts +++ b/frontend/src/lib/types.d.ts @@ -144,8 +144,10 @@ export type TrailFlagsRecord = { export type TrailMarkersRecord = { created?: IsoDateString created_by?: RecordIdString - flag: RecordIdString + flag?: RecordIdString + icon?: string id: string + label?: string lat: number lng: number note?: string diff --git a/frontend/src/routes/dashboard/settings/flags/+page.svelte b/frontend/src/routes/dashboard/settings/flags/+page.svelte index 3b607de..d283833 100644 --- a/frontend/src/routes/dashboard/settings/flags/+page.svelte +++ b/frontend/src/routes/dashboard/settings/flags/+page.svelte @@ -8,7 +8,7 @@ import { Label } from '@/components/ui/label' import * as Dialog from '@/components/ui/dialog' import FlagIcon from '$lib/components/FlagIcon.svelte' - import { FLAG_ICON_SUGGESTIONS, iconExists } from '$lib/flagIcons' + import IconPicker from '$lib/components/IconPicker.svelte' import { Plus, Pencil, Trash2, Sparkles } from 'lucide-svelte' import type { TrailFlagsResponse } from '$lib/types' @@ -202,41 +202,8 @@ {/each} -
- -
- - - - -
-

- Jeder Name von lucide.dev - ist möglich — geschrieben wie „TreePine" oder „tree-pine". - {#if form.icon.trim() && !iconExists(form.icon)} - Diesen Namen gibt es dort nicht. - {/if} -

+ -

Vorschläge:

-
- {#each FLAG_ICON_SUGGESTIONS as name (name)} - - {/each} -
-
{#if error}

{error}

{/if} diff --git a/frontend/src/routes/dashboard/trails/[id]/+page.svelte b/frontend/src/routes/dashboard/trails/[id]/+page.svelte index ccf0274..4846abb 100644 --- a/frontend/src/routes/dashboard/trails/[id]/+page.svelte +++ b/frontend/src/routes/dashboard/trails/[id]/+page.svelte @@ -10,6 +10,9 @@ import TrailMap from '$lib/components/TrailMap.svelte' import ElevationProfile from '$lib/components/ElevationProfile.svelte' import FlagIcon from '$lib/components/FlagIcon.svelte' + import IconPicker from '$lib/components/IconPicker.svelte' + import Avatar from '$lib/components/Avatar.svelte' + import { tooltip } from '$lib/stores/app.svelte' import { positionAtDistance } from '$lib/gpx' import { app } from '$lib/stores/app.svelte' import { Button } from '@/components/ui/button' @@ -19,6 +22,7 @@ import { Label } from '@/components/ui/label' import * as Dialog from '@/components/ui/dialog' import * as DropdownMenu from '@/components/ui/dropdown-menu' + import * as Select from '@/components/ui/select' import { TRAIL_STATUS, trailStatus } from '$lib/trailStatus' import { ArrowLeft, Upload, MapPin, MessageSquare, History, ChevronDown, @@ -26,7 +30,7 @@ } from 'lucide-svelte' import DOMPurify from 'dompurify' import { browser } from '$app/environment' - import type { TrailCommentsResponse, TrailVersionsResponse } from '$lib/types' + import type { TrailCommentsResponse, TrailVersionsResponse, UsersResponse } from '$lib/types' // Generics der JSON-Felder, wie in trails/+page.svelte — die // Rohdaten kommen ungetypt aus PocketBase zurück. @@ -68,20 +72,37 @@ const trailVersions = $derived(trail ? versions.byTrail(trail.id) : []) const trailMarkers = $derived(trail ? markers.byTrail(trail.id) : []) + const NEUTRAL = '#64748b' + + /** + * Beschriftung, Icon und Farbe eines Markers. Ein eigener Text oder ein + * eigenes Icon am Marker geht vor: Beim Setzen darf der Typ nur den + * Vorschlag liefern, nicht das letzte Wort haben. + */ + function markerLook(m: { flag?: string; label?: string; icon?: string }) { + const flag = m.flag ? flags.getById(m.flag) : undefined + + return { + label: m.label?.trim() || flag?.label || 'Marker', + icon: m.icon?.trim() || flag?.icon, + color: flag?.color ?? NEUTRAL, + } + } + // Für die Karte aufbereitete Marker — inklusive der Angaben fürs Popup // (was, wann, wer). Formatiert wird hier, damit die Karte keine Stores // und keine Datumslogik braucht. const mapMarkers = $derived( trailMarkers.map((m) => { - const flag = flags.getById(m.flag) + const look = markerLook(m) return { id: m.id, lat: m.lat, lng: m.lng, - color: flag?.color ?? '#64748b', + color: look.color, resolved: !!m.resolved, - label: flag?.label ?? 'Marker', - icon: flag?.icon, + label: look.label, + icon: look.icon, note: m.note, when: formatDate(m.created), who: markers.authorName(m), @@ -134,23 +155,44 @@ let markerDialog = $state(false) let markerCoords = $state<{ lat: number; lng: number } | null>(null) let markerDistance = $state(null) - let markerFlag = $state('') + // Leerer Wert = eigener Typ. Als erste Zeile im Dropdown, damit eine + // Meldung nie daran scheitert, dass es den passenden Typ noch nicht gibt. + const CUSTOM = '' + + let markerFlag = $state(CUSTOM) + let markerLabel = $state('') + let markerIcon = $state('') let markerNote = $state('') let markerError = $state(null) - const canPlace = $derived(flags.scoped.length > 0) + // Ohne Flag-Typen geht es trotzdem: Dann ist jede Meldung eine eigene. + const canPlace = $derived(!!trail) + + const selectedFlag = $derived(markerFlag ? flags.getById(markerFlag) : undefined) + const markerColor = $derived(selectedFlag?.color ?? NEUTRAL) function onPlace(p: { lat: number; lng: number; distance: number | null }) { if (!canPlace) return markerCoords = { lat: p.lat, lng: p.lng } markerDistance = p.distance - markerFlag = flags.scoped[0]?.id ?? '' + markerFlag = flags.scoped[0]?.id ?? CUSTOM + markerLabel = '' + markerIcon = flags.scoped[0]?.icon ?? '' markerNote = '' markerError = null markerDialog = true } + /** + * Typwechsel übernimmt dessen Icon — als Vorschlag. Wer danach ein anderes + * wählt, behält es; erst der nächste Typwechsel schlägt wieder etwas vor. + */ + function selectFlag(id: string) { + markerFlag = id + markerIcon = id ? (flags.getById(id)?.icon ?? '') : '' + } + function removeMarker(m: { id: string; note?: string }) { app.confirm.request({ title: 'Marker löschen?', @@ -187,8 +229,9 @@ async function saveMarker() { if (!trail || !markerCoords) return - if (!markerFlag) { - markerError = 'Bitte einen Flag-Typ wählen.' + + if (!markerFlag && !markerLabel.trim()) { + markerError = 'Bitte einen Typ wählen oder eine eigene Bezeichnung eintragen.' return } @@ -196,6 +239,10 @@ await markers.create({ trail: trail.id, flag: markerFlag, + // Bei einem vorgefertigten Typ steht die Bezeichnung schon dort; + // sie hier zu kopieren hieße, sie zweimal zu pflegen. + label: markerFlag ? '' : markerLabel.trim(), + icon: markerIcon.trim(), lat: markerCoords.lat, lng: markerCoords.lng, note: markerNote, @@ -210,7 +257,9 @@ // --- Kommentare ------------------------------------------------------ // Eigener Store wäre Overkill: Kommentare werden nur hier gebraucht. - let comments = $state([]) + type Comment = TrailCommentsResponse<{ created_by?: UsersResponse }> + + let comments = $state([]) let commentText = $state('') let commentError = $state(null) let unsubComments: (() => void) | null = null @@ -222,20 +271,30 @@ let cancelled = false api.collection('trail_comments') - .getFullList({ filter: `trail="${id}"`, sort: '-created', requestKey: null }) + .getFullList({ + filter: `trail="${id}"`, + sort: '-created', + expand: 'created_by', + requestKey: null, + }) .then((r) => { - if (!cancelled) comments = r + if (!cancelled) comments = r as Comment[] }) .catch((e) => console.error('Kommentare laden fehlgeschlagen:', e)) api.collection('trail_comments') - .subscribe('*', (e) => { - if (e.record.trail !== id) return - const idx = comments.findIndex((c) => c.id === e.record.id) - if (e.action === 'create' && idx === -1) comments = [e.record, ...comments] - else if (e.action === 'update' && idx !== -1) comments[idx] = e.record - else if (e.action === 'delete' && idx !== -1) comments = comments.filter((c) => c.id !== e.record.id) - }) + .subscribe( + '*', + (e) => { + if (e.record.trail !== id) return + const record = e.record as Comment + const idx = comments.findIndex((c) => c.id === record.id) + if (e.action === 'create' && idx === -1) comments = [record, ...comments] + else if (e.action === 'update' && idx !== -1) comments[idx] = record + else if (e.action === 'delete' && idx !== -1) comments = comments.filter((c) => c.id !== record.id) + }, + { expand: 'created_by' }, + ) .then((u) => { if (cancelled) u() else unsubComments = u @@ -422,28 +481,21 @@ - {#if canPlace} -

- Auf die Trail-Linie oder ins Höhenprofil klicken, um dort einen - Marker zu setzen. -

- {:else} -

- Es gibt noch keine Flag-Typen. - Jetzt anlegen -

- {/if} +

+ Auf die Trail-Linie oder ins Höhenprofil klicken, um dort einen + Marker zu setzen. +

{#if trailMarkers.length === 0}

Noch keine Meldung.

{:else}
    {#each trailMarkers as m (m.id)} - {@const flag = flags.getById(m.flag)} + {@const look = markerLook(m)}
  • - +
    -

    {flag?.label ?? 'Unbekannt'}

    +

    {look.label}

    {#if m.note}

    {m.note}

    {/if} @@ -513,9 +565,20 @@ {:else}
      {#each comments as c (c.id)} -
    • -

      {c.text}

      -

      {formatDate(c.created)}

      + {@const author = c.expand?.created_by} +
    • + + + + +
      +

      {c.text}

      +

      {formatDate(c.created)}

      +
      • {/each}
    @@ -646,19 +709,37 @@
    -
    - {#each flags.scoped as f (f.id)} - - {/each} -
    + + + {#if selectedFlag} + + + {selectedFlag.label} + + {:else} + Eigener Typ + {/if} + + + Eigener Typ … + {#each flags.scoped as f (f.id)} + + + {f.label} + + {/each} + +
    + + {#if !markerFlag} +
    + + +
    + {/if} + +