71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
|
import { Field, useFormikContext } from "formik";
|
||
|
|
import { useOSDConfig } from "../hooks/useOSDConfig";
|
||
|
|
import OSDFieldToggle from "./OSDFieldToggle";
|
||
|
|
import type { OSDConfigFields } from "../../../types/types";
|
||
|
|
|
||
|
|
type OSDFieldsProps = {
|
||
|
|
isOSDLoading: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
|
||
|
|
const { osdMutation } = useOSDConfig();
|
||
|
|
const { values } = useFormikContext<OSDConfigFields>();
|
||
|
|
|
||
|
|
const includeKeys = Object.keys(values as OSDConfigFields).filter((value) => value.includes("include"));
|
||
|
|
|
||
|
|
const handleSubmit = async (values: OSDConfigFields) => {
|
||
|
|
const result = await osdMutation.mutateAsync(values);
|
||
|
|
console.log(result);
|
||
|
|
};
|
||
|
|
|
||
|
|
if (isOSDLoading) {
|
||
|
|
return <div>Loading OSD Options...</div>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className="flex flex-col space-y-4">
|
||
|
|
<div className="p-4 border border-gray-600 rounded-lg flex flex-col space-y-4">
|
||
|
|
<h2 className="text-2xl mb-4">OSD Options</h2>
|
||
|
|
<div className="flex flex-col space-y-4">
|
||
|
|
{includeKeys.map((key) => (
|
||
|
|
<OSDFieldToggle key={key} value={key} label={key.replace("include", "Include ")} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-row justify-between">
|
||
|
|
<label htmlFor="overlayPosition">Overlay Position</label>
|
||
|
|
<Field
|
||
|
|
as="select"
|
||
|
|
name="overlayPosition"
|
||
|
|
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
|
||
|
|
>
|
||
|
|
<option value="Top">Top</option>
|
||
|
|
<option value="Bottom">Bottom</option>
|
||
|
|
</Field>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-row justify-between">
|
||
|
|
<label htmlFor="OSDTimestampFormat">OSD Timestamp Format</label>
|
||
|
|
<Field
|
||
|
|
as="select"
|
||
|
|
name="OSDTimestampFormat"
|
||
|
|
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
|
||
|
|
>
|
||
|
|
<option value="UTC">UTC</option>
|
||
|
|
<option value="LOCAL">Local</option>
|
||
|
|
</Field>
|
||
|
|
</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"
|
||
|
|
>
|
||
|
|
Submit
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default OSDFields;
|