feat: Trail-Detailseite mit Karte, Höhenprofil, Markern und Kommentaren
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Daniel Michelberger
parent
7bc128601a
commit
a45c5d2908
1 changed files with 543 additions and 0 deletions
543
frontend/src/routes/dashboard/trails/[id]/+page.svelte
Normal file
543
frontend/src/routes/dashboard/trails/[id]/+page.svelte
Normal file
|
|
@ -0,0 +1,543 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { page } from '$app/state'
|
||||||
|
import { goto } from '$app/navigation'
|
||||||
|
import { api, auth, getFileURL } from '$lib/stores/pocketbase.svelte'
|
||||||
|
import { getTrailContext } from '$lib/stores/trails.svelte'
|
||||||
|
import { getTrailVersionContext } from '$lib/stores/trailVersions.svelte'
|
||||||
|
import { getTrailFlagContext } from '$lib/stores/trailFlags.svelte'
|
||||||
|
import { getTrailMarkerContext } from '$lib/stores/trailMarkers.svelte'
|
||||||
|
import TrailMap from '$lib/components/TrailMap.svelte'
|
||||||
|
import ElevationProfile from '$lib/components/ElevationProfile.svelte'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Label } from '@/components/ui/label'
|
||||||
|
import * as Dialog from '@/components/ui/dialog'
|
||||||
|
import * as Select from '@/components/ui/select'
|
||||||
|
import { Separator } from '@/components/ui/separator'
|
||||||
|
import {
|
||||||
|
ArrowLeft, Upload, MapPin, MessageSquare, History,
|
||||||
|
Check, Trash2, Download, Plus, AlertTriangle,
|
||||||
|
} from 'lucide-svelte'
|
||||||
|
import type { TrailCommentsResponse, TrailVersionsResponse } from '$lib/types'
|
||||||
|
|
||||||
|
// Generics der JSON-Felder, wie in trails/+page.svelte — die
|
||||||
|
// Rohdaten kommen ungetypt aus PocketBase zurück.
|
||||||
|
type LineGeoJSON = { type: 'LineString'; coordinates: [number, number][] }
|
||||||
|
type Elevation = { d: number; ele: number }[]
|
||||||
|
type Version = TrailVersionsResponse<
|
||||||
|
[[number, number], [number, number]] | null,
|
||||||
|
Elevation | null,
|
||||||
|
LineGeoJSON | null
|
||||||
|
>
|
||||||
|
|
||||||
|
const trails = getTrailContext()
|
||||||
|
const versions = getTrailVersionContext()
|
||||||
|
const flags = getTrailFlagContext()
|
||||||
|
const markers = getTrailMarkerContext()
|
||||||
|
|
||||||
|
const trail = $derived(page.params.id ? trails.getById(page.params.id) : undefined)
|
||||||
|
const canEdit = $derived(trail ? trails.canEdit(trail) : false)
|
||||||
|
|
||||||
|
const version = $derived.by((): Version | null => {
|
||||||
|
if (!trail?.current) return null
|
||||||
|
return (versions.records.find((v) => v.id === trail.current) ?? null) as Version | null
|
||||||
|
})
|
||||||
|
|
||||||
|
const trailVersions = $derived(trail ? versions.byTrail(trail.id) : [])
|
||||||
|
const trailMarkers = $derived(trail ? markers.byTrail(trail.id) : [])
|
||||||
|
|
||||||
|
// Für die Karte aufbereitete Marker
|
||||||
|
const mapMarkers = $derived(
|
||||||
|
trailMarkers.map((m) => {
|
||||||
|
const flag = flags.getById(m.flag)
|
||||||
|
return {
|
||||||
|
id: m.id,
|
||||||
|
lat: m.lat,
|
||||||
|
lng: m.lng,
|
||||||
|
color: flag?.color ?? '#64748b',
|
||||||
|
resolved: !!m.resolved,
|
||||||
|
label: flag?.label ?? 'Marker',
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
|
||||||
|
let tab = $state<'marker' | 'kommentare' | 'versionen'>('marker')
|
||||||
|
let highlight = $state<number | null>(null)
|
||||||
|
|
||||||
|
// --- GPX-Upload ------------------------------------------------------
|
||||||
|
let uploadDialog = $state(false)
|
||||||
|
let uploadFile = $state<File | null>(null)
|
||||||
|
let uploadNote = $state('')
|
||||||
|
let uploading = $state(false)
|
||||||
|
let uploadError = $state<string | null>(null)
|
||||||
|
|
||||||
|
async function doUpload() {
|
||||||
|
if (!trail || !uploadFile) return
|
||||||
|
|
||||||
|
uploading = true
|
||||||
|
uploadError = null
|
||||||
|
try {
|
||||||
|
await versions.upload(trail.id, uploadFile, uploadNote)
|
||||||
|
uploadDialog = false
|
||||||
|
uploadFile = null
|
||||||
|
uploadNote = ''
|
||||||
|
} catch (e: any) {
|
||||||
|
// parseGpx wirft mit verständlichem Text — direkt zeigen. Der
|
||||||
|
// Upload läuft in zwei Schritten (Version anlegen, dann aktivieren);
|
||||||
|
// scheitert der zweite, existiert die Version schon.
|
||||||
|
uploadError = (e.message ?? 'Die Datei konnte nicht verarbeitet werden.')
|
||||||
|
+ ' Prüfe unter „Versionen“, ob sie trotzdem angelegt wurde.'
|
||||||
|
} finally {
|
||||||
|
uploading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Marker setzen ---------------------------------------------------
|
||||||
|
let placing = $state(false)
|
||||||
|
let markerDialog = $state(false)
|
||||||
|
let markerCoords = $state<{ lat: number; lng: number } | null>(null)
|
||||||
|
let markerFlag = $state('')
|
||||||
|
let markerNote = $state('')
|
||||||
|
let markerError = $state<string | null>(null)
|
||||||
|
|
||||||
|
function onPlace(coords: { lat: number; lng: number }) {
|
||||||
|
markerCoords = coords
|
||||||
|
markerFlag = flags.scoped[0]?.id ?? ''
|
||||||
|
markerNote = ''
|
||||||
|
markerError = null
|
||||||
|
placing = false
|
||||||
|
markerDialog = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveMarker() {
|
||||||
|
if (!trail || !markerCoords) return
|
||||||
|
if (!markerFlag) {
|
||||||
|
markerError = 'Bitte einen Flag-Typ wählen.'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await markers.create({
|
||||||
|
trail: trail.id,
|
||||||
|
flag: markerFlag,
|
||||||
|
lat: markerCoords.lat,
|
||||||
|
lng: markerCoords.lng,
|
||||||
|
note: markerNote,
|
||||||
|
})
|
||||||
|
markerDialog = false
|
||||||
|
markerCoords = null
|
||||||
|
} catch (e: any) {
|
||||||
|
markerError = e.message ?? 'Der Marker konnte nicht gespeichert werden.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Kommentare ------------------------------------------------------
|
||||||
|
// Eigener Store wäre Overkill: Kommentare werden nur hier gebraucht.
|
||||||
|
let comments = $state<TrailCommentsResponse[]>([])
|
||||||
|
let commentText = $state('')
|
||||||
|
let commentError = $state<string | null>(null)
|
||||||
|
let unsubComments: (() => void) | null = null
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
const id = trail?.id
|
||||||
|
if (!id) return
|
||||||
|
|
||||||
|
let cancelled = false
|
||||||
|
|
||||||
|
api.collection('trail_comments')
|
||||||
|
.getFullList({ filter: `trail="${id}"`, sort: '-created', requestKey: null })
|
||||||
|
.then((r) => {
|
||||||
|
if (!cancelled) comments = r
|
||||||
|
})
|
||||||
|
.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)
|
||||||
|
})
|
||||||
|
.then((u) => {
|
||||||
|
if (cancelled) u()
|
||||||
|
else unsubComments = u
|
||||||
|
})
|
||||||
|
.catch((e) => console.warn('trail_comments subscribe failed:', e))
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true
|
||||||
|
unsubComments?.()
|
||||||
|
unsubComments = null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
async function addComment() {
|
||||||
|
if (!trail || !commentText.trim()) return
|
||||||
|
|
||||||
|
commentError = null
|
||||||
|
try {
|
||||||
|
await api.collection('trail_comments').create({
|
||||||
|
trail: trail.id,
|
||||||
|
team: trail.team,
|
||||||
|
text: commentText.trim(),
|
||||||
|
created_by: auth.user?.id,
|
||||||
|
})
|
||||||
|
commentText = ''
|
||||||
|
} catch (e: any) {
|
||||||
|
commentError = e.message ?? 'Der Kommentar konnte nicht gespeichert werden.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Hilfsfunktionen -------------------------------------------------
|
||||||
|
const STATUS_LABEL = {
|
||||||
|
offen: 'Offen',
|
||||||
|
eingeschraenkt: 'Eingeschränkt',
|
||||||
|
gesperrt: 'Gesperrt',
|
||||||
|
} as const
|
||||||
|
|
||||||
|
const STATUS_VARIANT = {
|
||||||
|
offen: 'default',
|
||||||
|
eingeschraenkt: 'secondary',
|
||||||
|
gesperrt: 'destructive',
|
||||||
|
} as const
|
||||||
|
|
||||||
|
function formatDate(s: string) {
|
||||||
|
return new Date(s).toLocaleString('de-DE', { dateStyle: 'medium', timeStyle: 'short' })
|
||||||
|
}
|
||||||
|
|
||||||
|
async function setStatus(status: string) {
|
||||||
|
if (!trail) return
|
||||||
|
await trails.edit(trail.id, { status } as any)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if !trail}
|
||||||
|
<div class="space-y-4">
|
||||||
|
<Button variant="ghost" onclick={() => goto('/dashboard/trails')}>
|
||||||
|
<ArrowLeft class="size-4 mr-2" />
|
||||||
|
Zurück
|
||||||
|
</Button>
|
||||||
|
<p class="text-muted-foreground">Trail nicht gefunden.</p>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="space-y-6">
|
||||||
|
<!-- Kopf -->
|
||||||
|
<div class="flex items-start justify-between gap-4">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<Button variant="ghost" size="sm" onclick={() => goto('/dashboard/trails')}>
|
||||||
|
<ArrowLeft class="size-4 mr-2" />
|
||||||
|
Trails
|
||||||
|
</Button>
|
||||||
|
<h1 class="text-2xl font-semibold">{trail.name}</h1>
|
||||||
|
{#if trail.description}
|
||||||
|
<p class="text-muted-foreground text-sm">{@html trail.description}</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<Badge variant={STATUS_VARIANT[trail.status] ?? 'default'}>
|
||||||
|
{STATUS_LABEL[trail.status] ?? trail.status}
|
||||||
|
</Badge>
|
||||||
|
{#if canEdit}
|
||||||
|
<Button variant="outline" size="sm" onclick={() => (uploadDialog = true)}>
|
||||||
|
<Upload class="size-4 mr-2" />
|
||||||
|
GPX hochladen
|
||||||
|
</Button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if canEdit}
|
||||||
|
<div class="flex gap-2">
|
||||||
|
{#each ['offen', 'eingeschraenkt', 'gesperrt'] as s}
|
||||||
|
<Button
|
||||||
|
variant={trail.status === s ? 'default' : 'outline'}
|
||||||
|
size="sm"
|
||||||
|
onclick={() => setStatus(s)}
|
||||||
|
>
|
||||||
|
{STATUS_LABEL[s as keyof typeof STATUS_LABEL]}
|
||||||
|
</Button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Karte -->
|
||||||
|
<Card>
|
||||||
|
<CardContent class="pt-6 space-y-4">
|
||||||
|
{#if version?.geojson}
|
||||||
|
<TrailMap
|
||||||
|
geojson={version.geojson}
|
||||||
|
bounds={version.bounds}
|
||||||
|
markers={mapMarkers}
|
||||||
|
status={trail.status}
|
||||||
|
{placing}
|
||||||
|
highlightIndex={highlight}
|
||||||
|
onplace={onPlace}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="flex flex-wrap items-center gap-6 text-sm">
|
||||||
|
<span><strong>{(version.distance_m / 1000).toFixed(1)}</strong> km</span>
|
||||||
|
<span><strong>{version.ascent_m}</strong> hm</span>
|
||||||
|
<Button
|
||||||
|
variant={placing ? 'default' : 'outline'}
|
||||||
|
size="sm"
|
||||||
|
class="ml-auto"
|
||||||
|
onclick={() => (placing = !placing)}
|
||||||
|
disabled={flags.scoped.length === 0}
|
||||||
|
>
|
||||||
|
<MapPin class="size-4 mr-2" />
|
||||||
|
{placing ? 'Abbrechen' : 'Marker setzen'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if flags.scoped.length === 0}
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Es gibt noch keine Flag-Typen.
|
||||||
|
<a href="/dashboard/settings/flags" class="underline">Jetzt anlegen</a>
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if version.elevation?.length}
|
||||||
|
<Separator />
|
||||||
|
<ElevationProfile
|
||||||
|
elevation={version.elevation}
|
||||||
|
onhover={(i) => (highlight = i)}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
{:else}
|
||||||
|
<div class="py-12 text-center space-y-3">
|
||||||
|
<Upload class="size-10 mx-auto text-muted-foreground" />
|
||||||
|
<p class="text-muted-foreground">Für diesen Trail gibt es noch keine GPX-Datei.</p>
|
||||||
|
{#if canEdit}
|
||||||
|
<Button onclick={() => (uploadDialog = true)}>
|
||||||
|
<Upload class="size-4 mr-2" />
|
||||||
|
GPX hochladen
|
||||||
|
</Button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<!-- Reiter -->
|
||||||
|
<div class="flex gap-2 border-b">
|
||||||
|
<button
|
||||||
|
class="px-4 py-2 text-sm border-b-2 -mb-px"
|
||||||
|
class:border-primary={tab === 'marker'}
|
||||||
|
class:border-transparent={tab !== 'marker'}
|
||||||
|
onclick={() => (tab = 'marker')}
|
||||||
|
>
|
||||||
|
<MapPin class="size-4 inline mr-1" />
|
||||||
|
Marker ({trailMarkers.length})
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="px-4 py-2 text-sm border-b-2 -mb-px"
|
||||||
|
class:border-primary={tab === 'kommentare'}
|
||||||
|
class:border-transparent={tab !== 'kommentare'}
|
||||||
|
onclick={() => (tab = 'kommentare')}
|
||||||
|
>
|
||||||
|
<MessageSquare class="size-4 inline mr-1" />
|
||||||
|
Kommentare ({comments.length})
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="px-4 py-2 text-sm border-b-2 -mb-px"
|
||||||
|
class:border-primary={tab === 'versionen'}
|
||||||
|
class:border-transparent={tab !== 'versionen'}
|
||||||
|
onclick={() => (tab = 'versionen')}
|
||||||
|
>
|
||||||
|
<History class="size-4 inline mr-1" />
|
||||||
|
Versionen ({trailVersions.length})
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if tab === 'marker'}
|
||||||
|
{#if trailMarkers.length === 0}
|
||||||
|
<p class="text-muted-foreground text-sm">
|
||||||
|
Noch keine Marker. Setze einen über „Marker setzen" auf der Karte.
|
||||||
|
</p>
|
||||||
|
{:else}
|
||||||
|
<div class="space-y-2">
|
||||||
|
{#each trailMarkers as m (m.id)}
|
||||||
|
{@const flag = flags.getById(m.flag)}
|
||||||
|
<Card class={m.resolved ? 'opacity-60' : ''}>
|
||||||
|
<CardContent class="py-3 flex items-center gap-3">
|
||||||
|
<span
|
||||||
|
class="size-3 rounded-full shrink-0"
|
||||||
|
style:background={flag?.color ?? '#64748b'}
|
||||||
|
></span>
|
||||||
|
<div class="min-w-0 flex-1">
|
||||||
|
<p class="text-sm font-medium">{flag?.label ?? 'Unbekannt'}</p>
|
||||||
|
{#if m.note}
|
||||||
|
<p class="text-sm text-muted-foreground">{m.note}</p>
|
||||||
|
{/if}
|
||||||
|
<p class="text-xs text-muted-foreground">{formatDate(m.created)}</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
title={m.resolved ? 'Wieder öffnen' : 'Als erledigt markieren'}
|
||||||
|
onclick={() => markers.toggleResolved(m.id)}
|
||||||
|
>
|
||||||
|
<Check class="size-4" />
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{:else if tab === 'kommentare'}
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<Input
|
||||||
|
bind:value={commentText}
|
||||||
|
placeholder="Kommentar schreiben …"
|
||||||
|
onkeydown={(e) => e.key === 'Enter' && addComment()}
|
||||||
|
/>
|
||||||
|
<Button onclick={addComment} disabled={!commentText.trim()}>
|
||||||
|
<Plus class="size-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{#if commentError}
|
||||||
|
<p class="text-sm text-destructive">{commentError}</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if comments.length === 0}
|
||||||
|
<p class="text-muted-foreground text-sm">Noch keine Kommentare.</p>
|
||||||
|
{:else}
|
||||||
|
<div class="space-y-2">
|
||||||
|
{#each comments as c (c.id)}
|
||||||
|
<Card>
|
||||||
|
<CardContent class="py-3">
|
||||||
|
<p class="text-sm">{c.text}</p>
|
||||||
|
<p class="text-xs text-muted-foreground mt-1">{formatDate(c.created)}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
{#if trailVersions.length === 0}
|
||||||
|
<p class="text-muted-foreground text-sm">Noch keine Version hochgeladen.</p>
|
||||||
|
{:else}
|
||||||
|
<div class="space-y-2">
|
||||||
|
{#each trailVersions as v (v.id)}
|
||||||
|
<Card class={v.id === trail.current ? 'border-primary' : ''}>
|
||||||
|
<CardContent class="py-3 flex items-center gap-3">
|
||||||
|
<div class="min-w-0 flex-1">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<p class="text-sm font-medium">{formatDate(v.created)}</p>
|
||||||
|
{#if v.id === trail.current}
|
||||||
|
<Badge>Aktiv</Badge>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
{(v.distance_m / 1000).toFixed(1)} km · {v.ascent_m} hm
|
||||||
|
{#if v.note}· {v.note}{/if}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if v.gpx}
|
||||||
|
<Button variant="ghost" size="sm" href={getFileURL(v, v.gpx)} title="GPX herunterladen">
|
||||||
|
<Download class="size-4" />
|
||||||
|
</Button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if canEdit && v.id !== trail.current}
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onclick={() => versions.activate(trail.id, v.id)}
|
||||||
|
>
|
||||||
|
Aktivieren
|
||||||
|
</Button>
|
||||||
|
{/if}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- GPX-Upload -->
|
||||||
|
<Dialog.Root bind:open={uploadDialog}>
|
||||||
|
<Dialog.Content>
|
||||||
|
<Dialog.Header>
|
||||||
|
<Dialog.Title>GPX-Datei hochladen</Dialog.Title>
|
||||||
|
<Dialog.Description>
|
||||||
|
Die bisherige Version bleibt erhalten; die neue wird zur aktiven.
|
||||||
|
</Dialog.Description>
|
||||||
|
</Dialog.Header>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Label for="gpx-file">Datei</Label>
|
||||||
|
<input
|
||||||
|
id="gpx-file"
|
||||||
|
type="file"
|
||||||
|
accept=".gpx,application/gpx+xml,application/xml,text/xml"
|
||||||
|
class="block w-full text-sm"
|
||||||
|
onchange={(e) => (uploadFile = e.currentTarget.files?.[0] ?? null)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Label for="gpx-note">Notiz</Label>
|
||||||
|
<Input id="gpx-note" bind:value={uploadNote} placeholder="z. B. Umleitung am Steinbruch" />
|
||||||
|
</div>
|
||||||
|
{#if uploadError}
|
||||||
|
<p class="text-sm text-destructive">{uploadError}</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Dialog.Footer>
|
||||||
|
<Button variant="outline" onclick={() => (uploadDialog = false)}>Abbrechen</Button>
|
||||||
|
<Button onclick={doUpload} disabled={!uploadFile || uploading}>
|
||||||
|
{uploading ? 'Wird verarbeitet …' : 'Hochladen'}
|
||||||
|
</Button>
|
||||||
|
</Dialog.Footer>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Root>
|
||||||
|
|
||||||
|
<!-- Marker anlegen -->
|
||||||
|
<Dialog.Root bind:open={markerDialog}>
|
||||||
|
<Dialog.Content>
|
||||||
|
<Dialog.Header>
|
||||||
|
<Dialog.Title>Marker setzen</Dialog.Title>
|
||||||
|
</Dialog.Header>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Label>Typ</Label>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
{#each flags.scoped as f (f.id)}
|
||||||
|
<Button
|
||||||
|
variant={markerFlag === f.id ? 'default' : 'outline'}
|
||||||
|
size="sm"
|
||||||
|
onclick={() => (markerFlag = f.id)}
|
||||||
|
>
|
||||||
|
<span class="size-2 rounded-full mr-2" style:background={f.color}></span>
|
||||||
|
{f.label}
|
||||||
|
</Button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<Label for="marker-note">Notiz</Label>
|
||||||
|
<Input id="marker-note" bind:value={markerNote} placeholder="optional" />
|
||||||
|
</div>
|
||||||
|
{#if markerError}
|
||||||
|
<p class="text-sm text-destructive">{markerError}</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Dialog.Footer>
|
||||||
|
<Button variant="outline" onclick={() => (markerDialog = false)}>Abbrechen</Button>
|
||||||
|
<Button onclick={saveMarker}>Speichern</Button>
|
||||||
|
</Dialog.Footer>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Root>
|
||||||
Loading…
Reference in a new issue