/* ===== หน้าบ้าน (ผู้ใช้) — ค้นหา → ผลลัพธ์ → ดาวน์โหลด (เชื่อม API) ===== */ function PublicHeader({ onAdmin }) { return (
ระบบเกียรติบัตรออนไลน์
กลุ่มโรงเรียนบ้านด่าน 2
); } function ResultCard({ hit, idx, onOpen }) { const { event, rec } = hit; const toneClass = rec.tone === "gold" ? "chip-gold" : rec.tone === "muted" ? "chip-muted" : "chip"; return (
{/* mini cert thumbnail */}
{rec.tone === "gold" && }{rec.role}
{event.title}
{event.date} {rec.school}
); } function CertModal({ hit, mode, onClose }) { const { event, rec } = hit; const [phase, setPhase] = React.useState("view"); // view | gen | done | error const [errMsg, setErrMsg] = React.useState(""); const [share, setShare] = React.useState(false); const [copied, setCopied] = React.useState(false); const boxRef = React.useRef(null); const [scale, setScale] = React.useState(0.5); const verifyUrl = location.origin + "/verify/" + rec.id; React.useEffect(() => { function fit() { const w = boxRef.current ? boxRef.current.clientWidth : 600; setScale(Math.min((w - 4) / CERT_W, 0.62)); } fit(); window.addEventListener("resize", fit); return () => window.removeEventListener("resize", fit); }, []); async function doDownload() { setPhase("gen"); setErrMsg(""); try { await api.downloadCert(rec.id, `เกียรติบัตร_${(rec.name || "").replace(/\s+/g, "_")}.pdf`); setPhase("done"); } catch (e) { setErrMsg(e.message || "ดาวน์โหลดไม่สำเร็จ"); setPhase("error"); } } // เริ่มดาวน์โหลดทันทีถ้าเปิดมาในโหมด download React.useEffect(() => { if (mode === "download") doDownload(); }, []); return (
{event.title}
{rec.name} · เลขที่ {rec.no}
{phase === "gen" && (
กำลังสร้างไฟล์ PDF…
)}
{phase === "done" && (
ดาวน์โหลดเรียบร้อย — บันทึกเป็น เกียรติบัตร_{rec.name.replace(" ", "_")}.pdf
)} {phase === "error" && (
{errMsg}
)} {!share ? (
) : (
QR ตรวจสอบ
ลิงก์ตรวจสอบความถูกต้อง
สแกน QR หรือเปิดลิงก์เพื่อยืนยันว่าเกียรติบัตรออกโดยกลุ่มโรงเรียนบ้านด่าน 2 จริง
{verifyUrl}
)}
); } function PublicApp({ onAdmin }) { const [query, setQuery] = React.useState(""); const [submitted, setSubmitted] = React.useState(false); const [results, setResults] = React.useState([]); const [searching, setSearching] = React.useState(false); const [open, setOpen] = React.useState(null); const [published, setPublished] = React.useState([]); const [loadingEvents, setLoadingEvents] = React.useState(true); const [selEvent, setSelEvent] = React.useState(null); const [recips, setRecips] = React.useState([]); const [loadingRecips, setLoadingRecips] = React.useState(false); const inputRef = React.useRef(null); React.useEffect(() => { api.listEvents(false) .then(d => { const evs = d.events || []; setPublished(evs); if (evs.length) openEvent(evs[0]); }) .catch(() => setPublished([])) .finally(() => setLoadingEvents(false)); }, []); function openEvent(ev) { setSelEvent(ev); setRecips([]); setLoadingRecips(true); api.getEvent(ev.id) .then(d => setRecips(d.recipients || [])) .catch(() => setRecips([])) .finally(() => setLoadingRecips(false)); } async function run(q) { const qq = (q ?? query).trim(); setQuery(qq); if (!qq) return; setSearching(true); setSubmitted(true); try { const d = await api.search(qq); setResults(d.results || []); } catch (e) { setResults([]); } finally { setSearching(false); } } return (
{/* hero */}
ค้นหาเกียรติบัตรของคุณได้ทันที

พิมพ์ชื่อ–นามสกุล
ดาวน์โหลดเกียรติบัตรได้เลย

ไม่ต้องไล่หาชื่อในตารางยาว ๆ — คนหนึ่งคนเห็นเกียรติบัตรทุกกิจกรรมรวมในที่เดียว

{ e.preventDefault(); run(); }} style={{ marginTop: 26, display: "flex", gap: 9, maxWidth: 540, marginInline: "auto" }}>
setQuery(e.target.value)} placeholder="เช่น นายสราวุธ" style={{ paddingLeft: 44, height: 54, fontSize: 16.5, borderRadius: "var(--r-lg)", boxShadow: "var(--sh-sm)" }} />
ลองค้นหา:
{/* body */}
{!submitted ? ( loadingEvents ? (
) : published.length === 0 ? (
ยังไม่มีกิจกรรมที่เผยแพร่
) : (
{/* left: event menu */}
กิจกรรมทั้งหมด {published.length}
{published.map(e => { const active = selEvent?.id === e.id; return ( ); })}
{/* right: recipients of selected event */}
{!selEvent ? (
เลือกกิจกรรมทางซ้ายเพื่อดูรายชื่อ
) : (
{selEvent.title}
{selEvent.date} {selEvent.count} คน
{loadingRecips ? (
) : recips.length === 0 ? (
ยังไม่มีรายชื่อ
) : (
{recips.map((r, i) => { const toneClass = r.tone === "gold" ? "chip-gold" : r.tone === "muted" ? "chip-muted" : "chip"; return (
{r.name}
{r.school} {r.tone === "gold" && }{r.role}
); })}
)}
)}
) ) : searching ? (
) : results.length > 0 ? (

พบ {results.length} เกียรติบัตร

สำหรับ “{query}”
{results.map((h, i) => setOpen({ hit, mode: m })} />)}
) : (

ไม่พบเกียรติบัตรของ “{query}”

ลองตรวจสอบการสะกดชื่อ–นามสกุล หรือพิมพ์เพียงบางส่วนของชื่อ

)}
กลุ่มโรงเรียนบ้านด่าน 2 · สพป.บุรีรัมย์ เขต 1 · พัฒนาโดย S.directorkachai ระบบเกียรติบัตรออนไลน์
{open && setOpen(null)} />}
); } /* ===== หน้าตรวจสอบความถูกต้อง (public) — /verify/:id ===== */ function VerifyPage({ id, onHome }) { const [state, setState] = React.useState({ loading: true }); const boxRef = React.useRef(null); const [scale, setScale] = React.useState(0.5); React.useEffect(() => { api.getRecipient(id) .then(d => setState({ loading: false, data: d })) .catch(e => setState({ loading: false, error: e.message || "ไม่พบเกียรติบัตร" })); }, [id]); React.useEffect(() => { function fit() { const w = boxRef.current ? boxRef.current.clientWidth : 600; setScale(Math.min((w - 4) / CERT_W, 0.62)); } fit(); window.addEventListener("resize", fit); return () => window.removeEventListener("resize", fit); }); const ok = state.data && state.data.verified; return (
{state.loading ? (
) : state.error || !ok ? (

ไม่พบเกียรติบัตรนี้

ลิงก์อาจไม่ถูกต้อง หรือเกียรติบัตรนี้ยังไม่ถูกเผยแพร่

) : (
เกียรติบัตรนี้เป็นของจริง ✓
ออกโดยกลุ่มโรงเรียนบ้านด่าน 2 · สพป.บุรีรัมย์ เขต 1
{[["ผู้รับ", state.data.recipient.name], ["เลขที่", state.data.recipient.no], ["ประเภท", state.data.recipient.role], ["โรงเรียน/สังกัด", state.data.recipient.school], ["กิจกรรม", state.data.event.title], ["วันที่", state.data.event.date]].map(([k, v]) => v ? (
{k} {v}
) : null)}
)}
); } Object.assign(window, { PublicApp, VerifyPage });