Splan functionality is complete

DylanBPY · DylanBPY · commit 40324d31af70 · 2025-02-16T08:51:51.000-05:00
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -6,12 +6,11 @@ import { useState, useRef, useEffect } from "react"
 import { useTheme } from "next-themes";
 import { Toaster, toast } from "sonner";
 import { connectToSpike, sendCodeToSpike, readResponseFromSpike } from "@/components/pybricks/tools";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+import { Dialog, DialogTrigger, DialogTitle, DialogDescription, DialogHeader, DialogFooter, DialogContent } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectItem, SelectTrigger, SelectValue, SelectContent, SelectGroup } from "@/components/ui/select";
 
 const sample_code = `
 from pybricks.pupdevices import Motor
@@ -24,12 +23,12 @@ const game_board_width = 2362.2 // mm
 const game_board_height = 1143.0 // mm
 
 class DriveBase {
-  left_motor: "A" | "B" | "C" | "D";
-  right_motor: "A" | "B" | "C" | "D";
+  left_motor: "A" | "B" | "C" | "D" | "E" | "F";
+  right_motor: "A" | "B" | "C" | "D" | "E" | "F";
   wheel_diameter: number;
   axle_track: number;
 
-  constructor(left_motor: "A" | "B" | "C" | "D", right_motor: "A" | "B" | "C" | "D", wheel_diameter: number, axle_track: number) {
+  constructor(left_motor: "A" | "B" | "C" | "D" | "E" | "F", right_motor: "A" | "B" | "C" | "D" | "E" | "F", wheel_diameter: number, axle_track: number) {
     if (left_motor === right_motor) {
       throw new Error("Left and right motors must be different");
     }
@@ -144,6 +143,8 @@ export default function App() {
   const [run_index, SetRunIndex] = useState(0)
   const img_size_ref = useRef(null)
   const [img_dimensions, SetImageDimensions] = useState({ width: 0, height: 0 });
+  const [run_creator_open, SetRunCreatorOpen] = useState(false)
+  const [splan_creator_open, SetSplanCreatorOpen] = useState(false)
 
   useEffect(() => {
     if (img_size_ref.current) {
@@ -185,7 +186,143 @@ export default function App() {
     link.click();
     URL.revokeObjectURL(url);
   }
-  
+
+  function HandleCreateRun() {
+    if (!pysplan_handler) { toast.error("No Splan to add run to", {duration: 5000}); return; }
+    SetRunCreatorOpen(true);
+  }
+
+  const CreateRun = (name: string) => {
+    if (!pysplan_handler) { toast.error("No Splan to add run to", {duration: 5000}); return; }
+    const new_run = new Run(name, [], []);
+    SetPySplanHandler({ ...pysplan_handler, runs: [...pysplan_handler.runs, new_run] });
+    SetRunCreatorOpen(false);
+  }
+
+  const CreateRunDialog = () => {
+    const [new_run_name, SetNewRunName] = useState<string>("New Run")
+    return (
+      <Dialog open={run_creator_open} onOpenChange={SetRunCreatorOpen}>
+        <DialogTrigger asChild></DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create Run</DialogTitle>
+            <DialogDescription>
+              Enter a name for the new run.
+            </DialogDescription>
+          </DialogHeader>
+          <Input onChange={(e) => SetNewRunName(e.target.value)} value={new_run_name} />
+          <DialogFooter>
+            <Button onClick={() => CreateRun(new_run_name)} className="w-full">Create</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  function HandleCreateSplan() {
+    SetSplanCreatorOpen(true);
+  }
+
+  const CreateSplan = (name: string, left_motor: string, right_motor: string, wheel_diameter: number, axle_track: number) => {
+    if (name === "") { toast.error("Splan name cannot be empty", {duration: 5000}); return; }
+    if (left_motor === "None" || right_motor === "None") { toast.error("Left and right motors cannot be empty", {duration: 5000}); return; }
+    if (left_motor === right_motor) { toast.error("Left and right motors must be different", {duration: 5000}); return; }
+    if (wheel_diameter <= 0 || axle_track <= 0) { toast.error("Wheel diameter and axle track must be greater than 0", {duration: 5000}); return; }
+
+    const splan_data = {"name": name, "drive_base": {"left_motor": left_motor, "right_motor": right_motor, "wheel_diameter": wheel_diameter, "axle_track": axle_track}, "runs": []}
+    const new_splan = new SplanContent(splan_data);
+    SetPySplanHandler(new_splan);
+    SetSplanCreatorOpen(false);
+  }
+
+  const CreateSplanDialog = () => {
+    const [new_splan_name, SetNewSplanName] = useState<string>("New Splan")
+    const [left_motor, SetLeftMotor] = useState<"A" | "B" | "C" | "D" | "E" | "F" | "None">("None")
+    const [right_motor, SetRightMotor] = useState<"A" | "B" | "C" | "D" | "E" | "F" | "None">("None")
+    const [wheel_diameter, SetWheelDiameter] = useState<number>(0)
+    const [axle_track, SetAxleTrack] = useState<number>(0)
+
+    return (
+      <Dialog open={splan_creator_open} onOpenChange={SetSplanCreatorOpen}>
+        <DialogTrigger asChild></DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create Splan</DialogTitle>
+            <DialogDescription>
+              Enter the following data to create a new Splan.
+            </DialogDescription>
+          </DialogHeader>
+          <Label>Splan Name</Label>
+          <Input onChange={(e) => SetNewSplanName(e.target.value)} value={new_splan_name} />
+          <Separator />
+          <div className="grid grid-cols-2 gap-4">
+            <div className="flex flex-col gap-2">
+              <Label>Wheel Diameter</Label>
+              <Input type="number" step="any" onChange={(e) => { const value = e.target.value;
+                  if (value === "") {
+                    SetWheelDiameter(0);
+                  } else {
+                    const num = parseFloat(value);
+                    if (!isNaN(num)) SetWheelDiameter(num);
+                  }
+                }} value={wheel_diameter} />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label>Axle Track</Label>
+              <Input type="number" step="any" onChange={(e) => { const value = e.target.value;
+                  if (value === "") {
+                    SetAxleTrack(0);
+                  } else {
+                    const num = parseFloat(value);
+                    if (!isNaN(num)) SetAxleTrack(num);
+                  }
+                }} value={axle_track} />
+            </div>
+          </div>
+          <Separator />
+          <div className="grid grid-cols-2 gap-4">
+            <div className="flex flex-col gap-2">
+              <Label>Left Motor</Label>
+              <Select onValueChange={(e) => SetLeftMotor(e as "A" | "B" | "C" | "D" | "E" | "F")}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a motor" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="A">A</SelectItem>
+                  <SelectItem value="B">B</SelectItem>
+                  <SelectItem value="C">C</SelectItem>
+                  <SelectItem value="D">D</SelectItem>
+                  <SelectItem value="E">E</SelectItem>
+                  <SelectItem value="F">F</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label>Right Motor</Label>
+              <Select onValueChange={(e) => SetRightMotor(e as "A" | "B" | "C" | "D" | "E" | "F")}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a motor" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="A">A</SelectItem>
+                  <SelectItem value="B">B</SelectItem>
+                  <SelectItem value="C">C</SelectItem>
+                  <SelectItem value="D">D</SelectItem>
+                  <SelectItem value="E">E</SelectItem>
+                  <SelectItem value="F">F</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button onClick={() => CreateSplan(new_splan_name, left_motor, right_motor, wheel_diameter, axle_track)} className="w-full">Create</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
   const GenerateCode = async () => {
     const github_url = "https://raw.githubusercontent.com/PySplanner/PySplanner/refs/heads/main/pysplanner.py"
     const response = await fetch(github_url);
@@ -210,7 +347,7 @@ export default function App() {
     SetPySplanHandler({ ...pysplan_handler, runs: [...pysplan_handler.runs.slice(0, run_index), new_run, ...pysplan_handler.runs.slice(run_index + 1)] });
   };
 
-  const flat_points = pysplan_handler?.runs[run_index].points.flatMap(p => [p.x, p.y])
+  const flat_points = pysplan_handler?.runs[run_index]?.points.flatMap(p => [p.x, p.y])
   const spline_points = GetCurvePoints(flat_points ?? []);
 
   const GetSpikeServer = async () => {
@@ -259,7 +396,7 @@ export default function App() {
                 <AccordionTrigger>Splans</AccordionTrigger>
                 <AccordionContent>
                   <div className="flex flex-col gap-2">
-                    <Button variant="secondary" className="w-full">Create Splan</Button>
+                    <Button variant="secondary" className="w-full" onClick={ () => HandleCreateSplan() }>Create Splan</Button>
                     <Button variant="secondary" className="w-full" onClick={ () => HandleLoadSplan() }>Load Splan</Button>
                     <Button variant="secondary" className="w-full" onClick={ () => HandleSaveSplan() }>Save Splan</Button>
                   </div>
@@ -273,9 +410,21 @@ export default function App() {
         <div className="flex flex-col flex-grow overflow-y-auto">
           {pysplan_handler ? (
             <div className="flex flex-col gap-2 w-[calc(100%-30px)] ml-[15px]">
+              <Button variant="secondary" className="w-full" onClick={ () => HandleCreateRun() }>Create Run</Button>
+              <Separator orientation="horizontal" className="bg-zinc-600 w-[calc(100%-30px)] ml-[15px]" />
               {pysplan_handler.runs.map((run, idx) => (
                 <Button key={idx} variant={run_index === idx ? "secondary" : "outline"} className="w-full" onClick={() => SetRunIndex(idx)}>{run.name}</Button>
               ))}
+              {pysplan_handler.runs.length === 0 && (
+                <div>
+                  <p className="text-center mt-4 w-[calc(100%-30px)] ml-[15px] font-bold text-lg">
+                    No runs found
+                  </p>
+                  <p className="text-center mt-1 w-[calc(100%-30px)] ml-[15px] text-sm text-zinc-500">
+                    Create a run in this Splan with the button above
+                  </p>
+                </div>
+              )}
             </div>
           ) : (
             <div>
@@ -295,7 +444,7 @@ export default function App() {
   const Home = () => {
     return (
       <div className="flex items-center justify-center w-full h-full">
-        {pysplan_handler ? (
+        {pysplan_handler && pysplan_handler.runs.length > 0 ? (
           <div className="relative flex items-center justify-center w-full h-full border rounded-lg ml-4">
             <div className="relative">
               <img src={mat_img} className="w-auto h-auto max-h-[85vh] max-w-[85vw] object-contain" ref={img_size_ref}/>
@@ -337,6 +486,8 @@ export default function App() {
       <Toaster richColors position="bottom-right" theme="dark" />
       <Sidebar />
       {settings_active ? <Settings /> : <Home />}
+      {run_creator_open && <CreateRunDialog />}
+      {splan_creator_open && <CreateSplanDialog />}
     </div>
   );
 }
