From c44ec4377fcd6e5878e245eb4fb2731289db6809 Mon Sep 17 00:00:00 2001
From: Daniel Michelberger <dml@kq-pwr.de>
Date: Thu, 6 Aug 2026 19:06:58 +0200
Subject: [PATCH] feat: Verwaltung der Flag-Typen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Flag-Verwaltungsseite ermöglicht Team-Admins und -Besitzern, die Marker-Typen
für Trails zu erstellen, bearbeiten und zu löschen. Einfache Mitglieder sehen die
Flags nur. Hinweistexte informieren über Berechtigungen und ermöglichen Nicht-Admins,
die Benutzeroberfläche zu verstehen.
---
 .../dashboard/settings/flags/+page.svelte     | 202 ++++++++++++++++++
 1 file changed, 202 insertions(+)
 create mode 100644 frontend/src/routes/dashboard/settings/flags/+page.svelte

diff --git a/frontend/src/routes/dashboard/settings/flags/+page.svelte b/frontend/src/routes/dashboard/settings/flags/+page.svelte
new file mode 100644
index 0000000..704283a
--- /dev/null
+++ b/frontend/src/routes/dashboard/settings/flags/+page.svelte
@@ -0,0 +1,202 @@
+<script lang="ts">
+    import { getTrailFlagContext } from '$lib/stores/trailFlags.svelte'
+    import { Button } from '@/components/ui/button'
+    import { Card, CardContent } 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 { Plus, Pencil, Trash2, Sparkles } from 'lucide-svelte'
+    import type { TrailFlagsResponse } from '$lib/types'
+
+    const flags = getTrailFlagContext()
+
+    let dialog = $state(false)
+    let editing = $state<TrailFlagsResponse | null>(null)
+    let form = $state<{ label: string; icon: string; color: string; severity: string }>({
+        label: '',
+        icon: 'Info',
+        color: '#dc2626',
+        severity: 'warnung',
+    })
+    let error = $state<string | null>(null)
+    let seeding = $state(false)
+
+    const SEVERITIES = [
+        { value: 'info', label: 'Info' },
+        { value: 'warnung', label: 'Warnung' },
+        { value: 'kritisch', label: 'Kritisch' },
+    ] as const
+
+    function openCreate() {
+        editing = null
+        form = { label: '', icon: 'Info', color: '#dc2626', severity: 'warnung' }
+        error = null
+        dialog = true
+    }
+
+    function openEdit(flag: TrailFlagsResponse) {
+        editing = flag
+        form = {
+            label: flag.label,
+            icon: flag.icon ?? 'Info',
+            color: flag.color ?? '#dc2626',
+            severity: flag.severity ?? 'warnung',
+        }
+        error = null
+        dialog = true
+    }
+
+    async function save() {
+        if (!form.label.trim()) {
+            error = 'Bitte eine Bezeichnung angeben.'
+            return
+        }
+
+        try {
+            if (editing) await flags.edit(editing.id, { ...form } as Parameters<typeof flags.edit>[1])
+            else await flags.create({ ...form })
+            dialog = false
+        } catch (e: any) {
+            error = e.message ?? 'Der Flag-Typ konnte nicht gespeichert werden.'
+        }
+    }
+
+    async function remove(flag: TrailFlagsResponse) {
+        if (!confirm(`„${flag.label}" wirklich löschen?`)) return
+        try {
+            await flags.remove(flag.id)
+        } catch (e: any) {
+            // Marker verweisen auf den Flag-Typ — PocketBase lehnt das Löschen ab
+            alert(e.message ?? 'Der Flag-Typ konnte nicht gelöscht werden. Vermutlich ist er noch in Verwendung.')
+        }
+    }
+
+    async function seed() {
+        seeding = true
+        try {
+            const n = await flags.seedDefaults()
+            if (n === 0) alert('Alle Standard-Typen sind bereits vorhanden.')
+        } catch (e: any) {
+            alert(e.message ?? 'Die Standard-Typen konnten nicht angelegt werden.')
+        } finally {
+            seeding = false
+        }
+    }
+</script>
+
+<div class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-2xl font-semibold">Flag-Typen</h1>
+            <p class="text-muted-foreground text-sm">
+                Wofür sich Marker auf einem Trail setzen lassen.
+            </p>
+            {#if !flags.canManage}
+                <p class="text-sm text-muted-foreground mt-3">
+                    Flag-Typen verwaltet, wer das Team führt. Du kannst sie beim Setzen
+                    von Markern verwenden.
+                </p>
+            {/if}
+        </div>
+        {#if flags.canManage}
+            <div class="flex gap-2">
+                {#if flags.scoped.length === 0}
+                    <Button variant="outline" onclick={seed} disabled={seeding}>
+                        <Sparkles class="size-4 mr-2" />
+                        {seeding ? 'Wird angelegt …' : 'Standardsatz anlegen'}
+                    </Button>
+                {/if}
+                <Button onclick={openCreate}>
+                    <Plus class="size-4 mr-2" />
+                    Neuer Typ
+                </Button>
+            </div>
+        {/if}
+    </div>
+
+    {#if flags.scoped.length === 0}
+        <Card>
+            <CardContent class="py-10 text-center text-muted-foreground">
+                {#if flags.canManage}
+                    Noch keine Flag-Typen. Leg einen an oder starte mit dem Standardsatz.
+                {:else}
+                    Das Team hat noch keine Flag-Typen angelegt.
+                {/if}
+            </CardContent>
+        </Card>
+    {:else}
+        <div class="space-y-2">
+            {#each flags.scoped as flag (flag.id)}
+                <Card>
+                    <CardContent class="py-3 flex items-center gap-3">
+                        <span class="size-4 rounded-full shrink-0" style:background={flag.color}></span>
+                        <span class="font-medium flex-1">{flag.label}</span>
+                        <Badge variant={flag.severity === 'kritisch' ? 'destructive' : 'secondary'}>
+                            {flag.severity}
+                        </Badge>
+                        {#if flags.canManage}
+                            <Button variant="ghost" size="sm" onclick={() => openEdit(flag)}>
+                                <Pencil class="size-4" />
+                            </Button>
+                            <Button variant="ghost" size="sm" onclick={() => remove(flag)}>
+                                <Trash2 class="size-4" />
+                            </Button>
+                        {/if}
+                    </CardContent>
+                </Card>
+            {/each}
+        </div>
+    {/if}
+</div>
+
+<Dialog.Root bind:open={dialog}>
+    <Dialog.Content>
+        <Dialog.Header>
+            <Dialog.Title>{editing ? 'Flag-Typ bearbeiten' : 'Neuer Flag-Typ'}</Dialog.Title>
+        </Dialog.Header>
+
+        <div class="space-y-4">
+            <div class="space-y-2">
+                <Label for="flag-label">Bezeichnung</Label>
+                <Input id="flag-label" bind:value={form.label} placeholder="z. B. Baum quer" />
+            </div>
+            <div class="space-y-2">
+                <Label for="flag-color">Farbe</Label>
+                <div class="flex gap-2 items-center">
+                    <input id="flag-color" type="color" bind:value={form.color} class="h-9 w-16 rounded border" />
+                    <Input bind:value={form.color} class="flex-1" />
+                </div>
+            </div>
+            <div class="space-y-2">
+                <Label>Schweregrad</Label>
+                <div class="flex gap-2">
+                    {#each SEVERITIES as s (s.value)}
+                        <Button
+                            variant={form.severity === s.value ? 'default' : 'outline'}
+                            size="sm"
+                            onclick={() => (form.severity = s.value)}
+                        >
+                            {s.label}
+                        </Button>
+                    {/each}
+                </div>
+            </div>
+            <div class="space-y-2">
+                <Label for="flag-icon">Icon</Label>
+                <Input id="flag-icon" bind:value={form.icon} placeholder="Lucide-Name, z. B. TreePine" />
+                <p class="text-xs text-muted-foreground">
+                    Name eines Icons von lucide.dev, in Schreibweise wie „TreePine".
+                </p>
+            </div>
+            {#if error}
+                <p class="text-sm text-destructive">{error}</p>
+            {/if}
+        </div>
+
+        <Dialog.Footer>
+            <Button variant="outline" onclick={() => (dialog = false)}>Abbrechen</Button>
+            <Button onclick={save}>Speichern</Button>
+        </Dialog.Footer>
+    </Dialog.Content>
+</Dialog.Root>