// ============ Teacher screens ============ const { useState, useEffect, useRef } = React; const TeacherHome = ({ me, onOpen, onNav }) => { const pending = DATA.works.filter(w => w.status !== 'graded'); const total = DATA.works.length; const totalStudents = DATA.students.length; const totalGroups = DATA.groups.length; const recent = [...DATA.works].reverse().slice(0,8); return (
Teacher Dashboard · ภาพรวม
สวัสดี, {me.name} — let's grade.
รอตรวจ · Pending
{pending.length}
+{Math.min(3, pending.length)} วันนี้
ผลงานทั้งหมด
{total}
+12% เดือนนี้
นักเรียน
{totalStudents}
ป.5: 6 · ป.6: 6
กลุ่ม
{totalGroups}
ใน 4 ห้องเรียน
รอตรวจ · awaiting your feedback
{pending.slice(0,7).map(w => { const cls = H.cls(w.classId); return ( onOpen(w)} style={{cursor:'pointer'}}> ); })} {pending.length === 0 && }
ผลงาน นักเรียน ห้อง ส่งเมื่อ
{w.title}
{H.typeLabel(w.type)}{w.owners.length>1?' · group':''}
 {cls.label} {H.fmtDate(w.date)}
กิจกรรมห้องเรียน · activity
{DATA.activity.map((a,i)=>{ const who = H.person(a.who); return (
{who.name.split(' ').slice(-1)[0]} {a.what} "{a.target}"
{a.when}
); })}
ห้องเรียน · classes
{DATA.classes.map(c=>{ const ws = DATA.works.filter(w=>w.classId===c.id); const pn = ws.filter(w=>w.status !== 'graded').length; return ( ); })}
); }; // --- Groups management --- const TeacherGroups = ({ onOpen }) => { const [classId, setClassId] = useState('p5-1'); const [showCreate, setShowCreate] = useState(false); const [editingGroup, setEditingGroup] = useState(null); const [allGroups, setAllGroups] = useState(DATA.groups); const classGroups = allGroups.filter(g => g.classId === classId); const classStudents = DATA.students.filter(s => s.classId === classId); const assignedIds = new Set(classGroups.flatMap(g => g.members)); const unassigned = classStudents.filter(s => !assignedIds.has(s.id)); return (
จัดการกลุ่มงาน · group management
ครูเป็นผู้กำหนดกลุ่มและสมาชิก — งาน 1 ชิ้นมีหลายเจ้าของได้
{classGroups.length === 0 &&
} {classGroups.map(g => { const groupWorks = DATA.works.filter(w => w.owners.length > 1 && w.owners.every(o => g.members.includes(o)) && w.owners.length === g.members.length); return (
{g.name} · {g.nameEn}
{g.members.length} คน · {groupWorks.length} ผลงานร่วม
{g.members.map(mid => { const m = H.person(mid); return (
{m.name}
); })}
{groupWorks.length > 0 && (
ผลงานกลุ่ม · group works
{groupWorks.map(w => ( ))}
)}
); })}
นักเรียนที่ยังไม่มีกลุ่ม
ลากเข้ากลุ่ม หรือสร้างกลุ่มใหม่
{unassigned.length === 0 ?
ทุกคนถูกจัดกลุ่มเรียบร้อย ✓
:
{unassigned.map(s => (
{s.name}
))}
}
{showCreate && editingGroup && ( setShowCreate(false)}>
{editingGroup.id ? 'แก้ไขกลุ่ม · Edit Group' : 'สร้างกลุ่มใหม่ · New Group'}
setEditingGroup({...editingGroup, name:e.target.value})} placeholder="เช่น กลุ่มสายลม" />
setEditingGroup({...editingGroup, nameEn:e.target.value})} placeholder="e.g. Wind" />
{classStudents.map(s => { const inGroup = editingGroup.members.includes(s.id); return ( ); })}
)}
); }; // --- Submissions / management --- const TeacherSubmissions = ({ onOpen }) => { const [tab, setTab] = useState('pending'); const [editing, setEditing] = useState(null); let works = [...DATA.works]; if (tab === 'pending') works = works.filter(w => w.status !== 'graded'); else if (tab === 'graded') works = works.filter(w => w.status === 'graded'); works.sort((a,b)=>b.date.localeCompare(a.date)); return (
ผลงานส่งเข้ามา · submissions
ดู ตรวจ ปรับแก้การส่ง และให้ feedback
{works.map(w => { const cls = H.cls(w.classId); return ( ); })} {works.length === 0 && }
ผลงาน เจ้าของ ห้อง ประเภท ส่งเมื่อ สถานะ การกระทำ · Actions
{w.title}
{w.titleEn}
{w.owners.length>1 && Group}
{cls.label} {H.typeLabel(w.type)} {H.fmtDate(w.date)} {w.status==='graded' ? ✓ ตรวจแล้ว : รอตรวจ}
{editing && ( setEditing(null)}>
แก้ไขการส่งผลงาน · Edit Submission {editing.title}
{editing.owners.map(id=>{ const p = H.person(id); return {p.name} ; })}
เขตอันตราย: ถอนการส่งหรือลบผลงาน — นักเรียนจะถูกแจ้งเตือน
)}
); }; // --- Teacher Profile --- const TeacherProfile = ({ me }) => { const [photoUrl, setPhotoUrl] = useState(me.photo || null); const [showPwModal, setShowPwModal] = useState(false); const fileRef = useRef(null); const onPhotoChange = (e) => { const f = e.target.files?.[0]; if (!f) return; const url = URL.createObjectURL(f); setPhotoUrl(url); me.photo = url; }; const myComments = Object.values(DATA.commentsByWork).flat().filter(c => c.authorId === me.id).length; const reviewed = DATA.works.filter(w => w.status === 'graded').length; return (
{photoUrl ? ( profile ) : (
{me.initial}
)}
ครูประจำวิชา · Art & 2D Animation
{me.name}
{me.nameEn}
ครู · Teacher ID: {me.id} {me.email || me.id+'@cmuds.ac.th'} รับผิดชอบ {DATA.classes.length} ห้อง
ตรวจแล้ว
{reviewed}
คอมเมนต์
{myComments}
กลุ่ม
{DATA.groups.length}
ห้องที่รับผิดชอบ · classes I teach
{DATA.classes.map(c => { const s = DATA.students.filter(x => x.classId === c.id); const w = DATA.works.filter(x => x.classId === c.id); return (
{c.label}
{s.length} นักเรียน · {w.length} ผลงาน
x.id)} max={5} />
); })}
{showPwModal && setShowPwModal(false)} />}
); }; Object.assign(window, { TeacherHome, TeacherGroups, TeacherSubmissions, TeacherProfile });