- removed other options
This commit is contained in:
@@ -31,146 +31,165 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col space-y-2 px-2">
|
||||
<FormGroup>
|
||||
<label htmlFor="backoffice" className="m-0">
|
||||
Back Office URL
|
||||
</label>
|
||||
|
||||
<Field
|
||||
name={"backOfficeURL"}
|
||||
type="text"
|
||||
id="backoffice"
|
||||
placeholder="https://www.backoffice.com"
|
||||
className={`p-1.5 border ${
|
||||
errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 "
|
||||
} rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<label htmlFor="username">Username</label>
|
||||
<Field
|
||||
name={"username"}
|
||||
type="text"
|
||||
id="username"
|
||||
placeholder="Back office username"
|
||||
className={`p-1.5 border ${
|
||||
errors.username && touched.username ? "border-red-500" : "border-gray-400 "
|
||||
} rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<label htmlFor="password">Password</label>
|
||||
<div className="flex gap-2 items-center relative mb-4">
|
||||
<Field
|
||||
name={"password"}
|
||||
type={showPwd ? "text" : "password"}
|
||||
id="password"
|
||||
placeholder="Back office password"
|
||||
className={`p-1.5 border ${
|
||||
errors.password && touched.password ? "border-red-500" : "border-gray-400 "
|
||||
} rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
type="button"
|
||||
className="absolute right-5 end-0"
|
||||
onClick={() => setShowPwd((s) => !s)}
|
||||
icon={showPwd ? faEyeSlash : faEye}
|
||||
/>
|
||||
</div>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
|
||||
<Field
|
||||
name={"connectTimeoutSeconds"}
|
||||
type="number"
|
||||
id="connectTimeoutSeconds"
|
||||
className={`p-1.5 border ${
|
||||
errors.connectTimeoutSeconds && touched.connectTimeoutSeconds ? "border-red-500" : "border-gray-400 "
|
||||
} rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
|
||||
<Field
|
||||
name={"readTimeoutSeconds"}
|
||||
type="number"
|
||||
id="readTimeoutSeconds"
|
||||
placeholder="https://example.com"
|
||||
className={`p-1.5 border ${
|
||||
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
|
||||
} rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</FormGroup>
|
||||
{format?.toLowerCase() === "bof2" && (
|
||||
<>
|
||||
<div className="border-b border-gray-500 my-3">
|
||||
<h2 className="font-bold">{values.format} Constants</h2>
|
||||
{format?.toLowerCase() !== "bof2" && format?.toLowerCase() !== "json" ? (
|
||||
<>
|
||||
<div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
|
||||
<div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
|
||||
Format coming soon
|
||||
</div>
|
||||
|
||||
<p className="max-w-md text-slate-300">
|
||||
Output configuration currently supports <span className="font-bold text-blue-400">JSON</span> or{" "}
|
||||
<span className="font-bold text-emerald-400">BOF2</span>. <br /> More formats will be added in future
|
||||
updates.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-col space-y-2 px-2">
|
||||
<FormGroup>
|
||||
<label htmlFor="FFID">Feed ID / Force ID</label>
|
||||
<label htmlFor="backoffice" className="m-0">
|
||||
Back Office URL
|
||||
</label>
|
||||
|
||||
<Field
|
||||
name={"FFID"}
|
||||
name={"backOfficeURL"}
|
||||
type="text"
|
||||
id="FFID"
|
||||
placeholder="ABC123"
|
||||
id="backoffice"
|
||||
placeholder="https://www.backoffice.com"
|
||||
className={`p-1.5 border ${
|
||||
errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 "
|
||||
} rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<label htmlFor="username">Username</label>
|
||||
<Field
|
||||
name={"username"}
|
||||
type="text"
|
||||
id="username"
|
||||
placeholder="Back office username"
|
||||
className={`p-1.5 border ${
|
||||
errors.username && touched.username ? "border-red-500" : "border-gray-400 "
|
||||
} rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<label htmlFor="password">Password</label>
|
||||
<div className="flex gap-2 items-center relative mb-4">
|
||||
<Field
|
||||
name={"password"}
|
||||
type={showPwd ? "text" : "password"}
|
||||
id="password"
|
||||
placeholder="Back office password"
|
||||
className={`p-1.5 border ${
|
||||
errors.password && touched.password ? "border-red-500" : "border-gray-400 "
|
||||
} rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
type="button"
|
||||
className="absolute right-5 end-0"
|
||||
onClick={() => setShowPwd((s) => !s)}
|
||||
icon={showPwd ? faEyeSlash : faEye}
|
||||
/>
|
||||
</div>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
|
||||
<Field
|
||||
name={"connectTimeoutSeconds"}
|
||||
type="number"
|
||||
id="connectTimeoutSeconds"
|
||||
className={`p-1.5 border ${
|
||||
errors.connectTimeoutSeconds && touched.connectTimeoutSeconds ? "border-red-500" : "border-gray-400 "
|
||||
} rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
|
||||
<Field
|
||||
name={"readTimeoutSeconds"}
|
||||
type="number"
|
||||
id="readTimeoutSeconds"
|
||||
placeholder="https://example.com"
|
||||
className={`p-1.5 border ${
|
||||
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
|
||||
} rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<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`}
|
||||
/>
|
||||
</FormGroup>
|
||||
{format?.toLowerCase() === "bof2" && (
|
||||
<>
|
||||
<div className="border-b border-gray-500 my-3">
|
||||
<h2 className="font-bold">{values.format} Constants</h2>
|
||||
</div>
|
||||
<FormGroup>
|
||||
<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`}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<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="">-- Select format --</option>
|
||||
<option value={"UTC"}>UTC</option>
|
||||
<option value={"local"}>Local</option>
|
||||
</Field>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<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="">-- Select format --</option>
|
||||
<option value={"Decimal degrees"}>Decimal degrees</option>
|
||||
<option value={"minutes"}>Minutes</option>
|
||||
</Field>
|
||||
</FormGroup>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<FormGroup>
|
||||
<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`}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
|
||||
>
|
||||
{isSubmitting ? "Saving..." : "Save Changes"}
|
||||
</button>
|
||||
<ValidationToastOnce />
|
||||
<FormGroup>
|
||||
<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="">-- Select format --</option>
|
||||
<option value={"UTC"}>UTC</option>
|
||||
<option value={"local"}>Local</option>
|
||||
</Field>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<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="">-- Select format --</option>
|
||||
<option value={"Decimal degrees"}>Decimal degrees</option>
|
||||
<option value={"minutes"}>Minutes</option>
|
||||
</Field>
|
||||
</FormGroup>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
|
||||
>
|
||||
{isSubmitting ? "Saving..." : "Save Changes"}
|
||||
</button>
|
||||
<ValidationToastOnce />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user