sozsoft/erp-platform
1
0
Fork 0
Code Issues 6 Pull requests Projects 3 Releases Packages Wiki Activity Actions

Classroom düzenlemesi

Browse source
This commit is contained in:
Sedat ÖZTÜRK 2025-08-26 14:08:57 +03:00
parent bfbdbced7d
commit b1f82e2f91
6 changed files with 147 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

229
ui/src/components/classroom/ClassList.tsx
View file

@ -16,14 +16,14 @@ import { initialScheduledClasses } from '@/proxy/classroom/data'
import { useStoreState } from '@/store/store' import { useStoreState } from '@/store/store'
import { ROUTES_ENUM } from '@/routes/route.constant' import { ROUTES_ENUM } from '@/routes/route.constant'
interface DashboardProps { interface ClassListProps {
onCreateClass: (classData: Partial<ClassroomDto>) => void onCreateClass: (classData: Partial<ClassroomDto>) => void
onJoinClass: (classSession: ClassroomDto) => void onJoinClass: (classSession: ClassroomDto) => void
onEditClass: (classId: string, classData: Partial<ClassroomDto>) => void onEditClass: (classId: string, classData: Partial<ClassroomDto>) => void
onDeleteClass: (classId: string) => void onDeleteClass: (classId: string) => void
} }
export const ClassList: React.FC<DashboardProps> = ({ export const ClassList: React.FC<ClassListProps> = ({
onCreateClass, onCreateClass,
onJoinClass, onJoinClass,
onEditClass, onEditClass,
@ -239,33 +239,9 @@ export const ClassList: React.FC<DashboardProps> = ({
} }
return ( return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100"> <div>
{/* Header */}
<div className="bg-white shadow-sm border-b border-gray-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div>
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900">
Sanal Sınıf Dashboard
</h1>
<p className="text-gray-600">Hoş geldiniz, {user.name}</p>
</div>
{user.role === 'teacher' && (
<button
onClick={() => setShowCreateModal(true)}
className="flex items-center justify-center space-x-2 bg-blue-600 text-white px-4 sm:px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors w-full sm:w-auto"
>
<FaPlus size={20} />
<span className="hidden sm:inline">Yeni Sınıf Oluştur</span>
<span className="sm:hidden">Yeni Sınıf</span>
</button>
)}
</div>
</div>
</div>
{/* Main Content */} {/* Main Content */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <div className="mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Stats Cards */} {/* Stats Cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8">
<motion.div <motion.div
@ -327,8 +303,18 @@ export const ClassList: React.FC<DashboardProps> = ({
{/* Scheduled Classes */} {/* Scheduled Classes */}
<div className="bg-white rounded-lg shadow-md"> <div className="bg-white rounded-lg shadow-md">
<div className="px-4 sm:px-6 py-4 border-b border-gray-200"> <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-4 sm:px-6 border-b border-gray-200">
<h2 className="text-lg sm:text-xl font-semibold text-gray-900">Programlı Sınıflar</h2> <h2 className="text-lg sm:text-xl font-semibold text-gray-900">Programlı Sınıflar</h2>
{user.role === 'teacher' && (
<button
onClick={() => setShowCreateModal(true)}
className="flex items-center justify-center space-x-2 bg-blue-600 text-white px-3 sm:px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors sm:w-auto"
>
<FaPlus size={15} />
<span className="hidden sm:inline">Yeni Sınıf Oluştur</span>
<span className="sm:hidden">Yeni Sınıf</span>
</button>
)}
</div> </div>
<div className="p-4 sm:p-6"> <div className="p-4 sm:p-6">
{scheduledClasses.length === 0 ? ( {scheduledClasses.length === 0 ? (
@ -346,82 +332,54 @@ export const ClassList: React.FC<DashboardProps> = ({
transition={{ delay: index * 0.1 }} transition={{ delay: index * 0.1 }}
className="border border-gray-200 rounded-lg p-4 sm:p-6 hover:shadow-md transition-shadow" className="border border-gray-200 rounded-lg p-4 sm:p-6 hover:shadow-md transition-shadow"
> >
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between space-y-4 lg:space-y-0"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-2">
<div className="flex-1"> <div className="flex items-center space-x-3">
<div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-3 mb-2"> <h3 className="text-base sm:text-lg font-semibold text-gray-900 break-words">
<h3 className="text-base sm:text-lg font-semibold text-gray-900 break-words"> {classSession.name}
{classSession.name} </h3>
</h3> <span
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
className={`px-2 py-1 rounded-full text-xs font-medium self-start ${ classSession.isActive
classSession.isActive ? 'bg-green-100 text-green-800'
? 'bg-green-100 text-green-800'
: canJoinClass(classSession.scheduledStartTime)
? 'bg-yellow-100 text-yellow-800'
: 'bg-gray-100 text-gray-800'
}`}
>
{classSession.isActive
? 'Aktif'
: canJoinClass(classSession.scheduledStartTime) : canJoinClass(classSession.scheduledStartTime)
? 'Katılım Açık' ? 'bg-yellow-100 text-yellow-800'
: 'Beklemede'} : 'bg-gray-100 text-gray-800'
</span> }`}
</div> >
{classSession.isActive
<p className="text-gray-600 mb-3 text-sm sm:text-base"> ? 'Aktif'
{classSession.description} : canJoinClass(classSession.scheduledStartTime)
</p> ? 'Katılım Açık'
: 'Beklemede'}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-4 text-xs sm:text-sm text-gray-600"> </span>
<div className="flex items-center space-x-2">
<FaCalendarAlt size={12} className="flex-shrink-0" />
<span className="truncate">
{formatDateTime(classSession.scheduledStartTime)}
</span>
</div>
<div className="flex items-center space-x-2">
<FaClock size={12} className="flex-shrink-0" />
<span>{classSession.duration} dakika</span>
</div>
<div className="flex items-center space-x-2">
<FaUsers size={12} className="flex-shrink-0" />
<span>
{classSession.participantCount}/{classSession.maxParticipants}
</span>
</div>
<div className="flex items-center space-x-2">
<FaEye size={12} className="flex-shrink-0" />
<span className="truncate">
{getTimeUntilClass(classSession.scheduledStartTime)}
</span>
</div>
</div>
</div> </div>
<div className="flex flex-col sm:flex-row items-stretch sm:items-center space-y-2 sm:space-y-0 sm:space-x-2 lg:ml-4 w-full lg:w-auto"> {/* Sağ kısım: buton */}
{user.role === 'teacher' && classSession.teacherId === user.id && ( {canJoinClass(classSession.scheduledStartTime) && (
<div className="flex space-x-2"> <div className="flex space-x-2">
<button {user.role === 'teacher' && classSession.teacherId === user.id && (
onClick={() => openEditModal(classSession)} <>
disabled={classSession.isActive} <button
className="p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0" onClick={() => openEditModal(classSession)}
title="Sınıfı Düzenle" disabled={classSession.isActive}
> className="flex px-3 sm:px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700"
<FaEdit size={14} /> title="Sınıfı Düzenle"
</button> >
<button <FaEdit size={14} />
onClick={() => openDeleteModal(classSession)} Düzenle
disabled={classSession.isActive} </button>
className="p-2 text-gray-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0" <button
title="Sınıfı Sil" onClick={() => openDeleteModal(classSession)}
> disabled={classSession.isActive}
<FaTrash size={14} /> className="flex px-3 sm:px-4 py-2 rounded-lg bg-red-600 text-white hover:bg-red-700"
</button> title="Sınıfı Sil"
</div> >
)} <FaTrash size={14} />
Sil
</button>
</>
)}
{canJoinClass(classSession.scheduledStartTime) && (
<button <button
onClick={() => onClick={() =>
user.role === 'teacher' && classSession.teacherId === user.id user.role === 'teacher' && classSession.teacherId === user.id
@ -437,7 +395,7 @@ export const ClassList: React.FC<DashboardProps> = ({
) )
})() })()
} }
className={`px-3 sm:px-4 py-2 rounded-lg font-medium transition-colors text-sm sm:text-base w-full sm:w-auto ${ className={`px-3 sm:px-4 py-2 rounded-lg transition-colors ${
user.role === 'teacher' && classSession.teacherId === user.id user.role === 'teacher' && classSession.teacherId === user.id
? 'bg-green-600 text-white hover:bg-green-700' ? 'bg-green-600 text-white hover:bg-green-700'
: 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-blue-600 text-white hover:bg-blue-700'
@ -449,7 +407,43 @@ export const ClassList: React.FC<DashboardProps> = ({
: 'Dersi Başlat' : 'Dersi Başlat'
: 'Katıl'} : 'Katıl'}
</button> </button>
)} </div>
)}
</div>
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
<p className="text-gray-600 mb-3 text-sm sm:text-base">
{classSession.description}
</p>
</div>
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
<div className="grid grid-cols-4 gap-3 w-full text-xs sm:text-sm text-gray-600">
<div className="col-span-1 flex items-center gap-2 px-3 py-2 rounded-lg">
<FaCalendarAlt size={14} className="text-gray-500" />
<span className="truncate">
{formatDateTime(classSession.scheduledStartTime)}
</span>
</div>
<div className="col-span-1 flex items-center gap-2 px-3 py-2 rounded-lg">
<FaClock size={14} className="text-gray-500" />
<span>{classSession.duration} dakika</span>
</div>
<div className="col-span-1 flex items-center gap-2 px-3 py-2 rounded-lg">
<FaUsers size={14} className="text-gray-500" />
<span>
{classSession.participantCount}/{classSession.maxParticipants}
</span>
</div>
<div className="col-span-1 flex items-center gap-2 px-3 py-2 rounded-lg">
<FaEye size={14} className="text-gray-500" />
<span className="truncate">
{getTimeUntilClass(classSession.scheduledStartTime)}
</span>
</div>
</div> </div>
</div> </div>
</motion.div> </motion.div>
@ -468,7 +462,7 @@ export const ClassList: React.FC<DashboardProps> = ({
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
className="bg-white rounded-lg max-w-2xl w-full max-h-[95vh] overflow-y-auto" className="bg-white rounded-lg max-w-2xl w-full max-h-[95vh] overflow-y-auto"
> >
<div className="p-4 sm:p-6 border-b border-gray-200"> <div className="p-3 sm:p-3 border-b border-gray-200">
<h2 className="text-xl sm:text-2xl font-bold text-gray-900">Yeni Sınıf Oluştur</h2> <h2 className="text-xl sm:text-2xl font-bold text-gray-900">Yeni Sınıf Oluştur</h2>
</div> </div>
@ -478,9 +472,10 @@ export const ClassList: React.FC<DashboardProps> = ({
<input <input
type="text" type="text"
required required
autoFocus
value={formData.name} value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })} onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Örn: Matematik 101 - Diferansiyel Denklemler" placeholder="Örn: Matematik 101 - Diferansiyel Denklemler"
/> />
</div> </div>
@ -491,7 +486,7 @@ export const ClassList: React.FC<DashboardProps> = ({
value={formData.description} value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })} onChange={(e) => setFormData({ ...formData, description: e.target.value })}
rows={3} rows={3}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Ders hakkında kısa açıklama..." placeholder="Ders hakkında kısa açıklama..."
/> />
</div> </div>
@ -505,7 +500,7 @@ export const ClassList: React.FC<DashboardProps> = ({
type="text" type="text"
value={formData.subject} value={formData.subject}
onChange={(e) => setFormData({ ...formData, subject: e.target.value })} onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Örn: Matematik, Fizik, Kimya" placeholder="Örn: Matematik, Fizik, Kimya"
/> />
</div> </div>
@ -524,7 +519,7 @@ export const ClassList: React.FC<DashboardProps> = ({
scheduledStartTime: e.target.value, scheduledStartTime: e.target.value,
}) })
} }
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/> />
</div> </div>
</div> </div>
@ -545,7 +540,7 @@ export const ClassList: React.FC<DashboardProps> = ({
duration: parseInt(e.target.value), duration: parseInt(e.target.value),
}) })
} }
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/> />
</div> </div>
@ -564,14 +559,14 @@ export const ClassList: React.FC<DashboardProps> = ({
maxParticipants: parseInt(e.target.value), maxParticipants: parseInt(e.target.value),
}) })
} }
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/> />
</div> </div>
</div> </div>
{/* Sınıf Ayarları */} {/* Sınıf Ayarları */}
<div> <div>
<h3 className="text-lg font-semibold text-gray-800 mb-4">Sınıf Ayarları</h3> <h3 className="text-lg font-semibold text-gray-800 mb-2">Sınıf Ayarları</h3>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
<div className="space-y-4"> <div className="space-y-4">
@ -649,7 +644,7 @@ export const ClassList: React.FC<DashboardProps> = ({
<div className="space-y-4"> <div className="space-y-4">
<h4 className="font-medium text-gray-700">Varsayılan Ayarlar</h4> <h4 className="font-medium text-gray-700">Varsayılan Ayarlar</h4>
<div> <div className="flex items-center justify-between">
<label className="block text-sm font-medium text-gray-700 mb-1"> <label className="block text-sm font-medium text-gray-700 mb-1">
Varsayılan mikrofon durumu Varsayılan mikrofon durumu
</label> </label>
@ -664,14 +659,14 @@ export const ClassList: React.FC<DashboardProps> = ({
}, },
}) })
} }
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
> >
<option value="muted">Kapalı</option> <option value="muted">Kapalı</option>
<option value="unmuted">Açık</option> <option value="unmuted">Açık</option>
</select> </select>
</div> </div>
<div> <div className="flex items-center justify-between">
<label className="block text-sm font-medium text-gray-700 mb-1"> <label className="block text-sm font-medium text-gray-700 mb-1">
Varsayılan kamera durumu Varsayılan kamera durumu
</label> </label>
@ -686,14 +681,14 @@ export const ClassList: React.FC<DashboardProps> = ({
}, },
}) })
} }
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
> >
<option value="on">Açık</option> <option value="on">Açık</option>
<option value="off">Kapalı</option> <option value="off">Kapalı</option>
</select> </select>
</div> </div>
<div> <div className="flex items-center justify-between">
<label className="block text-sm font-medium text-gray-700 mb-1"> <label className="block text-sm font-medium text-gray-700 mb-1">
Varsayılan layout Varsayılan layout
</label> </label>
@ -708,7 +703,7 @@ export const ClassList: React.FC<DashboardProps> = ({
}, },
}) })
} }
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
> >
<option value="grid">Izgara Görünümü</option> <option value="grid">Izgara Görünümü</option>
<option value="teacher-focus">Öğretmen Odaklı</option> <option value="teacher-focus">Öğretmen Odaklı</option>

35
ui/src/components/classroom/Dashboard.tsx
View file

@ -6,30 +6,31 @@ import { ROUTES_ENUM } from '@/routes/route.constant'
import { Room } from './Room' import { Room } from './Room'
export function Dashboard() { export function Dashboard() {
const { const { roleState, currentClass, handleRoleSelect, handleLeaveClass } = useClassroomLogic()
roleState,
currentClass,
handleRoleSelect,
handleJoinClass,
handleLeaveClass,
handleCreateClass,
handleEditClass,
handleDeleteClass,
} = useClassroomLogic()
const navigate = useNavigate() const navigate = useNavigate()
// Eğer dashboard seçildiyse otomatik yönlendirme yap
useEffect(() => { useEffect(() => {
if (roleState === 'dashboard') { if (roleState === 'dashboard') {
navigate(ROUTES_ENUM.protected.admin.classroom.classes, { replace: true }) navigate(ROUTES_ENUM.protected.admin.classroom.classes, { replace: true })
} }
}, [roleState, navigate]) }, [roleState, navigate])
if (roleState === 'role-selection') { // Render edilecek içerik
return <RoleSelector onRoleSelect={handleRoleSelect} /> const renderContent = () => {
} else if (roleState === 'dashboard') { switch (roleState) {
return null case 'role-selection':
} else if (roleState === 'classroom' && currentClass) { return <RoleSelector onRoleSelect={handleRoleSelect} />
return <Room classSession={currentClass} onLeaveClass={handleLeaveClass} />
case 'classroom':
return currentClass ? (
<Room classSession={currentClass} onLeaveClass={handleLeaveClass} />
) : null
default:
return null
}
} }
return null
return renderContent()
} }

2
ui/src/components/classroom/RoleSelector.tsx
View file

@ -9,7 +9,7 @@ interface RoleSelectorProps {
export const RoleSelector: React.FC<RoleSelectorProps> = ({ onRoleSelect }) => { export const RoleSelector: React.FC<RoleSelectorProps> = ({ onRoleSelect }) => {
return ( return (
<div className="min-h-screen flex items-center justify-center p-4"> <div className="flex items-center justify-center p-4">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}

2
ui/src/proxy/classroom/data.ts
View file

@ -3,7 +3,7 @@ export const initialScheduledClasses = [
id: '1', id: '1',
name: 'Matematik 101 - Diferansiyel Denklemler', name: 'Matematik 101 - Diferansiyel Denklemler',
description: 'İleri matematik konuları ve uygulamaları', description: 'İleri matematik konuları ve uygulamaları',
teacherId: 'teacher1', teacherId: '0cc64443-fe3b-5f2c-bb22-3a1bf7acd82a',
teacherName: 'Prof. Dr. Mehmet Özkan', teacherName: 'Prof. Dr. Mehmet Özkan',
scheduledStartTime: new Date(Date.now() - 300000).toISOString(), // 5 minutes ago (can join) scheduledStartTime: new Date(Date.now() - 300000).toISOString(), // 5 minutes ago (can join)
startTime: '', startTime: '',

15
ui/src/views/classroom/ClassListPage.tsx
View file

@ -1,14 +1,17 @@
import { ClassList } from '@/components/classroom/ClassList' import { ClassList } from '@/components/classroom/ClassList'
import { Container } from '@/components/shared'
import React from 'react' import React from 'react'
const ClassListPage: React.FC = () => { const ClassListPage: React.FC = () => {
return ( return (
<ClassList <Container>
onCreateClass={() => {}} <ClassList
onJoinClass={() => {}} onCreateClass={() => {}}
onEditClass={() => {}} onJoinClass={() => {}}
onDeleteClass={() => {}} onEditClass={() => {}}
/> onDeleteClass={() => {}}
/>
</Container>
) )
} }

7
ui/src/views/classroom/DashboardPage.tsx
View file

@ -1,8 +1,13 @@
import React from 'react' import React from 'react'
import { Dashboard } from '@/components/classroom/Dashboard' import { Dashboard } from '@/components/classroom/Dashboard'
import { Container } from '@/components/shared'
const DashboardPage: React.FC = () => { const DashboardPage: React.FC = () => {
return <Dashboard /> return (
<Container>
<Dashboard />
</Container>
)
} }
export default DashboardPage export default DashboardPage