gmatte/EvalueTonSavoir
1
0
Fork 0
mirror of https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git synced 2025-08-11 21:23:54 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

UI improvements

Browse source
This commit is contained in:
NouhailaAater 2025-03-25 03:53:25 -04:00
parent ee7a7a0544
commit 1981a7f7d5
11 changed files with 364 additions and 400 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx
View file

@ -1,6 +1,7 @@
// GiftCheatSheet.tsx // GiftCheatSheet.tsx
import React, { useState } from 'react'; import React, { useState } from 'react';
import './giftCheatSheet.css'; import './giftCheatSheet.css';
import FileCopyIcon from '@mui/icons-material/FileCopy';
const GiftCheatSheet: React.FC = () => { const GiftCheatSheet: React.FC = () => {
const [copySuccess, setCopySuccess] = useState(false); const [copySuccess, setCopySuccess] = useState(false);
@ -42,7 +43,10 @@ const GiftCheatSheet: React.FC = () => {
</code> </code>
</pre> </pre>
<button onClick={() => copyToClipboard(QuestionVraiFaux)}>Copier</button> <button onClick={() => copyToClipboard(QuestionVraiFaux)}>
<FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} />
Copier
</button>
</div> </div>
<div className="question-type"> <div className="question-type">
@ -54,7 +58,10 @@ const GiftCheatSheet: React.FC = () => {
} }
</code> </code>
</pre> </pre>
<button onClick={() => copyToClipboard(QuestionChoixMul)}>Copier</button> <button onClick={() => copyToClipboard(QuestionChoixMul)}>
{' '}
<FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} /> Copier
</button>
</div> </div>
<div className="question-type"> <div className="question-type">
<h4>3. Questions à choix multiple avec plusieurs réponses</h4> <h4>3. Questions à choix multiple avec plusieurs réponses</h4>
@ -65,7 +72,10 @@ const GiftCheatSheet: React.FC = () => {
} }
</code> </code>
</pre> </pre>
<button onClick={() => copyToClipboard(QuestionChoixMulMany)}>Copier</button> <button onClick={() => copyToClipboard(QuestionChoixMulMany)}>
<FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} />
Copier
</button>
</div> </div>
<div className="question-type"> <div className="question-type">
@ -75,7 +85,10 @@ const GiftCheatSheet: React.FC = () => {
{QuestionCourte} {QuestionCourte}
</code> </code>
</pre> </pre>
<button onClick={() => copyToClipboard(QuestionCourte)}>Copier</button> <button onClick={() => copyToClipboard(QuestionCourte)}>
{' '}
<FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} /> Copier
</button>
</div> </div>
<div className="question-type"> <div className="question-type">
@ -87,7 +100,10 @@ const GiftCheatSheet: React.FC = () => {
} }
</code> </code>
</pre> </pre>
<button onClick={() => copyToClipboard(QuestionNum)}>Copier</button> <button onClick={() => copyToClipboard(QuestionNum)}>
{' '}
<FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} /> Copier
</button>
</div> </div>
<div className="question-type"> <div className="question-type">
@ -185,7 +201,7 @@ const GiftCheatSheet: React.FC = () => {
Attention: l&apos;ancienne fonctionnalité avec les balises <code>{'<img>'}</code> n&apos;est plus Attention: l&apos;ancienne fonctionnalité avec les balises <code>{'<img>'}</code> n&apos;est plus
supportée. supportée.
</p> </p>
</div> </div>
<div className="question-type"> <div className="question-type">
<h4> 10. Informations supplémentaires </h4> <h4> 10. Informations supplémentaires </h4>
<p> <p>

4
client/src/components/Header/Header.tsx
View file

@ -2,6 +2,7 @@ import { Link, useNavigate } from 'react-router-dom';
import * as React from 'react'; import * as React from 'react';
import './header.css'; import './header.css';
import { Button } from '@mui/material'; import { Button } from '@mui/material';
import ExitToAppIcon from '@mui/icons-material/ExitToApp';
interface HeaderProps { interface HeaderProps {
isLoggedIn: boolean; isLoggedIn: boolean;
@ -28,8 +29,9 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, handleLogout }) => {
handleLogout(); handleLogout();
navigate('/'); navigate('/');
}} }}
startIcon={<ExitToAppIcon />}
> >
Logout Déconnexion
</Button> </Button>
)} )}

