9d8a73e2a9
- Vorlagen + Ketten: Partei-Dropdown-Filter mit Badges (#9) - Vorlagen-Detail: Ketten-Klassifikation mit Begründung anzeigen - Vorlagen-Detail: Umsetzungsbewertungen mit Score + Begründung - SPA-Routing: Catch-All für direkten URL-Zugriff - Status-Engine: Begründungen für alle Ketten-Status generieren - Kurze Beschlusstexte (<=5 Zeichen) nicht mehr als Beschluss werten - POST /api/bewertung/vorlagen/{id} + /ketten/{id} für KI-Neubewertung - Frontend: 'Neu bewerten' Button + Kommentarfeld auf beiden Detailseiten - Job-Status-Polling mit Spinner - ALLRIS-Rescrape vor Bewertung noch offen (#10) Closes #9
38 lines
1.4 KiB
Svelte
38 lines
1.4 KiB
Svelte
<script lang="ts">
|
||
import { umsetzungInfo, type UmsetzungKategorie } from '$lib/umsetzung';
|
||
|
||
let { kategorie, score = null, showTooltip = true }: {
|
||
kategorie: string | null;
|
||
score?: number | null;
|
||
showTooltip?: boolean;
|
||
} = $props();
|
||
|
||
const info = $derived(umsetzungInfo(kategorie as UmsetzungKategorie));
|
||
let tooltipVisible = $state(false);
|
||
</script>
|
||
|
||
<span
|
||
class="relative inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium cursor-help"
|
||
style="background-color: {info.farbe}20; color: {info.farbe}; border: 1px solid {info.farbe}40;"
|
||
onmouseenter={() => tooltipVisible = true}
|
||
onmouseleave={() => tooltipVisible = false}
|
||
>
|
||
<span class="mr-1">{info.icon}</span>
|
||
{info.label}
|
||
{#if score !== null && score !== undefined}
|
||
<span class="ml-1 opacity-60">({(score * 100).toFixed(0)}%)</span>
|
||
{/if}
|
||
|
||
{#if showTooltip && tooltipVisible}
|
||
<div class="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-2 w-72 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg pointer-events-none">
|
||
<div class="font-bold mb-1">{info.icon} {info.label}</div>
|
||
<div class="mb-2 leading-relaxed">{info.beschreibung}</div>
|
||
<div class="text-gray-400 italic">Beispiel: {info.beispiel}</div>
|
||
{#if info.score_range}
|
||
<div class="mt-1 text-gray-400">Score: {info.score_range[0]}–{info.score_range[1]}</div>
|
||
{/if}
|
||
<div class="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-gray-900 rotate-45"></div>
|
||
</div>
|
||
{/if}
|
||
</span>
|