upload deleted

src/routes/admin/dienststellen/+page.svelte

@@ -10,25 +10,6 @@
       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;
@@ -71,46 +52,99 @@
     onMount(ladeDienststellen);
   
 </script>
-  
+  
-  <div class="p-6 max-w-xl mx-auto space-y-6">
+<div class="p-6 max-w-6xl mx-auto space-y-8">
-    <h1 class="text-2xl font-bold">Dienststellen verwalten</h1>
+  <h1 class="text-2xl font-bold text-center">Dienststellen verwalten</h1>
-  
+
-    <div class="flex gap-2">
+  <!-- Eingabefelder -->
-      <input bind:value={neuerName} placeholder="Dienststelle" class="input w-full" />
+  <div class="flex flex-wrap gap-4 items-center">
-      <input type="number" bind:value={neuePlaetze} placeholder="Anzahl Plätze" class="input w-1/4" />
+    <input
-      <button on:click={() => { neuerName = ''; neuePlaetze = 0; bearbeiteId = null }} class="text-sm text-gray-500 hover:underline">
+      bind:value={neuerName}
-        Zurücksetzen
+      placeholder="Dienststelle"
-      </button>
+      class="input w-full sm:w-[55%] border rounded px-3 py-2"
-      <button on:click={speichern} class="bg-blue-600 text-white px-4 py-2 rounded">
+    />
-        {bearbeiteId !== null ? 'Ändern' : 'Hinzufügen'}
+    <input
-      </button>
+      type="number"
-    </div>
+      bind:value={neuePlaetze}
-  
+      placeholder="Anzahl Plätze"
-    {#if fehlermeldung}
+      class="input w-full sm:w-[20%] border rounded px-3 py-2"
-      <p class="text-red-600">{fehlermeldung}</p>
+      min="0"
-    {/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}
     />
-    <button
+    <button
-        on:click={async () => {
+      on:click={() => {
-        await fetch('/api/admin/logout', { method: 'POST' });
+        neuerName = '';
-        location.reload();
+        neuePlaetze = 0;
-        }}
+        bearbeiteId = null;
-        class="bg-red-600  text-white px-4 py-3 rounded text-center hiver:bg-red-700">
+      }}
+      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 hover:bg-blue-700 text-sm"
+    >
       {bearbeiteId !== null ? 'Ändern' : 'Hinzufügen'}
     </button>
+  </div>
+
+  <!-- Fehlermeldung -->
+  {#if fehlermeldung}
+    <p class="text-red-600 text-sm">{fehlermeldung}</p>
+  {/if}
+
+  <!-- Tabellenähnliche Anzeige -->
+  <div class="overflow-x-auto">
+    <div class="min-w-[600px] divide-y border rounded">
+      <!-- Kopfzeile -->
+      <div class="grid grid-cols-3 gap-x-8 font-semibold text-sm bg-gray-100 p-2">
+        <div>Dienststelle</div>
+        <div class="text-right">Plätze</div>
+        <div class="text-right">Aktionen</div>
+      </div>
+
+      <!-- Einträge -->
+      {#each dienststellen as d}
+        <div class="grid grid-cols-3 gap-x-8 items-center p-2 text-sm">
+          <div>{d.name}</div>
+          <div class="text-right">{d.plaetze}</div>
+          <div class="flex justify-end gap-3">
+            <button
+              on:click={() => {
+                neuerName = d.name;
+                neuePlaetze = d.plaetze;
+                bearbeiteId = d.id;
+              }}
+              class="text-blue-600 hover:underline"
+            >
+              Bearbeiten
+            </button>
+            <button
+              on:click={() => loeschen(d.id)}
+              class="text-red-600 hover:underline"
+            >
+              Löschen
+            </button>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+
+  <!-- Logout-Button -->
+  <div class="pt-4 text-center">
+    <button
+      on:click={async () => {
+        await fetch('/api/admin/logout', { method: 'POST' });
+        location.reload();
+      }}
+      class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded"
+    >
+      Logout
+    </button>
+  </div>
 </div>
+  
 
-  <style>
+  <style>
-    .input {
+    /* You can add custom styles here if needed, or rely on Tailwind classes in your markup */
-      @apply border rounded px-3 py-2;
-    }