57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { useFormikContext } from "formik";
|
|
import type { PayloadConfigFields } from "../../../../types/types";
|
|
import PayloadOptionsToggle from "./PayloadOptionsToggle";
|
|
|
|
const PayloadOptions = () => {
|
|
const { values } = useFormikContext<PayloadConfigFields>();
|
|
|
|
const validPayloadKeys: Array<keyof PayloadConfigFields> = [
|
|
"includeMac",
|
|
"includeSaFID",
|
|
"includeCharHeight",
|
|
"includeConfidence",
|
|
"includeCorrectSpacing",
|
|
"includeDecodeID",
|
|
"includeDirection",
|
|
"includeFrameHeight",
|
|
"includeFrameID",
|
|
"includeFrameTimeRef",
|
|
"includeFrameWidth",
|
|
"includeHorizSlew",
|
|
"inclduePlate",
|
|
"includeNightModeAction",
|
|
"includeOverview",
|
|
"includePlateSecondary",
|
|
"includePlateTrack",
|
|
];
|
|
|
|
const includeKeys = validPayloadKeys.filter((key) => key.includes("include") && typeof values[key] === "boolean");
|
|
|
|
const handleSubmit = async (values: PayloadConfigFields) => {
|
|
console.log("Payload Config Submitted:", values);
|
|
};
|
|
|
|
return (
|
|
<div className="">
|
|
<div className="flex flex-col space-y-4">
|
|
<div className="p-4 border border-gray-600 rounded-lg flex flex-col space-y-4">
|
|
<div className="flex flex-col space-y-4 h-100 overflow-y-auto p-3">
|
|
{includeKeys.map((key, index) => (
|
|
<PayloadOptionsToggle key={index} label={key} value={key} />
|
|
))}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleSubmit(values)}
|
|
className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
|
|
>
|
|
Save Settings
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PayloadOptions;
|