devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Disabled the Play Again for admins

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-05-07 08:37:09 +01:00
parent 3128fea8c9
commit 8fc2cf571e
1 changed files with 237 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/exams/Finish.tsx
View File

@@ -1,27 +1,18 @@
import Button from "@/components/Low/Button"; import Button from "@/components/Low/Button";
import ModuleTitle from "@/components/Medium/ModuleTitle"; import ModuleTitle from "@/components/Medium/ModuleTitle";
import { moduleResultText } from "@/constants/ielts"; import {moduleResultText} from "@/constants/ielts";
import { Module } from "@/interfaces"; import {Module} from "@/interfaces";
import { User } from "@/interfaces/user"; import {User} from "@/interfaces/user";
import useExamStore from "@/stores/examStore"; import useExamStore from "@/stores/examStore";
import { calculateBandScore } from "@/utils/score"; import {calculateBandScore} from "@/utils/score";
import clsx from "clsx"; import clsx from "clsx";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import {useRouter} from "next/router";
import { Fragment, useEffect, useState } from "react"; import {Fragment, useEffect, useState} from "react";
import { import {BsArrowCounterclockwise, BsBook, BsClipboard, BsEyeFill, BsHeadphones, BsMegaphone, BsPen, BsShareFill} from "react-icons/bs";
BsArrowCounterclockwise, import {LevelScore} from "@/constants/ielts";
BsBook, import {getLevelScore} from "@/utils/score";
BsClipboard, import {capitalize} from "lodash";
BsEyeFill,
BsHeadphones,
BsMegaphone,
BsPen,
BsShareFill,
} from "react-icons/bs";
import { LevelScore } from "@/constants/ielts";
import { getLevelScore } from "@/utils/score";
import { capitalize } from "lodash";
interface Score { interface Score {
module: Module; module: Module;
@@ -38,27 +29,15 @@ interface Props {
onViewResults: (moduleIndex?: number) => void; onViewResults: (moduleIndex?: number) => void;
} }
export default function Finish({ export default function Finish({user, scores, modules, isLoading, onViewResults}: Props) {
user,
scores,
modules,
isLoading,
onViewResults,
}: Props) {
const [selectedModule, setSelectedModule] = useState(modules[0]); const [selectedModule, setSelectedModule] = useState(modules[0]);
const [selectedScore, setSelectedScore] = useState<Score>( const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!);
scores.find((x) => x.module === modules[0])!,
);
const exams = useExamStore((state) => state.exams); const exams = useExamStore((state) => state.exams);
useEffect( useEffect(() => setSelectedScore(scores.find((x) => x.module === selectedModule)!), [scores, selectedModule]);
() => setSelectedScore(scores.find((x) => x.module === selectedModule)!),
[scores, selectedModule],
);
const moduleColors: { [key in Module]: { progress: string; inner: string } } = const moduleColors: {[key in Module]: {progress: string; inner: string}} = {
{
reading: { reading: {
progress: "text-ielts-reading", progress: "text-ielts-reading",
inner: "bg-ielts-reading-light", inner: "bg-ielts-reading-light",
@@ -90,12 +69,7 @@ export default function Finish({
return exam.exercises.length; return exam.exercises.length;
}; };
const bandScore: number = calculateBandScore( const bandScore: number = calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus);
selectedScore.correct,
selectedScore.total,
selectedModule,
user.focus,
);
const showLevel = (level: number) => { const showLevel = (level: number) => {
if (selectedModule === "level") { if (selectedModule === "level") {
@@ -126,11 +100,8 @@ export default function Finish({
onClick={() => setSelectedModule("reading")} onClick={() => setSelectedModule("reading")}
className={clsx( className={clsx(
"hover:bg-ielts-reading flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg", "hover:bg-ielts-reading flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
selectedModule === "reading" selectedModule === "reading" ? "bg-ielts-reading text-white" : "bg-mti-gray-smoke text-ielts-reading",
? "bg-ielts-reading text-white" )}>
: "bg-mti-gray-smoke text-ielts-reading",
)}
>
<BsBook className="h-6 w-6" /> <BsBook className="h-6 w-6" />
<span className="font-semibold">Reading</span> <span className="font-semibold">Reading</span>
</div> </div>
@@ -140,11 +111,8 @@ export default function Finish({
onClick={() => setSelectedModule("listening")} onClick={() => setSelectedModule("listening")}
className={clsx( className={clsx(
"hover:bg-ielts-listening flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg", "hover:bg-ielts-listening flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
selectedModule === "listening" selectedModule === "listening" ? "bg-ielts-listening text-white" : "bg-mti-gray-smoke text-ielts-listening",
? "bg-ielts-listening text-white" )}>
: "bg-mti-gray-smoke text-ielts-listening",
)}
>
<BsHeadphones className="h-6 w-6" /> <BsHeadphones className="h-6 w-6" />
<span className="font-semibold">Listening</span> <span className="font-semibold">Listening</span>
</div> </div>
@@ -154,11 +122,8 @@ export default function Finish({
onClick={() => setSelectedModule("writing")} onClick={() => setSelectedModule("writing")}
className={clsx( className={clsx(
"hover:bg-ielts-writing flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg", "hover:bg-ielts-writing flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
selectedModule === "writing" selectedModule === "writing" ? "bg-ielts-writing text-white" : "bg-mti-gray-smoke text-ielts-writing",
? "bg-ielts-writing text-white" )}>
: "bg-mti-gray-smoke text-ielts-writing",
)}
>
<BsPen className="h-6 w-6" /> <BsPen className="h-6 w-6" />
<span className="font-semibold">Writing</span> <span className="font-semibold">Writing</span>
</div> </div>
@@ -168,11 +133,8 @@ export default function Finish({
onClick={() => setSelectedModule("speaking")} onClick={() => setSelectedModule("speaking")}
className={clsx( className={clsx(
"hover:bg-ielts-speaking flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg", "hover:bg-ielts-speaking flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
selectedModule === "speaking" selectedModule === "speaking" ? "bg-ielts-speaking text-white" : "bg-mti-gray-smoke text-ielts-speaking",
? "bg-ielts-speaking text-white" )}>
: "bg-mti-gray-smoke text-ielts-speaking",
)}
>
<BsMegaphone className="h-6 w-6" /> <BsMegaphone className="h-6 w-6" />
<span className="font-semibold">Speaking</span> <span className="font-semibold">Speaking</span>
</div> </div>
@@ -182,11 +144,8 @@ export default function Finish({
onClick={() => setSelectedModule("level")} onClick={() => setSelectedModule("level")}
className={clsx( className={clsx(
"hover:bg-ielts-level flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg", "hover:bg-ielts-level flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
selectedModule === "level" selectedModule === "level" ? "bg-ielts-level text-white" : "bg-mti-gray-smoke text-ielts-level",
? "bg-ielts-level text-white" )}>
: "bg-mti-gray-smoke text-ielts-level",
)}
>
<BsClipboard className="h-6 w-6" /> <BsClipboard className="h-6 w-6" />
<span className="font-semibold">Level</span> <span className="font-semibold">Level</span>
</div> </div>
@@ -194,18 +153,8 @@ export default function Finish({
</div> </div>
{isLoading && ( {isLoading && (
<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12"> <div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
<span <span className={clsx("loading loading-infinity w-32", moduleColors[selectedModule].progress)} />
className={clsx( <span className={clsx("text-center text-2xl font-bold", moduleColors[selectedModule].progress)}>
"loading loading-infinity w-32",
moduleColors[selectedModule].progress,
)}
/>
<span
className={clsx(
"text-center text-2xl font-bold",
moduleColors[selectedModule].progress,
)}
>
Evaluating your answers, please be patient... Evaluating your answers, please be patient...
<br /> <br />
You can also check it later on your records page! You can also check it later on your records page!
@@ -214,30 +163,22 @@ export default function Finish({
)} )}
{!isLoading && ( {!isLoading && (
<div className="mb-20 mt-32 flex w-full items-center justify-between gap-9"> <div className="mb-20 mt-32 flex w-full items-center justify-between gap-9">
<span className="max-w-3xl"> <span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span>
{moduleResultText(selectedModule, bandScore)}
</span>
<div className="flex gap-9 px-16"> <div className="flex gap-9 px-16">
<div <div
className={clsx( className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}
"radial-progress overflow-hidden",
moduleColors[selectedModule].progress,
)}
style={ style={
{ {
"--value": "--value": (selectedScore.correct / selectedScore.total) * 100,
(selectedScore.correct / selectedScore.total) * 100,
"--thickness": "12px", "--thickness": "12px",
"--size": "13rem", "--size": "13rem",
} as any } as any
} }>
>
<div <div
className={clsx( className={clsx(
"flex h-48 w-48 flex-col items-center justify-center rounded-full", "flex h-48 w-48 flex-col items-center justify-center rounded-full",
moduleColors[selectedModule].inner, moduleColors[selectedModule].inner,
)} )}>
>
<span className="text-xl">Level</span> <span className="text-xl">Level</span>
{showLevel(bandScore)} {showLevel(bandScore)}
</div> </div>
@@ -248,12 +189,7 @@ export default function Finish({
<div className="bg-mti-red-light mt-1 h-3 w-3 rounded-full" /> <div className="bg-mti-red-light mt-1 h-3 w-3 rounded-full" />
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-mti-red-light"> <span className="text-mti-red-light">
{( {(((selectedScore.total - selectedScore.missing) / selectedScore.total) * 100).toFixed(0)}%
((selectedScore.total - selectedScore.missing) /
selectedScore.total) *
100
).toFixed(0)}
%
</span> </span>
<span className="text-lg">Completion</span> <span className="text-lg">Completion</span>
</div> </div>
@@ -261,9 +197,7 @@ export default function Finish({
<div className="flex gap-2"> <div className="flex gap-2">
<div className="bg-mti-purple-light mt-1 h-3 w-3 rounded-full" /> <div className="bg-mti-purple-light mt-1 h-3 w-3 rounded-full" />
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-mti-purple-light"> <span className="text-mti-purple-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
{selectedScore.correct.toString().padStart(2, "0")}
</span>
<span className="text-lg">Correct</span> <span className="text-lg">Correct</span>
</div> </div>
</div> </div>
@@ -271,9 +205,7 @@ export default function Finish({
<div className="bg-mti-rose-light mt-1 h-3 w-3 rounded-full" /> <div className="bg-mti-rose-light mt-1 h-3 w-3 rounded-full" />
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-mti-rose-light"> <span className="text-mti-rose-light">
{(selectedScore.total - selectedScore.correct) {(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")}
.toString()
.padStart(2, "0")}
</span> </span>
<span className="text-lg">Wrong</span> <span className="text-lg">Wrong</span>
</div> </div>
@@ -293,8 +225,8 @@ export default function Finish({
<div className="flex w-fit cursor-pointer flex-col items-center gap-1"> <div className="flex w-fit cursor-pointer flex-col items-center gap-1">
<button <button
onClick={() => window.location.reload()} onClick={() => window.location.reload()}
className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out" disabled={user.type === "admin"}
> className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out">
<BsArrowCounterclockwise className="h-7 w-7 text-white" /> <BsArrowCounterclockwise className="h-7 w-7 text-white" />
</button> </button>
<span>Play Again</span> <span>Play Again</span>
@@ -302,19 +234,15 @@ export default function Finish({
<div className="flex w-fit cursor-pointer flex-col items-center gap-1"> <div className="flex w-fit cursor-pointer flex-col items-center gap-1">
<button <button
onClick={() => onViewResults()} onClick={() => onViewResults()}
className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out" className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out">
>
<BsEyeFill className="h-7 w-7 text-white" /> <BsEyeFill className="h-7 w-7 text-white" />
</button> </button>
<span>Review All</span> <span>Review All</span>
</div> </div>
<div className="flex w-fit cursor-pointer flex-col items-center gap-1"> <div className="flex w-fit cursor-pointer flex-col items-center gap-1">
<button <button
onClick={() => onClick={() => onViewResults(modules.findIndex((x) => x === selectedModule))}
onViewResults(modules.findIndex((x) => x === selectedModule)) className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out">
}
className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out"
>
<BsEyeFill className="h-7 w-7 text-white" /> <BsEyeFill className="h-7 w-7 text-white" />
</button> </button>
<span>Review {capitalize(selectedModule)}</span> <span>Review {capitalize(selectedModule)}</span>