mirror of
https://github.com/ceratic/project_vollidioten_website.git
synced 2026-05-14 00:16:47 +02:00
feat: add LogoManagementModal component for logo upload and management
This commit is contained in:
Lars Behrends
@@ -1,6 +1,11 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Icons } from './IconSet';
|
||||
|
||||
interface GalleryImage {
|
||||
id: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface GalleryManagementModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
@@ -14,7 +19,7 @@ const GalleryManagementModal: React.FC<GalleryManagementModalProps> = ({
|
||||
projectId,
|
||||
onUpdate
|
||||
}) => {
|
||||
const [images, setImages] = useState<string[]>([]);
|
||||
const [images, setImages] = useState<GalleryImage[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [imageUrl, setImageUrl] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -73,10 +78,10 @@ const GalleryManagementModal: React.FC<GalleryManagementModalProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
const removeImage = async (index: number) => {
|
||||
const removeImage = async (imageId: string) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/gallery/${index}`, {
|
||||
const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/gallery/${imageId}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'include'
|
||||
});
|
||||
@@ -118,7 +123,9 @@ const GalleryManagementModal: React.FC<GalleryManagementModalProps> = ({
|
||||
{/* Add Image */}
|
||||
<div className="bg-surfaceHighlight/30 border border-border rounded-lg p-4 mb-6">
|
||||
<h4 className="font-semibold text-textMain mb-4">Bild hinzufügen</h4>
|
||||
<div className="flex gap-2">
|
||||
|
||||
{/* URL Input */}
|
||||
<div className="flex gap-2 mb-4">
|
||||
<input
|
||||
type="url"
|
||||
value={imageUrl}
|
||||
@@ -134,9 +141,68 @@ const GalleryManagementModal: React.FC<GalleryManagementModalProps> = ({
|
||||
Hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-textMuted mt-2">
|
||||
<p className="text-xs text-textMuted mb-4">
|
||||
Geben Sie eine direkte URL zu einem Bild ein (z.B. von Imgur, Discord, etc.)
|
||||
</p>
|
||||
|
||||
{/* File Upload */}
|
||||
<div className="border-t border-border pt-4">
|
||||
<div className="border-2 border-dashed border-border rounded-lg p-4 text-center hover:border-accentInfo/50 transition-colors">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
onChange={async (e) => {
|
||||
const files = e.target.files as FileList;
|
||||
if (!files || files.length === 0) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
// Upload each file
|
||||
const fileArray = Array.from(files) as File[];
|
||||
for (const file of fileArray) {
|
||||
const formData = new FormData();
|
||||
formData.append('gallery', file);
|
||||
|
||||
const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/gallery/upload`, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
setError(errorData.error || `Fehler beim Hochladen von ${file.name}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Reload gallery after all uploads
|
||||
await loadGallery();
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error uploading images:', err);
|
||||
setError('Netzwerkfehler beim Hochladen');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}}
|
||||
className="hidden"
|
||||
id="gallery-upload"
|
||||
/>
|
||||
<label htmlFor="gallery-upload" className="cursor-pointer">
|
||||
<div className="w-10 h-10 mx-auto mb-3 bg-surfaceHighlight rounded-full flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-accentInfo" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-sm text-textMain font-medium">Bilder auswählen</p>
|
||||
<p className="text-xs text-textMuted mt-1">Max. 10MB pro Bild, Mehrfachauswahl möglich</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gallery Grid */}
|
||||
@@ -156,11 +222,11 @@ const GalleryManagementModal: React.FC<GalleryManagementModalProps> = ({
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{images.map((imageUrl, index) => (
|
||||
<div key={index} className="relative group">
|
||||
{images.map((image, index) => (
|
||||
<div key={image.id} className="relative group">
|
||||
<div className="aspect-square rounded-lg overflow-hidden border border-border bg-surfaceHighlight/30">
|
||||
<img
|
||||
src={imageUrl}
|
||||
src={image.url}
|
||||
alt={`Galerie ${index + 1}`}
|
||||
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
|
||||
onError={(e) => {
|
||||
@@ -172,7 +238,7 @@ const GalleryManagementModal: React.FC<GalleryManagementModalProps> = ({
|
||||
|
||||
{/* Delete Button */}
|
||||
<button
|
||||
onClick={() => removeImage(index)}
|
||||
onClick={() => removeImage(image.id)}
|
||||
disabled={loading}
|
||||
className="absolute top-2 right-2 bg-red-500 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
title="Bild entfernen"
|
||||
|
||||
Reference in New Issue
Block a user