diff --git a/src/App.js b/src/App.js index d0ff7e6..ab16fe5 100644 --- a/src/App.js +++ b/src/App.js @@ -19,6 +19,7 @@ import EditQuestion from './edit_question/EditQuestion'; import Profile from './Profile/profile'; import Body from './Body/Body'; import CompletedPaperDashboard from './CompletedPaperDashboard/CompletedPaperDashboard'; +import CompletedPaperStudentDashboard from './CompletedPaperStudentDashboard/CompletedPaperStudentDashboard'; @@ -82,6 +83,7 @@ const App = () => { }/> }/> }/> + }/> )} diff --git a/src/CompletedPaperDashboard/CompletedPaperDashboard.jsx b/src/CompletedPaperDashboard/CompletedPaperDashboard.jsx index 21c3320..ee86e0c 100644 --- a/src/CompletedPaperDashboard/CompletedPaperDashboard.jsx +++ b/src/CompletedPaperDashboard/CompletedPaperDashboard.jsx @@ -6,13 +6,20 @@ import axios from "axios"; import Nothing from "../Assets/nothing.svg"; import Navbar from "../Navbar/Navbar"; import Skeleton from "../Skeleton/Skeleton"; +import { GoDotFill } from "react-icons/go"; +import { useNavigate } from "react-router-dom"; // import AlertModal from "../AlertModal/AlertModal"; const CompletedPaperDashboard = () => { -// const navigate = useNavigate(); + const navigate = useNavigate(); const [completedPapers, setCompletedPapers] = useState([]); // const [hoveredItem, setHoveredItem] = useState(null); const [loading, setLoading] = useState(true); + const evaluations=[ + "Evaluated", + "Not-Evaluated", + "Evaluation-in-Progress", + ]; const teacherId = localStorage.getItem("teacherId"); // const [reload, setReload] = useState(false); @@ -59,9 +66,10 @@ const getFormattedDateTime = (date, time) => { fetchCompletedPapers(); }, [teacherId]); -// const handleCardClick = (paperId) => { -// navigate(`/completed_questions/${paperId}`); -// }; + const handleCardClick = (paperId) => { + // navigate(`/completed_questions/${paperId}`); + navigate(`/completed_papers_student/${paperId}`); + }; return ( <> @@ -84,7 +92,7 @@ const getFormattedDateTime = (date, time) => {
handleCardClick(paper._id)} + onClick={() => handleCardClick(paper._id)} // onMouseEnter={() => setHoveredItem(paper._id)} // onMouseLeave={() => setHoveredItem(null)} > @@ -93,6 +101,10 @@ const getFormattedDateTime = (date, time) => { Completed on: {getFormattedDateTime(paper.endTime, paper.time)}
+
+ +
{evaluations[0]}
+
{paper.className} {paper.semester}
diff --git a/src/CompletedPaperStudentDashboard/CompletedPaperStudentDashboard.jsx b/src/CompletedPaperStudentDashboard/CompletedPaperStudentDashboard.jsx new file mode 100644 index 0000000..a18ee8e --- /dev/null +++ b/src/CompletedPaperStudentDashboard/CompletedPaperStudentDashboard.jsx @@ -0,0 +1,121 @@ +import React, { useState, useEffect } from "react"; +import "../papers/papers.css"; +import Nothing from "../Assets/nothing.svg"; +import Navbar from "../Navbar/Navbar"; +import Skeleton from "../Skeleton/Skeleton"; +import axios from "axios"; +import { useParams } from "react-router-dom"; +import { GoDotFill } from "react-icons/go"; +import { FaCheck } from "react-icons/fa"; +import { ImCross } from "react-icons/im"; +import image from "../Assets/profile_photo.png"; + +const CompletedPaperStudentDashboard = () => { + const [students, setStudents] = useState([]); + const [loading, setLoading] = useState(true); + const { paperId } = useParams(); + const evaluations = ["Evaluated", "Not-Evaluated", "Evaluation-in-Progress"]; + const [studentIds, setStudentIds] = useState([]); + + useEffect(() => { + axios + .post("http://localhost:5000/student/getStudentByPaperId", { + paperId, + }) + .then((res) => { + setStudents(res.data.students); + }) + .catch((err) => { + console.log(err); + }) + .finally(() => { + setTimeout(() => { + setLoading(false); + }, 1000); + }); + + axios + .post("http://localhost:5000/paper/getCompletedPaperByPaperId",{ + paperId, + }) + .then((res) => { + setStudentIds(res.data.students); + }) + .catch((err) => { + console.error(err); + }); + }, [paperId]); + + const getAttemptionStatus = (studentId) => { + return studentIds.indexOf(studentId) === -1 ? "Not-Attempted" : "Attempted"; + }; + + return ( + <> + +
+ {loading ? ( + + ) : students.length > 0 ? ( + <> +
+

Students:

+
+
+ {students.map((student, index) => { + const attemption = getAttemptionStatus(student._id); + return ( +
+
+
+
+ +
{evaluations[index%3]}  {evaluations[index%3] === "Evaluated" && <>Alloted Marks: 20}
+
+
+ {attemption === "Attempted" ? ( + <> + +
Attempted
+ + ) : ( + <> + +
Not Attempted
+ + )} +
+
+
+
+ Image +
+
+
{student.fullName}
+
+ Email:  {student.email} +
+
{student.rollNumber}
+
{student.phoneNumber}
+
+
+
+
+ ); + })} +
+ + ) : ( +
+
+ Nothing +

No Students Found

+
+
+ )} +
+ + ); +}; + +export default CompletedPaperStudentDashboard; diff --git a/src/papers/papers.css b/src/papers/papers.css index bbbc522..2f9617e 100644 --- a/src/papers/papers.css +++ b/src/papers/papers.css @@ -181,4 +181,121 @@ .readyDasboardwarning{ color: red; +} + +/*----------------Completed Papers------------ */ + +.evaluation +{ + font-size: 18px; + display: flex; + gap: 5px; + align-items: center; + background-color: #282828; + border-radius: 3px; +} +.Evaluated,.Evaluated-completed +{ + color: green; + width: 255px; +} +.Evaluated-completed +{ + width: 110px; +} +.Not-Evaluated,.Not-Evaluated-completed +{ + color: red; + width: 145px; +} +.Evaluation-in-Progress,.Evaluation-in-Progress-completed +{ + color: yellow; + width: 210px; +} +.evaluation-attemption +{ + display: flex; + align-items: center; +} +.attemption +{ + display: flex; + gap: 5px; + align-items: center; + background-color: #282828; + border-radius: 3px; + height: 30px; + justify-content: center; + position: absolute; + top: 18px; + right: 20px; +} +.Attempted +{ + width: 110px; + color: green; +} +.Not-Attempted +{ + width: 140px; + color: red; +} +.student-image-name +{ + display: flex; + gap: 50px; + align-items: center; + margin-top: 20px; +} +.student-image { + width: 100px; + height: 100px; +} + +.student-image img { + width: 100%; + height: 100%; + object-fit: cover; +} +.student-image img +{ + width: 100%; + height: 100%; +} +.student-name +{ + margin-top: -25px; +} +@media screen and (max-width: 768px) { + .student-image { + width: 80px; + height: 80px; + } + .student-image-name + { + margin-top: 5px; + gap: 10px; + } + .student-name + { + margin-top: 0px; + } + .Evaluated + { + width: 100px; + } +} + +/* Media Query for extra small screens */ +@media screen and (max-width: 480px) { + .student-image { + width: 60px; + height: 60px; + } +} + +.completed-student +{ + position: relative; } \ No newline at end of file