b601c0a366
- 6 Abschnitte: Einführung, Verfahrensstränge, Ampel, KI-Bewertung, Szenarien, Fristen - Ampel-Beispiele inline mit Ampel.svelte - Inhaltsverzeichnis mit Sprungmarken - Strang-Labels dynamisch von /api/ampel/definition - Navigation: Anleitung-Link in Desktop + Mobile Closes #18
145 lines
6.9 KiB
Svelte
145 lines
6.9 KiB
Svelte
<script lang="ts">
|
|
import '../app.css';
|
|
import { onMount } from 'svelte';
|
|
import { filters, fraktionenList, PERIODEN, togglePeriode, togglePartei, clearFilters, hasActiveFilters, type Fraktion } from '$lib/filters.svelte';
|
|
|
|
let { children } = $props();
|
|
let menuOpen = $state(false);
|
|
|
|
const API_BASE = typeof window !== 'undefined'
|
|
? (window.location.port === '5173'
|
|
? `http://${window.location.hostname}:8099/api`
|
|
: '/api')
|
|
: '/api';
|
|
|
|
onMount(async () => {
|
|
if (fraktionenList.items.length === 0) {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/fraktionen`);
|
|
if (res.ok) {
|
|
fraktionenList.items = await res.json();
|
|
}
|
|
} catch (e) {
|
|
console.error('Fraktionen laden fehlgeschlagen:', e);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="min-h-screen bg-gray-50">
|
|
<!-- Navigation -->
|
|
<nav class="bg-white border-b border-gray-200 shadow-sm">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex items-center">
|
|
<a href="/" class="text-xl font-bold text-gray-900 shrink-0">
|
|
Antragstracker <span class="text-green-600">Hagen</span>
|
|
</a>
|
|
<div class="hidden sm:flex sm:ml-8 space-x-4">
|
|
<a href="/" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
|
|
<a href="/explorer" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Explorer</a>
|
|
<a href="/ketten" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Ketten</a>
|
|
<a href="/vorlagen" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Vorlagen</a>
|
|
<a href="/abstimmungen" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Abstimmungen</a>
|
|
<a href="/karte" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Karte</a>
|
|
<a href="/fristen" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Fristen</a>
|
|
<a href="/fraktionen" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Fraktionen</a>
|
|
<a href="/anleitung" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Anleitung</a>
|
|
</div>
|
|
</div>
|
|
<!-- Hamburger Button -->
|
|
<div class="flex items-center sm:hidden">
|
|
<button
|
|
onclick={() => menuOpen = !menuOpen}
|
|
class="inline-flex items-center justify-center p-3 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500"
|
|
aria-expanded={menuOpen}
|
|
aria-label="Hauptmenü"
|
|
>
|
|
{#if menuOpen}
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
{:else}
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
{#if menuOpen}
|
|
<div class="sm:hidden border-t border-gray-200 bg-white">
|
|
<div class="px-2 pt-2 pb-3 space-y-1">
|
|
<a href="/" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Dashboard</a>
|
|
<a href="/explorer" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Explorer</a>
|
|
<a href="/ketten" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Ketten</a>
|
|
<a href="/vorlagen" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Vorlagen</a>
|
|
<a href="/abstimmungen" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Abstimmungen</a>
|
|
<a href="/karte" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Karte</a>
|
|
<a href="/fristen" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Fristen</a>
|
|
<a href="/fraktionen" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Fraktionen</a>
|
|
<a href="/anleitung" onclick={() => menuOpen = false} class="block text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-3 rounded-md text-base font-medium">Anleitung</a>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</nav>
|
|
|
|
<!-- Global Filter Bar -->
|
|
<div class="sticky top-0 z-40 bg-white/95 backdrop-blur-sm border-b border-gray-200 shadow-sm">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
|
|
<div class="flex flex-col sm:flex-row gap-2.5 sm:items-center">
|
|
<!-- Ratsperioden -->
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<span class="text-xs font-medium text-gray-500 uppercase shrink-0">Periode</span>
|
|
<div class="flex flex-wrap gap-1">
|
|
{#each PERIODEN as p}
|
|
<button onclick={() => togglePeriode(p)}
|
|
class="px-2 py-1 rounded-md text-xs font-medium transition-all
|
|
{filters.perioden.includes(p)
|
|
? 'bg-green-600 text-white shadow-sm'
|
|
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'}">
|
|
{p}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Separator -->
|
|
<div class="hidden sm:block w-px h-6 bg-gray-300"></div>
|
|
|
|
<!-- Parteien -->
|
|
<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
|
|
<span class="text-xs font-medium text-gray-500 uppercase shrink-0">Partei</span>
|
|
<div class="flex flex-wrap gap-1">
|
|
{#each fraktionenList.items as f}
|
|
<button onclick={() => togglePartei(f.kuerzel)}
|
|
class="px-2 py-1 rounded-md text-xs font-medium transition-all border"
|
|
style={filters.parteien.includes(f.kuerzel)
|
|
? `background-color: ${f.farbe || '#6b7280'}; color: white; border-color: ${f.farbe || '#6b7280'};`
|
|
: `background-color: white; color: ${f.farbe || '#6b7280'}; border-color: ${f.farbe || '#6b7280'}40;`}>
|
|
{f.kuerzel}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reset -->
|
|
{#if hasActiveFilters()}
|
|
<button onclick={clearFilters}
|
|
class="text-xs text-gray-500 hover:text-gray-700 border border-gray-300 rounded-md px-2.5 py-1 hover:bg-gray-50 whitespace-nowrap shrink-0 transition-colors">
|
|
✕ Reset
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
|
|
{@render children()}
|
|
</main>
|
|
</div>
|