Enums in pit stats

Decatur-Robotics · Jun 20, 2024 · b8584eb · b8584eb
1 parent 042a56a
commit b8584eb
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 102 deletions.
diff --git a/components/forms/Form.tsx b/components/forms/Form.tsx
@@ -1,6 +1,6 @@
 import { AllianceColor, Report, QuantitativeFormData, QuantitativeReportLayout, QuantitativeReportLayoutElement, QuantitativeReportLayoutElementHolder, IntakeTypes, Defense, Drivetrain } from "@/lib/Types";
 import { useCallback, useState, useEffect } from "react";
-import FormPage, { AutoPage, EndPage, PrematchPage, TeleopPage } from "./FormPages";
+import FormPage from "./FormPages";
 import { useCurrentSession } from "@/lib/client/useCurrentSession";
 
 import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
@@ -12,6 +12,7 @@ import { camelCaseToTitleCase } from "@/lib/client/ClientUtils";
 import StartingPosition from "./StartingPosition";
 import { CommentBox } from "./Comment";
 import { IncrementButton } from "./Buttons";
+import Slider from "./Sliders";
 
 const api = new ClientAPI("gearboxiscool");
 
@@ -95,10 +96,14 @@ export default function Form(props: { report: Report, layout: QuantitativeReport
       else {
         const enums = [IntakeTypes, Defense, Drivetrain];
 
-        for (const e of enums) {
-          if (Object.values(e).includes(formData[element.key])) {
-            element.type = e;
-            break;
+        if (element.key === "Defense")
+          element.type = Defense;
+        else {
+          for (const e of enums) {
+            if (Object.values(e).includes(formData[element.key])) {
+              element.type = e;
+              break;
+            }
           }
         }
 
@@ -150,6 +155,15 @@ export default function Form(props: { report: Report, layout: QuantitativeReport
         <CommentBox data={formData} callback={setCallback} />
       );
     }
+
+    // Enum
+    if (element.type) {
+      return (
+        <Slider data={formData} callback={setCallback} possibleValues={element.type} 
+          title={element.label ?? camelCaseToTitleCase(element.key as string)} value={formData[element.key]}
+          key={element.key} />
+      );
+    }
   }
 
   function blockToNode(block: QuantitativeReportLayoutElementHolder<QuantitativeFormData>[][]) {
@@ -213,8 +227,6 @@ export default function Form(props: { report: Report, layout: QuantitativeReport
     );
   });
 
-  console.log(formData);
-
   return (
     <div className="w-full h-fit flex flex-col items-center space-y-2 mb-2">
       {pages[page]}

diff --git a/components/forms/FormPages.tsx b/components/forms/FormPages.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import StartingPosition from "./StartingPosition";
 import { AutoButtons, TeleopButtons } from "./Buttons";
-import DefenseSlider from "./Sliders";
+import Slider from "./Sliders";
 import Checkbox, { IntakeType } from "./Checkboxes";
 import { AllianceColor, QuantitativeFormData } from "@/lib/Types";
 import { CommentBox } from "./Comment";
@@ -36,88 +36,4 @@ export default function FormPage(props: {
       </div>
     </main>
   );
-}
-
-export function PrematchPage(props: PageProps) {
-  return <FormPage title="Pre-match">
-    <Checkbox
-        label="Robot Present"
-        dataKey="Presented"
-        data={props.data}
-        callback={props.callback}
-      ></Checkbox>
-      <StartingPosition
-        alliance={props.alliance}
-        data={props.data}
-        callback={props.callback}
-      ></StartingPosition>
-  </FormPage>
-}
-
-export function AutoPage(props: PageProps) {
-  return (
-    <FormPage title="Auto">
-      <Checkbox
-        label="Moved out of starting zone"
-        dataKey="MovedOut"
-        data={props.data}
-        callback={props.callback}
-      ></Checkbox>
-      <br></br>
-      <AutoButtons data={props.data} callback={props.callback}></AutoButtons>
-    </FormPage>
-  );
-}
-
-export function TeleopPage(props: PageProps) {
-  return (
-    <FormPage title="Teleop">
-      <TeleopButtons
-        data={props.data}
-        callback={props.callback}
-      ></TeleopButtons>
-      <DefenseSlider
-        data={props.data}
-        callback={props.callback}
-      ></DefenseSlider>
-    </FormPage>
-  );
-}
-
-export function EndPage(props: EndPageProps) {
-  return (
-    <FormPage title="Summary">
-      <Checkbox
-        label="Coopertition Activated"
-        dataKey="Coopertition"
-        data={props.data}
-        callback={props.callback}
-      ></Checkbox>
-
-      <Checkbox
-        label="Climbed Stage"
-        dataKey="ClimbedStage"
-        data={props.data}
-        callback={props.callback}
-      ></Checkbox>
-      <Checkbox
-        label="Parked Stage"
-        dataKey="ParkedStage"
-        data={props.data}
-        callback={props.callback}
-      ></Checkbox>
-      <Checkbox
-        label="Went Under Stage"
-        dataKey="UnderStage"
-        data={props.data}
-        callback={props.callback}
-      ></Checkbox>
-
-      <CommentBox data={props.data} callback={props.callback}></CommentBox>
-      <hr className="w-full border-slate-700 border-2"></hr>
-      <button className="btn btn-wide btn-primary " onClick={props.submit}>
-        Submit
-      </button>
-    </FormPage>
-  );
-}
+}
diff --git a/components/forms/Sliders.tsx b/components/forms/Sliders.tsx
@@ -3,29 +3,39 @@ import { QuantitativeFormData, Defense } from "@/lib/Types";
 export type SliderProps = {
   data: QuantitativeFormData;
   callback: (key: string, value: string | number | boolean) => void;
+  possibleValues: { [key: string]: any };
+  title: string;
+  value: any;
+  key: keyof QuantitativeFormData;
 };
-export default function DefenseSlider(props: SliderProps) {
-  const keys = Object.keys(Defense);
-  const num = keys.indexOf(props.data.Defense);
+export default function Slider(props: SliderProps) {
+  const keys = Object.keys(props.possibleValues);
+  const num = keys.indexOf(props.value);
 
   return (
     <div className="w-full text-center">
-      <h1 className="font-semibold text-xl mb-2">Defense</h1>
+      <h1 className="font-semibold text-xl mb-2">{props.title}</h1>
       <input
         onChange={(e) => {
-          props.callback("Defense", keys[e.target.valueAsNumber]);
+          props.callback(props.key as string, keys[e.target.valueAsNumber]);
         }}
         type="range"
         min={0}
-        max="2"
+        max={keys.length - 1}
         value={num}
         className="range range-primary"
         step="1"
       />
       <div className="w-full flex justify-between text-lg px-2 text-center">
-        <span>None</span>
-        <span>Partial</span>
-        <span>Full</span>
+        {
+          keys.map((key, i) => {
+            return (
+              <span key={i}>
+                {key}
+              </span>
+            );
+          })
+        }
       </div>
     </div>
   );