/* ===== App orchestrator: public ↔ admin + event detail (เชื่อม API) ===== */
/* ---------- Event detail (admin) ---------- */
function EventDetail({ event, onBack, onTogglePublish, onRegenerate, onPatched }) {
const [recipients, setRecipients] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [preview, setPreview] = React.useState(null);
const [regen, setRegen] = React.useState(false);
const [scale, setScale] = React.useState(0.42);
const boxRef = React.useRef(null);
const [editPos, setEditPos] = React.useState(false);
const [nPos, setNPos] = React.useState(event.namePos || { x: 50, y: 46 });
const [noP, setNoP] = React.useState(event.noPos || { x: 14, y: 8 });
const [savingPos, setSavingPos] = React.useState(false);
React.useEffect(() => {
setNPos(event.namePos || { x: 50, y: 46 });
setNoP(event.noPos || { x: 14, y: 8 });
}, [event.id, event.namePos, event.noPos]);
async function savePositions() {
setSavingPos(true);
try {
await api.updateEvent(event.id, { namePos: nPos, noPos: noP });
await api.generate(event.id); // ล้าง cache PDF → สร้างใหม่ตามตำแหน่งใหม่ตอนดาวน์โหลด
onPatched && onPatched({ namePos: nPos, noPos: noP });
setEditPos(false);
} catch (e) { alert(e.message); }
finally { setSavingPos(false); }
}
React.useEffect(() => {
setLoading(true);
api.getEvent(event.id, true)
.then(d => { setRecipients(d.recipients || []); setPreview((d.recipients || [])[0] || null); })
.catch(() => setRecipients([]))
.finally(() => setLoading(false));
}, [event.id]);
React.useEffect(() => {
function fit() { const w = boxRef.current ? boxRef.current.clientWidth : 500; setScale(Math.min((w - 4) / CERT_W, 0.5)); }
fit(); window.addEventListener("resize", fit); return () => window.removeEventListener("resize", fit);
}, []);
async function regenerate() {
setRegen(true);
try { await onRegenerate(); } finally { setRegen(false); }
}
return (
<>
{event.title}
{event.date} · {event.count} รายชื่อ
{/* recipients */}
รายชื่อผู้รับ
{recipients.length}
{loading ? (
) : (
{recipients.map((r, i) => (
setPreview(r)}
style={{ borderTop: i ? "1px solid var(--c-line-soft)" : "none", cursor: "pointer",
background: preview?.id === r.id ? "var(--c-primary-soft)" : "transparent" }}>
| {r.no} |
{r.name} |
{r.school} |
{r.tone === "gold" ? {r.role}
: {r.role}}
|
))}
{recipients.length === 0 && (
| ยังไม่มีรายชื่อ |
)}
)}
{/* preview panel */}
ตัวอย่างเกียรติบัตร
{preview ? (
) :
เลือกรายชื่อเพื่อดูตัวอย่าง}
{preview &&
{preview.name} · เลขที่ {preview.no}
}
{preview && (
)}
แก้ไขตำแหน่งเกียรติบัตร
ลากจุด น้ำเงิน = ตำแหน่งเนื้อหา (ชื่อ+รายละเอียด) · จุด ทอง = ตำแหน่งเลขที่
)}
);
}
/* ---------- Admin root ---------- */
function AdminRoot({ onExit }) {
const [authed, setAuthed] = React.useState(api.isAuthed());
const [screen, setScreen] = React.useState("events"); // events | recipients | templates | settings | wizard | detail
const [events, setEvents] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [current, setCurrent] = React.useState(null);
const [editEvent, setEditEvent] = React.useState(null);
const [delEvent, setDelEvent] = React.useState(null);
async function refresh() {
setLoading(true);
try {
const d = await api.listEvents(true);
setEvents(d.events || []);
} catch (e) {
if (e.status === 401) { api.logout(); setAuthed(false); }
} finally {
setLoading(false);
}
}
React.useEffect(() => { if (authed) refresh(); }, [authed]);
function logout() { api.logout(); setAuthed(false); onExit(); }
if (!authed) return setAuthed(true)} onBack={onExit} />;
if (screen === "wizard") {
return setScreen("events")}
onDone={() => { setScreen("events"); refresh(); }} />;
}
async function togglePublish() {
const next = current.status === "published" ? "draft" : "published";
try {
await api.updateEvent(current.id, { status: next });
setCurrent(c => ({ ...c, status: next }));
setEvents(es => es.map(e => e.id === current.id ? { ...e, status: next } : e));
} catch (e) { alert(e.message); }
}
async function regenerate() {
try {
const r = await api.generate(current.id);
if (r.event) { setCurrent(c => ({ ...c, ...r.event })); setEvents(es => es.map(e => e.id === current.id ? { ...e, ...r.event } : e)); }
} catch (e) { alert(e.message); }
}
const activeNav = screen === "detail" ? "events" : screen;
function renderScreen() {
if (screen === "detail" && current)
return { setScreen("events"); refresh(); }}
onTogglePublish={togglePublish} onRegenerate={regenerate}
onPatched={(patch) => { setCurrent(c => ({ ...c, ...patch })); setEvents(es => es.map(e => e.id === current.id ? { ...e, ...patch } : e)); }} />;
if (screen === "recipients") return ;
if (screen === "templates") return ;
if (screen === "reports") return ;
if (screen === "settings") return ;
// default: events list
if (loading) return
;
return setScreen("wizard")}
onOpen={(e) => { setCurrent(e); setScreen("detail"); }}
onEdit={(e) => setEditEvent(e)} onDelete={(e) => setDelEvent(e)} />;
}
return (
setScreen("wizard")}
onNav={(id) => { setCurrent(null); setScreen(id); }}>
{renderScreen()}
{editEvent && setEditEvent(null)}
onSaved={() => { setEditEvent(null); refresh(); }} />}
{delEvent && setDelEvent(null)}
onConfirm={async () => { await api.deleteEvent(delEvent.id); setDelEvent(null); refresh(); }} />}
);
}
/* ---------- Top-level App ---------- */
function getVerifyId() {
const m = location.pathname.match(/^\/verify\/([^/?#]+)/);
return m ? decodeURIComponent(m[1]) : null;
}
function App() {
const [mode, setMode] = React.useState("public"); // public | admin
const [verifyId, setVerifyId] = React.useState(getVerifyId());
function goHome() {
if (location.pathname !== "/") history.pushState({}, "", "/");
setVerifyId(null); setMode("public");
}
React.useEffect(() => {
const onPop = () => setVerifyId(getVerifyId());
window.addEventListener("popstate", onPop);
return () => window.removeEventListener("popstate", onPop);
}, []);
if (verifyId) return ;
return (
mode === "public"
? setMode("admin")} />
: setMode("public")} />
);
}
ReactDOM.createRoot(document.getElementById("root")).render();