mirror of
https://github.com/ceratic/project_vollidioten_website.git
synced 2026-05-14 00:16:47 +02:00
286 lines
11 KiB
TypeScript
286 lines
11 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Icons } from './IconSet';
|
|
|
|
interface NpcLogoManagementModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
projectId: string;
|
|
currentLogoUrl: string;
|
|
onUpdate: () => void;
|
|
}
|
|
|
|
const NpcLogoManagementModal: React.FC<NpcLogoManagementModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
projectId,
|
|
currentLogoUrl,
|
|
onUpdate
|
|
}) => {
|
|
const [logoUrl, setLogoUrl] = useState(currentLogoUrl);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [previewLoading, setPreviewLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setLogoUrl(currentLogoUrl);
|
|
setError(null);
|
|
}
|
|
}, [isOpen, currentLogoUrl]);
|
|
|
|
const updateLogo = async () => {
|
|
if (!logoUrl.trim()) {
|
|
setError('Logo-URL ist erforderlich');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify({ logoUrl: logoUrl.trim() })
|
|
});
|
|
|
|
if (response.ok) {
|
|
onUpdate();
|
|
onClose();
|
|
} else {
|
|
const errorData = await response.json();
|
|
setError(errorData.error || 'Fehler beim Aktualisieren des Logos');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error updating logo:', err);
|
|
setError('Netzwerkfehler');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleImageLoad = () => {
|
|
setPreviewLoading(false);
|
|
};
|
|
|
|
const handleImageError = () => {
|
|
setPreviewLoading(false);
|
|
setError('Bild konnte nicht geladen werden');
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
|
|
<div className="bg-surface border border-border rounded-xl w-full max-w-2xl shadow-2xl flex flex-col max-h-[90vh]">
|
|
<div className="p-4 border-b border-border flex justify-between items-center bg-surfaceHighlight/20">
|
|
<h3 className="font-bold text-textMain flex items-center gap-2">
|
|
<Icons.Layers className="w-5 h-5" />
|
|
NPC-Logo bearbeiten
|
|
</h3>
|
|
<button onClick={onClose} className="text-textMuted hover:text-white transition-colors text-xl leading-none">×</button>
|
|
</div>
|
|
|
|
<div className="p-6 flex-1 overflow-y-auto">
|
|
{error && (
|
|
<div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 mb-6">
|
|
<p className="text-red-400">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Current Logo Preview */}
|
|
<div className="mb-6">
|
|
<h4 className="font-semibold text-textMain mb-3">Aktuelles Logo</h4>
|
|
<div className="relative w-32 h-32 mx-auto rounded-lg overflow-hidden border border-border bg-surfaceHighlight/30">
|
|
{currentLogoUrl ? (
|
|
<>
|
|
{previewLoading && (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-accentInfo"></div>
|
|
</div>
|
|
)}
|
|
<img
|
|
src={currentLogoUrl}
|
|
alt="Current logo"
|
|
className="w-full h-full object-cover"
|
|
onLoad={handleImageLoad}
|
|
onError={handleImageError}
|
|
/>
|
|
</>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center text-textMuted">
|
|
<Icons.Layers className="w-8 h-8" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Logo URL Input */}
|
|
<div className="mb-6">
|
|
<h4 className="font-semibold text-textMain mb-3">Neue Logo-URL</h4>
|
|
<input
|
|
type="url"
|
|
value={logoUrl}
|
|
onChange={(e) => setLogoUrl(e.target.value)}
|
|
placeholder="https://example.com/logo-image.png"
|
|
className="w-full bg-[#0b0b0d] border border-border rounded p-3 text-sm"
|
|
/>
|
|
<p className="text-xs text-textMuted mt-2">
|
|
Geben Sie eine direkte URL zu einem Bild ein. Empfohlene Größe: 200x200 Pixel oder größer, quadratisch.
|
|
</p>
|
|
</div>
|
|
|
|
{/* File Upload */}
|
|
<div className="mb-6">
|
|
<h4 className="font-semibold text-textMain mb-3">Oder Bild hochladen</h4>
|
|
<div className="border-2 border-dashed border-border rounded-lg p-6 text-center hover:border-accentInfo/50 transition-colors">
|
|
<input
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={async (e) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
const formData = new FormData();
|
|
formData.append('logo', file);
|
|
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const response = await fetch(`https://vollidioten.ceraticsoft.de/api/admin/npc-companies/${projectId}/logo/upload`, {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
body: formData
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setLogoUrl(data.logoUrl);
|
|
onUpdate();
|
|
onClose();
|
|
} else {
|
|
const errorData = await response.json();
|
|
setError(errorData.error || 'Fehler beim Hochladen');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error uploading logo:', err);
|
|
setError('Netzwerkfehler beim Hochladen');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}}
|
|
className="hidden"
|
|
id="npc-logo-upload"
|
|
/>
|
|
<label htmlFor="npc-logo-upload" className="cursor-pointer">
|
|
<div className="w-12 h-12 mx-auto mb-4 bg-surfaceHighlight rounded-full flex items-center justify-center">
|
|
<svg className="w-6 h-6 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">Bild auswählen</p>
|
|
<p className="text-xs text-textMuted mt-1">Max. 10MB, nur Bilddateien</p>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Preview */}
|
|
{logoUrl && logoUrl !== currentLogoUrl && (
|
|
<div className="mb-6">
|
|
<h4 className="font-semibold text-textMain mb-3">Vorschau</h4>
|
|
<div className="relative w-32 h-32 mx-auto rounded-lg overflow-hidden border border-border bg-surfaceHighlight/30">
|
|
<img
|
|
src={logoUrl}
|
|
alt="Logo preview"
|
|
className="w-full h-full object-cover"
|
|
onError={() => setError('Vorschau-Bild konnte nicht geladen werden')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Common Logo Suggestions */}
|
|
<div className="mb-6">
|
|
<h4 className="font-semibold text-textMain mb-3">Beispiele</h4>
|
|
<div className="grid grid-cols-2 gap-2 text-xs">
|
|
<button
|
|
onClick={() => setLogoUrl('https://images.unsplash.com/photo-1560472354-b33ff0c44a43?q=80&w=200&auto=format&fit=crop')}
|
|
className="p-2 bg-surfaceHighlight/50 rounded hover:bg-surfaceHighlight transition-colors text-left"
|
|
>
|
|
<div className="font-medium">Firmenlogo</div>
|
|
<div className="text-textMuted truncate">Unsplash</div>
|
|
</button>
|
|
<button
|
|
onClick={() => setLogoUrl('https://images.unsplash.com/photo-1559136555-9303baea8ebd?q=80&w=200&auto=format&fit=crop')}
|
|
className="p-2 bg-surfaceHighlight/50 rounded hover:bg-surfaceHighlight transition-colors text-left"
|
|
>
|
|
<div className="font-medium">Wappen</div>
|
|
<div className="text-textMuted truncate">Unsplash</div>
|
|
</button>
|
|
<button
|
|
onClick={() => setLogoUrl('https://images.unsplash.com/photo-1611224923853-80b023f02d71?q=80&w=200&auto=format&fit=crop')}
|
|
className="p-2 bg-surfaceHighlight/50 rounded hover:bg-surfaceHighlight transition-colors text-left"
|
|
>
|
|
<div className="font-medium">Schild</div>
|
|
<div className="text-textMuted truncate">Unsplash</div>
|
|
</button>
|
|
<button
|
|
onClick={() => setLogoUrl('https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?q=80&w=200&auto=format&fit=crop')}
|
|
className="p-2 bg-surfaceHighlight/50 rounded hover:bg-surfaceHighlight transition-colors text-left"
|
|
>
|
|
<div className="font-medium">Emblem</div>
|
|
<div className="text-textMuted truncate">Unsplash</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Info */}
|
|
<div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
|
|
<div className="flex items-start gap-3">
|
|
<Icons.Terminal className="w-5 h-5 text-blue-400 mt-0.5" />
|
|
<div>
|
|
<h4 className="text-sm font-medium text-blue-400 mb-1">Logo-Empfehlungen</h4>
|
|
<ul className="text-xs text-blue-300 space-y-1">
|
|
<li>• Verwenden Sie quadratische Bilder für beste Ergebnisse</li>
|
|
<li>• Stellen Sie sicher, dass das Logo auf dunklen Hintergründen gut sichtbar ist</li>
|
|
<li>• Vermeiden Sie zu komplexe Designs - Einfachheit ist besser</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 border-t border-border flex justify-end gap-3">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-sm font-medium text-textMuted hover:text-white transition-colors"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={updateLogo}
|
|
disabled={loading || !logoUrl.trim() || logoUrl === currentLogoUrl}
|
|
className="px-6 py-2 text-sm font-medium bg-orange-500 hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded transition-colors flex items-center gap-2"
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
|
Aktualisiere...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Icons.Layers className="w-4 h-4" />
|
|
Logo aktualisieren
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NpcLogoManagementModal;
|