Backend schönner gemacht
This commit is contained in:
116
src/routes/admin/dienststellen/+page.svelte
Normal file
116
src/routes/admin/dienststellen/+page.svelte
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
let dienststellen: { id: number; name: string; plaetze: number }[] = [];
|
||||||
|
let neuerName = '';
|
||||||
|
let neuePlaetze = 0;
|
||||||
|
let fehlermeldung = '';
|
||||||
|
let bearbeiteId: number | null = null;
|
||||||
|
|
||||||
|
async function ladeDienststellen() {
|
||||||
|
const res = await fetch('/api/admin/dienststellen');
|
||||||
|
dienststellen = await res.json();
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
async function hinzufuegen() {
|
||||||
|
fehlermeldung = '';
|
||||||
|
if (!neuerName.trim()) return;
|
||||||
|
const res = await fetch('/api/admin/dienststellen', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ name: neuerName, plaetze: neuePlaetze }),
|
||||||
|
headers: { 'Content-Type': 'application/json' }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
neuerName = '';
|
||||||
|
await ladeDienststellen();
|
||||||
|
} else {
|
||||||
|
const err = await res.json();
|
||||||
|
fehlermeldung = err.error || 'Fehler beim Hinzufügen';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
function bearbeiten(d: { id: number; name: string; plaetze: number }) {
|
||||||
|
neuerName = d.name;
|
||||||
|
neuePlaetze = d.plaetze;
|
||||||
|
bearbeiteId = d.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function speichern() {
|
||||||
|
fehlermeldung = '';
|
||||||
|
if (!neuerName.trim()) return;
|
||||||
|
|
||||||
|
const method = bearbeiteId ? 'PATCH' : 'POST';
|
||||||
|
const body = bearbeiteId
|
||||||
|
? { id: bearbeiteId, name: neuerName, plaetze: neuePlaetze }
|
||||||
|
: { name: neuerName, plaetze: neuePlaetze };
|
||||||
|
|
||||||
|
const res = await fetch('/api/admin/dienststellen', {
|
||||||
|
method,
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
headers: { 'Content-Type': 'application/json' }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
neuerName = '';
|
||||||
|
neuePlaetze = 0;
|
||||||
|
bearbeiteId = null;
|
||||||
|
await ladeDienststellen();
|
||||||
|
} else {
|
||||||
|
const err = await res.json();
|
||||||
|
fehlermeldung = err.error || 'Fehler beim Speichern';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loeschen(id: number) {
|
||||||
|
if (!confirm('Diese Dienststelle wirklich löschen?')) return;
|
||||||
|
await fetch(`/api/admin/dienststellen?id=${id}`, { method: 'DELETE' });
|
||||||
|
await ladeDienststellen();
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(ladeDienststellen);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="p-6 max-w-xl mx-auto space-y-6">
|
||||||
|
<h1 class="text-2xl font-bold">Dienststellen verwalten</h1>
|
||||||
|
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<input bind:value={neuerName} placeholder="Dienststelle" class="input w-full" />
|
||||||
|
<input type="number" bind:value={neuePlaetze} placeholder="Anzahl Plätze" class="input w-1/4" />
|
||||||
|
<button on:click={() => { neuerName = ''; neuePlaetze = 0; bearbeiteId = null }} class="text-sm text-gray-500 hover:underline">
|
||||||
|
Zurücksetzen
|
||||||
|
</button>
|
||||||
|
<button on:click={speichern} class="bg-blue-600 text-white px-4 py-2 rounded">
|
||||||
|
{bearbeiteId !== null ? 'Ändern' : 'Hinzufügen'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if fehlermeldung}
|
||||||
|
<p class="text-red-600">{fehlermeldung}</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<ul class="divide-y border rounded">
|
||||||
|
{#each dienststellen as d}
|
||||||
|
<li class="flex justify-between items-center p-2">
|
||||||
|
<span>{d.name}</span>
|
||||||
|
<span class="text-sm text-gray-500">{d.plaetze} Plätze</span>
|
||||||
|
<button on:click={() => (neuerName = d.name, neuePlaetze = d.plaetze, bearbeiteId = d.id)} class="text-sm text-blue-600 hover:underline">Bearbeiten</button>
|
||||||
|
<button on:click={() => loeschen(d.id)} class="text-sm text-red-600 hover:underline">Löschen</button>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
<button
|
||||||
|
on:click={async () => {
|
||||||
|
await fetch('/api/admin/logout', { method: 'POST' });
|
||||||
|
location.reload();
|
||||||
|
}}
|
||||||
|
class="bg-red-600 text-white px-4 py-3 rounded text-center hiver:bg-red-700">
|
||||||
|
Logout
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.input {
|
||||||
|
@apply border rounded px-3 py-2;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user