Skip to content

Commit

Permalink
Merge pull request #186 from Decatur-Robotics/non-hardcoded-forms
Browse files Browse the repository at this point in the history
Non-Hardcoded Forms
  • Loading branch information
renatodellosso authored Jun 26, 2024
2 parents 612829c + 9910d02 commit 0c7b3b1
Show file tree
Hide file tree
Showing 41 changed files with 1,722 additions and 1,329 deletions.
2 changes: 1 addition & 1 deletion components/Container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -336,7 +336,7 @@ export default function Container(props: ContainerProps) {
{selectedTeamSeasons.map((season, index) => {
return (
<Link
className="btn btn-ghost w-7/8 bg-base-200 normal-case"
className="btn btn-ghost w-7/8 bg-base-200 normal-case mb-2"
href={`/${selectedTeam?.slug}/${season?.slug}`}
key={season._id}
>
Expand Down
13 changes: 6 additions & 7 deletions components/forms/Buttons.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@
import { FormData } from "@/lib/Types";
import { QuantData } from "@/lib/Types";
export type ButtonProps = {
data: FormData;
data: QuantData;
callback: (key: string, value: string | number | boolean) => void;
};

function IncrementButton(
props: { dataKey: string, data: FormData,
export function IncrementButton(
props: { dataKey: string, data: QuantData,
callback: (key: string, value: string | number | boolean) => void, text: string, rounded?: string }) {

const roundTop = props.rounded?.includes("t");
const roundBottom = props.rounded?.includes("b");

console.log(props.rounded, roundTop, roundBottom);
return (
<div className="flex flex-col h-full pb-6">
<div className="flex flex-col h-fit" key={props.dataKey}>
<button
onClick={() => {
props.callback(props.dataKey, props.data[props.dataKey] + 1);
}}
className={`btn btn-outline active:bg-blue-300
${(roundBottom || !props.rounded) && "rounded-none"} ${roundTop && " rounded-br-none rounded-bl-none"}
${roundTop && (props.rounded === "tl" ? " rounded-tr-none" : "rounded-tl-none")} w-full h-[80%] text-lg
${roundTop && (props.rounded === "tl" ? " rounded-tr-none" : "rounded-tl-none")} w-full h-[150px] text-lg
${roundTop && ` rounded-${props.rounded}-xl`}`}
>
{props.text}: {props.data[props.dataKey]}
Expand Down
95 changes: 11 additions & 84 deletions components/forms/Checkboxes.tsx
Original file line number Diff line number Diff line change
@@ -1,108 +1,35 @@
import { Drivetrain, FormData, IntakeTypes, Pitreport } from "@/lib/Types";
import { QuantData, Pitreport } from "@/lib/Types";
import { Crescendo } from "@/lib/games";
export type CheckboxProps = {
label: string;
dataKey: string;
data: FormData | Pitreport;
data: QuantData | Pitreport;
callback: (key: string, value: string | number | boolean) => void;
divider?: boolean;
};
export type RadioProps = {
data: FormData | Pitreport;
data: QuantData | Pitreport;
callback: (key: string, value: string | number | boolean) => void;
};

export default function Checkbox(props: CheckboxProps) {
//@ts-expect-error
const checked = props.data[props.dataKey];
const checked = props.data instanceof Pitreport ? props.data.data?.[props.dataKey] : props.data?.[props.dataKey];

return (
<label className="w-5/6 label cursor-pointer flex flex-row space-x-8 border-b-2 border-slate-600">
<label className={`w-5/6 label cursor-pointer flex flex-row space-x-8 ${props.divider && "border-b-2 border-slate-600"}`}>
<span className="w-2/3 label-text text-lg font-semibold ">
{props.label}
</span>

<input
type="checkbox"
onChange={() => {
console.log(props.dataKey, !checked);
props.callback(props.dataKey, !checked);
}}
checked={checked}
className="w-8 h-8 checkbox checkbox-primary"
/>
</label>
);
}

export function IntakeType(props: RadioProps) {
return (
<div className=" font-mono w-full grid grid-cols-2 grid-rows-4 align-left text-md md:text-xl">
<span>No Intake: </span>
<input
type="radio"
className="radio radio-neutral-content ml-10"
onClick={() => {
props.callback("intakeType", IntakeTypes.None);
}}
checked={props.data.intakeType === IntakeTypes.None}
/>
<span>Human: </span>
<input
type="radio"
className="radio radio-primary ml-10"
onClick={() => {
props.callback("intakeType", IntakeTypes.Human);
}}
checked={props.data.intakeType === IntakeTypes.Human}
/>
<span>Ground Intake: </span>
<input
type="radio"
className="radio radio-secondary ml-10"
onClick={() => {
props.callback("intakeType", IntakeTypes.Ground);
}}
checked={props.data.intakeType === IntakeTypes.Ground}
/>
<span>Both: </span>
<input
type="radio"
className="radio radio-accent ml-10"
onClick={() => {
props.callback("intakeType", IntakeTypes.Both);
}}
checked={props.data.intakeType === IntakeTypes.Both}
/>
</div>
);
}

export function DrivetrainType(props: RadioProps) {
return (
<div className="font-mono w-full grid grid-cols-2 grid-rows-3 max-sm:gap-1 text-md md:text-xl">
<span>Tank Drive: </span>
<input
type="radio"
className="radio radio-primary ml-10"
onClick={() => {
props.callback("drivetrain", Drivetrain.Tank);
}}
checked={props.data.drivetrain === Drivetrain.Tank}
/>
<span>Mecanum Drive: </span>
<input
type="radio"
className="radio radio-primary ml-10"
onClick={() => {
props.callback("drivetrain", Drivetrain.Mecanum);
}}
checked={props.data.drivetrain === Drivetrain.Mecanum}
/>
<span>Swerve Drive: </span>
<input
type="radio"
className="radio radio-secondary ml-10"
onClick={() => {
props.callback("drivetrain", Drivetrain.Swerve);
}}
checked={props.data.drivetrain === Drivetrain.Swerve}
/>
</div>
);
}
}
8 changes: 5 additions & 3 deletions components/forms/Comment.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import { FormData, Pitreport } from "@/lib/Types";
import { QuantData, Pitreport } from "@/lib/Types";
export type CommentProps = {
data: FormData | Pitreport;
data: QuantData | Pitreport;
callback: (key: string, value: string) => void;
};

export function CommentBox(props: CommentProps) {
const data = "comments" in props.data ? props.data : props.data.data;

return (
<div className="flex flex-col w-full h-1/2 items-center justify-center ">
<h1 className="font-semibold mb-2">Comments:</h1>
<textarea
value={props.data.comments}
value={data?.comments}
className="textarea textarea-primary w-full"
placeholder="Say Something Important..."
onChange={(e) => {
Expand Down
Loading

0 comments on commit 0c7b3b1

Please sign in to comment.