Skip to content

Commit

Permalink
dropdown form
Browse files Browse the repository at this point in the history
  • Loading branch information
klou23 committed Apr 26, 2024
1 parent 8ad16f2 commit a8d19e1
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 91 deletions.
11 changes: 7 additions & 4 deletions frontend/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import React, {useEffect, useState} from 'react';
import './App.css';
import {StartStopButton} from "./Components/StartStopButton";
import {PageTitle} from "./Components/PageTitle";
import {TextForm} from "./Components/TextForm";
import {DropdownForm} from "./Components/DropdownForm";
import {TextForm} from "./Components/FieldComponents/TextForm";
import {OffloadButton} from "./OffloadButton";
import {Field} from "./Components/Field";
import {AddrToggle} from "./Components/AddrToggle";
Expand All @@ -19,7 +18,7 @@ function App() {
// }
// })
// const json = await fetchResponse.json()
const json = '[{"id":0,"name":"driver","displayName":"Driver","type":"string","required":true,"dropdown":false,"automatic":false},{"id":1,"name":"testingGoal","displayName":"Testing Goal","type":"string","required":false,"dropdown":false,"automatic":false},{"id":2,"name":"eventType","displayName":"Event Type","type":"string","required":false,"dropdown":false,"automatic":false},{"id":3,"name":"notes","displayName":"Notes","type":"string","required":false,"dropdown":false,"automatic":false},{"id":4,"name":"startTime","displayName":"Start Time/Date","type":"string","required":false,"dropdown":false,"automatic":false},{"id":5,"name":"endTime","displayName":"End Time/Date","type":"string","required":false,"dropdown":false,"automatic":false},{"id":6,"name":"location","displayName":"Location","type":"string","required":false,"dropdown":false,"automatic":false},{"id":7,"name":"conditions","displayName":"Conditions (ie dry, night time)","type":"string","required":false,"dropdown":false,"automatic":false},{"id":8,"name":"temperature","displayName":"Temperature (C)","type":"string","required":false,"dropdown":false,"automatic":false},{"id":9,"name":"aeroType","displayName":"Aero Type","type":"string","required":false,"dropdown":false,"automatic":false},{"id":10,"name":"MCUversion","displayName":"MCU Version","type":"string","required":false,"dropdown":false,"automatic":false},{"id":11,"name":"errors","displayName":"Errors","type":"string","required":false,"dropdown":false,"automatic":false},{"id":12,"name":"yawPIDValues","displayName":"Yaw Pid Values","type":"string","required":false,"dropdown":false,"automatic":false},{"id":13,"name":"TCSPIDValues","displayName":"TCS PID Values","type":"string","required":false,"dropdown":false,"automatic":false},{"id":14,"name":"TCSEnable","displayName":"TCS Enabled","type":"string","required":false,"dropdown":false,"automatic":false},{"id":15,"name":"yawPIDENable","displayName":"Yaw PID Enabled","type":"string","required":false,"dropdown":false,"automatic":false},{"id":16,"name":"launchEnable","displayName":"Launch Enabled","type":"string","required":false,"dropdown":false,"automatic":false},{"id":17,"name":"normForceEnable","displayName":"Norm Force Enabled","type":"string","required":false,"dropdown":false,"automatic":false},{"id":18,"name":"mechPowerLimEnable","displayName":"Mech Power Lim. Enabled","type":"string","required":false,"dropdown":false,"automatic":false},{"id":19,"name":"pidPowerLimEnable","displayName":"Pid Power Lim. Enabled","type":"string","required":false,"dropdown":false,"automatic":false}]'
const json = '[{"id":0,"name":"driver","displayName":"Driver","type":"string","required":true,"dropdown":false,"automatic":false},{"id":1,"name":"testingGoal","displayName":"Testing Goal","type":"string","required":false,"dropdown":false,"automatic":false},{"id":2,"name":"eventType","displayName":"Event Type","type":"string","required":false,"dropdown":true,"automatic":false},{"id":3,"name":"notes","displayName":"Notes","type":"string","required":false,"dropdown":false,"automatic":false},{"id":4,"name":"startTime","displayName":"Start Time/Date","type":"string","required":false,"dropdown":false,"automatic":false},{"id":5,"name":"endTime","displayName":"End Time/Date","type":"string","required":false,"dropdown":false,"automatic":false},{"id":6,"name":"location","displayName":"Location","type":"string","required":false,"dropdown":false,"automatic":false},{"id":7,"name":"conditions","displayName":"Conditions (ie dry, night time)","type":"string","required":false,"dropdown":false,"automatic":false},{"id":8,"name":"temperature","displayName":"Temperature (C)","type":"string","required":false,"dropdown":false,"automatic":false},{"id":9,"name":"aeroType","displayName":"Aero Type","type":"string","required":false,"dropdown":false,"automatic":false},{"id":10,"name":"MCUversion","displayName":"MCU Version","type":"string","required":false,"dropdown":false,"automatic":false},{"id":11,"name":"errors","displayName":"Errors","type":"string","required":false,"dropdown":false,"automatic":false},{"id":12,"name":"yawPIDValues","displayName":"Yaw Pid Values","type":"string","required":false,"dropdown":false,"automatic":false},{"id":13,"name":"TCSPIDValues","displayName":"TCS PID Values","type":"string","required":false,"dropdown":false,"automatic":false},{"id":14,"name":"TCSEnable","displayName":"TCS Enabled","type":"string","required":false,"dropdown":false,"automatic":false},{"id":15,"name":"yawPIDENable","displayName":"Yaw PID Enabled","type":"string","required":false,"dropdown":false,"automatic":false},{"id":16,"name":"launchEnable","displayName":"Launch Enabled","type":"string","required":false,"dropdown":false,"automatic":false},{"id":17,"name":"normForceEnable","displayName":"Norm Force Enabled","type":"string","required":false,"dropdown":false,"automatic":false},{"id":18,"name":"mechPowerLimEnable","displayName":"Mech Power Lim. Enabled","type":"string","required":false,"dropdown":false,"automatic":false},{"id":19,"name":"pidPowerLimEnable","displayName":"Pid Power Lim. Enabled","type":"string","required":false,"dropdown":false,"automatic":false}]'
setFields(JSON.parse(json))
setData(new Array(JSON.parse(json).length).fill(''))

Expand All @@ -37,6 +36,10 @@ function App() {
updateFields().then(fields => setFields(fields))
}, [])

