attracion fertig

src/App.jsx

@@ -10,6 +10,8 @@ import PostsPage from './pages/PostsPage';
 import CreateNewsPage from './pages/CreateNewsPage';
 import OrganizationPage from './pages/OrganizationPage';
 import PushPage from './pages/PushPage';
+import EditAttractionPage from './pages/EditAttractionPage';
+import AttractionPage from './pages/AttractionPage';
 import HomePage from './pages/HomePage';
 import EditOrganizationPage from "./pages/EditOrganizationPage.jsx";
 
@@ -63,6 +65,14 @@ export default function App() {
                   </PrivateRoute>
                 }
               />
+                <Route
+                    path="attractions"
+                    element={
+                        <PrivateRoute allowedRoles={['ADMIN', 'REPORTER']}>
+                            <AttractionPage />
+                        </PrivateRoute>
+                    }
+                />
               <Route
                 path="posts"
                 element={
@@ -71,6 +81,14 @@ export default function App() {
                   </PrivateRoute>
                 }
               />
+                <Route
+                    path="attractions/:id/edit"
+                    element={
+                        <PrivateRoute allowedRoles={['ADMIN', 'REPORTER']}>
+                            <EditAttractionPage/>
+                        </PrivateRoute>
+                    }
+                />
               <Route
                   path="organizations/:id/edit"
                   element={

src/api/axiosInstance.js

@@ -7,8 +7,8 @@ const axiosInstance = axios.create({
 */
 
 const axiosInstance = axios.create({
-    baseURL: 'https://api.testsite.deinedorfapp.de/api',
+    //baseURL: 'https://api.testsite.deinedorfapp.de/api',
-    //baseURL: 'http://localhost:5173/api',
+    baseURL: 'http://localhost:5173/api',
     headers: { 'Content-Type': 'application/json' },
 });
 

src/components/Layout.jsx

@@ -9,6 +9,7 @@ import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
 import CorporateFareIcon from '@mui/icons-material/CorporateFare';
 import LogoutIcon from '@mui/icons-material/Logout';
 import DashboardIcon from '@mui/icons-material/Dashboard';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
 import HomeIcon from '@mui/icons-material/Home';
 import { useAuth } from '../context/AuthContext';
 
@@ -17,9 +18,10 @@ const DRAWER_WIDTH = 240;
 const navItems = [
   { label: 'Home',         path: '/',             icon: <HomeIcon />,                  roles: null },
   { label: 'Users',        path: '/users',         icon: <PeopleIcon />,                roles: ['ADMIN'] },
-  { label: 'Posts',        path: '/posts',         icon: <ArticleIcon />,               roles: ['ADMIN', 'REPORTER'] },
+  { label: 'Neuigkeiten',        path: '/posts',         icon: <ArticleIcon />,               roles: ['ADMIN', 'REPORTER'] },
   { label: 'Push',         path: '/push',          icon: <NotificationsActiveIcon />,   roles: ['ADMIN'] },
   { label: 'Organization', path: '/organizations', icon: <CorporateFareIcon />,         roles: ['ADMIN', 'SITE_OWNER'] },
+  { label: 'Sehenswürdigkeiten', path: '/attractions', icon: <LocationOnIcon />,         roles: ['ADMIN', 'REPORTER'] },
 ];
 
 function getActiveLabel(pathname) {

src/pages/AttractionPage.jsx

@@ -0,0 +1,190 @@
+import { useEffect, useState } from 'react';
+import {
+    Box, Typography, Alert, IconButton, Tooltip,
+    Dialog, DialogTitle, DialogContent, DialogActions,
+    Button, Stack, TextField, CircularProgress
+} from '@mui/material';
+import { DataGrid } from '@mui/x-data-grid';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import AddIcon from '@mui/icons-material/Add';
+import { Chip } from '@mui/material';
+import axiosInstance from '../api/axiosInstance';
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+import {useNavigate} from "react-router-dom";
+
+export default function AttractionPage() {
+    const [rows, setRows] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+
+    const [open, setOpen] = useState(false);
+    const [creating, setCreating] = useState(false);
+    const [creatingError, setCreatingError] = useState('');
+    const navigate = useNavigate();
+
+    const [createForm, setCreateForm] = useState({
+        name: ''
+    });
+
+    const loadAttractions = async () => {
+        try {
+            const { data } = await axiosInstance.get('/attraction');
+            setRows(data);
+        } catch (err) {
+            setError(err.response?.data?.message ?? 'Fehler beim laden der Attractions');
+
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        loadAttractions();
+    }, []);
+
+    const handleFormChange = (e) => {
+        const { name, value } = e.target;
+        setCreateForm((prev) => ({ ...prev, [name]: value }));
+    };
+
+    const handleCreate = async () => {
+        setCreating(true);
+        setCreatingError('');
+
+        try {
+            const jsonPayload = {
+                name: createForm.name};
+
+            await axiosInstance.post('/attraction', jsonPayload);
+
+            await loadAttractions(); // Liste neu laden
+            handleCreateClose();
+
+        } catch (err) {
+            setCreatingError(err.response?.data?.message ?? 'Erstellen fehlgeschlagen');
+        } finally {
+            setCreating(false);
+        }
+    };
+
+    const handleCreateClose = () => {
+        setOpen(false);
+        setCreateForm({ name: '', email: '' });
+        setCreatingError('');
+    };
+
+    const handleDelete = async (id) => {
+        if (!window.confirm('Sehenswürdigkeit wirklich löschen?')) return;
+
+        try {
+            await axiosInstance.delete(`/attraction/${id}`);
+            setRows((prev) => prev.filter((r) => r.id !== id));
+        } catch(err){
+            alert(err.response?.data?.message ?? 'Löschen fehlgeschlagen');
+        }
+    };
+
+    const handleEdit = (id) => {
+        navigate(`/attractions/${id}/edit`);
+    }
+
+    const columns = [
+        { field: 'id', headerName: 'ID', width: 70 },
+        { field: 'title', headerName: 'Name', flex: 1.5 },
+        {
+            field: 'active',
+            headerName: 'Status',
+            width: 150,
+            renderCell: ({ value }) => (
+                <Chip
+                    label={value ? 'Aktiv' : 'Inaktiv'}
+                    color={value ? 'success' : 'default'}
+                    size="small"
+                    variant={value ? 'filled' : 'outlined'}
+                />
+            ),
+        },
+        {
+            field: 'actions',
+            headerName: '',
+            width: 120,
+            sortable: false,
+            renderCell: ({ row }) => (
+                <Tooltip title="">
+                    <IconButton title="löschen" size="small" color="error" onClick={() => handleDelete(row.id)}>
+                        <DeleteOutlineIcon fontSize="small" />
+                    </IconButton>
+                    <IconButton title="bearbeiten" size="small" color="grey" onClick={() => handleEdit(row.id)}>
+                        <EditOutlinedIcon fontSize="small" />
+                    </IconButton>
+                </Tooltip>
+            ),
+        },
+    ];
+
+    return (
+        <Box>
+            {/* Header */}
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
+                <Typography variant="h5" fontWeight={600}>Sehenswürdigkeiten</Typography>
+                <Button
+                    variant="contained"
+                    startIcon={<AddIcon />}
+                    onClick={() => setOpen(true)}
+                >
+                    Sehenswürdigkeit erstellen
+                </Button>
+            </Box>
+
+            {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+
+            {/* Tabelle */}
+            <Box sx={{ bgcolor: 'white', borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
+                <DataGrid
+                    rows={rows}
+                    columns={columns}
+                    loading={loading}
+                    autoHeight
+                    pageSizeOptions={[25, 50, 100]}
+                    initialState={{ pagination: { paginationModel: { pageSize: 25 } } }}
+                    disableRowSelectionOnClick
+                    sx={{ border: 'none' }}
+                />
+            </Box>
+
+            {/* Create Dialog */}
+            <Dialog open={open} onClose={handleCreateClose} maxWidth="sm" fullWidth>
+                <DialogTitle sx={{ fontWeight: 600}}>Sehenswürdigkeit erstellen</DialogTitle>
+
+                <DialogContent>
+                    <Stack spacing={2.5} sx={{ mt: 1 }}>
+                        {creatingError && <Alert severity="error">{creatingError}</Alert>}
+
+                        <TextField
+                            label="Name"
+                            name="name"
+                            value={createForm.name}
+                            onChange={handleFormChange}
+                            fullWidth
+                        />
+                    </Stack>
+                </DialogContent>
+
+                <DialogActions sx={{ px: 3, pb: 2.5 }}>
+                    <Button onClick={handleCreateClose} disabled={creating}>
+                        Abbrechen
+                    </Button>
+
+                    <Button
+                        variant="contained"
+                        onClick={handleCreate}
+                        disabled={creating}
+                        startIcon={creating ? <CircularProgress size={16} color="inherit" /> : null}
+                    >
+                        Erstellen
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </Box>
+    );
+}

src/pages/EditAttractionPage.jsx

@@ -0,0 +1,354 @@
+import { useNavigate, useParams } from "react-router-dom";
+import { useState, useEffect } from "react";
+import {
+    Alert,
+    Box, Button,
+    Card,
+    CardContent,
+    Checkbox, Chip, CircularProgress, Divider,
+    FormControlLabel,
+    IconButton,
+    Stack,
+    TextField,
+    Typography
+} from "@mui/material";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import StarIcon from "@mui/icons-material/Star";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import AddPhotoAlternateOutlinedIcon from "@mui/icons-material/AddPhotoAlternateOutlined";
+import axiosInstance from "../api/axiosInstance.js";
+
+const EMPTY_FORM = {
+    description: '',
+    address: '',
+    active: false,
+};
+
+export default function EditAttractionPage() {
+    const navigate = useNavigate();
+    const { id } = useParams();
+
+    const [form, setForm] = useState(EMPTY_FORM);
+    const [title, setTitle] = useState('');
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState('');
+
+    // Titelbild
+    const [titleImageUrl, setTitleImageUrl] = useState(null);
+    const [titleImageFile, setTitleImageFile] = useState(null);
+    const [titleImagePreview, setTitleImagePreview] = useState(null);
+
+    // Weitere Bilder
+    const [otherImageUrls, setOtherImageUrls] = useState([]);
+    const [otherFiles, setOtherFiles] = useState([]);
+    const [otherPreviews, setOtherPreviews] = useState([]);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const response = await axiosInstance.get('/attraction/' + id);
+                const data = response.data;
+
+                setTitle(data.title || '');
+                setForm({
+                    description: data.description || '',
+                    address: data.address || '',
+                    active: data.active || false,
+                });
+
+                const imgs = data.pictures || [];
+                setTitleImageUrl(imgs[0] || null);
+                setOtherImageUrls(imgs.slice(1));
+            } catch (err) {
+                setError(err.response?.data?.message ?? 'Fehler beim Laden der Sehenswürdigkeit');
+            }
+        };
+        fetchData();
+    }, [id]);
+
+    const handleChange = (e) => {
+        const { name, value, type, checked } = e.target;
+        setForm((prev) => ({
+            ...prev,
+            [name]: type === 'checkbox' ? checked : value,
+        }));
+    };
+
+    // Titelbild-Handler
+    const handleTitleImageChange = (e) => {
+        const f = e.target.files[0];
+        if (!f) return;
+        if (titleImagePreview) URL.revokeObjectURL(titleImagePreview);
+        setTitleImageFile(f);
+        setTitleImagePreview(URL.createObjectURL(f));
+        e.target.value = '';
+    };
+
+    const handleRemoveTitleImage = () => {
+        if (titleImagePreview) URL.revokeObjectURL(titleImagePreview);
+        setTitleImageUrl(null);
+        setTitleImageFile(null);
+        setTitleImagePreview(null);
+    };
+
+    // Weitere Bilder-Handler
+    const handleOtherFilesChange = (e) => {
+        const selected = Array.from(e.target.files);
+        setOtherFiles((prev) => [...prev, ...selected]);
+        const newPreviews = selected.map((f) => URL.createObjectURL(f));
+        setOtherPreviews((prev) => [...prev, ...newPreviews]);
+        e.target.value = '';
+    };
+
+    const handleRemoveOtherFile = (index) => {
+        URL.revokeObjectURL(otherPreviews[index]);
+        setOtherFiles((prev) => prev.filter((_, i) => i !== index));
+        setOtherPreviews((prev) => prev.filter((_, i) => i !== index));
+    };
+
+    const handleRemoveOtherUrl = (index) => {
+        setOtherImageUrls((prev) => prev.filter((_, i) => i !== index));
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setSaving(true);
+        setError('');
+
+        try {
+            const formData = new FormData();
+
+            formData.append(
+                'data',
+                new Blob([JSON.stringify({
+                    ...form,
+                    existingTitleImage: titleImageUrl || null,
+                    existingOtherImages: otherImageUrls,
+                })], { type: 'application/json' })
+            );
+
+            if (titleImageFile) formData.append('images', titleImageFile);
+            otherFiles.forEach((f) => formData.append('images', f));
+
+            await axiosInstance.put(`/attraction/${id}`, formData, {
+                headers: { 'Content-Type': undefined },
+            });
+            navigate('/attractions');
+        } catch (err) {
+            setError(err.response?.data?.message ?? 'Fehler beim Speichern');
+            setSaving(false);
+        }
+    };
+
+    const hasTitleImage = titleImageUrl || titleImageFile;
+
+    return (
+        <Box>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
+                <IconButton onClick={() => navigate('/attractions')} size="small">
+                    <ArrowBackIcon />
+                </IconButton>
+                <Typography variant="h5" fontWeight={600}>Sehenswürdigkeit bearbeiten</Typography>
+            </Box>
+
+            <Card sx={{ maxWidth: 680 }}>
+                <CardContent sx={{ p: 3 }}>
+                    <Box component="form" onSubmit={handleSubmit}>
+                        <Stack spacing={3}>
+                            {error && <Alert severity="error">{error}</Alert>}
+
+                            <TextField
+                                label="Titel"
+                                value={title}
+                                fullWidth
+                                InputProps={{ readOnly: true }}
+                                helperText="Der Titel kann nicht geändert werden."
+                            />
+
+                            <TextField
+                                label="Beschreibung"
+                                name="description"
+                                value={form.description}
+                                onChange={handleChange}
+                                required
+                                fullWidth
+                                autoFocus
+                                multiline
+                                rows={6}
+                            />
+
+                            <TextField
+                                label="Adresse"
+                                name="address"
+                                value={form.address}
+                                onChange={handleChange}
+                                required
+                                fullWidth
+                            />
+
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        name="active"
+                                        checked={form.active}
+                                        onChange={(e) =>
+                                            setForm((prev) => ({ ...prev, active: e.target.checked }))
+                                        }
+                                    />
+                                }
+                                label="Aktiv"
+                            />
+
+                            <Divider />
+
+                            {/* ── Titelbild ── */}
+                            <Box>
+                                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+                                    <Chip
+                                        icon={<StarIcon sx={{ fontSize: '13px !important' }} />}
+                                        label="Titelbild"
+                                        size="small"
+                                        color="primary"
+                                        sx={{ height: 22, fontSize: 11 }}
+                                    />
+                                    <Typography variant="caption" color="text.secondary">
+                                        Wird als Vorschaubild der Sehenswürdigkeit verwendet
+                                    </Typography>
+                                </Box>
+
+                                {hasTitleImage ? (
+                                    <Box
+                                        sx={{
+                                            display: 'flex', alignItems: 'center', gap: 1.5,
+                                            p: 1, borderRadius: 1,
+                                            border: '1px solid',
+                                            borderColor: 'primary.main',
+                                            bgcolor: 'primary.50',
+                                        }}
+                                    >
+                                        <Box
+                                            component="img"
+                                            src={titleImagePreview || titleImageUrl}
+                                            alt="Titelbild"
+                                            sx={{ width: 72, height: 72, objectFit: 'cover', borderRadius: 1, flexShrink: 0 }}
+                                        />
+                                        <Box sx={{ flex: 1, minWidth: 0 }}>
+                                            <Typography variant="body2" color="text.secondary" sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                                {titleImageFile ? titleImageFile.name : titleImageUrl}
+                                            </Typography>
+                                            <Button
+                                                component="label"
+                                                size="small"
+                                                sx={{ mt: 0.5, px: 0, minWidth: 0, fontSize: 12 }}
+                                            >
+                                                Bild ersetzen
+                                                <input type="file" hidden accept="image/*" onChange={handleTitleImageChange} />
+                                            </Button>
+                                        </Box>
+                                        <IconButton size="small" color="error" onClick={handleRemoveTitleImage}>
+                                            <DeleteOutlineIcon fontSize="small" />
+                                        </IconButton>
+                                    </Box>
+                                ) : (
+                                    <Button
+                                        component="label"
+                                        startIcon={<AddPhotoAlternateOutlinedIcon />}
+                                        size="small"
+                                        variant="outlined"
+                                        sx={{ alignSelf: 'flex-start' }}
+                                    >
+                                        Titelbild hochladen
+                                        <input type="file" hidden accept="image/*" onChange={handleTitleImageChange} />
+                                    </Button>
+                                )}
+                            </Box>
+
+                            <Divider />
+
+                            {/* ── Weitere Bilder ── */}
+                            <Box>
+                                <Typography variant="subtitle2" fontWeight={500} mb={1.5}>
+                                    Weitere Bilder
+                                </Typography>
+
+                                <Stack spacing={1.5}>
+                                    {otherImageUrls.map((src, i) => (
+                                        <Box
+                                            key={`existing-${i}`}
+                                            sx={{
+                                                display: 'flex', alignItems: 'center', gap: 1.5,
+                                                p: 1, borderRadius: 1,
+                                                border: '1px solid',
+                                                borderColor: 'divider',
+                                            }}
+                                        >
+                                            <Box
+                                                component="img"
+                                                src={src}
+                                                alt={`Bild ${i + 1}`}
+                                                sx={{ width: 64, height: 64, objectFit: 'cover', borderRadius: 1, flexShrink: 0 }}
+                                            />
+                                            <Typography variant="body2" color="text.secondary" sx={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                                {src}
+                                            </Typography>
+                                            <IconButton size="small" color="error" onClick={() => handleRemoveOtherUrl(i)}>
+                                                <DeleteOutlineIcon fontSize="small" />
+                                            </IconButton>
+                                        </Box>
+                                    ))}
+
+                                    {otherPreviews.map((src, i) => (
+                                        <Box
+                                            key={`new-${i}`}
+                                            sx={{
+                                                display: 'flex', alignItems: 'center', gap: 1.5,
+                                                p: 1, borderRadius: 1,
+                                                border: '1px solid',
+                                                borderColor: 'divider',
+                                            }}
+                                        >
+                                            <Box
+                                                component="img"
+                                                src={src}
+                                                alt={`Neues Bild ${i + 1}`}
+                                                sx={{ width: 64, height: 64, objectFit: 'cover', borderRadius: 1, flexShrink: 0 }}
+                                            />
+                                            <Typography variant="body2" color="text.secondary" sx={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                                {otherFiles[i]?.name}
+                                            </Typography>
+                                            <IconButton size="small" color="error" onClick={() => handleRemoveOtherFile(i)}>
+                                                <DeleteOutlineIcon fontSize="small" />
+                                            </IconButton>
+                                        </Box>
+                                    ))}
+
+                                    <Button
+                                        component="label"
+                                        startIcon={<AddPhotoAlternateOutlinedIcon />}
+                                        size="small"
+                                        sx={{ alignSelf: 'flex-start' }}
+                                    >
+                                        Bild hinzufügen
+                                        <input type="file" hidden accept="image/*" multiple onChange={handleOtherFilesChange} />
+                                    </Button>
+                                </Stack>
+                            </Box>
+
+                            <Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end', pt: 1 }}>
+                                <Button onClick={() => navigate('/attractions')} disabled={saving}>Abbrechen</Button>
+                                <Button
+                                    type="submit"
+                                    variant="contained"
+                                    disabled={saving}
+                                    startIcon={saving ? <CircularProgress size={16} color="inherit" /> : null}
+                                >
+                                    Speichern
+                                </Button>
+                            </Box>
+                        </Stack>
+                    </Box>
+                </CardContent>
+            </Card>
+        </Box>
+    );
+}