Fayorg/calendrier-avent
1
0
Fork 0
mirror of https://github.com/Fayorg/calendrier-avant.git synced 2026-05-27 17:18:38 +02:00
Code Activity

changed input and output on gradeForm

Browse Source
This commit is contained in:
timhaller
2023-12-10 21:12:49 +01:00
parent 4157269251
commit d4625f44b7
6 changed files with 68 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
components/custom/gradingForm.tsx
View File

@@ -2,6 +2,9 @@
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);
@@ -25,51 +28,36 @@ export function GradingForm({ password, data }: { password: string; data: any })
if (data.vote.hasVoted || hasVoted) {
return (
<div>
<p>Vous avez déjà voté, merci !</p>
<p>{'Vous avez mis ' + (data.vote.hasVoted ? data.vote.grade : grade) + ' !'}</p>
<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>
<p>Cliquer sur la note à la fin de la présentation :</p>
<div className={"w-full md:w-[400px]"}>
<form onSubmit={handleSubmit}>
<input type="radio" id="one" name="grade" checked={grade == 1} onChange={(e) => setGrade(1)}></input>
<label htmlFor="one">1</label>
<br></br>
<input type="radio" id="15" name="grade" checked={grade == 1.5} onChange={(e) => setGrade(1.5)}></input>
<label htmlFor="one">1.5</label>
<br></br>
<input type="radio" id="2" name="grade" checked={grade == 2} onChange={(e) => setGrade(2)}></input>
<label htmlFor="one">2</label>
<br></br>
<input type="radio" id="25" name="grade" checked={grade == 2.5} onChange={(e) => setGrade(2.5)}></input>
<label htmlFor="one">2.5</label>
<br></br>
<input type="radio" id="3" name="grade" checked={grade == 3} onChange={(e) => setGrade(3)}></input>
<label htmlFor="one">3</label>
<br></br>
<input type="radio" id="35" name="grade" checked={grade == 3.5} onChange={(e) => setGrade(3.5)}></input>
<label htmlFor="one">3.5</label>
<br></br>
<input type="radio" id="4" name="grade" checked={grade == 4} onChange={(e) => setGrade(4)}></input>
<label htmlFor="one">4</label>
<br></br>
<input type="radio" id="45" name="grade" checked={grade == 4.5} onChange={(e) => setGrade(4.5)}></input>
<label htmlFor="one">4.5</label>
<br></br>
<input type="radio" id="5" name="grade" checked={grade == 5} onChange={(e) => setGrade(5)}></input>
<label htmlFor="one">5</label>
<br></br>
<input type="radio" id="55" name="grade" checked={grade == 5.5} onChange={(e) => setGrade(5.5)}></input>
<label htmlFor="one">5.5</label>
<br></br>
<input type="radio" id="6" name="grade" checked={grade == 6} onChange={(e) => setGrade(6)}></input>
<label htmlFor="one">6</label>
<br></br>
<input type="submit" value={'Envoyer'}></input>
<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>
);