[FEATURE] Être possible de cacher le tableau du LiveResult

Fixes #294
This commit is contained in:
JubaAzul 2025-03-18 13:36:42 -04:00
parent 112062c0b2
commit a0f53232cd
3 changed files with 71 additions and 52 deletions

View file

@ -6,11 +6,13 @@ import './liveResult.css';
import {
FormControlLabel,
FormGroup,
IconButton,
Switch,
} from '@mui/material';
import { StudentType } from '../../Types/StudentType';
import LiveResultsTable from './LiveResultsTable/LiveResultsTable';
import { ExpandLess, ExpandMore } from '@mui/icons-material';
interface LiveResultsProps {
socket: Socket | null;
@ -24,13 +26,24 @@ interface LiveResultsProps {
const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => {
const [showUsernames, setShowUsernames] = useState<boolean>(false);
const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(false);
const [isExpanded, setIsExpanded] = useState<boolean>(true);
const toggleExpand = () => {
setIsExpanded(!isExpanded);
};
return (
<div>
<div className="action-bar mb-1">
<div className="text-2xl text-bold">Résultats du quiz</div>
<div>
<IconButton onClick={toggleExpand} aria-label="toggle visibility">
{isExpanded ? <ExpandLess /> : <ExpandMore />}
</IconButton>
<span>Résultats du quiz</span>
</div>
{isExpanded && (
<FormGroup row>
<FormControlLabel
label={<div className="text-sm">Afficher les noms</div>}
@ -55,8 +68,9 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
}
/>
</FormGroup>
)}
</div>
{isExpanded && (
<div className="table-container">
<LiveResultsTable
@ -67,6 +81,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
showUsernames={showUsernames}
/>
</div>
)}
</div>
);
};

View file

@ -258,10 +258,12 @@ const ManageRoom: React.FC = () => {
if (nextQuestionIndex === undefined || nextQuestionIndex > quizQuestions.length - 1) return;
setCurrentQuestion(quizQuestions[nextQuestionIndex]);
webSocketService.nextQuestion({roomName: formattedRoomName,
webSocketService.nextQuestion({
roomName: formattedRoomName,
questions: quizQuestions,
questionIndex: nextQuestionIndex,
isLaunch: false});
isLaunch: false
});
};
const previousQuestion = () => {
@ -490,22 +492,8 @@ const ManageRoom: React.FC = () => {
/>
)}
<LiveResultsComponent
quizMode={quizMode}
socket={socket}
questions={quizQuestions}
showSelectedQuestion={showSelectedQuestion}
students={students}
></LiveResultsComponent>
</div>
</div>
{quizMode === 'teacher' && (
<div
className="questionNavigationButtons"
style={{ display: 'flex', justifyContent: 'center' }}
>
<div className="questionNavigationButtons">
<div className="previousQuestionButton">
<Button
onClick={previousQuestion}
@ -529,6 +517,17 @@ const ManageRoom: React.FC = () => {
</div>
</div>
)}
<LiveResultsComponent
quizMode={quizMode}
socket={socket}
questions={quizQuestions}
showSelectedQuestion={showSelectedQuestion}
students={students}
></LiveResultsComponent>
</div>
</div>
</div>
) : (
<StudentWaitPage

View file

@ -36,6 +36,11 @@
justify-content: center;
/* align-items: center; */
}
.questionNavigationButtons {
display: flex;
justify-content: center;
margin-top: 2rem;
}