TobaOjo/BayIQ-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- created forms for JSON, BOF2, UTMC and FTP

Browse Source
This commit is contained in:
Toba Ojo
2025-11-25 10:07:35 +00:00
parent ec81392899
commit 16829ad5a5
6 changed files with 233 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/output/components/BearerTypeCard.tsx
View File

@@ -4,7 +4,7 @@ import BearerTypeFields from "./BearerTypeFields";
const BearerTypeCard = () => {
return (
<Card className="p-4">
<Card className="p-4 h-50">
<CardHeader title={"Bearer Type"} />
<BearerTypeFields />
</Card>

8
src/features/output/components/BearerTypeFields.tsx
View File

@@ -2,8 +2,10 @@ import { Field } from "formik";
const BearerTypeFields = () => {
return (
<>
<label htmlFor="format">Format</label>
<div className="flex flex-row justify-between">
<label htmlFor="format" className="text-xl">
Format
</label>
<Field
as="select"
name="format"
@@ -23,7 +25,7 @@ const BearerTypeFields = () => {
FTP
</option>
</Field>
</>
</div>
);
};

15
src/features/output/components/ChannelCard.tsx
View File

@@ -2,14 +2,21 @@ import { useFormikContext } from "formik";
import Card from "../../../ui/Card";
import CardHeader from "../../../ui/CardHeader";
import ChannelFields from "./ChannelFields";
import type { FormTypes } from "../../../types/types";
const ChannelCard = () => {
const { values } = useFormikContext();
console.log(values);
const { values, errors, touched } = useFormikContext<FormTypes>();
return (
<Card>
<Card className="p-4 h-150 md:h-full">
<CardHeader title={`Channel (${values?.format})`} />
<ChannelFields format={values?.format} />
<ChannelFields errors={errors} touched={touched} values={values} />
<button
type="submit"
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"
>
{"Save Changes"}
</button>
</Card>
);
};

167
src/features/output/components/ChannelFields.tsx
View File

@@ -1,10 +1,16 @@
import { Field } from "formik";
import type { FormTypes, InitialValuesFormErrors } from "../../../types/types";
type ChannelFieldsProps = {
format: string;
values: FormTypes;
errors: InitialValuesFormErrors;
touched: {
connectTimeoutSeconds?: boolean | undefined;
readTimeoutSeconds?: boolean | undefined;
};
};
const ChannelFields = ({ format }: ChannelFieldsProps) => {
const ChannelFields = ({ errors, touched, values }: ChannelFieldsProps) => {
return (
<div className="flex flex-col gap-4 p-4">
<div className="flex flex-row justify-between">
@@ -60,6 +66,163 @@ const ChannelFields = ({ format }: ChannelFieldsProps) => {
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="overviewQuality">Overview quality and scale</label>
<Field
name={"overviewQuality"}
as="select"
id="overviewQuality"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
<option value={"HIGH"}>High</option>
<option value={"MEDIUM"}>Medium</option>
<option value={"LOW"}>Low</option>
</Field>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="cropSizeFactor">Crop Size Factor</label>
<Field
name={"cropSizeFactor"}
as="select"
id="cropSizeFactor"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
<option value={"FULL"}>Full</option>
<option value={"3/4"}>3/4</option>
<option value={"1/2"}>1/2</option>
<option value={"1/4"}>1/4</option>
</Field>
</div>
{values.format.toLowerCase() === "utmc" && (
<>
<div className="border-b border-gray-500 my-3">
<h2 className="font-bold">{values.format} Constants</h2>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="SCID">Source ID / Camera ID</label>
<Field
name={"SCID"}
type="text"
id="SCID"
placeholder="DEF345"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="timestampSource">Timestamp Source</label>
<Field
name={"timestampSource"}
as="select"
id="timestampSource"
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>
<div className="flex flex-row justify-between">
<label htmlFor="GPSFormat">GPS Format</label>
<Field
name={"GPSFormat"}
as="select"
id="GPSFormat"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
<option value={"Minutes"}>Minutes</option>
<option value={"Decimal Degrees"}>Decimal degrees</option>
</Field>
</div>
</>
)}
{values.format?.toLowerCase() === "bof2" && (
<>
<div className="space-y-3">
<div className="border-b border-gray-500 my-3">
<h2 className="font-bold">{values.format} Constants</h2>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="FFID">Feed ID / Force ID</label>
<Field
name={"FFID"}
type="text"
id="FFID"
placeholder="ABC123"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="SCID">Source ID / Camera ID</label>
<Field
name={"SCID"}
type="text"
id="SCID"
placeholder="DEF345"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="timestampSource">Timestamp Source</label>
<Field
name={"timestampSource"}
as="select"
id="timestampSource"
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>
<div className="flex flex-row justify-between">
<label htmlFor="GPSFormat">GPS Format</label>
<Field
name={"GPSFormat"}
as="select"
id="GPSFormat"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
<option value={"Minutes"}>Minutes</option>
<option value={"Decimal Degrees"}>Decimal degrees</option>
</Field>
</div>
</div>
<div className="space-y-3">
<div className="border-b border-gray-500 my-3">
<h2 className="font-bold">{values.format} Lane ID Config</h2>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="LID1">Lane ID 1 (Camera A)</label>
<Field
name={"LID1"}
type="text"
id="LID1"
placeholder="10"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="LID2">Lane ID 2 (Camera B)</label>
<Field
name={"LID2"}
type="text"
id="LID2"
placeholder="20"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</div>
</div>
</>
)}
</div>
);
};

18
src/features/output/components/Output.tsx
View File

@@ -1,13 +1,14 @@
import { Formik, Form } from "formik";
import BearerTypeCard from "./BearerTypeCard";
import ChannelCard from "./ChannelCard";
import type { FormTypes } from "../../../types/types";
const Output = () => {
const handleSubmit = (values) => {
const handleSubmit = (values: FormTypes) => {
console.log(values);
};
const inititalValues = {
const inititalValues: FormTypes = {
format: "JSON",
enabled: true,
backOfficeURL: "",
@@ -17,11 +18,22 @@ const Output = () => {
readTimeoutSeconds: Number(15),
overviewQuality: "HIGH",
cropSizeFactor: "3/4",
// Bof2 -optional constants
FFID: "",
SCID: "",
timestampSource: "UTC",
GPSFormat: "Minutes",
//BOF2 - optional Lane IDs
laneId: "",
LID1: "",
LID2: "",
};
return (
<Formik initialValues={inititalValues} onSubmit={handleSubmit}>
<Form>
<Form className="grid grid-cols-1 md:grid-cols-2">
<BearerTypeCard />
<ChannelCard />
</Form>