added toggle button

hytech-racing · Apr 26, 2024 · f4ebe73 · f4ebe73
1 parent 9ddbcc8
commit f4ebe73
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 13 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -6,8 +6,7 @@ import {TextForm} from "./Components/TextForm";
 import {DropdownForm} from "./Components/DropdownForm";
 import {OffloadButton} from "./OffloadButton";
 import {Field} from "./Components/Field";
-
-
+import {AddrToggle} from "./Components/AddrToggle";
 
 function App() {
 
@@ -22,21 +21,25 @@ function App() {
         // const json = await fetchResponse.json()
         const json = '[{"name":"driver","displayName":"Driver","type":"string","required":true,"dropdown":false,"automatic":false},{"name":"testingGoal","displayName":"Testing Goal","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"eventType","displayName":"Event Type","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"notes","displayName":"Notes","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"startTime","displayName":"Start Time/Date","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"endTime","displayName":"End Time/Date","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"location","displayName":"Location","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"conditions","displayName":"Conditions (ie dry, night time)","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"temperature","displayName":"Temperature (C)","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"aeroType","displayName":"Aero Type","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"MCUversion","displayName":"MCU Version","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"errors","displayName":"Errors","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"yawPIDValues","displayName":"Yaw Pid Values","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"TCSPIDValues","displayName":"TCS PID Values","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"TCSEnable","displayName":"TCS Enabled","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"yawPIDENable","displayName":"yaw PID Enabled","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"launchEnable","displayName":"Launch Enabled","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"normForceEnable","displayName":"Norm Force Enabled","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"mechPowerLimEnable","displayName":"Mech Power Lim. Enabled","type":"string","required":false,"dropdown":false,"automatic":false},{"name":"pidPowerLimEnable","displayName":"pid Power Lim. Enabled","type":"string","required":false,"dropdown":false,"automatic":false}]'
         setFields(JSON.parse(json))
+        setData(new Array(fields.length).fill(undefined))
 
         return JSON.parse(json)
     }
 
+    const [serverAddr, setServerAddr] = useState("http://192.168.203.1:6969")
+
+
     const [fields, setFields] = useState([])
-    const [data, setData] = useState(new Array(fields.length).fill(''));
+    const [data, setData] = useState([]);
     const [recording, setRecording] = useState(false)
 
     useEffect(() => {
         updateFields().then(fields => setFields(fields))
-
     }, [])
 
     return (
         <div className={"flex flex-col gap-4 items-center justify-center pt-6"}>
+            <AddrToggle serverAddr={serverAddr} setServerAddr={setServerAddr}/>
             <div className={"flex"}>
                 <PageTitle/>
             </div>

diff --git a/frontend/src/Components/AddrToggle.jsx b/frontend/src/Components/AddrToggle.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export function AddrToggle({serverAddr, setServerAddr}) {
+
+    function handleChange(e) {
+        if(e.target.checked) {
+            setServerAddr("http://localhost:6969")
+        } else {
+            setServerAddr("http://192.168.203.1:6969")
+        }
+    }
+
+    return (
+        <div className={"flex flex-row items-center w-80"}>
+            <div className={"grow w-max"}/>
+            <article className={"prose pr-2"}>
+                <p> DO NOT TOUCH -&gt;</p>
+            </article>
+            <input type={"checkbox"} className={"toggle toggle-primary"} onChange={handleChange}/>
+        </div>
+    )
+
+}
diff --git a/frontend/src/Components/Field.jsx b/frontend/src/Components/Field.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {TextForm} from "./TextForm";
+import {FieldTitle} from "./FieldComponents/FieldTitle";
 
 export function Field({fields, data, setData, index, recording}) {
 
@@ -18,6 +19,7 @@ export function Field({fields, data, setData, index, recording}) {
 
     return (
         <>
+            <FieldTitle fields={fields} index={index}/>
             {getField()}
         </>
     )

diff --git a/frontend/src/Components/FieldComponents/FieldTitle.jsx b/frontend/src/Components/FieldComponents/FieldTitle.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export function FieldTitle({fields, index}) {
+
+    return (
+        <div className={"flex flex-row items-center w-80"}>
+            <article className={"prose"}>
+                <h4>{fields[index].displayName}:</h4>
+            </article>
+            <div className={"grow w-max"}/>
+        </div>
+    )
+
+}
diff --git a/frontend/src/Components/TextForm.jsx b/frontend/src/Components/TextForm.jsx
@@ -11,14 +11,6 @@ export function TextForm({fields, data, setData, index, recording}) {
     }
 
     return (
-        <>
-            <div className={"flex flex-row items-center w-80"}>
-                <article className={"prose"}>
-                    <h4>{fields[index].displayName}:</h4>
-                </article>
-                <div className={"grow w-max"}/>
-            </div>
-            <input input value={data[index]} onChange={handleChange} className={"input input-bordered w-80 -mt-3"} disabled={recording}/>
-        </>
+        <input input value={data[index]} onChange={handleChange} className={"input input-bordered w-80 -mt-3"} disabled={recording}/>
     )
 }