mirror of
https://github.com/th30d4y/OpenLearnX.git
synced 2026-05-26 19:26:33 +00:00
panel & coding
This commit is contained in:
5t4l1n
@@ -1,87 +1,114 @@
|
||||
'use client'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import { useRouter, useParams } from 'next/navigation'
|
||||
import {
|
||||
Users, Trophy, Clock, Play, Square, UserX, AlertTriangle,
|
||||
RefreshCw, Settings, BarChart, Eye, Trash2, Plus, Timer
|
||||
Users,
|
||||
Trophy,
|
||||
Clock,
|
||||
Play,
|
||||
Pause,
|
||||
Square,
|
||||
UserMinus,
|
||||
RefreshCw,
|
||||
Settings,
|
||||
Monitor,
|
||||
AlertCircle
|
||||
} from 'lucide-react'
|
||||
|
||||
interface Participant {
|
||||
name: string
|
||||
joined_at: string
|
||||
score: number
|
||||
completed: boolean
|
||||
language?: string
|
||||
submission_time?: string
|
||||
rank?: number
|
||||
kicked?: boolean
|
||||
submitted_at?: string
|
||||
joined_at: string
|
||||
}
|
||||
|
||||
interface ExamData {
|
||||
exam_info: {
|
||||
exam_code: string
|
||||
title: string
|
||||
status: string
|
||||
duration_minutes: number
|
||||
max_participants: number
|
||||
time_elapsed: number
|
||||
time_remaining: number
|
||||
start_time?: string
|
||||
end_time?: string
|
||||
}
|
||||
participants: {
|
||||
total: number
|
||||
completed: number
|
||||
working: number
|
||||
all_participants: Participant[]
|
||||
recent_joins: Participant[]
|
||||
}
|
||||
leaderboard: Participant[]
|
||||
statistics: {
|
||||
average_score: number
|
||||
highest_score: number
|
||||
lowest_score: number
|
||||
completion_rate: number
|
||||
}
|
||||
interface ExamInfo {
|
||||
title: string
|
||||
status: 'waiting' | 'active' | 'completed'
|
||||
duration_minutes: number
|
||||
participants_count: number
|
||||
max_participants: number
|
||||
problem_title: string
|
||||
languages: string[]
|
||||
created_at: string
|
||||
host_name: string
|
||||
}
|
||||
|
||||
export default function HostDashboard() {
|
||||
export default function HostPanel() {
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
const examCode = params.examCode as string
|
||||
|
||||
const [examData, setExamData] = useState<ExamData | null>(null)
|
||||
const [examInfo, setExamInfo] = useState<ExamInfo | null>(null)
|
||||
const [participants, setParticipants] = useState<Participant[]>([])
|
||||
const [leaderboard, setLeaderboard] = useState<Participant[]>([])
|
||||
const [timeRemaining, setTimeRemaining] = useState(0)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [activeTab, setActiveTab] = useState<'overview' | 'participants' | 'leaderboard' | 'settings'>('overview')
|
||||
const [selectedParticipant, setSelectedParticipant] = useState<string | null>(null)
|
||||
const [showKickModal, setShowKickModal] = useState(false)
|
||||
const [refreshInterval, setRefreshInterval] = useState(3000) // 3 seconds
|
||||
const [error, setError] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
if (!examCode) return
|
||||
if (examCode) {
|
||||
fetchExamInfo()
|
||||
fetchParticipants()
|
||||
fetchLeaderboard()
|
||||
|
||||
// Auto-refresh every 5 seconds
|
||||
const interval = setInterval(() => {
|
||||
fetchParticipants()
|
||||
fetchLeaderboard()
|
||||
}, 5000)
|
||||
|
||||
fetchDashboardData()
|
||||
const interval = setInterval(fetchDashboardData, refreshInterval)
|
||||
return () => clearInterval(interval)
|
||||
}, [examCode, refreshInterval])
|
||||
return () => clearInterval(interval)
|
||||
}
|
||||
}, [examCode])
|
||||
|
||||
const fetchDashboardData = async () => {
|
||||
const fetchExamInfo = async () => {
|
||||
try {
|
||||
const response = await fetch(`http://127.0.0.1:5000/api/exam/host-dashboard/${examCode}`)
|
||||
const response = await fetch(`http://127.0.0.1:5000/api/exam/info/${examCode}`)
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setExamData(data)
|
||||
setExamInfo(data.exam_info)
|
||||
if (data.exam_info.status === 'active') {
|
||||
startTimer(data.exam_info.duration_minutes * 60)
|
||||
}
|
||||
} else {
|
||||
console.error('Failed to fetch dashboard data:', data.error)
|
||||
setError('Failed to load exam information')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching dashboard data:', error)
|
||||
setError('Network error')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchParticipants = async () => {
|
||||
try {
|
||||
const response = await fetch(`http://127.0.0.1:5000/api/exam/participants/${examCode}`)
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setParticipants(data.participants)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch participants')
|
||||
}
|
||||
}
|
||||
|
||||
const fetchLeaderboard = async () => {
|
||||
try {
|
||||
const response = await fetch(`http://127.0.0.1:5000/api/exam/leaderboard/${examCode}`)
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setLeaderboard(data.leaderboard)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch leaderboard')
|
||||
}
|
||||
}
|
||||
|
||||
const startExam = async () => {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/start-exam', {
|
||||
@@ -89,91 +116,85 @@ export default function HostDashboard() {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ exam_code: examCode })
|
||||
})
|
||||
|
||||
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
alert('Exam started successfully!')
|
||||
fetchDashboardData()
|
||||
setExamInfo(prev => prev ? { ...prev, status: 'active' } : null)
|
||||
startTimer(examInfo?.duration_minutes ? examInfo.duration_minutes * 60 : 1800)
|
||||
alert('✅ Exam started! Participants can now begin coding.')
|
||||
} else {
|
||||
alert(`Failed to start exam: ${data.error}`)
|
||||
alert(`❌ Failed to start exam: ${data.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to start exam')
|
||||
alert('❌ Network error occurred')
|
||||
}
|
||||
}
|
||||
|
||||
const endExam = async () => {
|
||||
if (!confirm('Are you sure you want to end the exam? This cannot be undone.')) return
|
||||
|
||||
const stopExam = async () => {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/end-exam', {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/stop-exam', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ exam_code: examCode })
|
||||
})
|
||||
|
||||
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
alert('Exam ended successfully!')
|
||||
fetchDashboardData()
|
||||
setExamInfo(prev => prev ? { ...prev, status: 'completed' } : null)
|
||||
setTimeRemaining(0)
|
||||
alert('🛑 Exam stopped successfully!')
|
||||
} else {
|
||||
alert(`Failed to end exam: ${data.error}`)
|
||||
alert(`❌ Failed to stop exam: ${data.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to end exam')
|
||||
}
|
||||
}
|
||||
|
||||
const extendExam = async (minutes: number) => {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/extend-exam', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
exam_code: examCode,
|
||||
additional_minutes: minutes
|
||||
})
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
alert(`Exam extended by ${minutes} minutes!`)
|
||||
fetchDashboardData()
|
||||
} else {
|
||||
alert(`Failed to extend exam: ${data.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to extend exam')
|
||||
alert('❌ Network error occurred')
|
||||
}
|
||||
}
|
||||
|
||||
const removeParticipant = async (participantName: string) => {
|
||||
if (!confirm(`Are you sure you want to remove "${participantName}" from the exam?`)) return
|
||||
if (!confirm(`Are you sure you want to remove "${participantName}" from the exam?`)) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/remove-participant', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
body: JSON.stringify({
|
||||
exam_code: examCode,
|
||||
participant_name: participantName
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
alert(`Participant "${participantName}" removed successfully!`)
|
||||
fetchDashboardData()
|
||||
setShowKickModal(false)
|
||||
setSelectedParticipant(null)
|
||||
alert(`✅ Removed "${participantName}" from the exam`)
|
||||
fetchParticipants()
|
||||
fetchLeaderboard()
|
||||
} else {
|
||||
alert(`Failed to remove participant: ${data.error}`)
|
||||
alert(`❌ Failed to remove participant: ${data.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to remove participant')
|
||||
alert('❌ Network error occurred')
|
||||
}
|
||||
}
|
||||
|
||||
const startTimer = (seconds: number) => {
|
||||
setTimeRemaining(seconds)
|
||||
|
||||
const timer = setInterval(() => {
|
||||
setTimeRemaining(prev => {
|
||||
if (prev <= 1) {
|
||||
clearInterval(timer)
|
||||
alert('⏰ Time is up! Exam has ended.')
|
||||
setExamInfo(prev => prev ? { ...prev, status: 'completed' } : null)
|
||||
return 0
|
||||
}
|
||||
return prev - 1
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const formatTime = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60)
|
||||
const secs = seconds % 60
|
||||
@@ -182,10 +203,10 @@ export default function HostDashboard() {
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'waiting': return 'bg-yellow-100 text-yellow-800'
|
||||
case 'active': return 'bg-green-100 text-green-800'
|
||||
case 'completed': return 'bg-gray-100 text-gray-800'
|
||||
default: return 'bg-gray-100 text-gray-800'
|
||||
case 'waiting': return 'bg-yellow-600'
|
||||
case 'active': return 'bg-green-600'
|
||||
case 'completed': return 'bg-red-600'
|
||||
default: return 'bg-gray-600'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -193,25 +214,25 @@ export default function HostDashboard() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
|
||||
<p className="mt-2 text-gray-400">Loading host dashboard...</p>
|
||||
<RefreshCw className="h-8 w-8 animate-spin mx-auto mb-4" />
|
||||
<p>Loading host panel...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!examData) {
|
||||
if (error || !examInfo) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<AlertTriangle className="h-12 w-12 text-red-400 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-bold mb-2">Exam Not Found</h2>
|
||||
<p className="text-gray-400">The exam code "{examCode}" is invalid or expired.</p>
|
||||
<AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
|
||||
<h1 className="text-2xl font-bold mb-2">Error</h1>
|
||||
<p className="text-gray-400 mb-4">{error || 'Exam not found'}</p>
|
||||
<button
|
||||
onClick={() => router.push('/coding/create')}
|
||||
className="mt-4 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded"
|
||||
onClick={() => router.push('/coding')}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded"
|
||||
>
|
||||
Create New Exam
|
||||
Back to Home
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -221,377 +242,247 @@ export default function HostDashboard() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white">
|
||||
{/* Header */}
|
||||
<div className="bg-gray-800 border-b border-gray-700 p-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">{examData.exam_info.title}</h1>
|
||||
<div className="flex items-center space-x-4 mt-2">
|
||||
<span className="text-lg font-mono font-bold text-blue-400">
|
||||
CODE: {examData.exam_info.exam_code}
|
||||
</span>
|
||||
<span className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(examData.exam_info.status)}`}>
|
||||
{examData.exam_info.status.toUpperCase()}
|
||||
</span>
|
||||
<span className="text-gray-400">
|
||||
{examData.participants.total}/{examData.exam_info.max_participants} participants
|
||||
</span>
|
||||
<div className="bg-gray-800 border-b border-gray-700 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold flex items-center space-x-2">
|
||||
<Monitor className="h-6 w-6" />
|
||||
<span>Host Panel</span>
|
||||
</h1>
|
||||
<p className="text-gray-400">Managing exam: {examCode}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(examInfo.status)}`}>
|
||||
{examInfo.status.toUpperCase()}
|
||||
</div>
|
||||
|
||||
{timeRemaining > 0 && (
|
||||
<div className="flex items-center space-x-2 bg-gray-700 px-3 py-1 rounded">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span className="font-mono text-lg">{formatTime(timeRemaining)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 p-6">
|
||||
{/* Exam Info Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Users className="h-8 w-8 text-blue-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Participants</p>
|
||||
<p className="text-2xl font-bold">{examInfo.participants_count}/{examInfo.max_participants}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* Timer */}
|
||||
{examData.exam_info.status === 'active' && examData.exam_info.time_remaining > 0 && (
|
||||
<div className="flex items-center space-x-2 bg-red-900 px-4 py-2 rounded-lg">
|
||||
<Clock className="h-5 w-5 text-red-400" />
|
||||
<span className="font-mono text-lg">{formatTime(examData.exam_info.time_remaining)}</span>
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Clock className="h-8 w-8 text-green-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Duration</p>
|
||||
<p className="text-2xl font-bold">{examInfo.duration_minutes}m</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Control Buttons */}
|
||||
{examData.exam_info.status === 'waiting' && (
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Trophy className="h-8 w-8 text-yellow-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Completed</p>
|
||||
<p className="text-2xl font-bold">{leaderboard.filter(p => p.completed).length}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Settings className="h-8 w-8 text-purple-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Problem</p>
|
||||
<p className="text-lg font-bold">{examInfo.problem_title}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Control Panel */}
|
||||
<div className="bg-gray-800 rounded-lg p-6 mb-8">
|
||||
<h2 className="text-xl font-bold mb-4">Exam Controls</h2>
|
||||
|
||||
<div className="flex space-x-4">
|
||||
{examInfo.status === 'waiting' && (
|
||||
<button
|
||||
onClick={startExam}
|
||||
className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg flex items-center space-x-2"
|
||||
className="bg-green-600 hover:bg-green-700 px-6 py-2 rounded flex items-center space-x-2"
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
<span>Start Exam</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{examData.exam_info.status === 'active' && (
|
||||
<div className="flex space-x-2">
|
||||
{examInfo.status === 'active' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => extendExam(10)}
|
||||
className="bg-yellow-600 hover:bg-yellow-700 px-3 py-2 rounded flex items-center space-x-1"
|
||||
>
|
||||
<Timer className="h-4 w-4" />
|
||||
<span>+10min</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={endExam}
|
||||
className="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg flex items-center space-x-2"
|
||||
onClick={stopExam}
|
||||
className="bg-red-600 hover:bg-red-700 px-6 py-2 rounded flex items-center space-x-2"
|
||||
>
|
||||
<Square className="h-4 w-4" />
|
||||
<span>End Exam</span>
|
||||
<span>Stop Exam</span>
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={fetchDashboardData}
|
||||
className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded"
|
||||
title="Refresh"
|
||||
onClick={() => {
|
||||
fetchParticipants()
|
||||
fetchLeaderboard()
|
||||
}}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded flex items-center space-x-2"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
<span>Refresh Data</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(examCode)
|
||||
alert('Exam code copied to clipboard!')
|
||||
}}
|
||||
className="bg-purple-600 hover:bg-purple-700 px-6 py-2 rounded"
|
||||
>
|
||||
Copy Exam Code
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto p-6">
|
||||
{/* Tab Navigation */}
|
||||
<div className="flex space-x-1 mb-6">
|
||||
{[
|
||||
{ id: 'overview', label: 'Overview', icon: BarChart },
|
||||
{ id: 'participants', label: 'Participants', icon: Users },
|
||||
{ id: 'leaderboard', label: 'Leaderboard', icon: Trophy },
|
||||
{ id: 'settings', label: 'Settings', icon: Settings }
|
||||
].map(tab => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id as any)}
|
||||
className={`px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors ${
|
||||
activeTab === tab.id
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<tab.icon className="h-4 w-4" />
|
||||
<span>{tab.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
{activeTab === 'overview' && (
|
||||
<div className="space-y-6">
|
||||
{/* Statistics Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-400">Total Participants</h3>
|
||||
<p className="text-3xl font-bold text-blue-400">{examData.participants.total}</p>
|
||||
</div>
|
||||
<Users className="h-8 w-8 text-blue-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-400">Completed</h3>
|
||||
<p className="text-3xl font-bold text-green-400">{examData.participants.completed}</p>
|
||||
</div>
|
||||
<Trophy className="h-8 w-8 text-green-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-400">Still Working</h3>
|
||||
<p className="text-3xl font-bold text-yellow-400">{examData.participants.working}</p>
|
||||
</div>
|
||||
<Clock className="h-8 w-8 text-yellow-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-400">Average Score</h3>
|
||||
<p className="text-3xl font-bold text-purple-400">
|
||||
{Math.round(examData.statistics.average_score)}%
|
||||
</p>
|
||||
</div>
|
||||
<BarChart className="h-8 w-8 text-purple-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Activity */}
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<h3 className="text-lg font-bold mb-4">Recent Participants</h3>
|
||||
<div className="space-y-2">
|
||||
{examData.participants.recent_joins.slice(0, 5).map((participant, index) => (
|
||||
<div key={participant.name} className="flex items-center justify-between p-3 bg-gray-700 rounded">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-sm font-bold">
|
||||
{participant.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium">{participant.name}</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
Joined {new Date(participant.joined_at).toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className={`px-2 py-1 rounded text-xs ${
|
||||
participant.completed ? 'bg-green-900 text-green-200' : 'bg-yellow-900 text-yellow-200'
|
||||
}`}>
|
||||
{participant.completed ? `${participant.score}% completed` : 'Working'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'participants' && (
|
||||
<div className="bg-gray-800 rounded-lg overflow-hidden">
|
||||
<div className="p-6 border-b border-gray-700">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-lg font-bold">All Participants ({examData.participants.total})</h3>
|
||||
<div className="text-sm text-gray-400">
|
||||
Completion Rate: {Math.round(examData.statistics.completion_rate)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Participants List */}
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<h2 className="text-xl font-bold mb-4 flex items-center space-x-2">
|
||||
<Users className="h-5 w-5" />
|
||||
<span>Participants ({participants.length})</span>
|
||||
</h2>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Participant</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Score</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Language</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Joined</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Actions</th>
|
||||
<thead>
|
||||
<tr className="border-b border-gray-700">
|
||||
<th className="text-left py-3 px-4">Name</th>
|
||||
<th className="text-left py-3 px-4">Joined At</th>
|
||||
<th className="text-left py-3 px-4">Status</th>
|
||||
<th className="text-left py-3 px-4">Score</th>
|
||||
<th className="text-left py-3 px-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-700">
|
||||
{examData.participants.all_participants.map((participant) => (
|
||||
<tr key={participant.name} className="hover:bg-gray-700">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-sm font-bold mr-3">
|
||||
{participant.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div className="font-medium">{participant.name}</div>
|
||||
</div>
|
||||
<tbody>
|
||||
{participants.map((participant, index) => (
|
||||
<tr key={index} className="border-b border-gray-700 hover:bg-gray-700">
|
||||
<td className="py-3 px-4 font-medium">{participant.name}</td>
|
||||
<td className="py-3 px-4 text-gray-400">
|
||||
{new Date(participant.joined_at).toLocaleTimeString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
<td className="py-3 px-4">
|
||||
<span className={`px-2 py-1 rounded text-xs ${
|
||||
participant.completed
|
||||
? 'bg-green-900 text-green-200'
|
||||
: participant.kicked
|
||||
? 'bg-red-900 text-red-200'
|
||||
: 'bg-yellow-900 text-yellow-200'
|
||||
? 'bg-green-600 text-white'
|
||||
: 'bg-yellow-600 text-white'
|
||||
}`}>
|
||||
{participant.kicked ? 'Kicked' : participant.completed ? 'Completed' : 'Working'}
|
||||
{participant.completed ? 'Completed' : 'In Progress'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
|
||||
{participant.completed ? `${participant.score}%` : '-'}
|
||||
<td className="py-3 px-4">
|
||||
{participant.completed ? (
|
||||
<span className="font-bold text-green-400">{participant.score}%</span>
|
||||
) : (
|
||||
<span className="text-gray-500">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
|
||||
{participant.language || '-'}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
|
||||
{new Date(participant.joined_at).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedParticipant(participant.name)
|
||||
setShowKickModal(true)
|
||||
}}
|
||||
className="text-red-400 hover:text-red-300"
|
||||
title="Remove Participant"
|
||||
>
|
||||
<UserX className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<td className="py-3 px-4">
|
||||
<button
|
||||
onClick={() => removeParticipant(participant.name)}
|
||||
className="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-sm flex items-center space-x-1"
|
||||
>
|
||||
<UserMinus className="h-3 w-3" />
|
||||
<span>Remove</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'leaderboard' && (
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<h3 className="text-lg font-bold mb-6">Live Leaderboard</h3>
|
||||
<div className="space-y-3">
|
||||
{examData.leaderboard.map((participant, index) => {
|
||||
const rankColors = {
|
||||
1: 'bg-gradient-to-r from-yellow-600 to-yellow-500 text-white',
|
||||
2: 'bg-gradient-to-r from-gray-400 to-gray-500 text-white',
|
||||
3: 'bg-gradient-to-r from-orange-600 to-orange-500 text-white'
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={participant.name}
|
||||
className={`p-4 rounded-lg ${
|
||||
rankColors[participant.rank as keyof typeof rankColors] || 'bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="text-2xl font-bold">#{participant.rank}</div>
|
||||
<div>
|
||||
<div className="font-bold text-lg">{participant.name}</div>
|
||||
<div className="text-sm opacity-75">
|
||||
{participant.language && `${participant.language} • `}
|
||||
Submitted: {new Date(participant.submission_time!).toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-2xl font-bold">{participant.score}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'settings' && (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<h3 className="text-lg font-bold mb-4">Exam Controls</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<button
|
||||
onClick={() => extendExam(5)}
|
||||
disabled={examData.exam_info.status !== 'active'}
|
||||
className="bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-600 px-4 py-2 rounded text-left"
|
||||
>
|
||||
<div className="font-medium">Extend by 5 minutes</div>
|
||||
<div className="text-sm opacity-75">Add more time to the exam</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => extendExam(15)}
|
||||
disabled={examData.exam_info.status !== 'active'}
|
||||
className="bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-600 px-4 py-2 rounded text-left"
|
||||
>
|
||||
<div className="font-medium">Extend by 15 minutes</div>
|
||||
<div className="text-sm opacity-75">Add significant extra time</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={endExam}
|
||||
disabled={examData.exam_info.status !== 'active'}
|
||||
className="bg-red-600 hover:bg-red-700 disabled:bg-gray-600 px-4 py-2 rounded text-left"
|
||||
>
|
||||
<div className="font-medium">End Exam Early</div>
|
||||
<div className="text-sm opacity-75">Stop the exam immediately</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<h3 className="text-lg font-bold mb-4">Auto-Refresh Settings</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<label className="text-sm font-medium">Update Interval:</label>
|
||||
<select
|
||||
value={refreshInterval}
|
||||
onChange={(e) => setRefreshInterval(Number(e.target.value))}
|
||||
className="bg-gray-700 border border-gray-600 rounded px-3 py-1 text-sm"
|
||||
>
|
||||
<option value={1000}>1 second</option>
|
||||
<option value={3000}>3 seconds</option>
|
||||
<option value={5000}>5 seconds</option>
|
||||
<option value={10000}>10 seconds</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Kick Participant Modal */}
|
||||
{showKickModal && selectedParticipant && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-gray-800 rounded-lg p-6 w-full max-w-md">
|
||||
<h3 className="text-lg font-bold mb-4">Remove Participant</h3>
|
||||
<p className="text-gray-300 mb-6">
|
||||
Are you sure you want to remove <strong>"{selectedParticipant}"</strong> from the exam?
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
<div className="flex justify-end space-x-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowKickModal(false)
|
||||
setSelectedParticipant(null)
|
||||
}}
|
||||
className="px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => removeParticipant(selectedParticipant)}
|
||||
className="px-4 py-2 bg-red-600 hover:bg-red-700 rounded"
|
||||
>
|
||||
Remove Participant
|
||||
</button>
|
||||
|
||||
{participants.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
No participants have joined yet.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Leaderboard Sidebar */}
|
||||
<div className="w-80 bg-gray-800 p-6">
|
||||
<div className="flex items-center space-x-2 mb-6">
|
||||
<Trophy className="h-6 w-6 text-yellow-400" />
|
||||
<h2 className="text-xl font-bold">Live Leaderboard</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{leaderboard.map((participant, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`p-4 rounded-lg ${
|
||||
index === 0 ? 'bg-gradient-to-r from-yellow-600 to-orange-600' :
|
||||
index === 1 ? 'bg-gradient-to-r from-gray-600 to-gray-500' :
|
||||
index === 2 ? 'bg-gradient-to-r from-orange-600 to-red-600' :
|
||||
'bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-bold text-lg">#{index + 1}</span>
|
||||
<span className="font-medium">{participant.name}</span>
|
||||
</div>
|
||||
{participant.submitted_at && (
|
||||
<p className="text-xs text-gray-300 mt-1">
|
||||
Submitted: {new Date(participant.submitted_at).toLocaleTimeString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-2xl font-bold">{participant.score}%</div>
|
||||
<div className={`text-xs ${participant.completed ? 'text-green-300' : 'text-yellow-300'}`}>
|
||||
{participant.completed ? 'Completed' : 'In Progress'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{leaderboard.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
No submissions yet.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={fetchLeaderboard}
|
||||
className="w-full mt-6 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm flex items-center justify-center space-x-2"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
<span>Refresh Leaderboard</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -104,6 +104,7 @@ export default function CodingExamPlatform() {
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ UPDATED CREATE EXAM WITH HOST PANEL REDIRECT
|
||||
const createExam = async () => {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/create-exam', {
|
||||
@@ -113,7 +114,8 @@ export default function CodingExamPlatform() {
|
||||
title: 'String Capitalizer Challenge',
|
||||
problem_id: 'string-capitalizer',
|
||||
duration_minutes: 30,
|
||||
host_name: participantName
|
||||
host_name: participantName,
|
||||
max_participants: 50
|
||||
})
|
||||
})
|
||||
|
||||
@@ -128,14 +130,38 @@ export default function CodingExamPlatform() {
|
||||
setExamId(participantCode)
|
||||
setExamInfo({ title: 'String Capitalizer Challenge', status: 'waiting' })
|
||||
|
||||
// ✅ FIXED: Show exam_code instead of exam_id
|
||||
alert(`Exam created! Share this code with participants: ${participantCode}`)
|
||||
// Store host exam data
|
||||
localStorage.setItem('host_exam', JSON.stringify({
|
||||
exam_code: participantCode,
|
||||
exam_id: databaseId,
|
||||
host_name: participantName,
|
||||
created_at: new Date().toISOString(),
|
||||
exam_details: data.exam_details || {}
|
||||
}))
|
||||
|
||||
// ✅ ENHANCED SUCCESS MESSAGE WITH REDIRECT INFO
|
||||
alert(`✅ Exam Created Successfully!
|
||||
|
||||
📝 Exam Code: ${participantCode}
|
||||
📋 Title: String Capitalizer Challenge
|
||||
👤 Host: ${participantName}
|
||||
⏱️ Duration: 30 minutes
|
||||
|
||||
🔗 Share this code with participants: ${participantCode}
|
||||
|
||||
Redirecting to Host Management Panel...`)
|
||||
|
||||
// ✅ REDIRECT TO HOST PANEL
|
||||
setTimeout(() => {
|
||||
router.push(`/coding/host/${participantCode}`)
|
||||
}, 2000)
|
||||
|
||||
} else {
|
||||
alert(`Failed to create exam: ${data.error}`)
|
||||
alert(`❌ Failed to create exam: ${data.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Create exam error:', error)
|
||||
alert('Failed to create exam - network error')
|
||||
alert('❌ Failed to create exam - network error')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -316,6 +342,7 @@ Redirecting to exam interface...`)
|
||||
<div className="mt-4 p-3 bg-gray-50 rounded text-xs text-gray-600">
|
||||
<p>Will create with host_name: "{participantName}"</p>
|
||||
<p>✅ Will display exam_code (6 chars), not exam_id</p>
|
||||
<p>🔄 After creation → redirect to /coding/host/[examCode]</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user