136 lines
4.1 KiB
TypeScript
136 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { Upload, Loader2 } from "lucide-react";
|
|
import Shell from "@/components/Shell";
|
|
import EditableTable, { Col } from "@/components/EditableTable";
|
|
import { TableSkeleton } from "@/components/Skeleton";
|
|
import Thumb from "@/components/Thumb";
|
|
import { api, getAuth, ASSET_BASE } from "@/lib/api";
|
|
import { toastError, toastSuccess } from "@/lib/toast";
|
|
|
|
type Row = Record<string, unknown>;
|
|
|
|
const COLS: Col[] = [
|
|
{ key: "id", label: "شناسه" },
|
|
{ key: "title", label: "عنوان" },
|
|
{ key: "price_coins", label: "قیمت (سکه)", type: "number" },
|
|
{ key: "vip", label: "VIP رایگان", type: "bool" },
|
|
{ key: "sort", label: "ترتیب", type: "number" },
|
|
];
|
|
|
|
const API =
|
|
process.env.NEXT_PUBLIC_API_URL || "https://hakem.approagency.ir/admin/api";
|
|
|
|
export default function AvatarsPage() {
|
|
const [rows, setRows] = useState<Row[]>([]);
|
|
const [ver, setVer] = useState(1); // تازهسازیِ کشِ تصویر پس از آپلود
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
async function load() {
|
|
setLoading(true);
|
|
try {
|
|
const r = await api.get<{ avatars: Row[] }>("/avatars");
|
|
setRows(r.avatars || []);
|
|
setVer((v) => v + 1);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
useEffect(() => {
|
|
load();
|
|
}, []);
|
|
|
|
return (
|
|
<Shell title="شخصیتها" subtitle="آواتارهای قابلِ خریدِ بازیکن">
|
|
<p className="text-sm text-[#8aa] mb-4">
|
|
شخصیتِ آواتار که کاربر میخرد و در کلِ بازی (سرِ میز، پروفایل و لابی) دیده
|
|
میشود. ابتدا ردیف را با شناسه و قیمت بسازید، سپس یک تصویرِ{" "}
|
|
<code>png</code> یا <code>svg</code> (ترجیحاً مربع و با پسزمینهی شفاف)
|
|
آپلود کنید.
|
|
</p>
|
|
{loading ? (
|
|
<TableSkeleton rows={5} cols={COLS.length} />
|
|
) : (
|
|
<EditableTable
|
|
cols={COLS}
|
|
rows={rows}
|
|
newTemplate={{ id: "", title: "", price_coins: 0, vip: false, sort: 0 }}
|
|
onSave={async (row) => {
|
|
await api.post("/avatars", row);
|
|
await load();
|
|
}}
|
|
onDelete={async (id) => {
|
|
if (!confirm("حذف شخصیت؟")) return;
|
|
await api.del(`/avatars?id=${encodeURIComponent(id)}`);
|
|
await load();
|
|
}}
|
|
preview={(row) => (
|
|
<Thumb
|
|
src={`${ASSET_BASE}/avatars/${row.id}.${row.img_ext || "png"}?v=${ver}`}
|
|
size={48}
|
|
/>
|
|
)}
|
|
extra={(row) => <UploadBtn id={String(row.id)} onDone={load} />}
|
|
/>
|
|
)}
|
|
</Shell>
|
|
);
|
|
}
|
|
|
|
function UploadBtn({ id, onDone }: { id: string; onDone: () => void }) {
|
|
const ref = useRef<HTMLInputElement>(null);
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
async function upload(file: File) {
|
|
setBusy(true);
|
|
try {
|
|
const fd = new FormData();
|
|
fd.append("image", file);
|
|
const auth = getAuth();
|
|
const res = await fetch(`${API}/avatars/${encodeURIComponent(id)}/upload`, {
|
|
method: "POST",
|
|
headers: auth ? { Authorization: `Basic ${auth}` } : {},
|
|
body: fd,
|
|
});
|
|
if (!res.ok) throw new Error("آپلود ناموفق بود");
|
|
toastSuccess("تصویر آپلود شد");
|
|
onDone();
|
|
} catch (e) {
|
|
toastError((e as Error).message);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
className="btn btn-ghost flex items-center gap-1"
|
|
disabled={busy}
|
|
onClick={() => ref.current?.click()}
|
|
title="آپلود تصویر"
|
|
>
|
|
{busy ? (
|
|
<>
|
|
<Loader2 size={14} className="animate-spin" /> در حال آپلود…
|
|
</>
|
|
) : (
|
|
<Upload size={14} />
|
|
)}
|
|
</button>
|
|
<input
|
|
ref={ref}
|
|
type="file"
|
|
accept="image/png,image/svg+xml,.svg"
|
|
hidden
|
|
onChange={(e) => {
|
|
const f = e.target.files?.[0];
|
|
if (f) upload(f);
|
|
e.target.value = "";
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|