ADD: added initial page with login

2025-05-20 22:58:31 +02:00
parent 214ab55ad2
commit a330291456
25 changed files with 1064 additions and 35 deletions
--- a/frontend/src/pages/Players.tsx
+++ b/frontend/src/pages/Players.tsx
@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+
+interface Player {
+  id: number;
+  name: string;
+  position: string;
+}
+
+export default function PlayerManagement() {
+  const [players, setPlayers] = useState<Player[]>([]);
+  const [name, setName] = useState("");
+  const [position, setPosition] = useState("");
+  const [editingId, setEditingId] = useState<number | null>(null);
+
+  const handleAddOrUpdate = () => {
+    if (!name || !position) return;
+
+    if (editingId !== null) {
+      setPlayers(players.map(p =>
+        p.id === editingId ? { ...p, name, position } : p
+      ));
+      setEditingId(null);
+    } else {
+      const newPlayer: Player = {
+        id: Date.now(),
+        name,
+        position,
+      };
+      setPlayers([...players, newPlayer]);
+    }
+
+    setName("");
+    setPosition("");
+  };
+
+  const handleEdit = (player: Player) => {
+    setName(player.name);
+    setPosition(player.position);
+    setEditingId(player.id);
+  };
+
+  const handleDelete = (id: number) => {
+    setPlayers(players.filter(p => p.id !== id));
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto p-6 bg-white rounded-xl shadow-md mt-6">
+      <h1 className="text-2xl font-bold mb-4">🏐 Spielerverwaltung</h1>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
+        <input
+          type="text"
+          placeholder="Spielername"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="border p-2 rounded"
+        />
+        <input
+          type="text"
+          placeholder="Position (z. B. Zuspieler)"
+          value={position}
+          onChange={(e) => setPosition(e.target.value)}
+          className="border p-2 rounded"
+        />
+      </div>
+
+      <button
+        onClick={handleAddOrUpdate}
+        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+      >
+        {editingId !== null ? "Speichern" : "Hinzufügen"}
+      </button>
+
+      <table className="w-full mt-6 table-auto border-collapse">
+        <thead>
+          <tr className="bg-gray-100 text-left">
+            <th className="border px-4 py-2">Name</th>
+            <th className="border px-4 py-2">Position</th>
+            <th className="border px-4 py-2">Aktionen</th>
+          </tr>
+        </thead>
+        <tbody>
+          {players.map(player => (
+            <tr key={player.id}>
+              <td className="border px-4 py-2">{player.name}</td>
+              <td className="border px-4 py-2">{player.position}</td>
+              <td className="border px-4 py-2 space-x-2">
+                <button
+                  onClick={() => handleEdit(player)}
+                  className="bg-yellow-400 text-white px-2 py-1 rounded"
+                >
+                  Bearbeiten
+                </button>
+                <button
+                  onClick={() => handleDelete(player.id)}
+                  className="bg-red-500 text-white px-2 py-1 rounded"
+                >
+                  Löschen
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}