useEffect(() => {
updateFields().then(fields => setFields(fields))
}, [serverAddr])

return (
<div className={"flex flex-col gap-4 items-center justify-center pt-6"}>
<AddrToggle serverAddr={serverAddr} setServerAddr={setServerAddr}/>
Expand All @@ -45,7 +48,7 @@ function App() {
</div>

<div className={"flex flex-col gap-4 items-center justify-center"}>
{fields.map((field, index) => <Field key={field.id} fields={fields} data={data} setData={setData} index={index} recording={recording}/>)}
{fields.map((field, index) => <Field key={field.id} fields={fields} data={data} setData={setData} index={index} recording={recording} serverAddr={serverAddr}/>)}
{/*<StartStopButton recording={recording} setRecording={setRecording} driverInput={driverInput} trackNameInput={trackNameInput} eventTypeInput={eventTypeInput} drivetrainTypeInput={drivetrainTypeInput} massInput={massInput} wheelbaseInput={wheelbaseInput} firmwareRevInput={firmwareRevInput}/>*/}
</div>

Expand Down
83 changes: 0 additions & 83 deletions frontend/src/Components/DropdownForm.tsx

This file was deleted.

7 changes: 4 additions & 3 deletions frontend/src/Components/Field.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React from 'react';
import {TextForm} from "./TextForm";
import {TextForm} from "./FieldComponents/TextForm";
import {FieldTitle} from "./FieldComponents/FieldTitle";
import {DropdownForm} from "./FieldComponents/DropdownForm";

export function Field({fields, data, setData, index, recording}) {
export function Field({fields, data, setData, index, recording, serverAddr}) {

function getField() {
//console.log(JSON.stringify(fields[index]))
Expand All @@ -11,7 +12,7 @@ export function Field({fields, data, setData, index, recording}) {
} else if (fields[index].automatic) {
return (<></>)
} else if(fields[index].dropdown) {
return (<></>)
return (<DropdownForm fields={fields} data={data} setData={setData} index={index} recording={recording} serverAddr={serverAddr}/>)
} else {
return (<TextForm fields={fields} data={data} setData={setData} index={index} recording={recording}/>)
}
Expand Down
90 changes: 90 additions & 0 deletions frontend/src/Components/FieldComponents/DropdownForm.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import React, {useEffect, useState} from "react";

export function DropdownForm({fields, data, setData, index, recording, serverAddr}) {

const [options, setOptions] = useState([])
const [showAdd, setShowAdd] = useState(false)
const [addInput, setAddInput] = useState('')

async function updateOptions() {
// const fetchResponse = await fetch(serverAddr + '/read/' + fields[index].name, {
// method: 'GET',
// headers: {
// 'Accept': 'application/json',
// 'Content-Type': 'application/json'
// }
// })
// const json = await fetchResponse.json()
const json = '["","True","False"]'
setOptions(JSON.parse(json))
}

useEffect(() => {
updateOptions().then()
}, [])

useEffect(() => {
updateOptions().then()
}, [serverAddr])

async function addOption() {
const fetchResponse = await fetch(serverAddr + '/add/' + fields[index].name, {
method: 'POST',
body: JSON.stringify(addInput),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
fetchResponse.then(setShowAdd(false));
}

function handleChange(e) {
const newData = [...data];
newData[index] = e.target.value;
setData(newData);
}

function getNoAdd() {
return (
<select value={data[index]} className={"select select-bordered w-80"} onChange={handleChange}
disabled={recording}>
{options.map((option) => <option value={option}>{option}</option>)}
</select>
)
}

function getAddForm() {
return (
<div className={"flex flex-row items-center w-80 -mt-3"}>
<input value={addInput} onChange={e => setAddInput(e.target.value)} className={"input input-bordered w-64"} disabled={recording}/>
<div className={"grow w-max"}/>
<button className={"btn"} onClick={() => addOption} disabled={addInput === ''}>
Ok
</button>
</div>
)
}

function getAdd() {
return (
<div className={"flex flex-row items-center w-80"}>
<select value={data[index]} className={"select select-bordered w-64"} onChange={handleChange} disabled={recording}>
{options.map((option) => <option value={option}>{option}</option>)}
</select>
<div className={"grow w-max"}/>
<button className={"btn btn-square"} onClick={()=>setShowAdd(!showAdd)}>
{showAdd ? "-" : "+"}
</button>
</div>
)
}

return (
<>
{fields[index].type === "boolean" ? getNoAdd() : getAdd()}
{showAdd ? getAddForm() : null}
</>
)

}
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ export function TextForm({fields, data, setData, index, recording}) {
}

return (
<input value={data[index] === undefined ? "test" : data[index]} onChange={handleChange} className={"input input-bordered w-80 -mt-3"} disabled={recording}/>
<input value={data[index]} onChange={handleChange} className={"input input-bordered w-80 -mt-3"} disabled={recording}/>
)
}

0 comments on commit a8d19e1

Please sign in to comment.