mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
ajout d'une nouvelle salle
This commit is contained in:
parent
c3e56502d8
commit
b42cbb3647
1 changed files with 45 additions and 11 deletions
|
|
@ -28,8 +28,7 @@ import QuestionDisplay from 'src/components/QuestionsDisplay/QuestionDisplay';
|
||||||
import ApiService from '../../../services/ApiService';
|
import ApiService from '../../../services/ApiService';
|
||||||
import { QuestionType } from 'src/Types/QuestionType';
|
import { QuestionType } from 'src/Types/QuestionType';
|
||||||
import { RoomType } from 'src/Types/RoomType';
|
import { RoomType } from 'src/Types/RoomType';
|
||||||
import { IconButton, Button, Tooltip, NativeSelect } from '@mui/material';
|
import { Button, Tooltip, NativeSelect } from '@mui/material';
|
||||||
import { Add } from '@mui/icons-material';
|
|
||||||
|
|
||||||
const ManageRoom: React.FC = () => {
|
const ManageRoom: React.FC = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
@ -43,7 +42,7 @@ const ManageRoom: React.FC = () => {
|
||||||
const [connectingError, setConnectingError] = useState<string>('');
|
const [connectingError, setConnectingError] = useState<string>('');
|
||||||
const [currentQuestion, setCurrentQuestion] = useState<QuestionType | undefined>(undefined);
|
const [currentQuestion, setCurrentQuestion] = useState<QuestionType | undefined>(undefined);
|
||||||
const [quizStarted, setQuizStarted] = useState(false);
|
const [quizStarted, setQuizStarted] = useState(false);
|
||||||
const [rooms, setFolders] = useState<RoomType[]>([]);
|
const [rooms, setRooms] = useState<RoomType[]>([]);
|
||||||
const [selectedRoomId, setSelectedRoomId] = useState<string>('');
|
const [selectedRoomId, setSelectedRoomId] = useState<string>('');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -52,9 +51,9 @@ const ManageRoom: React.FC = () => {
|
||||||
navigate('/teacher/login');
|
navigate('/teacher/login');
|
||||||
return;
|
return;
|
||||||
} else {
|
} else {
|
||||||
const userFolders = await ApiService.getUserRooms();
|
const userRooms = await ApiService.getUserRooms();
|
||||||
|
|
||||||
setFolders(userFolders as RoomType[]);
|
setRooms(userRooms as RoomType[]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -65,6 +64,31 @@ const ManageRoom: React.FC = () => {
|
||||||
setSelectedRoomId(event.target.value);
|
setSelectedRoomId(event.target.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Mettre à jour roomName quand une salle est sélectionnée
|
||||||
|
if (selectedRoomId && rooms.length > 0) {
|
||||||
|
const selectedRoom = rooms.find((room) => room._id === selectedRoomId);
|
||||||
|
setRoomName(selectedRoom ? selectedRoom.title : '');
|
||||||
|
} else {
|
||||||
|
setRoomName(''); // Réinitialiser si aucune salle sélectionnée
|
||||||
|
}
|
||||||
|
}, [selectedRoomId, rooms]); // Déclenché quand la sélection ou la liste change
|
||||||
|
|
||||||
|
const handleCreateRoom = async () => {
|
||||||
|
try {
|
||||||
|
const roomTitle = prompt('Veuillez saisir le titre de la nouvelle salle');
|
||||||
|
if (roomTitle) {
|
||||||
|
await ApiService.createRoom(roomTitle);
|
||||||
|
const userRooms = await ApiService.getUserRooms();
|
||||||
|
setRooms(userRooms as RoomType[]);
|
||||||
|
const newlyCreatedRoom = userRooms[userRooms.length - 1] as RoomType;
|
||||||
|
setSelectedRoomId(newlyCreatedRoom._id);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating Room:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (quizId.id) {
|
if (quizId.id) {
|
||||||
const fetchquiz = async () => {
|
const fetchquiz = async () => {
|
||||||
|
|
@ -459,7 +483,7 @@ const ManageRoom: React.FC = () => {
|
||||||
>
|
>
|
||||||
<option value=""> Sélectionner une salle </option>
|
<option value=""> Sélectionner une salle </option>
|
||||||
{rooms.map((room: RoomType) => (
|
{rooms.map((room: RoomType) => (
|
||||||
<option value={room.title} key={room.title}>
|
<option value={room._id} key={room._id}>
|
||||||
{' '}
|
{' '}
|
||||||
{room.title}{' '}
|
{room.title}{' '}
|
||||||
</option>
|
</option>
|
||||||
|
|
@ -467,11 +491,21 @@ const ManageRoom: React.FC = () => {
|
||||||
</NativeSelect>
|
</NativeSelect>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="actions">
|
<div className="actions" style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||||
<Tooltip title="Créer la salle" placement="top">
|
<Tooltip title="Ajouter une nouvelle salle" placement="top">
|
||||||
<IconButton color="primary" onClick={createWebSocketRoom}>
|
<Button
|
||||||
<Add />
|
variant="contained"
|
||||||
</IconButton>
|
color="primary"
|
||||||
|
onClick={handleCreateRoom}
|
||||||
|
style={{
|
||||||
|
width: 'auto',
|
||||||
|
marginLeft: '30px',
|
||||||
|
height: '40px',
|
||||||
|
padding: '0 20px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Ajouter une nouvelle salle
|
||||||
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue