Login integriert
This commit is contained in:
Marc Wieland
53
src/admin/AdminDashboard.tsx
Normal file
53
src/admin/AdminDashboard.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { Card, CardContent, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { LogOut } from "lucide-react";
|
||||
|
||||
const AdminDashboard = () => {
|
||||
const { logout, username } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto py-12 px-4">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-frog-600">Willkommen, {username}!</h1>
|
||||
<Button
|
||||
onClick={handleLogout}
|
||||
className="bg-frog-500 hover:bg-frog-600 text-white flex items-center gap-2"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
Logout
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<Link to="/admin/news">
|
||||
<Card className="hover:shadow-lg transition-shadow cursor-pointer">
|
||||
<CardContent className="p-6 text-center">
|
||||
<CardTitle className="text-frog-600">News verwalten</CardTitle>
|
||||
<p className="text-gray-600 mt-2 text-sm">News erstellen, bearbeiten und löschen</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
|
||||
{/* Hier später weitere Admin-Bereiche */}
|
||||
<Link to="/admin/users">
|
||||
<Card className="hover:shadow-lg transition-shadow cursor-pointer">
|
||||
<CardContent className="p-6 text-center">
|
||||
<CardTitle className="text-frog-600">Benutzer verwalten</CardTitle>
|
||||
<p className="text-gray-600 mt-2 text-sm">Admins erstellen, bearbeiten und löschen</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminDashboard;
|
||||
208
src/admin/NewsManager.tsx
Normal file
208
src/admin/NewsManager.tsx
Normal file
@@ -0,0 +1,208 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
type NewsItem = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
image_url: string;
|
||||
team: string;
|
||||
created_at: string;
|
||||
};
|
||||
|
||||
const NewsManager = () => {
|
||||
const [news, setNews] = useState<NewsItem[]>([]);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [currentId, setCurrentId] = useState<number | null>(null);
|
||||
const [newTitle, setNewTitle] = useState("");
|
||||
const [newDescription, setNewDescription] = useState("");
|
||||
const [newImageUrl, setNewImageUrl] = useState("");
|
||||
const [newTeam, setNewTeam] = useState("");
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [deleteId, setDeleteId] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadNews();
|
||||
}, []);
|
||||
|
||||
const loadNews = async () => {
|
||||
try {
|
||||
const res = await fetch("http://192.168.50.65:3000/api/news");
|
||||
const data = await res.json();
|
||||
setNews(data);
|
||||
} catch (err) {
|
||||
console.error("Fehler beim Laden der News:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateOrUpdateNews = async () => {
|
||||
const method = editMode ? "PUT" : "POST";
|
||||
const url = editMode
|
||||
? `http://192.168.50.65:3000/api/news/${currentId}`
|
||||
: `http://192.168.50.65:3000/api/news`;
|
||||
|
||||
try {
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
title: newTitle,
|
||||
description: newDescription,
|
||||
image_url: newImageUrl,
|
||||
team: newTeam,
|
||||
}),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
await loadNews();
|
||||
setShowForm(false);
|
||||
setEditMode(false);
|
||||
resetForm();
|
||||
} else {
|
||||
console.error("Fehler beim Speichern der News");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Fehler beim Speichern der News:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (item: NewsItem) => {
|
||||
setNewTitle(item.title);
|
||||
setNewDescription(item.description);
|
||||
setNewImageUrl(item.image_url);
|
||||
setNewTeam(item.team);
|
||||
setCurrentId(item.id);
|
||||
setEditMode(true);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const confirmDelete = (id: number) => {
|
||||
setDeleteId(id);
|
||||
setShowDeleteModal(true);
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteId) return;
|
||||
|
||||
try {
|
||||
const res = await fetch(`http://192.168.50.65:3000/api/news/${deleteId}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
await loadNews();
|
||||
} else {
|
||||
console.error("Fehler beim Löschen der News");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Fehler beim Löschen der News:", err);
|
||||
} finally {
|
||||
setShowDeleteModal(false);
|
||||
setDeleteId(null);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const resetForm = () => {
|
||||
setNewTitle("");
|
||||
setNewDescription("");
|
||||
setNewImageUrl("");
|
||||
setNewTeam("");
|
||||
setCurrentId(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto py-12 px-4">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-frog-600">News verwalten</h1>
|
||||
<Button
|
||||
className="bg-frog-500 hover:bg-frog-600 text-white"
|
||||
onClick={() => {
|
||||
resetForm();
|
||||
setEditMode(false);
|
||||
setShowForm(!showForm);
|
||||
}}
|
||||
>
|
||||
{showForm ? "Abbrechen" : "+ Neue News"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<div className="mb-8 border p-4 rounded-md bg-gray-50">
|
||||
<h2 className="text-xl font-bold text-frog-600 mb-4">
|
||||
{editMode ? "News bearbeiten" : "Neue News anlegen"}
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<Input placeholder="Titel" value={newTitle} onChange={(e) => setNewTitle(e.target.value)} />
|
||||
<Textarea placeholder="Beschreibung" value={newDescription} onChange={(e) => setNewDescription(e.target.value)} />
|
||||
<Input placeholder="Bild-URL" value={newImageUrl} onChange={(e) => setNewImageUrl(e.target.value)} />
|
||||
<Input placeholder="Team" value={newTeam} onChange={(e) => setNewTeam(e.target.value)} />
|
||||
<Button onClick={handleCreateOrUpdateNews} className="bg-frog-500 hover:bg-frog-600 text-white w-full">
|
||||
{editMode ? "Änderungen speichern" : "Speichern"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showDeleteModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full">
|
||||
<h2 className="text-xl font-bold text-frog-600 mb-4 text-center">News wirklich löschen?</h2>
|
||||
<div className="flex justify-center gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-gray-300 text-gray-600 hover:bg-gray-100"
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
>
|
||||
Ja, löschen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{news.map((item) => (
|
||||
<Card key={item.id} className="overflow-hidden">
|
||||
<CardHeader>
|
||||
<CardTitle>{item.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600 mb-2">{item.description}</p>
|
||||
<p className="text-xs text-gray-400">Erstellt am {new Date(item.created_at).toLocaleDateString("de-DE")}</p>
|
||||
<div className="flex gap-2 mt-4">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="border-frog-500 text-frog-600 hover:bg-frog-50"
|
||||
onClick={() => handleEdit(item)}
|
||||
>
|
||||
Bearbeiten
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={() => confirmDelete(item.id)}
|
||||
>
|
||||
Löschen
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsManager;
|
||||
Reference in New Issue
Block a user