feat: Verwaltung der Flag-Typen
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.
This commit is contained in:
Daniel Michelberger
parent
8e256d0184
commit
c44ec4377f
1 changed files with 202 additions and 0 deletions
202
frontend/src/routes/dashboard/settings/flags/+page.svelte
Normal file
202
frontend/src/routes/dashboard/settings/flags/+page.svelte
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue