' + selectedQuiz.title + '
'; + selectedQuiz.content.forEach((giftQuestion) => { + try { + const question = parse(giftQuestion); + + previewHTML += Template(question[0], { + preview: true, + theme: 'light', + }); + } catch (error) { + if (error instanceof Error) { + previewHTML += ErrorTemplate(giftQuestion, error.message ); + } else { + previewHTML += ErrorTemplate(giftQuestion, 'Erreur inconnue'); + } + } + }); + + if (!withAnswers) { + const svgRegex = /
-
Tableau de bord
+ {/* Conteneur pour le titre et le sélecteur de salle */}
+
+ {/* Titre tableau de bord */}
+
{
color="primary"
value={selectedFolderId}
onChange={handleSelectFolder}
+ sx={{
+ padding: '6px 12px',
+ maxWidth: '180px',
+ borderRadius: '8px',
+ borderColor: '#e0e0e0',
+ '&:hover': { borderColor: '#5271FF' }
+ }}
>
-
-
- {folders.map((folder: FolderType) => (
+
+ {folders.map((folder) => (
))}
@@ -520,65 +492,130 @@ const Dashboard: React.FC = () => {
-
+ Tableau de bord
+
-
-
-
- {selectedRoom && (
-
-
- )}
-
+ {/* Dialog pour créer une salle */}
- Salle sélectionnée: {selectedRoom.title}
-
-
-
-
-
- )
- }}
- />
-
+
+ {/* Conteneur principal avec les actions et la liste des quiz */}
-
- {' '}
-
+
+ {' '}
+
-
- {' '}
-
+
+ {' '}
+
-
- {' '}
-
+
+ {' '}
+
- }
- onClick={handleCreateQuiz}
- >
- Ajouter un nouveau quiz
-
+
+
+
+ {!isSearchVisible ? (
+
+
+ ) : (
+
+
+
+
+ )
+ }}
+ />
+ )}
+
- }
- onClick={handleOnImport}
- >
- Import
-
+ {/* À droite : les boutons */}
+
+ }
+ onClick={handleCreateQuiz}
+ sx={{ borderRadius: '8px', minWidth: 'auto', padding: '4px 12px' }}
+ >
+ Nouveau quiz
+
+
+ }
+ onClick={handleOnImport}
+ >
+ Importer
+
+
{Object.keys(quizzesByFolder).map((folderName) => (
@@ -587,14 +624,16 @@ const Dashboard: React.FC = () => {
{quizzesByFolder[folderName].map((quiz: QuizType) => (
-
+
) => {
setSelectedFolder(event.target.value);
};
- const fileInputRef = useRef(null);
- const [dialogOpen, setDialogOpen] = useState(false);
const [showScrollButton, setShowScrollButton] = useState(false);
const scrollToTop = () => {
@@ -166,86 +165,75 @@ const QuizForm: React.FC = () => {
return
@@ -602,18 +641,12 @@ const Dashboard: React.FC = () => {
-
-
- downloadTxtFile(quiz)}
- >
- {' '}
-
-
+
))}
diff --git a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
index 89f822a..2b220da 100644
--- a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
+++ b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
@@ -1,5 +1,5 @@
// EditorQuiz.tsx
-import React, { useState, useEffect, useRef, CSSProperties } from 'react';
+import React, { useState, useEffect, CSSProperties } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { FolderType } from '../../../Types/FolderType';
@@ -9,14 +9,15 @@ import GiftCheatSheet from 'src/components/GIFTCheatSheet/GiftCheatSheet';
import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview';
import { QuizType } from '../../../Types/QuizType';
-
+import SaveIcon from '@mui/icons-material/Save';
import './editorQuiz.css';
-import { Button, TextField, NativeSelect, Divider, Dialog, DialogTitle, DialogActions, DialogContent } from '@mui/material';
+import { Button, TextField, NativeSelect, Divider } from '@mui/material';
import ReturnButton from 'src/components/ReturnButton/ReturnButton';
+import ImageGalleryModal from 'src/components/ImageGallery/ImageGalleryModal/ImageGalleryModal';
import ApiService from '../../../services/ApiService';
import { escapeForGIFT } from '../../../utils/giftUtils';
-import { Upload } from '@mui/icons-material';
+import { ENV_VARIABLES } from 'src/constants';
interface EditQuizParams {
id: string;
@@ -38,8 +39,6 @@ const QuizForm: React.FC = () => {
const handleSelectFolder = (event: React.ChangeEvent
+
+
handleEditQuiz(quiz)}
@@ -623,7 +656,7 @@ const Dashboard: React.FC = () => {
-
+
handleDuplicateQuiz(quiz)}
@@ -632,27 +665,20 @@ const Dashboard: React.FC = () => {
+
+
handleRemoveQuiz(quiz)}
>
{' '}
-
-
- handleShareQuiz(quiz)}
- >
- {' '}
-
-
+
-
+
- Chargement...
;
}
- const handleSaveImage = async () => {
- try {
- const inputElement = document.getElementById('file-input') as HTMLInputElement;
-
- if (!inputElement?.files || inputElement.files.length === 0) {
- setDialogOpen(true);
- return;
- }
-
- if (!inputElement.files || inputElement.files.length === 0) {
- window.alert("Veuillez d'abord choisir une image à téléverser.")
- return;
- }
-
- const imageUrl = await ApiService.uploadImage(inputElement.files[0]);
-
- // Check for errors
- if(imageUrl.indexOf("ERROR") >= 0) {
- window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
- return;
- }
-
- setImageLinks(prevLinks => [...prevLinks, imageUrl]);
-
- // Reset the file input element
- if (fileInputRef.current) {
- fileInputRef.current.value = '';
- }
- } catch (error) {
- window.alert(`Une erreur est survenue.\n${error}\nVeuillez réessayer plus tard.`)
-
- }
- };
-
const handleCopyToClipboard = async (link: string) => {
navigator.clipboard.writeText(link);
}
- return (
-
+ const handleCopyImage = (id: string) => {
+ const escLink = `${ENV_VARIABLES.BACKEND_URL}/api/image/get/${id}`;
+ setImageLinks(prevLinks => [...prevLinks, escLink]);
+ }
-
+ return (
+
+
- {folders.map((folder: FolderType) => (
-
- ))}
-
-
-
Éditeur de quiz
+
+
+
{/* Éditeur de quiz
Éditeur
*/} -
-
-
-
+
+
-
- Mes images :
+Mes images :
+(Voir section
@@ -302,7 +264,7 @@ const QuizForm: React.FC = () => {
-
{imageLinks.map((link, index) => {
- const imgTag = `} "texte de l'infobulle")`;
+ const imgTag = `[markdown]} "texte de l'infobulle") {T}`;
return (
-
{ const navigate = useNavigate(); const [socket, setSocket] = useState(null); const [students, setStudents] = useState (null); const [quizMode, setQuizMode] = useState<'teacher' | 'student'>('teacher'); const [connectingError, setConnectingError] = useState (''); const [currentQuestion, setCurrentQuestion] = useState (undefined); const [quizStarted, setQuizStarted] = useState (false); - const [formattedRoomName, setFormattedRoomName] = useState(""); + const [formattedRoomName, setFormattedRoomName] = useState(''); const [newlyConnectedUser, setNewlyConnectedUser] = useState (null); + const roomUrl = `${window.location.origin}/student/join-room?roomName=${roomName}`; + const [showQrModal, setShowQrModal] = useState(false); + const [copied, setCopied] = useState(false); - // Handle the newly connected user in useEffect, because it needs state info + const handleCopy = () => { + navigator.clipboard.writeText(roomUrl).then(() => { + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }); + }; + + // Handle the newly connected user in useEffect, because it needs state info // not available in the socket.on() callback useEffect(() => { if (newlyConnectedUser) { console.log(`Handling newly connected user: ${newlyConnectedUser.name}`); setStudents((prevStudents) => [...prevStudents, newlyConnectedUser]); - + // only send nextQuestion if the quiz has started if (!quizStarted) { console.log(`!quizStarted: returning.... `); return; } - + if (quizMode === 'teacher') { webSocketService.nextQuestion({ roomName: formattedRoomName, @@ -60,7 +80,7 @@ const ManageRoom: React.FC = () => { } else { console.error('Invalid quiz mode:', quizMode); } - + // Reset the newly connected user state setNewlyConnectedUser(null); } @@ -77,6 +97,15 @@ const ManageRoom: React.FC = () => { verifyLogin(); }, []); + useEffect(() => { + if (!roomName) { + console.error('Room name is missing!'); + return; + } + + console.log(`Joining room: ${roomName}`); + }, [roomName]); + useEffect(() => { if (!roomName || !quizId) { window.alert( @@ -91,7 +120,7 @@ const ManageRoom: React.FC = () => { return () => { disconnectWebSocket(); }; - }, [roomName, navigate]); + }, [roomName, navigate]); useEffect(() => { if (quizId) { @@ -138,8 +167,8 @@ const ManageRoom: React.FC = () => { setFormattedRoomName(roomNameUpper); console.log(`Creating WebSocket room named ${roomNameUpper}`); - /** - * ATTENTION: Lire les variables d'état dans + /** + * ATTENTION: Lire les variables d'état dans * les .on() n'est pas une bonne pratique. * Les valeurs sont celles au moment de la création * de la fonction et non au moment de l'exécution. @@ -184,7 +213,6 @@ const ManageRoom: React.FC = () => { }; useEffect(() => { - if (socket) { console.log(`Listening for submit-answer-room in room ${formattedRoomName}`); socket.on('submit-answer-room', (answerData: AnswerReceptionFromBackendType) => { @@ -258,10 +286,12 @@ const ManageRoom: React.FC = () => { if (nextQuestionIndex === undefined || nextQuestionIndex > quizQuestions.length - 1) return; setCurrentQuestion(quizQuestions[nextQuestionIndex]); - webSocketService.nextQuestion({roomName: formattedRoomName, - questions: quizQuestions, - questionIndex: nextQuestionIndex, - isLaunch: false}); + webSocketService.nextQuestion({ + roomName: formattedRoomName, + questions: quizQuestions, + questionIndex: nextQuestionIndex, + isLaunch: false + }); }; const previousQuestion = () => { @@ -271,7 +301,12 @@ const ManageRoom: React.FC = () => { if (prevQuestionIndex === undefined || prevQuestionIndex < 0) return; setCurrentQuestion(quizQuestions[prevQuestionIndex]); - webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: prevQuestionIndex, isLaunch: false}); + webSocketService.nextQuestion({ + roomName: formattedRoomName, + questions: quizQuestions, + questionIndex: prevQuestionIndex, + isLaunch: false + }); }; const initializeQuizQuestion = () => { @@ -299,7 +334,12 @@ const ManageRoom: React.FC = () => { } setCurrentQuestion(quizQuestions[0]); - webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: 0, isLaunch: true}); + webSocketService.nextQuestion({ + roomName: formattedRoomName, + questions: quizQuestions, + questionIndex: 0, + isLaunch: true + }); }; const launchStudentMode = () => { @@ -336,11 +376,21 @@ const ManageRoom: React.FC = () => { if (quiz?.content && quizQuestions) { setCurrentQuestion(quizQuestions[questionIndex]); if (quizMode === 'teacher') { - webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex, isLaunch: false}); + webSocketService.nextQuestion({ + roomName: formattedRoomName, + questions: quizQuestions, + questionIndex, + isLaunch: false + }); } } }; + const finishQuiz = () => { + disconnectWebSocket(); + navigate('/teacher/dashboard'); + }; + const handleReturn = () => { disconnectWebSocket(); navigate('/teacher/dashboard'); @@ -370,32 +420,95 @@ const ManageRoom: React.FC = () => { return ( -) : (Salle : {formattedRoomName}
-+ {/* En-tête avec bouton Disconnect à gauche et QR code à droite */} +)} ++ + + ++ + - {( +@@ -472,6 +585,11 @@ const ManageRoom: React.FC = () => {+ Salle : {formattedRoomName}
-- )} ++ {' '} {students.length}/60 + +{ - console.log('Component rendered'); const navigate = useNavigate(); const { id } = useParams (); const [quizTitle, setQuizTitle] = useState(''); const [selectedFolder, setSelectedFolder] = useState (''); - const [folders, setFolders] = useState ) => { setSelectedFolder(event.target.value); @@ -68,14 +74,12 @@ const Share: React.FC = () => { const handleQuizSave = async () => { try { - if (selectedFolder == '') { alert("Veuillez choisir un dossier"); return; } if (!id) { - window.alert(`Une erreur est survenue.\n Le quiz n'a pas été trouvé\nVeuillez réessayer plus tard`) console.error('Quiz not found for id:', id); navigate('/teacher/dashboard'); return; @@ -85,49 +89,92 @@ const Share: React.FC = () => { navigate('/teacher/dashboard'); } catch (error) { - window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`) console.log(error) } }; + if (loading) { + return Chargement...; + } + + if (quizExists) { + return ( +++ ); + } + return (++ ++ ++ +Quiz déjà existant++++ ++ Le quiz que vous essayez d'importer existe déjà sur votre compte. + + + + ++ Si vous souhaitiez créer une copie de ce quiz, + vous pouvez utiliser la fonction "Dupliquer" disponible + dans votre tableau de bord. + +-- - Importer quiz: {quizTitle}- ++Importation du Quiz: {quizTitle}++ Vous êtes sur le point d'importer le quiz {quizTitle}, choisissez un dossier dans lequel enregistrer ce nouveau quiz. ++- -); }; -export default Share; +export default Share; \ No newline at end of file diff --git a/client/src/pages/Teacher/Share/share.css b/client/src/pages/Teacher/Share/share.css index 119b645..146f318 100644 --- a/client/src/pages/Teacher/Share/share.css +++ b/client/src/pages/Teacher/Share/share.css @@ -3,19 +3,58 @@ display: flex; flex-direction: row; justify-content: space-between; - align-content: stretch + align-content: stretch; } + .quizImport .importHeader .returnButton { flex-basis: 10%; - display: flex; justify-content: center; } -.quizImport .importHeader .title { +.quizImport .importHeader .titleContainer { flex-basis: auto; + text-align: center; /* Center the title and subtitle */ +} + +.quizImport .importHeader .mainTitle { + font-size: 44px; /* Larger font size for the main title */ + font-weight: bold; /* Remove bold */ + color: #333; /* Slightly paler color */ +} + +.quizImport .importHeader .subTitle { + font-size: 14px; /* Smaller font size for the subtitle */ + color: #666; /* Pale gray color */ + margin-top: 8px; /* Add some space between the title and subtitle */ } .quizImport .importHeader .dumb { flex-basis: 10%; +} + +.quizImport .editSection { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; +} + +.quizImport .editSection .formContainer { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; /* Adds space between the select and button */ + width: 100%; + max-width: 400px; /* Limits the width of the form container */ +} + +.quizImport .editSection .folderSelect { + width: 100%; /* Ensures the select element takes the full width of its container */ +} + +.quizImport .editSection .saveButton { + width: 100%; /* Makes the button take the full width of its container */ + padding: 10px 20px; /* Increases the button's padding for a larger appearance */ + font-size: 16px; /* Increases the font size for better visibility */ } \ No newline at end of file diff --git a/client/src/services/ApiService.tsx b/client/src/services/ApiService.tsx index b13a369..48b9124 100644 --- a/client/src/services/ApiService.tsx +++ b/client/src/services/ApiService.tsx @@ -3,6 +3,7 @@ import { jwtDecode } from 'jwt-decode'; import { ENV_VARIABLES } from '../constants'; import { FolderType } from 'src/Types/FolderType'; +import { ImagesResponse, ImagesParams } from '../Types/Images'; import { QuizType } from 'src/Types/QuizType'; import { RoomType } from 'src/Types/RoomType'; @@ -74,8 +75,6 @@ class ApiService { return false; } - console.log("ApiService: isLoggedIn: Token:", token); - // Update token expiry this.saveToken(token); @@ -91,7 +90,6 @@ class ApiService { } try { - console.log("ApiService: isLoggedInTeacher: Token:", token); const decodedToken = jwtDecode(token) as { roles: string[] }; /////// REMOVE BELOW @@ -103,7 +101,6 @@ class ApiService { const userRoles = decodedToken.roles; const requiredRole = 'teacher'; - console.log("ApiService: isLoggedInTeacher: UserRoles:", userRoles); if (!userRoles || !userRoles.includes(requiredRole)) { return false; } @@ -142,6 +139,22 @@ class ApiService { return object.username; } + public getUserID(): string { + const token = localStorage.getItem("jwt"); + + if (!token) { + return ""; + } + + const jsonObj = jwtDecode(token) as { userId: string }; + + if (!jsonObj.userId) { + return ""; + } + + return jsonObj.userId; + } + // Route to know if rooms need authentication to join public async getRoomsRequireAuth(): Promise- +--- {folders.map((folder: FolderType) => ( ))} -{ const url: string = this.constructRequestUrl(`/auth/getRoomsRequireAuth`); @@ -178,7 +191,6 @@ class ApiService { const result: AxiosResponse = await axios.post(url, body, { headers: headers }); - console.log(result); if (result.status == 200) { //window.location.href = result.request.responseURL; window.location.href = '/login'; @@ -190,7 +202,6 @@ class ApiService { return true; } catch (error) { - console.log("Error details: ", error); if (axios.isAxiosError(error)) { const err = error as AxiosError; @@ -553,7 +564,6 @@ public async login(email: string, password: string): Promise { const headers = this.constructRequestHeaders(); const body = { folderId }; - console.log(headers); const result: AxiosResponse = await axios.post(url, body, { headers: headers }); if (result.status !== 200) { @@ -843,36 +853,6 @@ public async login(email: string, password: string): Promise { } } - async ShareQuiz(quizId: string, email: string): Promise { - try { - if (!quizId || !email) { - throw new Error(`quizId and email are required.`); - } - - const url: string = this.constructRequestUrl(`/quiz/Share`); - const headers = this.constructRequestHeaders(); - const body = { quizId, email }; - - const result: AxiosResponse = await axios.put(url, body, { headers: headers }); - - if (result.status !== 200) { - throw new Error(`Update and share quiz failed. Status: ${result.status}`); - } - - return true; - } catch (error) { - console.log("Error details: ", error); - - if (axios.isAxiosError(error)) { - const err = error as AxiosError; - const data = err.response?.data as { error: string } | undefined; - return data?.error || 'Unknown server error during request.'; - } - - return `An unexpected error occurred.`; - } - } - async getSharedQuiz(quizId: string): Promise { try { if (!quizId) { @@ -1167,7 +1147,126 @@ public async login(email: string, password: string): Promise { return `ERROR : Une erreur inattendue s'est produite.` } } - // NOTE : Get Image pas necessaire + + public async getImages(page: number, limit: number): Promise { + try { + const url: string = this.constructRequestUrl(`/image/getImages`); + const headers = this.constructRequestHeaders(); + let params : ImagesParams = { page: page, limit: limit }; + + const result: AxiosResponse = await axios.get(url, { params: params, headers: headers }); + + if (result.status !== 200) { + throw new Error(`L'affichage des images a échoué. Status: ${result.status}`); + } + const images = result.data; + + return images; + + } catch (error) { + console.log("Error details: ", error); + + if (axios.isAxiosError(error)) { + const err = error as AxiosError; + const data = err.response?.data as { error: string } | undefined; + const msg = data?.error || 'Erreur serveur inconnue lors de la requête.'; + throw new Error(`L'enregistrement a échoué. Status: ${msg}`); + } + + throw new Error(`ERROR : Une erreur inattendue s'est produite.`); + } + } + + public async getUserImages(page: number, limit: number): Promise { + try { + const url: string = this.constructRequestUrl(`/image/getUserImages`); + const headers = this.constructRequestHeaders(); + let params : ImagesParams = { page: page, limit: limit }; + + const uid = this.getUserID(); + if(uid !== ''){ + params.uid = uid; + } + + const result: AxiosResponse = await axios.get(url, { params: params, headers: headers }); + + if (result.status !== 200) { + throw new Error(`L'affichage des images de l'utilisateur a échoué. Status: ${result.status}`); + } + const images = result.data; + + return images; + + } catch (error) { + console.log("Error details: ", error); + + if (axios.isAxiosError(error)) { + const err = error as AxiosError; + const data = err.response?.data as { error: string } | undefined; + const msg = data?.error || 'Erreur serveur inconnue lors de la requête.'; + throw new Error(`L'enregistrement a échoué. Status: ${msg}`); + } + + throw new Error(`ERROR : Une erreur inattendue s'est produite.`); + } + } + + public async deleteImage(imgId: string): Promise { + try { + const url: string = this.constructRequestUrl(`/image/delete`); + const headers = this.constructRequestHeaders(); + const uid = this.getUserID(); + let params = { uid: uid, imgId: imgId }; + + const result: AxiosResponse = await axios.delete(url, { params: params, headers: headers }); + + if (result.status !== 200) { + throw new Error(`La suppression de l'image a échoué. Status: ${result.status}`); + } + + const deleted = result.data.deleted; + return deleted; + + } catch (error) { + console.log("Error details: ", error); + + if (axios.isAxiosError(error)) { + const err = error as AxiosError; + const data = err.response?.data as { error: string } | undefined; + const msg = data?.error || 'Erreur serveur inconnue lors de la requête.'; + throw new Error(`L'enregistrement a échoué. Status: ${msg}`); + } + + throw new Error(`ERROR : Une erreur inattendue s'est produite.`); + } + } + + public async getAllQuizIds(): Promise