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

Improved the Generation frontend

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-01-22 23:34:42 +00:00
parent 506ee1e0e4
commit 67c2e06575
4 changed files with 86 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/(generation)/SpeakingGeneration.tsx
View File

@@ -9,7 +9,7 @@ import axios from "axios";
import clsx from "clsx";
import {useRouter} from "next/router";
import {useState} from "react";
import {BsArrowRepeat} from "react-icons/bs";
import {BsArrowRepeat, BsCheck} from "react-icons/bs";
import {toast} from "react-toastify";
const PartTab = ({part, index, setPart}: {part?: SpeakingPart; index: number; setPart: (part?: SpeakingPart) => void}) => {
@@ -114,7 +114,14 @@ const SpeakingGeneration = () => {
setIsLoading(true);
axios
.post(`/api/exam/speaking/generate/speaking`, {exercises: [part1, part2, part3].filter((x) => !!x), minTimer})
.post(`/api/exam/speaking/generate/speaking`, {
exercises: [
{...part1, type: "1"},
{...part2, type: "2"},
{...part3, type: "3"},
].filter((x) => !!x),
minTimer,
})
.then((result) => {
playSound("sent");
console.log(`Generated Exam ID: ${result.data.id}`);
@@ -152,7 +159,13 @@ const SpeakingGeneration = () => {
<>
<div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim">Timer</label>
<Input type="number" name="minTimer" onChange={(e) => setMinTimer(parseInt(e))} value={minTimer} className="max-w-[300px]" />
<Input
type="number"
name="minTimer"
onChange={(e) => setMinTimer(parseInt(e) < 15 ? 15 : parseInt(e))}
value={minTimer}
className="max-w-[300px]"
/>
</div>
<Tab.Group>
@@ -160,35 +173,35 @@ const SpeakingGeneration = () => {
<Tab
className={({selected}) =>
clsx(
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70",
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
)
}>
Task 1
Task 1 {part1 && <BsCheck />}
</Tab>
<Tab
className={({selected}) =>
clsx(
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70",
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
)
}>
Task 2
Task 2 {part2 && <BsCheck />}
</Tab>
<Tab
className={({selected}) =>
clsx(
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70",
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
)
}>
Task 3
Task 3 {part3 && <BsCheck />}
</Tab>
</Tab.List>
<Tab.Panels>