Add an admin page for managing gallery images and artist names
Introduce a new admin route at `/admin/gallery` enabling users to set focal points and artist names for gallery images, with corresponding API endpoints and data management. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 70b6b9df-7da9-46f3-afd7-dbcd9aac1855 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/ncMMRQ9 Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic
@@ -0,0 +1,367 @@
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useState, useRef } from "react";
|
||||
import { Link } from "wouter";
|
||||
import { ArrowLeft, Crosshair, X, Check, RotateCcw, User, Search, Filter } from "lucide-react";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
import type { GalleryImage, FocalPointMap } from "@/components/photo-gallery";
|
||||
import { getObjectPosition } from "@/components/photo-gallery";
|
||||
|
||||
type ArtistOverrides = Record<string, string>;
|
||||
|
||||
function FocalPointEditor({
|
||||
image,
|
||||
currentFocalPoint,
|
||||
currentArtist,
|
||||
onSaveFocal,
|
||||
onResetFocal,
|
||||
onSaveArtist,
|
||||
onClose,
|
||||
}: {
|
||||
image: GalleryImage;
|
||||
currentFocalPoint?: { x: number; y: number };
|
||||
currentArtist: string;
|
||||
onSaveFocal: (x: number, y: number) => Promise<void>;
|
||||
onResetFocal: () => Promise<void>;
|
||||
onSaveArtist: (artist: string) => Promise<void>;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const [point, setPoint] = useState<{ x: number; y: number } | null>(currentFocalPoint || null);
|
||||
const [artistName, setArtistName] = useState(currentArtist);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const imgRef = useRef<HTMLImageElement>(null);
|
||||
|
||||
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const img = imgRef.current;
|
||||
if (!img) return;
|
||||
const rect = img.getBoundingClientRect();
|
||||
const x = Math.round(((e.clientX - rect.left) / rect.width) * 100);
|
||||
const y = Math.round(((e.clientY - rect.top) / rect.height) * 100);
|
||||
setPoint({ x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) });
|
||||
};
|
||||
|
||||
const handleSaveAll = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
if (point) {
|
||||
await onSaveFocal(point.x, point.y);
|
||||
}
|
||||
if (artistName !== currentArtist) {
|
||||
await onSaveArtist(artistName);
|
||||
}
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleResetFocal = async () => {
|
||||
setSaving(true);
|
||||
await onResetFocal();
|
||||
setPoint(null);
|
||||
setSaving(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 bg-black/95 flex flex-col items-center justify-center p-4 overflow-y-auto" data-testid="focal-point-editor">
|
||||
<div className="absolute top-4 left-4 right-4 flex items-center justify-between z-50">
|
||||
<div className="flex items-center gap-2">
|
||||
<Crosshair className="w-5 h-5 text-yellow-400" />
|
||||
<span className="text-white font-medium text-sm truncate max-w-[60vw]">
|
||||
{image.fileName}
|
||||
</span>
|
||||
</div>
|
||||
<button onClick={onClose} className="text-white/70 hover:text-white p-2" data-testid="button-focal-close">
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-4 mt-12 w-full max-w-4xl">
|
||||
<div className="flex items-center gap-3 w-full max-w-md">
|
||||
<User className="w-4 h-4 text-white/50 flex-shrink-0" />
|
||||
<input
|
||||
type="text"
|
||||
value={artistName}
|
||||
onChange={(e) => setArtistName(e.target.value)}
|
||||
placeholder="Interpret / Künstlername"
|
||||
className="flex-1 bg-white/10 border border-white/20 rounded px-3 py-2 text-white text-sm placeholder:text-white/30 focus:outline-none focus:border-yellow-400/60"
|
||||
data-testid="input-artist-name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-white/50 text-xs text-center">
|
||||
Klicken Sie auf das Bild, um den Fokuspunkt zu setzen
|
||||
</p>
|
||||
|
||||
<div className="relative cursor-crosshair inline-block" onClick={handleClick}>
|
||||
<img
|
||||
ref={imgRef}
|
||||
src={image.full || image.large}
|
||||
alt={image.artist || image.fileName}
|
||||
className="max-w-[85vw] max-h-[50vh] object-contain rounded-lg"
|
||||
data-testid="img-focal-editor"
|
||||
/>
|
||||
{point && (
|
||||
<div
|
||||
className="absolute w-10 h-10 -ml-5 -mt-5 pointer-events-none"
|
||||
style={{ left: `${point.x}%`, top: `${point.y}%` }}
|
||||
>
|
||||
<div className="w-full h-full rounded-full border-2 border-yellow-400 bg-yellow-400/20 flex items-center justify-center">
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-yellow-400" />
|
||||
</div>
|
||||
<div className="absolute top-1/2 left-[-16px] right-[-16px] h-px bg-yellow-400/50 -translate-y-1/2" />
|
||||
<div className="absolute left-1/2 top-[-16px] bottom-[-16px] w-px bg-yellow-400/50 -translate-x-1/2" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative w-44 h-24 rounded overflow-hidden border border-white/20 bg-black/50">
|
||||
<img
|
||||
src={image.full || image.large}
|
||||
alt="16:9"
|
||||
className="w-full h-full object-cover"
|
||||
style={{ objectPosition: point ? `${point.x}% ${point.y}%` : "center 15%" }}
|
||||
/>
|
||||
<span className="absolute bottom-0.5 right-1 text-[9px] text-white/60 bg-black/60 px-1 rounded">16:9</span>
|
||||
</div>
|
||||
<div className="relative w-14 h-24 rounded overflow-hidden border border-white/20 bg-black/50">
|
||||
<img
|
||||
src={image.full || image.large}
|
||||
alt="9:16"
|
||||
className="w-full h-full object-cover"
|
||||
style={{ objectPosition: point ? `${point.x}% ${point.y}%` : "center 15%" }}
|
||||
/>
|
||||
<span className="absolute bottom-0.5 right-0.5 text-[8px] text-white/60 bg-black/60 px-0.5 rounded">9:16</span>
|
||||
</div>
|
||||
<div className="relative w-24 h-24 rounded overflow-hidden border border-white/20 bg-black/50">
|
||||
<img
|
||||
src={image.full || image.large}
|
||||
alt="1:1"
|
||||
className="w-full h-full object-cover"
|
||||
style={{ objectPosition: point ? `${point.x}% ${point.y}%` : "center 15%" }}
|
||||
/>
|
||||
<span className="absolute bottom-0.5 right-0.5 text-[9px] text-white/60 bg-black/60 px-0.5 rounded">1:1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{point && (
|
||||
<p className="text-white/40 text-xs">Fokus: {point.x}% / {point.y}%</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
<button
|
||||
onClick={handleResetFocal}
|
||||
disabled={saving}
|
||||
className="flex items-center gap-1.5 px-3 py-2 rounded bg-white/10 hover:bg-white/20 text-white/70 hover:text-white text-sm transition-colors disabled:opacity-50"
|
||||
data-testid="button-focal-reset"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5" />
|
||||
Fokus zurücksetzen
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveAll}
|
||||
disabled={saving}
|
||||
className="flex items-center gap-1.5 px-5 py-2 rounded bg-yellow-500 hover:bg-yellow-400 disabled:bg-yellow-500/40 text-black font-medium text-sm transition-colors"
|
||||
data-testid="button-focal-save"
|
||||
>
|
||||
{saving ? (
|
||||
<div className="w-4 h-4 border-2 border-black/50 border-t-black rounded-full animate-spin" />
|
||||
) : (
|
||||
<Check className="w-4 h-4" />
|
||||
)}
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AdminGalleryPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const { data: images, isLoading } = useQuery<GalleryImage[]>({
|
||||
queryKey: ["/api/gallery"],
|
||||
});
|
||||
const { data: focalPoints } = useQuery<FocalPointMap>({
|
||||
queryKey: ["/api/gallery/focal-points"],
|
||||
});
|
||||
const { data: artistOverrides } = useQuery<ArtistOverrides>({
|
||||
queryKey: ["/api/gallery/artists"],
|
||||
});
|
||||
|
||||
const [editingImage, setEditingImage] = useState<GalleryImage | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [filterMode, setFilterMode] = useState<"all" | "no-artist" | "no-focal" | "has-focal">("all");
|
||||
|
||||
const fp = focalPoints || {};
|
||||
const ao = artistOverrides || {};
|
||||
|
||||
const filteredImages = (images || []).filter((img) => {
|
||||
if (searchQuery) {
|
||||
const q = searchQuery.toLowerCase();
|
||||
const matches = img.fileName.toLowerCase().includes(q) || (img.artist || "").toLowerCase().includes(q);
|
||||
if (!matches) return false;
|
||||
}
|
||||
if (filterMode === "no-artist") return !img.artist;
|
||||
if (filterMode === "no-focal") return !fp[img.fileName];
|
||||
if (filterMode === "has-focal") return !!fp[img.fileName];
|
||||
return true;
|
||||
});
|
||||
|
||||
const handleSaveFocalPoint = async (x: number, y: number) => {
|
||||
if (!editingImage) return;
|
||||
await apiRequest("PUT", `/api/gallery/focal-points/${encodeURIComponent(editingImage.fileName)}`, { x, y });
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/gallery/focal-points"] });
|
||||
};
|
||||
|
||||
const handleResetFocalPoint = async () => {
|
||||
if (!editingImage) return;
|
||||
await apiRequest("DELETE", `/api/gallery/focal-points/${encodeURIComponent(editingImage.fileName)}`);
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/gallery/focal-points"] });
|
||||
};
|
||||
|
||||
const handleSaveArtist = async (artist: string) => {
|
||||
if (!editingImage) return;
|
||||
await apiRequest("PUT", `/api/gallery/artists/${encodeURIComponent(editingImage.fileName)}`, { artist });
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/gallery/artists"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/gallery"] });
|
||||
};
|
||||
|
||||
const totalImages = images?.length || 0;
|
||||
const withFocal = Object.keys(fp).length;
|
||||
const withoutArtist = (images || []).filter((img) => !img.artist).length;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 text-white">
|
||||
<div className="border-b border-white/10 bg-zinc-900/80 sticky top-0 z-40">
|
||||
<div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/">
|
||||
<button className="flex items-center gap-2 text-white/50 hover:text-white text-sm transition-colors" data-testid="button-admin-back">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Zurück zur Seite
|
||||
</button>
|
||||
</Link>
|
||||
<div className="h-5 w-px bg-white/20" />
|
||||
<h1 className="font-bold text-lg" data-testid="text-admin-title">Galerie Admin</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs text-white/40">
|
||||
<span>{totalImages} Bilder</span>
|
||||
<span>{withFocal} mit Fokus</span>
|
||||
<span className={withoutArtist > 0 ? "text-yellow-400" : ""}>{withoutArtist} ohne Name</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 py-6">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 mb-6">
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/30" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Suche nach Dateiname oder Künstler..."
|
||||
className="w-full pl-9 pr-3 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-white placeholder:text-white/30 focus:outline-none focus:border-yellow-400/50"
|
||||
data-testid="input-admin-search"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter className="w-4 h-4 text-white/30" />
|
||||
{(["all", "no-artist", "no-focal", "has-focal"] as const).map((mode) => (
|
||||
<button
|
||||
key={mode}
|
||||
onClick={() => setFilterMode(mode)}
|
||||
className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
|
||||
filterMode === mode
|
||||
? "bg-yellow-500 text-black"
|
||||
: "bg-white/5 text-white/50 hover:text-white hover:bg-white/10"
|
||||
}`}
|
||||
data-testid={`button-filter-${mode}`}
|
||||
>
|
||||
{mode === "all" && "Alle"}
|
||||
{mode === "no-artist" && "Ohne Name"}
|
||||
{mode === "no-focal" && "Ohne Fokus"}
|
||||
{mode === "has-focal" && "Mit Fokus"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
|
||||
{Array.from({ length: 20 }).map((_, i) => (
|
||||
<div key={i} className="aspect-[3/4] bg-white/5 rounded-lg animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-white/30 text-xs mb-4">{filteredImages.length} Ergebnisse</p>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
|
||||
{filteredImages.map((img) => (
|
||||
<button
|
||||
key={img.fileName}
|
||||
onClick={() => setEditingImage(img)}
|
||||
className="group relative rounded-lg overflow-hidden bg-white/5 border border-white/10 hover:border-yellow-500/50 cursor-pointer flex flex-col text-left transition-colors"
|
||||
data-testid={`button-admin-image-${img.fileName}`}
|
||||
>
|
||||
<div className="relative w-full aspect-[16/9]">
|
||||
<img
|
||||
src={img.mobile || img.thumb}
|
||||
alt={img.artist || img.fileName}
|
||||
className="w-full h-full object-cover"
|
||||
style={{ objectPosition: getObjectPosition(img.fileName, fp) }}
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors" />
|
||||
|
||||
{fp[img.fileName] && (
|
||||
<div
|
||||
className="absolute w-3 h-3 -ml-1.5 -mt-1.5 pointer-events-none"
|
||||
style={{ left: `${fp[img.fileName].x}%`, top: `${fp[img.fileName].y}%` }}
|
||||
>
|
||||
<div className="w-full h-full rounded-full border-2 border-yellow-400 bg-yellow-400/40" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute top-1 right-1 flex items-center gap-1">
|
||||
{fp[img.fileName] && (
|
||||
<span className="bg-yellow-500 text-black text-[8px] px-1 py-0.5 rounded font-bold">
|
||||
F
|
||||
</span>
|
||||
)}
|
||||
{!img.artist && (
|
||||
<span className="bg-red-500/80 text-white text-[8px] px-1 py-0.5 rounded font-bold">
|
||||
?
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-2 py-1.5 flex-1">
|
||||
<p className="text-[10px] text-white/70 font-medium line-clamp-1">
|
||||
{img.artist || <span className="text-white/30 italic">Kein Name</span>}
|
||||
</p>
|
||||
<p className="text-[9px] text-white/30 line-clamp-1 mt-0.5">{img.fileName}</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editingImage && (
|
||||
<FocalPointEditor
|
||||
image={editingImage}
|
||||
currentFocalPoint={fp[editingImage.fileName]}
|
||||
currentArtist={editingImage.artist || ""}
|
||||
onSaveFocal={handleSaveFocalPoint}
|
||||
onResetFocal={handleResetFocalPoint}
|
||||
onSaveArtist={handleSaveArtist}
|
||||
onClose={() => setEditingImage(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user