Initial commit: JuanitoSport - Muay Thai & Yog4Fight PWA
This commit is contained in:
Wycz
@@ -0,0 +1,175 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
const VISIBILITY_OPTIONS = [
|
||||
{ value: "MEMBERS_ONLY", label: "👥 Tous les adhérents" },
|
||||
{ value: "MUAY_THAI_ONLY", label: "🥊 Muay Thai uniquement" },
|
||||
{ value: "YOGA_ONLY", label: "🧘 Yoga uniquement" },
|
||||
{ value: "PUBLIC", label: "🌍 Public" },
|
||||
];
|
||||
|
||||
const TYPE_OPTIONS = [
|
||||
{ value: "PHOTO", label: "📷 Photo" },
|
||||
{ value: "VIDEO", label: "🎥 Vidéo" },
|
||||
];
|
||||
|
||||
export default function AdminMedia({ media }: { media: any[] }) {
|
||||
const router = useRouter();
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [type, setType] = useState("PHOTO");
|
||||
const [visibility, setVisibility] = useState("MEMBERS_ONLY");
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!file) return;
|
||||
setUploading(true);
|
||||
setError("");
|
||||
|
||||
try {
|
||||
const dir = type === "VIDEO" ? "media/videos" : "media/photos";
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
formData.append("subdir", dir);
|
||||
|
||||
const up = await fetch("/api/upload", { method: "POST", body: formData });
|
||||
if (!up.ok) throw new Error("Upload échoué");
|
||||
const { url } = await up.json();
|
||||
|
||||
const res = await fetch("/api/media", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ title, description, url, type, visibility }),
|
||||
});
|
||||
if (!res.ok) throw new Error("Enregistrement échoué");
|
||||
|
||||
setTitle("");
|
||||
setDescription("");
|
||||
setFile(null);
|
||||
setType("PHOTO");
|
||||
router.refresh();
|
||||
} catch (err: any) {
|
||||
setError(err.message || "Une erreur est survenue");
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteMedia(id: string) {
|
||||
if (!confirm("Supprimer ce média ?")) return;
|
||||
const res = await fetch("/api/media", {
|
||||
method: "DELETE",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ id }),
|
||||
});
|
||||
if (res.ok) router.refresh();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-lg font-bold">🎬 Photos & vidéos</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} className="card space-y-3 border-primary-500/30">
|
||||
<h3 className="font-semibold">📤 Ajouter un média</h3>
|
||||
|
||||
<div className="flex gap-2">
|
||||
{TYPE_OPTIONS.map((t) => (
|
||||
<button
|
||||
key={t.value}
|
||||
type="button"
|
||||
onClick={() => setType(t.value)}
|
||||
className={`flex-1 rounded-xl px-3 py-2 text-sm ${type === t.value ? "bg-primary-600 text-white" : "bg-white/5 text-white/60"}`}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<label className="label">❌ Visibilité</label>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{VISIBILITY_OPTIONS.map((v) => (
|
||||
<label key={v.value} className="flex cursor-pointer items-center gap-2 rounded-xl bg-white/5 px-3 py-2 text-sm">
|
||||
<input
|
||||
type="radio"
|
||||
name="visibility"
|
||||
checked={visibility === v.value}
|
||||
onChange={() => setVisibility(v.value)}
|
||||
className="accent-primary-600"
|
||||
/>
|
||||
{v.label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="label">Titre</label>
|
||||
<input className="input" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Ex: Entraînement du mardi" required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="label">Description (optionnel)</label>
|
||||
<input className="input" value={description} onChange={(e) => setDescription(e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-white/20 bg-white/5 py-6">
|
||||
<span className="mb-1 text-3xl">{type === "VIDEO" ? "🎥" : "📷"}</span>
|
||||
{file ? (
|
||||
<p className="text-sm text-primary-300">{file.name}</p>
|
||||
) : (
|
||||
<p className="text-sm text-white/50">
|
||||
{type === "VIDEO" ? "Choisir une vidéo" : "Choisir une photo"}
|
||||
</p>
|
||||
)}
|
||||
<label className="btn-secondary mt-3 cursor-pointer">
|
||||
Choisir un fichier
|
||||
<input
|
||||
type="file"
|
||||
accept={type === "VIDEO" ? "video/*" : "image/*"}
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
setFile(e.target.files?.[0] || null);
|
||||
setError("");
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-sm text-red-400">{error}</p>}
|
||||
<button type="submit" className="btn-primary w-full" disabled={uploading || !file}>
|
||||
{uploading ? "Upload..." : "🚀 Publier"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{media.length === 0 && (
|
||||
<p className="card col-span-2 text-center text-sm text-white/50">Aucun média.</p>
|
||||
)}
|
||||
{media.map((m) => (
|
||||
<div key={m.id} className="card overflow-hidden !p-0">
|
||||
{m.type === "PHOTO" ? (
|
||||
<img src={m.url} alt={m.title} className="aspect-square w-full object-cover" loading="lazy" />
|
||||
) : (
|
||||
<video controls playsInline preload="metadata" className="aspect-video w-full" src={m.url} />
|
||||
)}
|
||||
<div className="p-3">
|
||||
<p className="truncate text-sm font-semibold">{m.title}</p>
|
||||
<div className="mt-1 flex items-center justify-between">
|
||||
<span className="text-xs text-white/40">
|
||||
{m.visibility === "PUBLIC" ? "🌍 Public" : m.visibility === "MUAY_THAI_ONLY" ? "🥊 Muay Thai" : m.visibility === "YOGA_ONLY" ? "🧘 Yoga" : "👥 Adhérents"} ·{" "}
|
||||
{new Date(m.createdAt).toLocaleDateString("fr-FR")}
|
||||
</span>
|
||||
<button onClick={() => deleteMedia(m.id)} className="text-xs text-red-400">
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import AdminMedia from "./media-admin";
|
||||
|
||||
export default async function MediaPage() {
|
||||
const media = await prisma.media.findMany({
|
||||
orderBy: { createdAt: "desc" },
|
||||
include: {
|
||||
uploadedBy: { select: { name: true } },
|
||||
},
|
||||
});
|
||||
|
||||
return <AdminMedia media={media} />;
|
||||
}
|
||||
Reference in New Issue
Block a user