2
client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
View file

@ -59,7 +59,6 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
disabled={disableButton} disabled={disableButton}
> >
{showAnswer ? (<div> {(question.isTrue ? '✅' : '❌')}</div>) : ``} {showAnswer ? (<div> {(question.isTrue ? '✅' : '❌')}</div>) : ``}
<div className={`circle ${selectedTrue}`}>V</div>
<div className={`answer-text ${selectedTrue}`}>Vrai</div> <div className={`answer-text ${selectedTrue}`}>Vrai</div>
{showAnswer && answer && question.trueFormattedFeedback && ( {showAnswer && answer && question.trueFormattedFeedback && (
@ -76,7 +75,6 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
> >
{showAnswer ? (<div> {(!question.isTrue ? '✅' : '❌')}</div>) : ``} {showAnswer ? (<div> {(!question.isTrue ? '✅' : '❌')}</div>) : ``}
<div className={`circle ${selectedFalse}`}>F</div>
<div className={`answer-text ${selectedFalse}`}>Faux</div> <div className={`answer-text ${selectedFalse}`}>Faux</div>
{showAnswer && !answer && question.falseFormattedFeedback && ( {showAnswer && !answer && question.falseFormattedFeedback && (

5
client/src/components/StudentWaitPage/StudentWaitPage.tsx
View file

@ -21,13 +21,12 @@ const StudentWaitPage: React.FC<Props> = ({ students, launchQuiz, setQuizMode })
return ( return (
<div className="wait"> <div className="wait">
<div className='button'> <div className="button" style={{ display: 'flex', justifyContent: 'flex-start' }}>
<Button <Button
variant="contained" variant="contained"
onClick={handleLaunchClick} onClick={handleLaunchClick}
startIcon={<PlayArrow />} startIcon={<PlayArrow />}
fullWidth sx={{ fontWeight: 600, fontSize: 20, width: 'auto' }}
sx={{ fontWeight: 600, fontSize: 20 }}
> >
Lancer Lancer
</Button> </Button>

2
client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx
View file

@ -116,7 +116,7 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={handleFeedbackDialogClose} color="primary"> <Button onClick={handleFeedbackDialogClose} color="primary">
OK Fermer
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>

2
client/src/pages/AuthManager/providers/SimpleLogin/Login.tsx
View file

@ -44,7 +44,6 @@ const SimpleLogin: React.FC = () => {
variant="outlined" variant="outlined"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
placeholder="Nom d'utilisateur"
sx={{ marginBottom: '1rem' }} sx={{ marginBottom: '1rem' }}
fullWidth fullWidth
/> />
@ -55,7 +54,6 @@ const SimpleLogin: React.FC = () => {
type="password" type="password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Nom de la salle"
sx={{ marginBottom: '1rem' }} sx={{ marginBottom: '1rem' }}
fullWidth fullWidth
/> />

494
client/src/pages/Teacher/Dashboard/Dashboard.tsx
View file

@ -121,41 +121,41 @@ const Dashboard: React.FC = () => {
} }
}; };
// Créer une salle // Créer une salle
const createRoom = async (title: string) => { const createRoom = async (title: string) => {
// Créer la salle et récupérer l'objet complet // Créer la salle et récupérer l'objet complet
const newRoom = await ApiService.createRoom(title); const newRoom = await ApiService.createRoom(title);
// Mettre à jour la liste des salles // Mettre à jour la liste des salles
const updatedRooms = await ApiService.getUserRooms(); const updatedRooms = await ApiService.getUserRooms();
setRooms(updatedRooms as RoomType[]); setRooms(updatedRooms as RoomType[]);
// Sélectionner la nouvelle salle avec son ID // Sélectionner la nouvelle salle avec son ID
selectRoomByName(newRoom); // Utiliser l'ID de l'objet retourné selectRoomByName(newRoom); // Utiliser l'ID de l'objet retourné
}; };
// Sélectionner une salle // Sélectionner une salle
const selectRoomByName = (roomId: string) => { const selectRoomByName = (roomId: string) => {
const room = rooms.find(r => r._id === roomId); const room = rooms.find(r => r._id === roomId);
selectRoom(room); selectRoom(room);
localStorage.setItem('selectedRoomId', roomId); localStorage.setItem('selectedRoomId', roomId);
}; };
const handleCreateRoom = async () => { const handleCreateRoom = async () => {
if (newRoomTitle.trim()) { if (newRoomTitle.trim()) {
try { try {
await createRoom(newRoomTitle); await createRoom(newRoomTitle);
const userRooms = await ApiService.getUserRooms(); const userRooms = await ApiService.getUserRooms();
setRooms(userRooms as RoomType[]); setRooms(userRooms as RoomType[]);
setOpenAddRoomDialog(false); setOpenAddRoomDialog(false);
setNewRoomTitle(''); setNewRoomTitle('');
} catch (error) { } catch (error) {
setErrorMessage(error instanceof Error ? error.message : "Erreur inconnue"); setErrorMessage(error instanceof Error ? error.message : "Erreur inconnue");
setShowErrorDialog(true); setShowErrorDialog(true);
} }
} }
}; };
const handleSelectFolder = (event: React.ChangeEvent<HTMLSelectElement>) => { const handleSelectFolder = (event: React.ChangeEvent<HTMLSelectElement>) => {
setSelectedFolderId(event.target.value); setSelectedFolderId(event.target.value);
@ -425,30 +425,63 @@ const Dashboard: React.FC = () => {
return ( return (
<div className="dashboard"> <div className="dashboard">
<div className="title">Tableau de bord</div> {/* Conteneur pour le titre et le sélecteur de salle */}
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '20px'
}}
>
{/* Titre tableau de bord */}
<div className="title" style={{ fontSize: '30px', fontWeight: 'bold' }}>
Tableau de bord
</div>
<div className="roomSelection"> {/* Sélecteur de salle */}
<label htmlFor="select-room">Sélectionner une salle: </label> <div
<select value={selectedRoom?._id || ''} onChange={(e) => handleSelectRoom(e)}> className="roomSelection"
<option value="" disabled> style={{ display: 'flex', justifyContent: 'flex-end', gap: '15px' }}
-- Sélectionner une salle -- >
</option> <select
{rooms.map((room) => ( value={selectedRoom?._id || ''}
<option key={room._id} value={room._id}> onChange={(e) => handleSelectRoom(e)}
{room.title} id="room-select"
style={{
padding: '8px 12px',
fontSize: '14px',
borderRadius: '8px',
border: '1px solid #ccc',
backgroundColor: '#fff',
maxWidth: '200px',
cursor: 'pointer',
fontWeight: '500'
}}
>
<option value="" disabled>
Sélectionner une salle
</option> </option>
))} {rooms.map((room) => (
<option value="add-room">Ajouter salle</option> <option key={room._id} value={room._id}>
</select> {room.title}
</option>
))}
<option
value="add-room"
style={{
color: 'black',
backgroundColor: '#f0f0f0',
fontWeight: 'bold'
}}
>
Ajouter une salle
</option>
</select>
</div>
</div> </div>
{selectedRoom && ( {/* Dialog pour créer une salle */}
<div className="roomTitle">
<h2>Salle sélectionnée: {selectedRoom.title}</h2>
</div>
)}
<Dialog open={openAddRoomDialog} onClose={() => setOpenAddRoomDialog(false)}> <Dialog open={openAddRoomDialog} onClose={() => setOpenAddRoomDialog(false)}>
<DialogTitle>Créer une nouvelle salle</DialogTitle> <DialogTitle>Créer une nouvelle salle</DialogTitle>
<DialogContent> <DialogContent>
@ -463,6 +496,8 @@ const Dashboard: React.FC = () => {
<Button onClick={handleCreateRoom}>Créer</Button> <Button onClick={handleCreateRoom}>Créer</Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
{/* Dialog d'erreur */}
<Dialog open={showErrorDialog} onClose={() => setShowErrorDialog(false)}> <Dialog open={showErrorDialog} onClose={() => setShowErrorDialog(false)}>
<DialogTitle>Erreur</DialogTitle> <DialogTitle>Erreur</DialogTitle>
<DialogContent> <DialogContent>
@ -473,193 +508,238 @@ const Dashboard: React.FC = () => {
</DialogActions> </DialogActions>
</Dialog> </Dialog>
<div className="search-bar"> <div
<TextField style={{
onChange={handleSearch} display: 'flex',
value={searchTerm} justifyContent: 'space-between',
placeholder="Rechercher un quiz par son titre" alignItems: 'center',
fullWidth marginBottom: '20px'
InputProps={{ }}
endAdornment: ( >
<InputAdornment position="end"> <div className="search-bar" style={{ flexGrow: 1, maxWidth: '400px' }}>
<IconButton> <TextField
<Search /> onChange={handleSearch}
</IconButton> value={searchTerm}
</InputAdornment> placeholder="Rechercher un quiz par son titre"
) fullWidth
}} variant="outlined"
/> InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton>
<Search />
</IconButton>
</InputAdornment>
)
}}
sx={{
'& .MuiOutlinedInput-root': {
borderRadius: '8px',
'& fieldset': {
borderColor: '#e0e0e0'
},
'&:hover fieldset': {
borderColor: '#5271FF'
}
}
}}
/>
</div>
<div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
<Button
variant="outlined"
color="primary"
startIcon={<Add />}
onClick={handleCreateQuiz}
sx={{ borderRadius: '8px' }}
>
Ajouter nouveau quiz
</Button>
<Button
variant="outlined"
color="primary"
startIcon={<Upload />}
onClick={handleOnImport}
sx={{ borderRadius: '8px' }}
>
Importer
</Button>
</div>
</div> </div>
<div className="folder"> {/* Conteneur principal avec les actions et la liste des quiz */}
<div className="select"> <div className="folder" style={{ display: 'flex', flexDirection: 'column' }}>
{/* Barre d'outils pour le sélecteur de dossier et les actions */}
<div
className="folder-toolbar"
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '20px'
}}
>
{/* Sélecteur de dossier */}
<NativeSelect <NativeSelect
id="select-folder" id="select-folder"
color="primary" color="primary"
value={selectedFolderId} value={selectedFolderId}
onChange={handleSelectFolder} onChange={handleSelectFolder}
sx={{
padding: '6px 12px',
maxWidth: '180px',
borderRadius: '8px',
borderColor: '#e0e0e0',
'&:hover': { borderColor: '#5271FF' }
}}
> >
<option value=""> Tous les dossiers... </option> <option value="">Tous les dossiers...</option>
{folders.map((folder) => (
{folders.map((folder: FolderType) => (
<option value={folder._id} key={folder._id}> <option value={folder._id} key={folder._id}>
{' '} {folder.title}
{folder.title}{' '}
</option> </option>
))} ))}
</NativeSelect> </NativeSelect>
{/* Actions dossiers */}
<div style={{ display: 'flex', gap: '15px' }}>
<Tooltip title="Ajouter dossier" placement="top">
<IconButton color="primary" onClick={handleCreateFolder}>
<Add />
</IconButton>
</Tooltip>
<Tooltip title="Renommer dossier" placement="top">
<IconButton
color="primary"
onClick={handleRenameFolder}
disabled={selectedFolderId === ''}
>
<Edit />
</IconButton>
</Tooltip>
<Tooltip title="Dupliquer dossier" placement="top">
<IconButton
color="primary"
onClick={handleDuplicateFolder}
disabled={selectedFolderId === ''}
>
<FolderCopy />
</IconButton>
</Tooltip>
<Tooltip title="Supprimer dossier" placement="top">
<IconButton
color="primary"
onClick={handleDeleteFolder}
disabled={selectedFolderId === ''}
>
<DeleteOutline />
</IconButton>
</Tooltip>
</div>
</div> </div>
<div className="actions"> {/* Liste des quiz organisés par dossier */}
<Tooltip title="Ajouter dossier" placement="top"> <div className="list" style={{ marginTop: '20px' }}>
<IconButton color="primary" onClick={handleCreateFolder}> {Object.keys(quizzesByFolder).map((folderName) => (
{' '} <CustomCard
<Add />{' '} key={folderName}
</IconButton> className="folder-card"
</Tooltip> sx={{ marginBottom: '20px' }}
<Tooltip title="Renommer dossier" placement="top">
<div>
<IconButton
color="primary"
onClick={handleRenameFolder}
disabled={selectedFolderId == ''} // cannot action on all
> >
{' '} <div
<Edit />{' '} className="folder-tab"
</IconButton> style={{
</div> fontWeight: 'bold',
</Tooltip> padding: '10px',
backgroundColor: '#f5f5f5'
<Tooltip title="Dupliquer dossier" placement="top"> }}
<div> >
<IconButton {folderName}
color="primary" </div>
onClick={handleDuplicateFolder} <CardContent>
disabled={selectedFolderId == ''} // cannot action on all {quizzesByFolder[folderName].map((quiz) => (
> <div
{' '} className="quiz"
<FolderCopy />{' '} key={quiz._id}
</IconButton> style={{ marginBottom: '10px' }}
</div> >
</Tooltip> <div className="title">
<Tooltip title="Lancer quiz" placement="top">
<Tooltip title="Supprimer dossier" placement="top">
<div>
<IconButton
aria-label="delete"
color="primary"
onClick={handleDeleteFolder}
disabled={selectedFolderId == ''} // cannot action on all
>
{' '}
<DeleteOutline />{' '}
</IconButton>
</div>
</Tooltip>
</div>
</div>
<div className="ajouter">
<Button
variant="outlined"
color="primary"
startIcon={<Add />}
onClick={handleCreateQuiz}
>
Ajouter un nouveau quiz
</Button>
<Button
variant="outlined"
color="primary"
startIcon={<Upload />}
onClick={handleOnImport}
>
Import
</Button>
</div>
<div className="list">
{Object.keys(quizzesByFolder).map((folderName) => (
<CustomCard key={folderName} className="folder-card">
<div className="folder-tab">{folderName}</div>
<CardContent>
{quizzesByFolder[folderName].map((quiz: QuizType) => (
<div className="quiz" key={quiz._id}>
<div className="title">
<Tooltip title="Lancer quiz" placement="top">
<div>
<Button <Button
variant="outlined" variant="outlined"
onClick={() => handleLancerQuiz(quiz)} onClick={() => handleLancerQuiz(quiz)}
disabled={!validateQuiz(quiz.content)} disabled={!validateQuiz(quiz.content)}
sx={{ width: '100%' }}
> >
{`${quiz.title} (${quiz.content.length} question${ {`${quiz.title} (${
quiz.content.length
} question${
quiz.content.length > 1 ? 's' : '' quiz.content.length > 1 ? 's' : ''
})`} })`}
</Button> </Button>
</div> </Tooltip>
</Tooltip> </div>
<div
className="actions"
style={{ display: 'flex', gap: '10px' }}
>
<Tooltip title="Télécharger quiz" placement="top">
<IconButton
color="primary"
onClick={() => downloadTxtFile(quiz)}
>
<FileDownload />
</IconButton>
</Tooltip>
<Tooltip title="Modifier quiz" placement="top">
<IconButton
color="primary"
onClick={() => handleEditQuiz(quiz)}
>
<Edit />
</IconButton>
</Tooltip>
<Tooltip title="Dupliquer quiz" placement="top">
<IconButton
color="primary"
onClick={() => handleDuplicateQuiz(quiz)}
>
<ContentCopy />
</IconButton>
</Tooltip>
<Tooltip title="Supprimer quiz" placement="top">
<IconButton
color="primary"
onClick={() => handleRemoveQuiz(quiz)}
>
<DeleteOutline />
</IconButton>
</Tooltip>
<Tooltip title="Partager quiz" placement="top">
<IconButton
color="primary"
onClick={() => handleShareQuiz(quiz)}
>
<Share />
</IconButton>
</Tooltip>
</div>
</div> </div>
))}
<div className="actions"> </CardContent>
<Tooltip title="Télécharger quiz" placement="top"> </CustomCard>
<IconButton ))}
color="primary" </div>
onClick={() => downloadTxtFile(quiz)}
>
{' '}
<FileDownload />{' '}
</IconButton>
</Tooltip>
<Tooltip title="Modifier quiz" placement="top">
<IconButton
color="primary"
onClick={() => handleEditQuiz(quiz)}
>
{' '}
<Edit />{' '}
</IconButton>
</Tooltip>
<Tooltip title="Dupliquer quiz" placement="top">
<IconButton
color="primary"
onClick={() => handleDuplicateQuiz(quiz)}
>
{' '}
<ContentCopy />{' '}
</IconButton>
</Tooltip>
<Tooltip title="Supprimer quiz" placement="top">
<IconButton
aria-label="delete"
color="primary"
onClick={() => handleRemoveQuiz(quiz)}
>
{' '}
<DeleteOutline />{' '}
</IconButton>
</Tooltip>
<Tooltip title="Partager quiz" placement="top">
<IconButton
color="primary"
onClick={() => handleShareQuiz(quiz)}
>
{' '}
<Share />{' '}
</IconButton>
</Tooltip>
</div>
</div>
))}
</CardContent>
</CustomCard>
))}
</div> </div>
{/* Modal d'importation */}
<ImportModal <ImportModal
open={showImportModal} open={showImportModal}
handleOnClose={() => setShowImportModal(false)} handleOnClose={() => setShowImportModal(false)}

2
client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
View file

@ -17,6 +17,7 @@ import ReturnButton from 'src/components/ReturnButton/ReturnButton';
import ApiService from '../../../services/ApiService'; import ApiService from '../../../services/ApiService';
import { escapeForGIFT } from '../../../utils/giftUtils'; import { escapeForGIFT } from '../../../utils/giftUtils';
import { Upload } from '@mui/icons-material'; import { Upload } from '@mui/icons-material';
import SaveIcon from '@mui/icons-material/Save';
interface EditQuizParams { interface EditQuizParams {
id: string; id: string;
@ -244,6 +245,7 @@ const QuizForm: React.FC = () => {
</NativeSelect></label> </NativeSelect></label>
<Button variant="contained" onClick={handleQuizSave}> <Button variant="contained" onClick={handleQuizSave}>
{<SaveIcon sx={{ fontSize: 20, marginRight: '8px' }} />}
Enregistrer Enregistrer
</Button> </Button>

16
client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
View file

@ -91,7 +91,7 @@ const ManageRoom: React.FC = () => {
return () => { return () => {
disconnectWebSocket(); disconnectWebSocket();
}; };
}, [roomName, navigate]); }, [roomName, navigate]);
useEffect(() => { useEffect(() => {
if (quizId) { if (quizId) {
@ -254,8 +254,8 @@ const ManageRoom: React.FC = () => {
setCurrentQuestion(quizQuestions[nextQuestionIndex]); setCurrentQuestion(quizQuestions[nextQuestionIndex]);
webSocketService.nextQuestion({roomName: formattedRoomName, webSocketService.nextQuestion({roomName: formattedRoomName,
questions: quizQuestions, questions: quizQuestions,
questionIndex: nextQuestionIndex, questionIndex: nextQuestionIndex,
isLaunch: false}); isLaunch: false});
}; };
@ -382,15 +382,19 @@ const ManageRoom: React.FC = () => {
width: '100%' width: '100%'
}} }}
> >
{( {
<div <div
className="userCount subtitle smallText" className="userCount subtitle smallText"
style={{ display: "flex", justifyContent: "flex-end" }} style={{
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center'
}}
> >
<GroupIcon style={{ marginRight: '5px' }} /> <GroupIcon style={{ marginRight: '5px' }} />
{students.length}/60 {students.length}/60
</div> </div>
)} }
</div> </div>
<div className="dumb"></div> <div className="dumb"></div>

179
client/src/pages/Teacher/ManageRoom/manageRoom.css
View file

@ -1,26 +1,33 @@
.room .roomHeader { .room .roomHeader {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: space-between; align-items: flex-start;
align-content: stretch position: relative;
} }
.room .roomHeader .returnButton {
flex-basis: 10%;
display: flex; .room .roomHeader .returnButton {
justify-content: center; position: absolute;
top: 10px;
left: 0;
z-index: 10;
} }
.room .roomHeader .centerTitle { .room .roomHeader .centerTitle {
flex-basis: auto; flex-basis: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-start;
align-items: flex-end; align-items: flex-start;
margin-top: 40px;
}
.room .roomHeader .headerContent {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 60px;
} }
.room .roomHeader .dumb { .room .roomHeader .dumb {
@ -31,155 +38,11 @@
width: 100%; width: 100%;
height: 70vh; height: 70vh;
display: flex; display: flex;
overflow: auto; overflow: auto;
justify-content: center; justify-content: center;
/* align-items: center; */
} }
.room h1 {
text-align: center;
margin-top: 50px;
/* .create-room-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
} }
.manage-room-container {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
}
.quiz-setup-container {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 2rem;
}
.quiz-mode-selection {
display: flex;
flex-grow: 0;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 10px;
height: 15vh;
}
.users-container {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
gap: 2vh;
}
.launch-quiz-btn {
width: 20vw;
height: 11vh;
margin-top: 2vh;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.mode-choice {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 20vw;
margin-top: 2vh;
}
.user {
background-color: #e7dad1;
padding: 10px 20px;
border: 1px solid black;
border-radius: 10px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.bottom-btn {
display: flex;
width: 100%;
justify-content: flex-end;
margin-top: 2vh;
}
.room-container {
position: relative;
width: 100%;
max-width: 60vw;
}
@media only screen and (max-device-width: 768px) {
.room-container {
max-width: 100%;
}
}
.room-wrapper {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
}
.room-name-wrapper {
display: flex;
flex-direction: column;
align-items: end;
}
.user-item {
width: 100%;
}
.flex-column-wrapper {
display: flex;
flex-direction: column;
height: 85vh;
overflow: auto;
}
.preview-and-result-container {
display: flex;
flex-direction: column;
gap: 2rem;
}
.nextQuestionButton {
align-self: flex-end;
margin-bottom: 5rem !important;
}
.top-container {
display: flex;
justify-content: space-between;
align-items: center;
}
@media only screen and (max-device-height: 4000px) {
.flex-column-wrapper {
height: 60vh;
}
}
@media only screen and (max-device-height: 1079px) {
.flex-column-wrapper {
height: 50vh;
}
}
@media only screen and (max-device-height: 741px) {
.flex-column-wrapper {
height: 40vh;
}
} */

2
client/src/pages/Teacher/Share/Share.tsx
View file

@ -10,6 +10,7 @@ import { Button, NativeSelect } from '@mui/material';
import ReturnButton from 'src/components/ReturnButton/ReturnButton'; import ReturnButton from 'src/components/ReturnButton/ReturnButton';
import ApiService from '../../../services/ApiService'; import ApiService from '../../../services/ApiService';
import SaveIcon from '@mui/icons-material/Save';
const Share: React.FC = () => { const Share: React.FC = () => {
console.log('Component rendered'); console.log('Component rendered');
@ -119,6 +120,7 @@ const Share: React.FC = () => {
</NativeSelect> </NativeSelect>
<Button variant="contained" onClick={handleQuizSave}> <Button variant="contained" onClick={handleQuizSave}>
{<SaveIcon sx={{ fontSize: 20, marginRight: '8px' }} />}
Enregistrer Enregistrer
</Button> </Button>