initial commit

frontend/src/RelayForm.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { Tag, Card, Space, Button, Statistic } from "antd";
+import SolverForm from "./SolverForm";
+import axios from "axios";
+
+type Assignment = {
+  [solver: string]: string[];
+};
+
+const backend = axios.create({ baseURL: "http://localhost:8080" });
+
+const RelayForm: React.FC = () => {
+  const [forms, setForms] = useState<{ [key: string]: React.ReactNode }>({});
+  const [formData, setFormData] = useState<{
+    [key: string]: { [key: string]: number };
+  }>({});
+  const [relayTime, setRelayTime] = useState(0);
+  const [assignments, setAssignments] = useState<Assignment[]>([]);
+
+  const addForm = () => {
+    const solverName = `Solver ${Object.keys(forms).length + 0}`;
+    setForms((prevForms) => ({
+      ...prevForms,
+      [solverName]: (
+        <SolverForm
+          key={solverName}
+          solver={solverName}
+          onFormChange={handleFormChange}
+        />
+      ),
+    }));
+  };
+
+  const removeForm = (solverName: string) => {
+    const { [solverName]: removedForm, ...restForms } = forms;
+    const { [solverName]: removedData, ...restData } = formData;
+    setForms(restForms);
+    setFormData(restData);
+  };
+
+  const handleFormChange = (solver: string, data: any) => {
+    setFormData((prevData) => ({
+      ...prevData,
+      [solver]: data,
+    }));
+  };
+
+  const onFinishAllForms = () => {
+    console.log("All form data:", formData);
+    const data = {
+      solvers: formData,
+      events: [
+        "2x2",
+        "3x3",
+        "4x4",
+        "5x5",
+        "mega",
+        "sq1",
+        "yad",
+        "clock",
+        "pyra",
+        "skewb",
+      ],
+    };
+    backend
+      .post("/relay", data)
+      .then((response) => {
+        setRelayTime(response.data.response.time);
+        console.log("assi", response.data.response.assignment);
+        setAssignments(response.data.response.assignment);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  return (
+    <Space direction="vertical">
+      <Space direction="horizontal" wrap={true}>
+        {Object.keys(forms).map((solverName) => (
+          <Card title={solverName}>
+            {forms[solverName]}
+            <Button onClick={() => removeForm(solverName)}>Remove Form</Button>
+          </Card>
+        ))}
+      </Space>
+      <Space>
+        <Button onClick={addForm}>Add Solver</Button>
+        <Button type="primary" onClick={onFinishAllForms}>
+          Calculate Relay
+        </Button>
+        <Statistic title="Relay Time" value={relayTime} precision={2} />
+      </Space>
+      <Space>
+        {Object.entries(assignments).toString()}
+      </Space>
+    </Space>
+  );
+};
+
+export default RelayForm;