From b1f82e2f91ba416ade34d43951208854bb4e3701 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?= <76204082+iamsedatozturk@users.noreply.github.com> Date: Tue, 26 Aug 2025 14:08:57 +0300 Subject: [PATCH] =?UTF-8?q?Classroom=20d=C3=BCzenlemesi?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/components/classroom/ClassList.tsx | 229 +++++++++---------- ui/src/components/classroom/Dashboard.tsx | 35 +-- ui/src/components/classroom/RoleSelector.tsx | 2 +- ui/src/proxy/classroom/data.ts | 2 +- ui/src/views/classroom/ClassListPage.tsx | 15 +- ui/src/views/classroom/DashboardPage.tsx | 7 +- 6 files changed, 147 insertions(+), 143 deletions(-) diff --git a/ui/src/components/classroom/ClassList.tsx b/ui/src/components/classroom/ClassList.tsx index e1529466..ce8fad48 100644 --- a/ui/src/components/classroom/ClassList.tsx +++ b/ui/src/components/classroom/ClassList.tsx @@ -16,14 +16,14 @@ import { initialScheduledClasses } from '@/proxy/classroom/data' import { useStoreState } from '@/store/store' import { ROUTES_ENUM } from '@/routes/route.constant' -interface DashboardProps { +interface ClassListProps { onCreateClass: (classData: Partial) => void onJoinClass: (classSession: ClassroomDto) => void onEditClass: (classId: string, classData: Partial) => void onDeleteClass: (classId: string) => void } -export const ClassList: React.FC = ({ +export const ClassList: React.FC = ({ onCreateClass, onJoinClass, onEditClass, @@ -239,33 +239,9 @@ export const ClassList: React.FC = ({ } return ( -
- {/* Header */} -
-
-
-
-

- Sanal Sınıf Dashboard -

-

Hoş geldiniz, {user.name}

-
- {user.role === 'teacher' && ( - - )} -
-
-
- +
{/* Main Content */} -
+
{/* Stats Cards */}
= ({ {/* Scheduled Classes */}
-
+

Programlı Sınıflar

+ {user.role === 'teacher' && ( + + )}
{scheduledClasses.length === 0 ? ( @@ -346,82 +332,54 @@ export const ClassList: React.FC = ({ transition={{ delay: index * 0.1 }} className="border border-gray-200 rounded-lg p-4 sm:p-6 hover:shadow-md transition-shadow" > -
-
-
-

- {classSession.name} -

- - {classSession.isActive - ? 'Aktif' +
+
+

+ {classSession.name} +

+ -
- -

- {classSession.description} -

- -
-
- - - {formatDateTime(classSession.scheduledStartTime)} - -
-
- - {classSession.duration} dakika -
-
- - - {classSession.participantCount}/{classSession.maxParticipants} - -
-
- - - {getTimeUntilClass(classSession.scheduledStartTime)} - -
-
+ ? 'bg-yellow-100 text-yellow-800' + : 'bg-gray-100 text-gray-800' + }`} + > + {classSession.isActive + ? 'Aktif' + : canJoinClass(classSession.scheduledStartTime) + ? 'Katılım Açık' + : 'Beklemede'} +
-
- {user.role === 'teacher' && classSession.teacherId === user.id && ( -
- - -
- )} + {/* Sağ kısım: buton */} + {canJoinClass(classSession.scheduledStartTime) && ( +
+ {user.role === 'teacher' && classSession.teacherId === user.id && ( + <> + + + + )} - {canJoinClass(classSession.scheduledStartTime) && ( - )} +
+ )} +
+ +
+

+ {classSession.description} +

+
+ +
+
+
+ + + {formatDateTime(classSession.scheduledStartTime)} + +
+ +
+ + {classSession.duration} dakika +
+ +
+ + + {classSession.participantCount}/{classSession.maxParticipants} + +
+ +
+ + + {getTimeUntilClass(classSession.scheduledStartTime)} + +
@@ -468,7 +462,7 @@ export const ClassList: React.FC = ({ animate={{ opacity: 1, scale: 1 }} className="bg-white rounded-lg max-w-2xl w-full max-h-[95vh] overflow-y-auto" > -
+

Yeni Sınıf Oluştur

@@ -478,9 +472,10 @@ export const ClassList: React.FC = ({ 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" />
@@ -491,7 +486,7 @@ export const ClassList: React.FC = ({ value={formData.description} onChange={(e) => setFormData({ ...formData, description: e.target.value })} 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..." />
@@ -505,7 +500,7 @@ export const ClassList: React.FC = ({ type="text" value={formData.subject} 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" />
@@ -524,7 +519,7 @@ export const ClassList: React.FC = ({ 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" />
@@ -545,7 +540,7 @@ export const ClassList: React.FC = ({ 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" />
@@ -564,14 +559,14 @@ export const ClassList: React.FC = ({ 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" />
{/* Sınıf Ayarları */}
-

Sınıf Ayarları

+

Sınıf Ayarları

@@ -649,7 +644,7 @@ export const ClassList: React.FC = ({

Varsayılan Ayarlar

-
+
@@ -664,14 +659,14 @@ export const ClassList: React.FC = ({ }, }) } - 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" >
-
+
@@ -686,14 +681,14 @@ export const ClassList: React.FC = ({ }, }) } - 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" >
-
+
@@ -708,7 +703,7 @@ export const ClassList: React.FC = ({ }, }) } - 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" > diff --git a/ui/src/components/classroom/Dashboard.tsx b/ui/src/components/classroom/Dashboard.tsx index c946d9eb..afe1a821 100644 --- a/ui/src/components/classroom/Dashboard.tsx +++ b/ui/src/components/classroom/Dashboard.tsx @@ -6,30 +6,31 @@ import { ROUTES_ENUM } from '@/routes/route.constant' import { Room } from './Room' export function Dashboard() { - const { - roleState, - currentClass, - handleRoleSelect, - handleJoinClass, - handleLeaveClass, - handleCreateClass, - handleEditClass, - handleDeleteClass, - } = useClassroomLogic() + const { roleState, currentClass, handleRoleSelect, handleLeaveClass } = useClassroomLogic() const navigate = useNavigate() + // Eğer dashboard seçildiyse otomatik yönlendirme yap useEffect(() => { if (roleState === 'dashboard') { navigate(ROUTES_ENUM.protected.admin.classroom.classes, { replace: true }) } }, [roleState, navigate]) - if (roleState === 'role-selection') { - return - } else if (roleState === 'dashboard') { - return null - } else if (roleState === 'classroom' && currentClass) { - return + // Render edilecek içerik + const renderContent = () => { + switch (roleState) { + case 'role-selection': + return + + case 'classroom': + return currentClass ? ( + + ) : null + + default: + return null + } } - return null + + return renderContent() } diff --git a/ui/src/components/classroom/RoleSelector.tsx b/ui/src/components/classroom/RoleSelector.tsx index 1905bfef..6df2ea09 100644 --- a/ui/src/components/classroom/RoleSelector.tsx +++ b/ui/src/components/classroom/RoleSelector.tsx @@ -9,7 +9,7 @@ interface RoleSelectorProps { export const RoleSelector: React.FC = ({ onRoleSelect }) => { return ( -
+
{ return ( - {}} - onJoinClass={() => {}} - onEditClass={() => {}} - onDeleteClass={() => {}} - /> + + {}} + onJoinClass={() => {}} + onEditClass={() => {}} + onDeleteClass={() => {}} + /> + ) } diff --git a/ui/src/views/classroom/DashboardPage.tsx b/ui/src/views/classroom/DashboardPage.tsx index 983f3aa0..e1d5dc97 100644 --- a/ui/src/views/classroom/DashboardPage.tsx +++ b/ui/src/views/classroom/DashboardPage.tsx @@ -1,8 +1,13 @@ import React from 'react' import { Dashboard } from '@/components/classroom/Dashboard' +import { Container } from '@/components/shared' const DashboardPage: React.FC = () => { - return + return ( + + + + ) } export default DashboardPage