259 lines
10 KiB
Svelte
259 lines
10 KiB
Svelte
<!-- src/routes/admin/plaetze/+page.svelte -->
|
|
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import AdminHeader from '$lib/components/AdminHeader.svelte';
|
|
|
|
type ZeitraumPlaetzeData = {
|
|
zeitraumId: number;
|
|
zeitraumBezeichnung: string;
|
|
dienststellen: {
|
|
dienststelleId: number;
|
|
dienststelleName: string;
|
|
plaetze: number;
|
|
id: number; // ZeitraumPlaetze-ID
|
|
}[];
|
|
};
|
|
|
|
let data: ZeitraumPlaetzeData[] = [];
|
|
let isLoading = true;
|
|
let fehlermeldung = '';
|
|
let erfolgsmeldung = '';
|
|
let editingCell: { zeitraumId: number; dienststelleId: number } | null = null;
|
|
let editValue = '';
|
|
|
|
async function ladeDaten() {
|
|
try {
|
|
isLoading = true;
|
|
fehlermeldung = '';
|
|
|
|
const res = await fetch('/api/admin/plaetze');
|
|
|
|
if (!res.ok) {
|
|
throw new Error(`Fehler beim Laden: ${res.status}`);
|
|
}
|
|
|
|
data = await res.json();
|
|
} catch (err) {
|
|
fehlermeldung = err instanceof Error ? err.message : 'Unbekannter Fehler';
|
|
console.error('Fehler beim Laden der Plätze:', err);
|
|
} finally {
|
|
isLoading = false;
|
|
}
|
|
}
|
|
|
|
function startEdit(zeitraumId: number, dienststelleId: number, currentValue: number) {
|
|
editingCell = { zeitraumId, dienststelleId };
|
|
editValue = currentValue.toString();
|
|
}
|
|
|
|
async function speicherePlaetze(zeitraumId: number, dienststelleId: number) {
|
|
const plaetze = parseInt(editValue);
|
|
|
|
if (isNaN(plaetze) || plaetze < 0) {
|
|
fehlermeldung = 'Bitte geben Sie eine gültige Zahl ein (≥ 0)';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
fehlermeldung = '';
|
|
erfolgsmeldung = '';
|
|
|
|
const res = await fetch('/api/admin/plaetze', {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
zeitraumId,
|
|
dienststelleId,
|
|
plaetze
|
|
})
|
|
});
|
|
|
|
if (!res.ok) {
|
|
const err = await res.json();
|
|
fehlermeldung = err.error || 'Fehler beim Speichern';
|
|
return;
|
|
}
|
|
|
|
editingCell = null;
|
|
await ladeDaten();
|
|
erfolgsmeldung = 'Plätze erfolgreich aktualisiert';
|
|
setTimeout(() => erfolgsmeldung = '', 3000);
|
|
} catch (err) {
|
|
fehlermeldung = err instanceof Error ? err.message : 'Fehler beim Speichern';
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
function abbrechen() {
|
|
editingCell = null;
|
|
editValue = '';
|
|
}
|
|
|
|
function handleKeydown(e: KeyboardEvent, zeitraumId: number, dienststelleId: number) {
|
|
if (e.key === 'Enter') {
|
|
speicherePlaetze(zeitraumId, dienststelleId);
|
|
} else if (e.key === 'Escape') {
|
|
abbrechen();
|
|
}
|
|
}
|
|
|
|
onMount(ladeDaten);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Plätze verwalten - Admin</title>
|
|
</svelte:head>
|
|
|
|
<div class="min-h-screen bg-gray-50">
|
|
<AdminHeader
|
|
title="Praktikumsplätze verwalten"
|
|
showBackButton={true}
|
|
/>
|
|
|
|
<main class="max-w-7xl mx-auto px-4 py-6">
|
|
{#if fehlermeldung}
|
|
<div class="bg-red-50 border border-red-200 rounded-md p-4 mb-6">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h3 class="text-sm font-medium text-red-800">Fehler</h3>
|
|
<p class="mt-1 text-sm text-red-700">{fehlermeldung}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if erfolgsmeldung}
|
|
<div class="bg-green-50 border border-green-200 rounded-md p-4 mb-6">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm text-green-700">{erfolgsmeldung}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="bg-blue-50 border border-blue-200 rounded-md p-4 mb-6">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm text-blue-700">
|
|
Klicken Sie auf eine Zahl, um die Anzahl der Praktikumsplätze zu bearbeiten.
|
|
Drücken Sie Enter zum Speichern oder Esc zum Abbrechen.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{#if isLoading}
|
|
<div class="flex justify-center items-center h-64">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
<span class="ml-3 text-gray-600">Lade Daten...</span>
|
|
</div>
|
|
{:else if data.length === 0}
|
|
<div class="text-center py-12">
|
|
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
</svg>
|
|
<h3 class="mt-2 text-sm font-medium text-gray-900">Keine Zeiträume vorhanden</h3>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Erstellen Sie zunächst
|
|
<a href="/admin/zeitraeume" class="text-blue-600 hover:underline">Praktikumszeiträume</a>
|
|
und
|
|
<a href="/admin/dienststellen" class="text-blue-600 hover:underline">Dienststellen</a>.
|
|
</p>
|
|
</div>
|
|
{:else}
|
|
{#each data as zeitraum}
|
|
<div class="bg-white shadow-sm rounded-lg overflow-hidden mb-6">
|
|
<div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
|
|
<h3 class="text-lg font-medium text-gray-900">{zeitraum.zeitraumBezeichnung}</h3>
|
|
</div>
|
|
|
|
{#if zeitraum.dienststellen.length === 0}
|
|
<div class="px-6 py-8 text-center text-gray-500 text-sm">
|
|
Keine Dienststellen vorhanden.
|
|
<a href="/admin/dienststellen" class="text-blue-600 hover:underline">Dienststellen erstellen</a>
|
|
</div>
|
|
{:else}
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Dienststelle
|
|
</th>
|
|
<th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Anzahl Plätze
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
{#each zeitraum.dienststellen as dienststelle}
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{dienststelle.dienststelleName}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-center">
|
|
{#if editingCell?.zeitraumId === zeitraum.zeitraumId && editingCell?.dienststelleId === dienststelle.dienststelleId}
|
|
<div class="flex items-center justify-center gap-2">
|
|
<input
|
|
type="number"
|
|
bind:value={editValue}
|
|
min="0"
|
|
on:keydown={(e) => handleKeydown(e, zeitraum.zeitraumId, dienststelle.dienststelleId)}
|
|
class="w-20 border border-blue-500 rounded px-2 py-1 text-sm text-center focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
autofocus
|
|
/>
|
|
<button
|
|
on:click={() => speicherePlaetze(zeitraum.zeitraumId, dienststelle.dienststelleId)}
|
|
class="text-green-600 hover:text-green-800"
|
|
title="Speichern"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</button>
|
|
<button
|
|
on:click={abbrechen}
|
|
class="text-red-600 hover:text-red-800"
|
|
title="Abbrechen"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{:else}
|
|
<button
|
|
on:click={() => startEdit(zeitraum.zeitraumId, dienststelle.dienststelleId, dienststelle.plaetze)}
|
|
class="text-blue-600 hover:text-blue-800 hover:underline font-medium text-sm"
|
|
>
|
|
{dienststelle.plaetze}
|
|
</button>
|
|
{/if}
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
</main>
|
|
</div> |