- updated base for endpoints
- added loading states - need to add new form for ftp type
This commit is contained in:
@@ -46,217 +46,224 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
onSetFieldValue(key, value);
|
||||
}
|
||||
}, [channelFieldsObject, onSetFieldValue, outputData]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 p-4">
|
||||
<div className="flex flex-row justify-between">
|
||||
<label htmlFor="backoffice" className="block mb-2 font-medium">
|
||||
Back Office URL
|
||||
</label>
|
||||
<Field
|
||||
name={"backOfficeURL"}
|
||||
type="text"
|
||||
id="backoffice"
|
||||
placeholder="https://www.backoffice.com"
|
||||
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="username" className="block mb-2 font-medium">
|
||||
Username
|
||||
</label>
|
||||
<Field
|
||||
name={"username"}
|
||||
type="text"
|
||||
id="username"
|
||||
placeholder="Back office username"
|
||||
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="password">Password</label>
|
||||
<Field
|
||||
name={"password"}
|
||||
type={"password"}
|
||||
id="password"
|
||||
placeholder="Back office password"
|
||||
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="readTimeoutSeconds">Read Timeout Seconds</label>
|
||||
<Field
|
||||
name={"readTimeoutSeconds"}
|
||||
type="number"
|
||||
id="readTimeoutSeconds"
|
||||
placeholder="https://example.com"
|
||||
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="connectTimeoutSeconds">Connect Timeout Seconds</label>
|
||||
<Field
|
||||
name={"connectTimeoutSeconds"}
|
||||
type="number"
|
||||
id="connectTimeoutSeconds"
|
||||
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" && (
|
||||
{values.format.toLowerCase() !== "ftp" ? (
|
||||
<>
|
||||
<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>
|
||||
<label htmlFor="backoffice" className="block mb-2 font-medium">
|
||||
Back Office URL
|
||||
</label>
|
||||
<Field
|
||||
name={"SCID"}
|
||||
name={"backOfficeURL"}
|
||||
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`}
|
||||
id="backoffice"
|
||||
placeholder="https://www.backoffice.com"
|
||||
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="timestampSource">Timestamp Source</label>
|
||||
<label htmlFor="username" className="block mb-2 font-medium">
|
||||
Username
|
||||
</label>
|
||||
<Field
|
||||
name={"timestampSource"}
|
||||
name={"username"}
|
||||
type="text"
|
||||
id="username"
|
||||
placeholder="Back office username"
|
||||
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="password">Password</label>
|
||||
<Field
|
||||
name={"password"}
|
||||
type={"password"}
|
||||
id="password"
|
||||
placeholder="Back office password"
|
||||
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="readTimeoutSeconds">Read Timeout Seconds</label>
|
||||
<Field
|
||||
name={"readTimeoutSeconds"}
|
||||
type="number"
|
||||
id="readTimeoutSeconds"
|
||||
placeholder="https://example.com"
|
||||
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="connectTimeoutSeconds">Connect Timeout Seconds</label>
|
||||
<Field
|
||||
name={"connectTimeoutSeconds"}
|
||||
type="number"
|
||||
id="connectTimeoutSeconds"
|
||||
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="timestampSource"
|
||||
id="overviewQuality"
|
||||
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>
|
||||
<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="GPSFormat">GPS Format</label>
|
||||
<label htmlFor="cropSizeFactor">Crop Size Factor</label>
|
||||
<Field
|
||||
name={"GPSFormat"}
|
||||
name={"cropSizeFactor"}
|
||||
as="select"
|
||||
id="GPSFormat"
|
||||
id="cropSizeFactor"
|
||||
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>
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{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>
|
||||
);
|
||||
|
||||
@@ -10,6 +10,7 @@ const OutputForms = () => {
|
||||
const { bearerMutation } = usePostBearerConfig();
|
||||
const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
|
||||
|
||||
const isLoading = dispatcherQuery?.isLoading;
|
||||
const format = dispatcherQuery?.data?.propFormat?.value;
|
||||
const { optionalConstantsQuery, optionalConstantsMutation } = useOptionalConstants(format?.toLowerCase());
|
||||
const FFID = optionalConstantsQuery?.data?.propFeedIdentifier?.value;
|
||||
@@ -38,6 +39,8 @@ const OutputForms = () => {
|
||||
laneId: "",
|
||||
LID1: "",
|
||||
LID2: "",
|
||||
|
||||
// ftp - fields
|
||||
};
|
||||
|
||||
const handleSubmit = async (values: FormTypes) => {
|
||||
@@ -85,6 +88,10 @@ const OutputForms = () => {
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
|
||||
<Form className="grid grid-cols-1 md:grid-cols-2">
|
||||
|
||||
Reference in New Issue
Block a user