From 2fe101bb0a79937db3971a995948b8d302dd15e9 Mon Sep 17 00:00:00 2001 From: Alejandra Coeto Date: Thu, 31 Oct 2024 10:22:34 -0600 Subject: [PATCH 1/7] Fix login issue for team page --- package-lock.json | 10 ++++++ package.json | 1 + src/app/_components/custom-login-text.tsx | 19 ++++++++++ src/app/_components/team/switchButton.tsx | 42 ++++++++++++++++++++++ src/app/_components/team/team-schedule.tsx | 0 src/app/team/page.tsx | 40 +++++++++++++-------- 6 files changed, 97 insertions(+), 15 deletions(-) create mode 100644 src/app/_components/custom-login-text.tsx create mode 100644 src/app/_components/team/switchButton.tsx create mode 100644 src/app/_components/team/team-schedule.tsx diff --git a/package-lock.json b/package-lock.json index 781ad72..638b852 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.1", + "react-icons": "^5.3.0", "react-select": "^5.8.2", "server-only": "^0.0.1", "sonner": "^1.5.0", @@ -9549,6 +9550,15 @@ "react": "^16.8.0 || ^17 || ^18 || ^19" } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 22caaaf..3a29c72 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.1", + "react-icons": "^5.3.0", "react-select": "^5.8.2", "server-only": "^0.0.1", "sonner": "^1.5.0", diff --git a/src/app/_components/custom-login-text.tsx b/src/app/_components/custom-login-text.tsx new file mode 100644 index 0000000..614580b --- /dev/null +++ b/src/app/_components/custom-login-text.tsx @@ -0,0 +1,19 @@ +"use client"; +import { signIn } from "next-auth/react"; + +export default function CustomLoginText({ text, label }: { text: string, label: string }) { + return ( + +
+

+ {text} +

+

signIn("google")} + > + {label} +

+
+ ); +} \ No newline at end of file diff --git a/src/app/_components/team/switchButton.tsx b/src/app/_components/team/switchButton.tsx new file mode 100644 index 0000000..06dc6e3 --- /dev/null +++ b/src/app/_components/team/switchButton.tsx @@ -0,0 +1,42 @@ +"use client"; +import { useState } from 'react'; +import { BsChatRight } from 'react-icons/bs' +import { BsFileEarmarkText } from 'react-icons/bs' + +interface sbuttonProps { + variant: string; + onClick: () => void; +} + +const SwitchButton: React.FC = ({ variant, onClick }) => { + const [selected, setSelected] = useState("DOCS"); + + return ( +
+
+ + + +
+ +
+ ) +} + +interface buttonProps { + label: string; + icon: any; + selected: boolean; + onClick: () => void; +} + +const ButtonX: React.FC = ({ label, icon, selected, onClick }) => { + return ( + + ) +} + +export default SwitchButton \ No newline at end of file diff --git a/src/app/_components/team/team-schedule.tsx b/src/app/_components/team/team-schedule.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/app/team/page.tsx b/src/app/team/page.tsx index da3b45f..77d9b33 100644 --- a/src/app/team/page.tsx +++ b/src/app/team/page.tsx @@ -8,16 +8,22 @@ import Footer from "../_components/footer"; import Spinner from "../_components/spinner"; import { getServerAuthSession } from "rbrgs/server/auth"; import Input from "../_components/input"; +import LoginText from "../_components/login-text"; +import CustomLoginText from "../_components/custom-login-text"; +import SwitchButton from "../_components/team/switchButton"; interface Data { col1: string; col2: string; } +function onClick() { + signIn("google"); +} + export default async function TeamPage({ params }: { params: { teampage: string } }) { - const team = await api.team.getTeam(); const session = await getServerAuthSession(); - const rounds = team?.rounds; + function transformChallengeData(challenges: Challenge[]): Data[] { @@ -46,16 +52,13 @@ export default async function TeamPage({ params }: { params: { teampage: string if (!session) { return ( -
-

signIn("google")} - > - Please login -

+
+
); } + const team = await api.team.getTeam(); + const rounds = team?.rounds; return (
@@ -78,10 +81,15 @@ export default async function TeamPage({ params }: { params: { teampage: string
+ {/* */} + {team?.name ? ( -
- + + + <div className="pb-40"> + {/* <Title title="Rounds" /> */} + <h1 className="mb-5 text-center text-4xl ">Rounds</h1> {rounds?.map((round, key) => ( <Table key={key} @@ -90,12 +98,14 @@ export default async function TeamPage({ params }: { params: { teampage: string /> ))} - <Title title="Interviews" /> + {/* <Title title="Interviews" /> */} + <h1 className="mb-5 text-center text-4xl mt-16">Interviews</h1> <Table data={transformInterviewData(team.members)} title={""} /> - - <Title title="Documents" /> - <Input teamId={team.id} prevLink={team.link ?? ""}/> + + {/* <Title title="Documents" /> */} + <h1 className="mb-5 text-center text-4xl mt-16">Documents</h1> + <Input teamId={team.id} prevLink={team.link ?? ""} /> </div> ) : !team ? ( <div> From f7146d0dc132e1bacdfc321e096d27628d27241b Mon Sep 17 00:00:00 2001 From: Alejandra Coeto <a01285221@tec.mx> Date: Thu, 31 Oct 2024 11:24:06 -0600 Subject: [PATCH 2/7] Added toggle for team schedule and results --- src/app/_components/team/switchButton.tsx | 11 +- src/app/_components/team/team-schedule.tsx | 0 src/app/_components/team/team.tsx | 129 +++++++++++++++++++++ src/app/account/page.tsx | 1 + src/app/team/page.tsx | 69 +---------- src/server/api/routers/team.ts | 10 ++ 6 files changed, 149 insertions(+), 71 deletions(-) delete mode 100644 src/app/_components/team/team-schedule.tsx create mode 100644 src/app/_components/team/team.tsx diff --git a/src/app/_components/team/switchButton.tsx b/src/app/_components/team/switchButton.tsx index 06dc6e3..b92f035 100644 --- a/src/app/_components/team/switchButton.tsx +++ b/src/app/_components/team/switchButton.tsx @@ -12,28 +12,25 @@ const SwitchButton: React.FC<sbuttonProps> = ({ variant, onClick }) => { const [selected, setSelected] = useState("DOCS"); return ( - <div className="fixed w-full flex flex-col justify-center pl-52 mt-5 gap-3"> + <div className="w-full flex flex-col justify-center mt-5 gap-3 pb-20"> <div className='flex mx-auto bg-white p-1 rounded-md shadow-md'> - <ButtonX label="My documents" icon={BsFileEarmarkText} selected={variant == "DOCS"} onClick={onClick} /> - <ButtonX label="Chat Bot" icon={BsFileEarmarkText} selected={variant == "CHAT"} onClick={onClick} /> + <ButtonX label="Schedule" selected={variant == "INFO"} onClick={onClick} /> + <ButtonX label="Results" selected={variant == "RESULTS"} onClick={onClick} /> </div> - </div> ) } interface buttonProps { label: string; - icon: any; selected: boolean; onClick: () => void; } -const ButtonX: React.FC<buttonProps> = ({ label, icon, selected, onClick }) => { +const ButtonX: React.FC<buttonProps> = ({ label, selected, onClick }) => { return ( <button className={`flex items-center justify-center p-2 rounded-md ${selected ? 'bg-blue-500 text-white' : 'text-gray-600'}`} onClick={onClick}> - <span className="mr-2">{icon}</span> <span>{label}</span> </button> ) diff --git a/src/app/_components/team/team-schedule.tsx b/src/app/_components/team/team-schedule.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/_components/team/team.tsx b/src/app/_components/team/team.tsx new file mode 100644 index 0000000..27b44a2 --- /dev/null +++ b/src/app/_components/team/team.tsx @@ -0,0 +1,129 @@ +"use client"; +import { Challenge, Team, User } from "@prisma/client"; +import Table from "rbrgs/app/_components/table"; +import Input from "../input"; +import Spinner from "../spinner"; +import Title from "../title"; +import SwitchButton from "./switchButton"; +import { useCallback, useState } from "react"; +import { TeamType } from "rbrgs/server/api/routers/team"; + +interface TeamInfoProps { + team?: TeamType & { rounds: Round[] } & { members: User[] } & { challengeA: Challenge } & { challengeB: Challenge } & { challengeC: Challenge }; +} + +interface Round { + number: number; + challenges: { + name: string; + id: string; + time: Date; + roundId: string; + }[]; +} + +interface Data { + col1: string; + col2: string; +} + +function transformChallengeData(challenges: Challenge[]): Data[] { + return challenges.map((challenge, key) => ({ + col1: challenge.time.toLocaleTimeString("en-US", { + hour: "numeric", + minute: "2-digit", + hour12: true, + }), + col2: challenge.name, + })); +} + +function transformInterviewData(members: User[]): Data[] { + return members.map((member, key) => ({ + col1: member.interviewTime + ? member.interviewTime.toLocaleTimeString("en-US", { + hour: "numeric", + minute: "2-digit", + hour12: true, + }) + : "", + col2: member.name ? member.name : "", + })); +} + +const TeamInfo = ({ team }: {team: TeamType}) => { + + + const [variant, setSelected] = useState("INFO"); + const toggleVariant = useCallback(() => { + setSelected(variant === "INFO" ? "RESULTS" : "INFO"); + }, [variant]); + + return ( + <div> + <SwitchButton variant={variant} onClick={toggleVariant} /> + {team?.name ? ( + + <div className="pb-40"> + + {variant === "INFO" ? ( + <Schedules team={team} /> + ) : ( + <Results /> + )} + + + <h1 className="mb-5 text-center text-4xl mt-16">Documents</h1> + <Input teamId={team.id} prevLink={team.link ?? ""} /> + </div> + ) : !team ? ( + <div> + <div className="flex h-[30rem] items-center justify-center"> + <Spinner size="lg" /> + </div> + </div> + ) : ( + <div className="flex h-[30rem] items-center justify-center"> + <Title title="No data found" /> + </div> + + )} + </div> + ) +} + +const Schedules = ({ team } : {team: TeamType}) => { + const rounds = team?.rounds; + return ( + <div> + <h1 className="mb-5 text-center text-4xl ">Rounds</h1> + {rounds?.map((round, key) => ( + <Table + key={key} + data={transformChallengeData(round.challenges)} + title={`Round ${round.number}`} + /> + ))} + + {/* <Title title="Interviews" /> */} + <h1 className="mb-5 text-center text-4xl mt-16">Interviews</h1> + + <Table data={team?.members ? transformInterviewData(team.members) : []} title={""} /> + </div> + ) +} + +const Results: React.FC<TeamInfoProps> = ({ team }) => { + const challengeA = team?.challengeA; + const challengeB = team?.challengeB; + const challengeC = team?.challengeC; + + return ( + <div> + <h1 className="mb-5 text-center text-4xl">Results</h1> + <Table data={[]} title={""} /> + </div> + ) +} + +export default TeamInfo; \ No newline at end of file diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx index 6053597..37bd4c9 100644 --- a/src/app/account/page.tsx +++ b/src/app/account/page.tsx @@ -17,6 +17,7 @@ export default async function AccountPage() { } const teamData = await api.team.getTeam(); + return ( <div className="mt-[4rem] h-max bg-black p-10 font-mono text-white"> <h1 className="font-anton text-[3vw]">Account</h1> diff --git a/src/app/team/page.tsx b/src/app/team/page.tsx index 77d9b33..2ea76fd 100644 --- a/src/app/team/page.tsx +++ b/src/app/team/page.tsx @@ -1,5 +1,4 @@ import { Challenge, User } from "@prisma/client"; -import Table from "rbrgs/app/_components/table"; import { api } from "rbrgs/trpc/server"; import Header from "../_components/header"; import Title from "../_components/title"; @@ -11,11 +10,9 @@ import Input from "../_components/input"; import LoginText from "../_components/login-text"; import CustomLoginText from "../_components/custom-login-text"; import SwitchButton from "../_components/team/switchButton"; +import TeamInfo from "../_components/team/team"; + -interface Data { - col1: string; - col2: string; -} function onClick() { signIn("google"); @@ -26,29 +23,7 @@ export default async function TeamPage({ params }: { params: { teampage: string - function transformChallengeData(challenges: Challenge[]): Data[] { - return challenges.map((challenge, key) => ({ - col1: challenge.time.toLocaleTimeString("en-US", { - hour: "numeric", - minute: "2-digit", - hour12: true, - }), - col2: challenge.name, - })); - } - - function transformInterviewData(members: User[]): Data[] { - return members.map((member, key) => ({ - col1: member.interviewTime - ? member.interviewTime.toLocaleTimeString("en-US", { - hour: "numeric", - minute: "2-digit", - hour12: true, - }) - : "", - col2: member.name ? member.name : "", - })); - } + if (!session) { return ( @@ -83,42 +58,8 @@ export default async function TeamPage({ params }: { params: { teampage: string {/* <SwitchButton variant="DOCS" onClick={onClick} /> */} - {team?.name ? ( - - - - <div className="pb-40"> - {/* <Title title="Rounds" /> */} - <h1 className="mb-5 text-center text-4xl ">Rounds</h1> - {rounds?.map((round, key) => ( - <Table - key={key} - data={transformChallengeData(round.challenges)} - title={`Round ${round.number}`} - /> - ))} - - {/* <Title title="Interviews" /> */} - <h1 className="mb-5 text-center text-4xl mt-16">Interviews</h1> - - <Table data={transformInterviewData(team.members)} title={""} /> - - {/* <Title title="Documents" /> */} - <h1 className="mb-5 text-center text-4xl mt-16">Documents</h1> - <Input teamId={team.id} prevLink={team.link ?? ""} /> - </div> - ) : !team ? ( - <div> - <div className="flex h-[30rem] items-center justify-center"> - <Spinner size="lg" /> - </div> - </div> - ) : ( - <div className="flex h-[30rem] items-center justify-center"> - <Title title="No data found" /> - </div> - - )} + {team && <TeamInfo team={team} />} + <Footer /> </div> diff --git a/src/server/api/routers/team.ts b/src/server/api/routers/team.ts index 4fa7d71..ef6349f 100644 --- a/src/server/api/routers/team.ts +++ b/src/server/api/routers/team.ts @@ -30,6 +30,9 @@ export const teamRouter = createTRPCRouter({ challenges: true, }, }, + challengeA: true, + challengeB: true, + challengeC: true, }, }); console.log(team); @@ -63,3 +66,10 @@ export const teamRouter = createTRPCRouter({ return team; }), }); + +// type TeamType = ReturnType<typeof teamRouter._def.procedures.getTeam>; + +// // export result type o fpromisse +// export typeof { TeamType }; +// export +export type TeamType = ReturnType<typeof teamRouter._def.procedures.getTeam> extends Promise<infer T> ? T : never; From f5d6053386a4ba000dfde07d22057e95ab4a3ce4 Mon Sep 17 00:00:00 2001 From: Alejandra Coeto <a01285221@tec.mx> Date: Thu, 31 Oct 2024 12:16:58 -0600 Subject: [PATCH 3/7] Added round results --- src/app/_components/team/team.tsx | 108 +++++++++++++++++++++++++++--- 1 file changed, 97 insertions(+), 11 deletions(-) diff --git a/src/app/_components/team/team.tsx b/src/app/_components/team/team.tsx index 27b44a2..d6ef79a 100644 --- a/src/app/_components/team/team.tsx +++ b/src/app/_components/team/team.tsx @@ -7,10 +7,7 @@ import Title from "../title"; import SwitchButton from "./switchButton"; import { useCallback, useState } from "react"; import { TeamType } from "rbrgs/server/api/routers/team"; - -interface TeamInfoProps { - team?: TeamType & { rounds: Round[] } & { members: User[] } & { challengeA: Challenge } & { challengeB: Challenge } & { challengeC: Challenge }; -} +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../shadcn/ui/select"; interface Round { number: number; @@ -51,8 +48,8 @@ function transformInterviewData(members: User[]): Data[] { })); } -const TeamInfo = ({ team }: {team: TeamType}) => { - +const TeamInfo = ({ team }: { team: TeamType }) => { + const [variant, setSelected] = useState("INFO"); const toggleVariant = useCallback(() => { @@ -69,7 +66,7 @@ const TeamInfo = ({ team }: {team: TeamType}) => { {variant === "INFO" ? ( <Schedules team={team} /> ) : ( - <Results /> + <Results team={team} /> )} @@ -92,7 +89,7 @@ const TeamInfo = ({ team }: {team: TeamType}) => { ) } -const Schedules = ({ team } : {team: TeamType}) => { +const Schedules = ({ team }: { team: TeamType }) => { const rounds = team?.rounds; return ( <div> @@ -113,17 +110,106 @@ const Schedules = ({ team } : {team: TeamType}) => { ) } -const Results: React.FC<TeamInfoProps> = ({ team }) => { - const challengeA = team?.challengeA; +const Results = ({ team }: { team: TeamType }) => { + const challengeA = team?.challengeA; const challengeB = team?.challengeB; const challengeC = team?.challengeC; + const [selected, setSelected] = useState("Sin seleccionar"); + return ( <div> <h1 className="mb-5 text-center text-4xl">Results</h1> - <Table data={[]} title={""} /> + <div className="mx-auto lg:w-1/2"> + <Select + onValueChange={(value) => { + setSelected(value); + }} + value={selected} + > + <SelectTrigger> + <SelectValue placeholder="Selecciona una ronda" /> + </SelectTrigger> + + <SelectContent> + <SelectItem value="1">Ronda 1</SelectItem> + <SelectItem value="2">Ronda 2</SelectItem> + <SelectItem value="3">Ronda 3</SelectItem> + </SelectContent> + </Select> + + {selected != "Sin seleccionar" && ( + <RoundResults team={team} selection={selected} /> + )} + + + </div> </div> ) } +const RoundResults = ({ team, selection }: { team: TeamType, selection: string }) => { + + const challengesA = team?.challengeA; + const challengesB = team?.challengeB; + const challengesC = team?.challengeC; + + return ( + <div className="pt-10"> + <div> + <div className="pb-10"> + + <h1 className="font-anton text-lg pb-2">Challenge A - Pelota</h1> + {challengesA?.filter((challenge) => challenge.roundId === selection).map((challenge, key) => ( + <div key={key} className="px-5"> + Ball contact: {challenge.ballContact ? "Yes" : "No"} + <br />Ball saved: {challenge.ballSaved ? "Yes" : "No"} + <br />Finish track: {challenge.finshTrack ? "Yes" : "No"} + <br />Finish track (No crossing line): {challenge.finishTrackNoCrossingLine ? "Yes" : "No"} + <br />Bonus: {challenge.obtainedBonus ? "Yes" : "No"} + <br />Time: {challenge.roundTimeSeconds} seconds + <br />Lack of progress: {challenge.lackOfProgress ? "Yes" : "No"} + <hr className="py-1" /> + Points: {challenge.points} + </div> + ))} + </div> + + + <div className="pb-10"> + <h1 className="font-anton text-lg pb-2">Challenge B - Seguidor de línea</h1> + {challengesB?.filter((challenge) => challenge.roundId === selection).map((challenge, key) => ( + <div key={key} className="px-5"> + Track Points: {challenge.trackPoints} + <br />Time: {challenge.roundTimeSeconds} seconds + <br />Lack of progress: {challenge.lackOfProgress ? "Yes" : "No"} + <hr className="py-1" /> + Points: {challenge.points} + </div> + ))} + </div> + + + <h1 className="font-anton text-lg pb-2">Challenge C - Laberinto</h1> + {challengesC?.filter((challenge) => challenge.roundId === selection).map((challenge, key) => ( + <div key={key} className="px-5"> + Number of detected colors: {challenge.detectedColors} + <br />Passed ramp: {challenge.passedRamp ? "Yes" : "No"} + <br />Passed ramp (No lack of progress): {challenge.crossedRampWithoutLOP ? "Yes" : "No"} + <br />Passed ramp (No touching walls): {challenge.crossedRampWithoutTouching ? "Yes" : "No"} + <br />Balanced in ramp: {challenge.balancedRamp ? "Yes" : "No"} + <br />Bonus: {challenge.obtainedBonus ? "Yes" : "No"} + <br />Time: {challenge.roundTimeSeconds} seconds + <br />Lack of progress: {challenge.lackOfProgress ? "Yes" : "No"} + <hr className="py-1" /> + Points: {challenge.points} + </div> + ))} + </div> + </div> + ) +} + + + export default TeamInfo; \ No newline at end of file From 9ac0ce2e3b72377a69cb891ccec8457fca25da28 Mon Sep 17 00:00:00 2001 From: Alejandra Coeto <a01285221@tec.mx> Date: Thu, 31 Oct 2024 12:24:20 -0600 Subject: [PATCH 4/7] Refactor and fixed imports --- src/app/_components/team/results.tsx | 115 ++++++++++++++++++++++++++ src/app/_components/team/team.tsx | 116 +-------------------------- src/app/team/page.tsx | 7 +- 3 files changed, 119 insertions(+), 119 deletions(-) create mode 100644 src/app/_components/team/results.tsx diff --git a/src/app/_components/team/results.tsx b/src/app/_components/team/results.tsx new file mode 100644 index 0000000..b063fdd --- /dev/null +++ b/src/app/_components/team/results.tsx @@ -0,0 +1,115 @@ +"use client"; +import { Challenge, Team, User } from "@prisma/client"; +import Table from "rbrgs/app/_components/table"; +import Input from "../input"; +import Spinner from "../spinner"; +import Title from "../title"; +import SwitchButton from "./switchButton"; +import { useCallback, useState } from "react"; +import { TeamType } from "rbrgs/server/api/routers/team"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../shadcn/ui/select"; + + +const Results = ({ team }: { team: TeamType }) => { + const challengeA = team?.challengeA; + const challengeB = team?.challengeB; + const challengeC = team?.challengeC; + const [selected, setSelected] = useState("Sin seleccionar"); + + + return ( + <div> + <h1 className="mb-5 text-center text-4xl">Results</h1> + <div className="mx-auto lg:w-1/2"> + <p>Selecciona una ronda</p> + <Select + onValueChange={(value) => { + setSelected(value); + }} + value={selected} + > + <SelectTrigger> + <SelectValue placeholder="Selecciona una ronda" /> + </SelectTrigger> + + <SelectContent> + <SelectItem value="1">Ronda 1</SelectItem> + <SelectItem value="2">Ronda 2</SelectItem> + <SelectItem value="3">Ronda 3</SelectItem> + </SelectContent> + </Select> + + {selected != "Sin seleccionar" && ( + <RoundResults team={team} selection={selected} /> + )} + + + </div> + </div> + ) +} + +const RoundResults = ({ team, selection }: { team: TeamType, selection: string }) => { + + const challengesA = team?.challengeA; + const challengesB = team?.challengeB; + const challengesC = team?.challengeC; + + return ( + <div className="pt-10"> + <div> + <div className="pb-10"> + + <h1 className="font-anton text-lg pb-2">Challenge A - Pelota</h1> + {challengesA?.filter((challenge) => challenge.roundId === selection).map((challenge, key) => ( + <div key={key} className="px-5"> + Ball contact: {challenge.ballContact ? "Yes" : "No"} + <br />Ball saved: {challenge.ballSaved ? "Yes" : "No"} + <br />Finish track: {challenge.finshTrack ? "Yes" : "No"} + <br />Finish track (No crossing line): {challenge.finishTrackNoCrossingLine ? "Yes" : "No"} + <br />Bonus: {challenge.obtainedBonus ? "Yes" : "No"} + <br />Time: {challenge.roundTimeSeconds} seconds + <br />Lack of progress: {challenge.lackOfProgress ? "Yes" : "No"} + <hr className="py-1" /> + Points: {challenge.points} + </div> + ))} + </div> + + + <div className="pb-10"> + <h1 className="font-anton text-lg pb-2">Challenge B - Seguidor de línea</h1> + {challengesB?.filter((challenge) => challenge.roundId === selection).map((challenge, key) => ( + <div key={key} className="px-5"> + Track Points: {challenge.trackPoints} + <br />Time: {challenge.roundTimeSeconds} seconds + <br />Lack of progress: {challenge.lackOfProgress ? "Yes" : "No"} + <hr className="py-1" /> + Points: {challenge.points} + </div> + ))} + </div> + + + <h1 className="font-anton text-lg pb-2">Challenge C - Laberinto</h1> + {challengesC?.filter((challenge) => challenge.roundId === selection).map((challenge, key) => ( + <div key={key} className="px-5"> + Number of detected colors: {challenge.detectedColors} + <br />Passed ramp: {challenge.passedRamp ? "Yes" : "No"} + <br />Passed ramp (No lack of progress): {challenge.crossedRampWithoutLOP ? "Yes" : "No"} + <br />Passed ramp (No touching walls): {challenge.crossedRampWithoutTouching ? "Yes" : "No"} + <br />Balanced in ramp: {challenge.balancedRamp ? "Yes" : "No"} + <br />Bonus: {challenge.obtainedBonus ? "Yes" : "No"} + <br />Time: {challenge.roundTimeSeconds} seconds + <br />Lack of progress: {challenge.lackOfProgress ? "Yes" : "No"} + <hr className="py-1" /> + Points: {challenge.points} + </div> + ))} + </div> + </div> + ) +} + + +export default Results; \ No newline at end of file diff --git a/src/app/_components/team/team.tsx b/src/app/_components/team/team.tsx index d6ef79a..4351a69 100644 --- a/src/app/_components/team/team.tsx +++ b/src/app/_components/team/team.tsx @@ -1,5 +1,5 @@ "use client"; -import { Challenge, Team, User } from "@prisma/client"; +import { Challenge, User } from "@prisma/client"; import Table from "rbrgs/app/_components/table"; import Input from "../input"; import Spinner from "../spinner"; @@ -7,17 +7,7 @@ import Title from "../title"; import SwitchButton from "./switchButton"; import { useCallback, useState } from "react"; import { TeamType } from "rbrgs/server/api/routers/team"; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../shadcn/ui/select"; - -interface Round { - number: number; - challenges: { - name: string; - id: string; - time: Date; - roundId: string; - }[]; -} +import Results from "./results"; interface Data { col1: string; @@ -50,7 +40,6 @@ function transformInterviewData(members: User[]): Data[] { const TeamInfo = ({ team }: { team: TeamType }) => { - const [variant, setSelected] = useState("INFO"); const toggleVariant = useCallback(() => { setSelected(variant === "INFO" ? "RESULTS" : "INFO"); @@ -102,7 +91,6 @@ const Schedules = ({ team }: { team: TeamType }) => { /> ))} - {/* <Title title="Interviews" /> */} <h1 className="mb-5 text-center text-4xl mt-16">Interviews</h1> <Table data={team?.members ? transformInterviewData(team.members) : []} title={""} /> @@ -110,106 +98,6 @@ const Schedules = ({ team }: { team: TeamType }) => { ) } -const Results = ({ team }: { team: TeamType }) => { - const challengeA = team?.challengeA; - const challengeB = team?.challengeB; - const challengeC = team?.challengeC; - const [selected, setSelected] = useState("Sin seleccionar"); - - - return ( - <div> - <h1 className="mb-5 text-center text-4xl">Results</h1> - <div className="mx-auto lg:w-1/2"> - <Select - onValueChange={(value) => { - setSelected(value); - }} - value={selected} - > - <SelectTrigger> - <SelectValue placeholder="Selecciona una ronda" /> - </SelectTrigger> - - <SelectContent> - <SelectItem value="1">Ronda 1</SelectItem> - <SelectItem value="2">Ronda 2</SelectItem> - <SelectItem value="3">Ronda 3</SelectItem> - </SelectContent> - </Select> - - {selected != "Sin seleccionar" && ( - <RoundResults team={team} selection={selected} /> - )} - - - </div> - </div> - ) -} - -const RoundResults = ({ team, selection }: { team: TeamType, selection: string }) => { - - const challengesA = team?.challengeA; - const challengesB = team?.challengeB; - const challengesC = team?.challengeC; - - return ( - <div className="pt-10"> - <div> - <div className="pb-10"> - - <h1 className="font-anton text-lg pb-2">Challenge A - Pelota</h1> - {challengesA?.filter((challenge) => challenge.roundId === selection).map((challenge, key) => ( - <div key={key} className="px-5"> - Ball contact: {challenge.ballContact ? "Yes" : "No"} - <br />Ball saved: {challenge.ballSaved ? "Yes" : "No"} - <br />Finish track: {challenge.finshTrack ? "Yes" : "No"} - <br />Finish track (No crossing line): {challenge.finishTrackNoCrossingLine ? "Yes" : "No"} - <br />Bonus: {challenge.obtainedBonus ? "Yes" : "No"} - <br />Time: {challenge.roundTimeSeconds} seconds - <br />Lack of progress: {challenge.lackOfProgress ? "Yes" : "No"} - <hr className="py-1" /> - Points: {challenge.points} - </div> - ))} - </div> - - - <div className="pb-10"> - <h1 className="font-anton text-lg pb-2">Challenge B - Seguidor de línea</h1> - {challengesB?.filter((challenge) => challenge.roundId === selection).map((challenge, key) => ( - <div key={key} className="px-5"> - Track Points: {challenge.trackPoints} - <br />Time: {challenge.roundTimeSeconds} seconds - <br />Lack of progress: {challenge.lackOfProgress ? "Yes" : "No"} - <hr className="py-1" /> - Points: {challenge.points} - </div> - ))} - </div> - - - <h1 className="font-anton text-lg pb-2">Challenge C - Laberinto</h1> - {challengesC?.filter((challenge) => challenge.roundId === selection).map((challenge, key) => ( - <div key={key} className="px-5"> - Number of detected colors: {challenge.detectedColors} - <br />Passed ramp: {challenge.passedRamp ? "Yes" : "No"} - <br />Passed ramp (No lack of progress): {challenge.crossedRampWithoutLOP ? "Yes" : "No"} - <br />Passed ramp (No touching walls): {challenge.crossedRampWithoutTouching ? "Yes" : "No"} - <br />Balanced in ramp: {challenge.balancedRamp ? "Yes" : "No"} - <br />Bonus: {challenge.obtainedBonus ? "Yes" : "No"} - <br />Time: {challenge.roundTimeSeconds} seconds - <br />Lack of progress: {challenge.lackOfProgress ? "Yes" : "No"} - <hr className="py-1" /> - Points: {challenge.points} - </div> - ))} - </div> - </div> - ) -} - export default TeamInfo; \ No newline at end of file diff --git a/src/app/team/page.tsx b/src/app/team/page.tsx index 2ea76fd..d0ca942 100644 --- a/src/app/team/page.tsx +++ b/src/app/team/page.tsx @@ -48,19 +48,16 @@ export default async function TeamPage({ params }: { params: { teampage: string <span className="font-normal text-gray-200 pr-1">< </span> Welcome <span className="font-jersey_25 text-blue-700 text-3xl">{session.user.name}</span> ! <span className="font-normal pl-1 text-gray-200">/></span> </h1> <div> - Here you will find the schedules for your rounds and interviews. - <br />Please make sure to be on time. + Here you will find the schedules for your rounds and interviews as well as results for each round. + <br />Please make sure to be on time for rounds and interviews. <br />Don't forget to add the link to your documents down below. <br />A link to a google drive folder is fine, but remember we can see the last time it was updated/created. (Ensure permissions are correct for us to access the docs) </div> </div> - {/* <SwitchButton variant="DOCS" onClick={onClick} /> */} - {team && <TeamInfo team={team} />} - <Footer /> </div> ); From 93e9b1b33468e60f41407b32e76cd5b282b934b7 Mon Sep 17 00:00:00 2001 From: Alejandra Coeto <a01285221@tec.mx> Date: Thu, 31 Oct 2024 12:42:54 -0600 Subject: [PATCH 5/7] Finish results view --- src/app/_components/team/results.tsx | 16 +++++----------- src/app/_components/team/switchButton.tsx | 5 ++--- 2 files changed, 7 insertions(+), 14 deletions(-) diff --git a/src/app/_components/team/results.tsx b/src/app/_components/team/results.tsx index b063fdd..446efd2 100644 --- a/src/app/_components/team/results.tsx +++ b/src/app/_components/team/results.tsx @@ -1,11 +1,5 @@ "use client"; -import { Challenge, Team, User } from "@prisma/client"; -import Table from "rbrgs/app/_components/table"; -import Input from "../input"; -import Spinner from "../spinner"; -import Title from "../title"; -import SwitchButton from "./switchButton"; -import { useCallback, useState } from "react"; +import { useState } from "react"; import { TeamType } from "rbrgs/server/api/routers/team"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../shadcn/ui/select"; @@ -21,7 +15,7 @@ const Results = ({ team }: { team: TeamType }) => { <div> <h1 className="mb-5 text-center text-4xl">Results</h1> <div className="mx-auto lg:w-1/2"> - <p>Selecciona una ronda</p> + <p>Select a round</p> <Select onValueChange={(value) => { setSelected(value); @@ -60,7 +54,7 @@ const RoundResults = ({ team, selection }: { team: TeamType, selection: string } <div> <div className="pb-10"> - <h1 className="font-anton text-lg pb-2">Challenge A - Pelota</h1> + <h1 className="font-anton text-lg pb-2">Challenge A - Ball</h1> {challengesA?.filter((challenge) => challenge.roundId === selection).map((challenge, key) => ( <div key={key} className="px-5"> Ball contact: {challenge.ballContact ? "Yes" : "No"} @@ -78,7 +72,7 @@ const RoundResults = ({ team, selection }: { team: TeamType, selection: string } <div className="pb-10"> - <h1 className="font-anton text-lg pb-2">Challenge B - Seguidor de línea</h1> + <h1 className="font-anton text-lg pb-2">Challenge B - Line Follower</h1> {challengesB?.filter((challenge) => challenge.roundId === selection).map((challenge, key) => ( <div key={key} className="px-5"> Track Points: {challenge.trackPoints} @@ -91,7 +85,7 @@ const RoundResults = ({ team, selection }: { team: TeamType, selection: string } </div> - <h1 className="font-anton text-lg pb-2">Challenge C - Laberinto</h1> + <h1 className="font-anton text-lg pb-2">Challenge C - Maze</h1> {challengesC?.filter((challenge) => challenge.roundId === selection).map((challenge, key) => ( <div key={key} className="px-5"> Number of detected colors: {challenge.detectedColors} diff --git a/src/app/_components/team/switchButton.tsx b/src/app/_components/team/switchButton.tsx index b92f035..b7fd8c3 100644 --- a/src/app/_components/team/switchButton.tsx +++ b/src/app/_components/team/switchButton.tsx @@ -9,11 +9,10 @@ interface sbuttonProps { } const SwitchButton: React.FC<sbuttonProps> = ({ variant, onClick }) => { - const [selected, setSelected] = useState("DOCS"); return ( <div className="w-full flex flex-col justify-center mt-5 gap-3 pb-20"> - <div className='flex mx-auto bg-white p-1 rounded-md shadow-md'> + <div className='flex mx-auto bg-neutral-800 p-1 rounded-md shadow-md'> <ButtonX label="Schedule" selected={variant == "INFO"} onClick={onClick} /> <ButtonX label="Results" selected={variant == "RESULTS"} onClick={onClick} /> @@ -30,7 +29,7 @@ interface buttonProps { const ButtonX: React.FC<buttonProps> = ({ label, selected, onClick }) => { return ( - <button className={`flex items-center justify-center p-2 rounded-md ${selected ? 'bg-blue-500 text-white' : 'text-gray-600'}`} onClick={onClick}> + <button className={`flex items-center justify-center p-2 rounded-md ${selected ? 'bg-blue-600 text-white' : 'text-gray-400'}`} onClick={onClick}> <span>{label}</span> </button> ) From 2c9b575be44b50560f2d3ff4ca3bf9e209482391 Mon Sep 17 00:00:00 2001 From: Alejandra Coeto <a01285221@tec.mx> Date: Thu, 31 Oct 2024 12:45:10 -0600 Subject: [PATCH 6/7] Responsive --- src/app/_components/team/results.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/_components/team/results.tsx b/src/app/_components/team/results.tsx index 446efd2..a930082 100644 --- a/src/app/_components/team/results.tsx +++ b/src/app/_components/team/results.tsx @@ -14,7 +14,7 @@ const Results = ({ team }: { team: TeamType }) => { return ( <div> <h1 className="mb-5 text-center text-4xl">Results</h1> - <div className="mx-auto lg:w-1/2"> + <div className="mx-auto w-10/12 lg:w-1/2"> <p>Select a round</p> <Select onValueChange={(value) => { From 77015e1c5afc8881a6da347b37869aefbd732174 Mon Sep 17 00:00:00 2001 From: Alejandra Coeto <a01285221@tec.mx> Date: Thu, 31 Oct 2024 12:47:25 -0600 Subject: [PATCH 7/7] Fix build --- src/app/_components/team/results.tsx | 4 ++-- src/app/team/page.tsx | 21 +-------------------- 2 files changed, 3 insertions(+), 22 deletions(-) diff --git a/src/app/_components/team/results.tsx b/src/app/_components/team/results.tsx index a930082..6f16501 100644 --- a/src/app/_components/team/results.tsx +++ b/src/app/_components/team/results.tsx @@ -9,13 +9,13 @@ const Results = ({ team }: { team: TeamType }) => { const challengeB = team?.challengeB; const challengeC = team?.challengeC; const [selected, setSelected] = useState("Sin seleccionar"); - + return ( <div> <h1 className="mb-5 text-center text-4xl">Results</h1> <div className="mx-auto w-10/12 lg:w-1/2"> - <p>Select a round</p> + <p>Select a round</p> <Select onValueChange={(value) => { setSelected(value); diff --git a/src/app/team/page.tsx b/src/app/team/page.tsx index d0ca942..784a450 100644 --- a/src/app/team/page.tsx +++ b/src/app/team/page.tsx @@ -1,30 +1,13 @@ -import { Challenge, User } from "@prisma/client"; import { api } from "rbrgs/trpc/server"; import Header from "../_components/header"; -import Title from "../_components/title"; -import { signIn } from "next-auth/react"; import Footer from "../_components/footer"; -import Spinner from "../_components/spinner"; import { getServerAuthSession } from "rbrgs/server/auth"; -import Input from "../_components/input"; -import LoginText from "../_components/login-text"; import CustomLoginText from "../_components/custom-login-text"; -import SwitchButton from "../_components/team/switchButton"; import TeamInfo from "../_components/team/team"; - - -function onClick() { - signIn("google"); -} - export default async function TeamPage({ params }: { params: { teampage: string } }) { const session = await getServerAuthSession(); - - - - if (!session) { return ( <div className="h-screen flex items-center justify-center"> @@ -41,8 +24,6 @@ export default async function TeamPage({ params }: { params: { teampage: string <Header title="Team" subtitle={team?.name ?? ""} /> </div> - - <div className="px-20 pb-20 pt-10"> <h1 className="text-xl font-semibold"> <span className="font-normal text-gray-200 pr-1">< </span> Welcome <span className="font-jersey_25 text-blue-700 text-3xl">{session.user.name}</span> ! <span className="font-normal pl-1 text-gray-200">/></span> @@ -57,7 +38,7 @@ export default async function TeamPage({ params }: { params: { teampage: string </div> {team && <TeamInfo team={team} />} - + <Footer /> </div> );