mirror of
https://github.com/th30d4y/OpenLearnX.git
synced 2026-05-26 19:26:33 +00:00
5t4l1n
1079 lines
39 KiB
TypeScript
1079 lines
39 KiB
TypeScript
'use client'
|
|
import React, { useState, useEffect, useCallback } from 'react'
|
|
import { useRouter, useParams } from 'next/navigation'
|
|
import {
|
|
Users, Trophy, Clock, Play, Square, RefreshCw, Settings,
|
|
Upload, Plus, UserMinus, AlertCircle, Timer, TestTube, Award
|
|
} from 'lucide-react'
|
|
|
|
/* ---------- Enhanced Models ---------- */
|
|
interface TestCase {
|
|
input: string
|
|
expected_output: string
|
|
description: string
|
|
is_public: boolean
|
|
points: number
|
|
}
|
|
|
|
interface Example {
|
|
input: string
|
|
expected_output: string
|
|
description: string
|
|
}
|
|
|
|
interface Question {
|
|
id: string
|
|
title: string
|
|
description: string
|
|
difficulty: 'easy' | 'medium' | 'hard'
|
|
function_name: string
|
|
starter_code: Record<string, string>
|
|
test_cases: TestCase[]
|
|
examples: Example[]
|
|
constraints: string[]
|
|
time_limit?: number
|
|
memory_limit?: string
|
|
correct_solution: Record<string, string>
|
|
scoring_method: string
|
|
total_points: number
|
|
}
|
|
|
|
interface ExamInfo {
|
|
title: string
|
|
exam_code: string
|
|
status: 'waiting' | 'active' | 'completed'
|
|
duration_minutes: number
|
|
participants_count: number
|
|
max_participants: number
|
|
problem_title: string
|
|
problem_description?: string
|
|
languages: string[]
|
|
created_at: string
|
|
host_name: string
|
|
start_time?: string
|
|
end_time?: string
|
|
problem?: Question
|
|
}
|
|
|
|
interface Participant {
|
|
name: string
|
|
score: number
|
|
completed: boolean
|
|
joined_at: string
|
|
submitted_at?: string
|
|
passed_tests?: number
|
|
total_tests?: number
|
|
points_earned?: number
|
|
total_points?: number
|
|
language?: string
|
|
rank?: number
|
|
}
|
|
|
|
interface LeaderboardData {
|
|
leaderboard: Participant[]
|
|
waiting_participants: Participant[]
|
|
stats: {
|
|
total_participants: number
|
|
completed_submissions: number
|
|
waiting_submissions: number
|
|
average_score: number
|
|
highest_score: number
|
|
}
|
|
}
|
|
|
|
/* ---------- Enhanced Host Panel Component ---------- */
|
|
export default function EnhancedHostPanel() {
|
|
const params = useParams()
|
|
const router = useRouter()
|
|
const examCode = params.examCode as string
|
|
|
|
/* ------- Global state ------- */
|
|
const [examInfo, setExamInfo] = useState<ExamInfo | null>(null)
|
|
const [leaderboardData, setLeaderboardData] = useState<LeaderboardData>({
|
|
leaderboard: [],
|
|
waiting_participants: [],
|
|
stats: {
|
|
total_participants: 0,
|
|
completed_submissions: 0,
|
|
waiting_submissions: 0,
|
|
average_score: 0,
|
|
highest_score: 0
|
|
}
|
|
})
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState('')
|
|
|
|
/* ------- UI state ------- */
|
|
const [activeTab, setActiveTab] = useState<'overview' | 'participants' | 'questions'>('overview')
|
|
const [showUploader, setShowUploader] = useState(false)
|
|
const [showDurationEdit, setShowDurationEdit] = useState(false)
|
|
const [customDuration, setCustomDuration] = useState(30)
|
|
|
|
/* ------- Enhanced Question draft ------- */
|
|
const blankQuestion: Question = {
|
|
id: '',
|
|
title: '',
|
|
description: '',
|
|
difficulty: 'medium',
|
|
function_name: 'solve',
|
|
starter_code: {
|
|
python: 'def solve():\n # Write your solution here\n pass',
|
|
java: 'public class Solution {\n public void solve() {\n // Write your solution here\n }\n}',
|
|
javascript: 'function solve() {\n // Write your solution here\n}'
|
|
},
|
|
test_cases: [{
|
|
input: '',
|
|
expected_output: '',
|
|
description: 'Test case 1',
|
|
is_public: true,
|
|
points: 100
|
|
}],
|
|
examples: [{
|
|
input: '',
|
|
expected_output: '',
|
|
description: 'Example 1'
|
|
}],
|
|
constraints: [''],
|
|
time_limit: 1000,
|
|
memory_limit: '128MB',
|
|
correct_solution: {
|
|
python: '',
|
|
java: '',
|
|
javascript: ''
|
|
},
|
|
scoring_method: 'test_cases',
|
|
total_points: 100
|
|
}
|
|
const [draft, setDraft] = useState<Question>({ ...blankQuestion })
|
|
|
|
/* ------------------------------------------------------------------- */
|
|
/* FIXED EVENT HANDLERS */
|
|
/* ------------------------------------------------------------------- */
|
|
|
|
// ✅ FIXED: Stable event handlers using useCallback
|
|
const handleTitleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setDraft(prev => ({...prev, title: e.target.value}))
|
|
}, [])
|
|
|
|
const handleDescriptionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
setDraft(prev => ({...prev, description: e.target.value}))
|
|
}, [])
|
|
|
|
const handleDifficultyChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
setDraft(prev => ({...prev, difficulty: e.target.value as any}))
|
|
}, [])
|
|
|
|
const handleTotalPointsChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newTotal = parseInt(e.target.value) || 100
|
|
setDraft(prev => ({...prev, total_points: newTotal}))
|
|
}, [])
|
|
|
|
const handleCorrectSolutionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
setDraft(prev => ({
|
|
...prev,
|
|
correct_solution: {...prev.correct_solution, python: e.target.value}
|
|
}))
|
|
}, [])
|
|
|
|
const handleExampleChange = useCallback((index: number, field: keyof Example, value: string) => {
|
|
setDraft(prev => ({
|
|
...prev,
|
|
examples: prev.examples.map((ex, i) =>
|
|
i === index ? {...ex, [field]: value} : ex
|
|
)
|
|
}))
|
|
}, [])
|
|
|
|
/* ------------------------------------------------------------------- */
|
|
/* API CALLS */
|
|
/* ------------------------------------------------------------------- */
|
|
const fetchExamInfo = async () => {
|
|
setLoading(true)
|
|
try {
|
|
const res = await fetch(`http://127.0.0.1:5000/api/exam/info/${examCode}`)
|
|
const data = await res.json()
|
|
if (data.success) {
|
|
setExamInfo(data.exam_info)
|
|
setCustomDuration(data.exam_info.duration_minutes || 30)
|
|
setError('')
|
|
} else {
|
|
setError(data.error || 'Unable to load exam')
|
|
}
|
|
} catch (err) {
|
|
setError('Backend unreachable')
|
|
console.error('Failed to fetch exam info:', err)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const fetchLeaderboard = async () => {
|
|
try {
|
|
const res = await fetch(`http://127.0.0.1:5000/api/exam/leaderboard/${examCode}`)
|
|
const data = await res.json()
|
|
if (data.success) {
|
|
setLeaderboardData({
|
|
leaderboard: data.leaderboard || [],
|
|
waiting_participants: data.waiting_participants || [],
|
|
stats: data.stats || {
|
|
total_participants: 0,
|
|
completed_submissions: 0,
|
|
waiting_submissions: 0,
|
|
average_score: 0,
|
|
highest_score: 0
|
|
}
|
|
})
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to fetch leaderboard:', err)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
fetchExamInfo()
|
|
fetchLeaderboard()
|
|
|
|
// Poll leaderboard every 3 seconds for real-time updates
|
|
const interval = setInterval(fetchLeaderboard, 3000)
|
|
return () => clearInterval(interval)
|
|
}, [examCode])
|
|
|
|
/* ---------- Enhanced Question Upload ---------- */
|
|
const uploadQuestion = async () => {
|
|
if (!draft.title.trim() || !draft.description.trim()) {
|
|
alert('Title & description required')
|
|
return
|
|
}
|
|
|
|
// Validate test cases
|
|
const validTestCases = draft.test_cases.filter(tc =>
|
|
tc.expected_output.trim() !== ''
|
|
)
|
|
|
|
if (validTestCases.length === 0) {
|
|
alert('At least one test case with expected output is required')
|
|
return
|
|
}
|
|
|
|
// Ensure points add up to total
|
|
const totalTestPoints = validTestCases.reduce((sum, tc) => sum + tc.points, 0)
|
|
if (totalTestPoints !== draft.total_points) {
|
|
if (!confirm(`Test case points (${totalTestPoints}) don't equal total points (${draft.total_points}). Continue anyway?`)) {
|
|
return
|
|
}
|
|
}
|
|
|
|
try {
|
|
const enhancedQuestion = {
|
|
...draft,
|
|
test_cases: validTestCases,
|
|
id: Date.now().toString(),
|
|
languages: Object.keys(draft.starter_code).filter(lang => draft.starter_code[lang].trim())
|
|
}
|
|
|
|
const res = await fetch('http://127.0.0.1:5000/api/exam/upload-question', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
exam_code: examCode,
|
|
question: enhancedQuestion
|
|
})
|
|
})
|
|
const data = await res.json()
|
|
|
|
if (data.success) {
|
|
alert(`✅ Enhanced question uploaded with ${validTestCases.length} test cases!\nTotal points: ${draft.total_points}`)
|
|
setShowUploader(false)
|
|
setDraft({ ...blankQuestion })
|
|
fetchExamInfo()
|
|
} else {
|
|
alert(`❌ ${data.error}`)
|
|
}
|
|
} catch (err) {
|
|
console.error('Upload error:', err)
|
|
alert('❌ Network error')
|
|
}
|
|
}
|
|
|
|
/* ---------- Test Case Management ---------- */
|
|
const addTestCase = () => {
|
|
const newPoints = Math.floor(draft.total_points / (draft.test_cases.length + 1))
|
|
setDraft(prev => ({
|
|
...prev,
|
|
test_cases: [...prev.test_cases, {
|
|
input: '',
|
|
expected_output: '',
|
|
description: `Test case ${prev.test_cases.length + 1}`,
|
|
is_public: false,
|
|
points: newPoints
|
|
}]
|
|
}))
|
|
}
|
|
|
|
const updateTestCase = useCallback((index: number, field: keyof TestCase, value: any) => {
|
|
setDraft(prev => ({
|
|
...prev,
|
|
test_cases: prev.test_cases.map((tc, i) =>
|
|
i === index ? { ...tc, [field]: value } : tc
|
|
)
|
|
}))
|
|
}, [])
|
|
|
|
const removeTestCase = (index: number) => {
|
|
if (draft.test_cases.length <= 1) {
|
|
alert('At least one test case is required')
|
|
return
|
|
}
|
|
setDraft(prev => ({
|
|
...prev,
|
|
test_cases: prev.test_cases.filter((_, i) => i !== index)
|
|
}))
|
|
}
|
|
|
|
// Auto-distribute points when total points change
|
|
const redistributePoints = () => {
|
|
const pointsPerTest = Math.floor(draft.total_points / draft.test_cases.length)
|
|
const remainder = draft.total_points % draft.test_cases.length
|
|
|
|
setDraft(prev => ({
|
|
...prev,
|
|
test_cases: prev.test_cases.map((tc, index) => ({
|
|
...tc,
|
|
points: pointsPerTest + (index < remainder ? 1 : 0)
|
|
}))
|
|
}))
|
|
}
|
|
|
|
/* ---------- Exam Control Functions ---------- */
|
|
const startExam = async () => {
|
|
if (!examInfo?.problem_title) {
|
|
alert('Please upload a question before starting the exam')
|
|
return
|
|
}
|
|
|
|
if (!confirm('Start the exam now? Participants will be able to submit solutions.')) return
|
|
|
|
try {
|
|
const res = await fetch('http://127.0.0.1:5000/api/exam/start-exam', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ exam_code: examCode })
|
|
})
|
|
const data = await res.json()
|
|
|
|
if (data.success) {
|
|
alert('✅ Exam started successfully!')
|
|
fetchExamInfo()
|
|
} else {
|
|
alert(`❌ ${data.error}`)
|
|
}
|
|
} catch (err) {
|
|
console.error('Start exam error:', err)
|
|
alert('❌ Network error')
|
|
}
|
|
}
|
|
|
|
const stopExam = async () => {
|
|
if (!confirm('Stop the exam immediately? This will end the exam for all participants.')) return
|
|
|
|
try {
|
|
const res = 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 res.json()
|
|
|
|
if (data.success) {
|
|
alert('✅ Exam stopped successfully!')
|
|
fetchExamInfo()
|
|
} else {
|
|
alert(`❌ ${data.error}`)
|
|
}
|
|
} catch (err) {
|
|
console.error('Stop exam error:', err)
|
|
alert('❌ Network error')
|
|
}
|
|
}
|
|
|
|
/* ---------- FIXED Test Case Editor Component ---------- */
|
|
const TestCaseEditor = React.memo(({
|
|
testCase,
|
|
index,
|
|
onUpdate,
|
|
onRemove,
|
|
canRemove
|
|
}: {
|
|
testCase: TestCase
|
|
index: number
|
|
onUpdate: (index: number, field: keyof TestCase, value: any) => void
|
|
onRemove: (index: number) => void
|
|
canRemove: boolean
|
|
}) => {
|
|
const handleInputChange = useCallback((field: keyof TestCase, value: any) => {
|
|
onUpdate(index, field, value)
|
|
}, [index, onUpdate])
|
|
|
|
return (
|
|
<div className="bg-gray-900 p-4 rounded mb-3 border border-gray-700">
|
|
<div className="flex justify-between items-center mb-3">
|
|
<span className="font-medium text-blue-300">Test Case {index + 1}</span>
|
|
<div className="flex items-center space-x-3">
|
|
<label className="flex items-center space-x-1">
|
|
<input
|
|
type="checkbox"
|
|
checked={testCase.is_public}
|
|
onChange={(e) => handleInputChange('is_public', e.target.checked)}
|
|
className="rounded"
|
|
/>
|
|
<span className="text-sm">Public</span>
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={testCase.points}
|
|
onChange={(e) => handleInputChange('points', parseInt(e.target.value) || 0)}
|
|
className="w-20 p-1 bg-gray-700 rounded text-sm border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
placeholder="Points"
|
|
min="0"
|
|
autoComplete="off"
|
|
/>
|
|
{canRemove && (
|
|
<button
|
|
type="button"
|
|
onClick={() => onRemove(index)}
|
|
className="text-red-400 hover:text-red-300 text-sm"
|
|
>
|
|
Remove
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
|
|
<div>
|
|
<label className="block text-sm mb-1">Input:</label>
|
|
<textarea
|
|
value={testCase.input}
|
|
onChange={(e) => handleInputChange('input', e.target.value)}
|
|
className="w-full p-2 bg-gray-800 rounded text-sm border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
|
|
rows={2}
|
|
placeholder="Test input (leave empty if none)"
|
|
autoComplete="off"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm mb-1">Expected Output: <span className="text-red-400">*</span></label>
|
|
<textarea
|
|
value={testCase.expected_output}
|
|
onChange={(e) => handleInputChange('expected_output', e.target.value)}
|
|
className="w-full p-2 bg-gray-800 rounded text-sm border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
|
|
rows={2}
|
|
placeholder="Expected output (required)"
|
|
autoComplete="off"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<input
|
|
type="text"
|
|
value={testCase.description}
|
|
onChange={(e) => handleInputChange('description', e.target.value)}
|
|
className="w-full p-2 bg-gray-800 rounded text-sm border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
placeholder="Test case description"
|
|
autoComplete="off"
|
|
/>
|
|
</div>
|
|
)
|
|
})
|
|
|
|
/* ---------- FIXED Enhanced Question Upload Form ---------- */
|
|
const EnhancedQuestionUploadForm = () => (
|
|
<div className="bg-gray-800 rounded-lg p-6 mb-6">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h3 className="text-lg font-bold flex items-center space-x-2">
|
|
<TestTube className="h-5 w-5 text-green-400" />
|
|
<span>📝 Create Question with Dynamic Scoring</span>
|
|
</h3>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowUploader(false)}
|
|
className="text-gray-400 hover:text-white"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
{/* Basic Question Info */}
|
|
<div className="space-y-4 mb-6">
|
|
<input
|
|
type="text"
|
|
placeholder="Question Title (e.g., 'Print Hello World')"
|
|
value={draft.title}
|
|
onChange={handleTitleChange}
|
|
className="w-full p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
autoComplete="off"
|
|
/>
|
|
|
|
<textarea
|
|
placeholder="Question Description (e.g., 'Write a program that prints Hello World')"
|
|
value={draft.description}
|
|
onChange={handleDescriptionChange}
|
|
className="w-full p-3 bg-gray-700 rounded border border-gray-600 h-32 focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
|
|
autoComplete="off"
|
|
/>
|
|
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<select
|
|
value={draft.difficulty}
|
|
onChange={handleDifficultyChange}
|
|
className="p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
>
|
|
<option value="easy">Easy</option>
|
|
<option value="medium">Medium</option>
|
|
<option value="hard">Hard</option>
|
|
</select>
|
|
|
|
<input
|
|
type="number"
|
|
value={draft.total_points}
|
|
onChange={handleTotalPointsChange}
|
|
className="p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
placeholder="Total Points"
|
|
min="1"
|
|
autoComplete="off"
|
|
/>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={redistributePoints}
|
|
className="bg-purple-600 hover:bg-purple-700 px-3 py-2 rounded text-sm"
|
|
title="Redistribute points evenly across test cases"
|
|
>
|
|
Redistribute Points
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Examples Section */}
|
|
<div className="mb-6">
|
|
<h4 className="font-medium mb-2 flex items-center space-x-2">
|
|
<Award className="h-4 w-4 text-blue-400" />
|
|
<span>📚 Examples (shown to participants):</span>
|
|
</h4>
|
|
{draft.examples.map((example, index) => (
|
|
<div key={index} className="bg-gray-900 p-3 rounded mb-2 border border-gray-700">
|
|
<div className="grid grid-cols-2 gap-3 mb-2">
|
|
<input
|
|
type="text"
|
|
placeholder="Input"
|
|
value={example.input}
|
|
onChange={(e) => handleExampleChange(index, 'input', e.target.value)}
|
|
className="p-2 bg-gray-800 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
autoComplete="off"
|
|
/>
|
|
<input
|
|
type="text"
|
|
placeholder="Expected Output"
|
|
value={example.expected_output}
|
|
onChange={(e) => handleExampleChange(index, 'expected_output', e.target.value)}
|
|
className="p-2 bg-gray-800 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
autoComplete="off"
|
|
/>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
placeholder="Description"
|
|
value={example.description}
|
|
onChange={(e) => handleExampleChange(index, 'description', e.target.value)}
|
|
className="w-full p-2 bg-gray-800 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
autoComplete="off"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Host's Correct Solution */}
|
|
<div className="mb-6">
|
|
<h4 className="font-medium mb-2 flex items-center space-x-2">
|
|
<Award className="h-4 w-4 text-gold-400" />
|
|
<span>✅ Your Correct Solution (Python):</span>
|
|
</h4>
|
|
<textarea
|
|
placeholder="Enter your correct solution here... (e.g., print('Hello World'))"
|
|
value={draft.correct_solution.python}
|
|
onChange={handleCorrectSolutionChange}
|
|
className="w-full p-3 bg-gray-900 text-green-400 font-mono rounded border border-gray-600 h-32 focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
|
|
autoComplete="off"
|
|
spellCheck={false}
|
|
/>
|
|
</div>
|
|
|
|
{/* Test Cases */}
|
|
<div className="mb-6">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h4 className="font-medium flex items-center space-x-2">
|
|
<TestTube className="h-4 w-4 text-blue-400" />
|
|
<span>🧪 Test Cases for Dynamic Scoring</span>
|
|
</h4>
|
|
<button
|
|
type="button"
|
|
onClick={addTestCase}
|
|
className="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-sm flex items-center space-x-1"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
<span>Add Test Case</span>
|
|
</button>
|
|
</div>
|
|
|
|
{draft.test_cases.map((testCase, index) => (
|
|
<TestCaseEditor
|
|
key={index}
|
|
testCase={testCase}
|
|
index={index}
|
|
onUpdate={updateTestCase}
|
|
onRemove={removeTestCase}
|
|
canRemove={draft.test_cases.length > 1}
|
|
/>
|
|
))}
|
|
|
|
{/* Test Case Summary */}
|
|
<div className="bg-blue-900 p-3 rounded border border-blue-600">
|
|
<div className="flex justify-between text-sm">
|
|
<span>Total Test Cases: {draft.test_cases.length}</span>
|
|
<span>Total Points: {draft.test_cases.reduce((sum, tc) => sum + tc.points, 0)}/{draft.total_points}</span>
|
|
<span>Public: {draft.test_cases.filter(tc => tc.is_public).length}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Upload Button */}
|
|
<div className="flex space-x-4">
|
|
<button
|
|
type="button"
|
|
onClick={uploadQuestion}
|
|
className="bg-green-600 hover:bg-green-700 px-6 py-2 rounded flex items-center space-x-2"
|
|
>
|
|
<Upload className="h-4 w-4" />
|
|
<span>📤 Upload Enhanced Question</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowUploader(false)}
|
|
className="bg-gray-600 hover:bg-gray-700 px-6 py-2 rounded"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
/* ---------- Enhanced Participant Display ---------- */
|
|
const EnhancedParticipantsList = () => {
|
|
const allParticipants = [...leaderboardData.leaderboard, ...leaderboardData.waiting_participants]
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{allParticipants.length === 0 ? (
|
|
<div className="text-center py-8 text-gray-400">
|
|
<Users className="h-12 w-12 mx-auto mb-4 opacity-50" />
|
|
<p>No participants yet</p>
|
|
<p className="text-sm">Share the exam code: <span className="font-bold text-blue-400">{examCode}</span></p>
|
|
</div>
|
|
) : (
|
|
allParticipants.map((participant, index) => (
|
|
<div key={index} className="bg-gray-800 p-4 rounded-lg border border-gray-700">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h4 className="font-medium flex items-center space-x-2">
|
|
<span>{participant.name}</span>
|
|
{participant.completed && (
|
|
<span className="text-xs bg-green-600 px-2 py-1 rounded">Completed</span>
|
|
)}
|
|
{participant.rank && (
|
|
<span className="text-xs bg-blue-600 px-2 py-1 rounded">Rank #{participant.rank}</span>
|
|
)}
|
|
</h4>
|
|
<div className="text-sm text-gray-400 space-x-4">
|
|
<span>Joined: {new Date(participant.joined_at).toLocaleTimeString()}</span>
|
|
{participant.completed && participant.submitted_at && (
|
|
<span>Submitted: {new Date(participant.submitted_at).toLocaleTimeString()}</span>
|
|
)}
|
|
{participant.language && (
|
|
<span>Language: {participant.language}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
{participant.completed ? (
|
|
<div>
|
|
<div className="text-lg font-bold text-green-400">{participant.score}%</div>
|
|
<div className="text-sm text-gray-400">
|
|
{participant.passed_tests || 0}/{participant.total_tests || 1} tests
|
|
</div>
|
|
{participant.points_earned && participant.total_points && (
|
|
<div className="text-xs text-blue-400">
|
|
{participant.points_earned}/{participant.total_points} pts
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="text-yellow-400">Working...</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Calculate time remaining for active exams
|
|
const getTimeRemaining = () => {
|
|
if (examInfo?.status !== 'active' || !examInfo.end_time) return null
|
|
|
|
const now = Date.now()
|
|
const endTime = new Date(examInfo.end_time).getTime()
|
|
const remaining = Math.max(0, Math.floor((endTime - now) / 1000))
|
|
|
|
const minutes = Math.floor(remaining / 60)
|
|
const seconds = remaining % 60
|
|
|
|
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
|
|
}
|
|
|
|
// Real-time timer for active exams
|
|
const [timeRemaining, setTimeRemaining] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
if (examInfo?.status === 'active' && examInfo.end_time) {
|
|
const timer = setInterval(() => {
|
|
setTimeRemaining(getTimeRemaining())
|
|
}, 1000)
|
|
|
|
return () => clearInterval(timer)
|
|
}
|
|
}, [examInfo])
|
|
|
|
/* =========================== RENDER =========================== */
|
|
if (loading) return (
|
|
<div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
|
|
<div className="text-center">
|
|
<RefreshCw className="h-8 w-8 animate-spin mx-auto mb-4"/>
|
|
<p>Loading enhanced host panel...</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
if (error || !examInfo) return (
|
|
<div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
|
|
<div className="text-center">
|
|
<AlertCircle className="h-10 w-10 text-red-500 mx-auto mb-4"/>
|
|
<p className="mb-2">{error || 'Unknown error'}</p>
|
|
<button
|
|
className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded"
|
|
onClick={fetchExamInfo}
|
|
>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-900 text-white">
|
|
{/* Enhanced Header + Tabs */}
|
|
<header className="bg-gray-800 border-b border-gray-700 p-4">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<div>
|
|
<h1 className="font-bold text-2xl flex items-center space-x-2">
|
|
<TestTube className="h-6 w-6 text-green-400" />
|
|
<span>Enhanced Host Panel</span>
|
|
</h1>
|
|
<p className="text-sm text-gray-400">
|
|
Exam Code: <span className="font-bold text-blue-400">{examCode}</span> • Dynamic Scoring Enabled
|
|
{timeRemaining && (
|
|
<span className="ml-4 text-orange-400">⏰ Time Remaining: {timeRemaining}</span>
|
|
)}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center space-x-3">
|
|
<span className={`px-3 py-1 rounded-full text-sm font-medium ${
|
|
examInfo.status === 'waiting' ? 'bg-yellow-600' :
|
|
examInfo.status === 'active' ? 'bg-green-600' : 'bg-red-600'
|
|
}`}>
|
|
{examInfo.status.toUpperCase()}
|
|
</span>
|
|
<button
|
|
onClick={() => {
|
|
fetchExamInfo()
|
|
fetchLeaderboard()
|
|
}}
|
|
className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded"
|
|
title="Refresh"
|
|
>
|
|
<RefreshCw className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Enhanced Tabs */}
|
|
<div className="flex space-x-1">
|
|
{[
|
|
{ id: 'overview', label: 'Overview', icon: Trophy },
|
|
{ id: 'participants', label: `Participants (${leaderboardData.stats.total_participants})`, icon: Users },
|
|
{ id: 'questions', label: 'Questions', icon: TestTube }
|
|
].map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id as any)}
|
|
className={`px-4 py-2 rounded flex items-center space-x-2 ${
|
|
activeTab === tab.id
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
|
}`}
|
|
>
|
|
<tab.icon className="h-4 w-4" />
|
|
<span>{tab.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</header>
|
|
|
|
<div className="max-w-7xl mx-auto p-6">
|
|
{/* Show Enhanced Question Uploader */}
|
|
{showUploader && <EnhancedQuestionUploadForm />}
|
|
|
|
{/* Overview Tab */}
|
|
{activeTab === 'overview' && !showUploader && (
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Enhanced Stats */}
|
|
<div className="bg-gray-800 rounded-lg p-6">
|
|
<h3 className="text-lg font-bold mb-4 flex items-center space-x-2">
|
|
<Trophy className="h-5 w-5 text-yellow-400" />
|
|
<span>Enhanced Exam Stats</span>
|
|
</h3>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="bg-gray-900 p-3 rounded">
|
|
<div className="text-2xl font-bold text-blue-400">
|
|
{leaderboardData.stats.total_participants}
|
|
</div>
|
|
<div className="text-sm text-gray-400">Total Participants</div>
|
|
</div>
|
|
<div className="bg-gray-900 p-3 rounded">
|
|
<div className="text-2xl font-bold text-green-400">
|
|
{leaderboardData.stats.completed_submissions}
|
|
</div>
|
|
<div className="text-sm text-gray-400">Completed</div>
|
|
</div>
|
|
<div className="bg-gray-900 p-3 rounded">
|
|
<div className="text-2xl font-bold text-purple-400">
|
|
{Math.round(leaderboardData.stats.average_score)}%
|
|
</div>
|
|
<div className="text-sm text-gray-400">Avg Score</div>
|
|
</div>
|
|
<div className="bg-gray-900 p-3 rounded">
|
|
<div className="text-2xl font-bold text-orange-400">
|
|
{leaderboardData.stats.highest_score}%
|
|
</div>
|
|
<div className="text-sm text-gray-400">Highest Score</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Additional Stats */}
|
|
<div className="mt-4 pt-4 border-t border-gray-700">
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div className="flex justify-between">
|
|
<span>Duration:</span>
|
|
<span className="font-medium">{examInfo.duration_minutes}m</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Still Working:</span>
|
|
<span className="font-medium text-yellow-400">
|
|
{leaderboardData.stats.waiting_submissions}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Enhanced Controls */}
|
|
<div className="bg-gray-800 rounded-lg p-6">
|
|
<h3 className="text-lg font-bold mb-4">Enhanced Controls</h3>
|
|
<div className="space-y-3">
|
|
<button
|
|
onClick={() => setShowUploader(true)}
|
|
disabled={examInfo.status !== 'waiting'}
|
|
className="w-full bg-green-600 hover:bg-green-700 disabled:bg-gray-600 p-3 rounded flex items-center justify-center space-x-2"
|
|
>
|
|
<TestTube className="h-4 w-4" />
|
|
<span>📝 Create Dynamic Question</span>
|
|
</button>
|
|
|
|
{examInfo.status === 'waiting' && (
|
|
<>
|
|
<button
|
|
onClick={startExam}
|
|
className="w-full bg-blue-600 hover:bg-blue-700 p-3 rounded flex items-center justify-center space-x-2"
|
|
>
|
|
<Play className="h-4 w-4" />
|
|
<span>🚀 Start Exam</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setShowDurationEdit(!showDurationEdit)}
|
|
className="w-full bg-yellow-600 hover:bg-yellow-700 p-3 rounded flex items-center justify-center space-x-2"
|
|
>
|
|
<Timer className="h-4 w-4" />
|
|
<span>⏰ Edit Duration ({examInfo.duration_minutes}m)</span>
|
|
</button>
|
|
</>
|
|
)}
|
|
|
|
{examInfo.status === 'active' && (
|
|
<button
|
|
onClick={stopExam}
|
|
className="w-full bg-red-600 hover:bg-red-700 p-3 rounded flex items-center justify-center space-x-2"
|
|
>
|
|
<Square className="h-4 w-4" />
|
|
<span>🛑 Stop Exam</span>
|
|
</button>
|
|
)}
|
|
|
|
{showDurationEdit && (
|
|
<div className="bg-gray-900 p-3 rounded">
|
|
<div className="flex space-x-2">
|
|
<input
|
|
type="number"
|
|
value={customDuration}
|
|
onChange={(e) => setCustomDuration(parseInt(e.target.value) || 30)}
|
|
className="flex-1 p-2 bg-gray-700 rounded border border-gray-600"
|
|
min="5"
|
|
max="180"
|
|
/>
|
|
<span className="flex items-center text-sm text-gray-400">minutes</span>
|
|
<button
|
|
onClick={() => {
|
|
// Update duration logic would go here
|
|
setShowDurationEdit(false)
|
|
alert('Duration update functionality needs backend endpoint')
|
|
}}
|
|
className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded"
|
|
>
|
|
Update
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Enhanced Participants Tab */}
|
|
{activeTab === 'participants' && (
|
|
<div className="bg-gray-800 rounded-lg p-6">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h3 className="text-lg font-bold flex items-center space-x-2">
|
|
<Users className="h-5 w-5 text-blue-400" />
|
|
<span>Enhanced Participants ({leaderboardData.stats.total_participants})</span>
|
|
</h3>
|
|
<div className="flex items-center space-x-2">
|
|
<div className="text-sm text-gray-400">
|
|
Completed: {leaderboardData.stats.completed_submissions} |
|
|
Working: {leaderboardData.stats.waiting_submissions}
|
|
</div>
|
|
<button
|
|
onClick={fetchLeaderboard}
|
|
className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded"
|
|
>
|
|
<RefreshCw className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<EnhancedParticipantsList />
|
|
</div>
|
|
)}
|
|
|
|
{/* Questions Tab */}
|
|
{activeTab === 'questions' && (
|
|
<div className="bg-gray-800 rounded-lg p-6">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h3 className="text-lg font-bold flex items-center space-x-2">
|
|
<TestTube className="h-5 w-5 text-green-400" />
|
|
<span>Dynamic Scoring Questions</span>
|
|
</h3>
|
|
<button
|
|
onClick={() => setShowUploader(true)}
|
|
disabled={examInfo.status !== 'waiting'}
|
|
className="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
<span>Create Question</span>
|
|
</button>
|
|
</div>
|
|
|
|
{examInfo.problem_title ? (
|
|
<div className="bg-gray-900 p-4 rounded border border-green-600">
|
|
<h4 className="font-medium text-green-400 mb-2 flex items-center space-x-2">
|
|
<TestTube className="h-4 w-4" />
|
|
<span>📝 {examInfo.problem_title}</span>
|
|
</h4>
|
|
<p className="text-gray-300 text-sm mb-3">
|
|
{examInfo.problem?.description || 'No description available'}
|
|
</p>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
|
<div className="flex items-center space-x-2 text-gray-400">
|
|
<span>✅</span>
|
|
<span>Dynamic scoring enabled</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2 text-gray-400">
|
|
<span>🧪</span>
|
|
<span>{examInfo.problem?.test_cases?.length || 0} test cases</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2 text-gray-400">
|
|
<span>🎯</span>
|
|
<span>{examInfo.problem?.total_points || 100} total points</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2 text-gray-400">
|
|
<span>📊</span>
|
|
<span>{examInfo.problem?.difficulty || 'medium'} difficulty</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Test Cases Preview */}
|
|
{examInfo.problem?.test_cases && examInfo.problem.test_cases.length > 0 && (
|
|
<div className="mt-4 pt-4 border-t border-gray-700">
|
|
<h5 className="font-medium mb-2">Test Cases Preview:</h5>
|
|
<div className="space-y-2">
|
|
{examInfo.problem.test_cases.slice(0, 3).map((tc, index) => (
|
|
<div key={index} className="bg-gray-800 p-2 rounded text-xs">
|
|
<span className="text-blue-400">Test {index + 1}:</span>
|
|
<span className="ml-2">{tc.expected_output || 'Hidden'}</span>
|
|
<span className="ml-2 text-green-400">(+{tc.points} pts)</span>
|
|
{tc.is_public && <span className="ml-2 text-yellow-400">[Public]</span>}
|
|
</div>
|
|
))}
|
|
{examInfo.problem.test_cases.length > 3 && (
|
|
<div className="text-xs text-gray-400">
|
|
...and {examInfo.problem.test_cases.length - 3} more test cases
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8 text-gray-400">
|
|
<TestTube className="h-12 w-12 mx-auto mb-4 opacity-50" />
|
|
<p>No questions uploaded yet</p>
|
|
<p className="text-sm">Create a question with dynamic scoring to get started</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|