65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
import { useState } from 'react';
|
|
import Image from 'next/image';
|
|
import YourGrade from '@images/your-grade.svg';
|
|
import {Check} from "lucide-react";
|
|
|
|
export function GradingForm({ password, data }: { password: string; data: any }) {
|
|
const [grade, setGrade] = useState<number>(0);
|
|
const [hasVoted, setHasVoted] = useState<boolean>(false);
|
|
const router = useRouter();
|
|
|
|
async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
|
|
const response = await fetch('/api/grade', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ grade, key: password, testId: data.id }),
|
|
});
|
|
const json = await response.json();
|
|
if (response.status == 200) {
|
|
setHasVoted(true);
|
|
} else {
|
|
alert(json.message);
|
|
}
|
|
}
|
|
|
|
if (data.vote.hasVoted || hasVoted) {
|
|
return (
|
|
<div className={"w-full md:w-[400px]"}>
|
|
<div className={"flex flex-row justify-evenly"}>
|
|
<Image src={YourGrade} alt={YourGrade} width={100}/>
|
|
<span className={"w-[54px] h-[54px] bg-accent rounded-[20px] contents-none grid place-content-center"}>{data.vote.hasVoted ? data.vote.grade : grade}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={"w-full md:w-[400px]"}>
|
|
<form onSubmit={handleSubmit}>
|
|
<div>
|
|
<input
|
|
type="range"
|
|
min="2"
|
|
max="12"
|
|
id="gradeSelector"
|
|
className={"w-full h-4 bg-white range range:bg-white text-white"}
|
|
onChange={(e) => setGrade(Number(e.target.value) / 2)}
|
|
/>
|
|
</div>
|
|
<div className={"flex flex-row justify-evenly"}>
|
|
<Image src={YourGrade} alt={YourGrade} width={100}/>
|
|
<span className={"w-[54px] h-[54px] bg-accent rounded-[20px] contents-none grid place-content-center"}>{grade}</span>
|
|
<input type="submit" value={'Envoyer'} id="submit" className={"hidden"}></input>
|
|
<label htmlFor="submit" className={"w-[54px] h-[54px] bg-secondary rounded-[20px] contents-none grid place-content-center"}>
|
|
<Check width={24} height={24} color={"white"}/>
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|