- removed other options
This commit is contained in:
@@ -2,15 +2,11 @@ import Card from "../../UI/Card";
|
||||
import CardHeader from "../../UI/CardHeader";
|
||||
import BearerTypeFields from "./BearerTypeFields";
|
||||
|
||||
type BearerTypeCardProps = {
|
||||
options: string[];
|
||||
};
|
||||
|
||||
const BearerTypeCard = ({ options }: BearerTypeCardProps) => {
|
||||
const BearerTypeCard = () => {
|
||||
return (
|
||||
<Card className="p-4">
|
||||
<CardHeader title="Bearer Type" />
|
||||
<BearerTypeFields options={options} />
|
||||
<BearerTypeFields />
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -3,11 +3,7 @@ import FormToggle from "../components/FormToggle";
|
||||
import FormGroup from "../components/FormGroup";
|
||||
import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
|
||||
|
||||
type BearerTypeFieldsProps = {
|
||||
options: string[];
|
||||
};
|
||||
|
||||
const BearerTypeFields = ({ options }: BearerTypeFieldsProps) => {
|
||||
const BearerTypeFields = () => {
|
||||
useFormikContext<BearerTypeFieldType & InitialValuesForm>();
|
||||
|
||||
return (
|
||||
@@ -20,11 +16,12 @@ const BearerTypeFields = ({ options }: BearerTypeFieldsProps) => {
|
||||
id="format"
|
||||
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
|
||||
>
|
||||
{options?.map((option: string) => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
<option key={"JSON"} value={"JSON"}>
|
||||
JSON
|
||||
</option>
|
||||
<option key={"BOF2"} value={"BOF2"}>
|
||||
BOF2
|
||||
</option>
|
||||
</Field>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
|
||||
@@ -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 />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -8,7 +8,6 @@ import type {
|
||||
InitialValuesFormErrors,
|
||||
OptionalBOF2Constants,
|
||||
} from "../../../types/types";
|
||||
import { cleanArray } from "../../../utils/utils";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useUpdateBackOfficeConfig } from "../../../hooks/useBackOfficeConfig";
|
||||
import { useState } from "react";
|
||||
@@ -21,7 +20,6 @@ const SettingForms = () => {
|
||||
const { bof2ConstantsQuery } = useGetDispatcherConfig();
|
||||
|
||||
const format = dispatcherQuery?.data?.propFormat?.value;
|
||||
const rawOptions = dispatcherQuery?.data?.propFormat?.accepted;
|
||||
const enabled = dispatcherQuery?.data?.propEnabled?.value;
|
||||
|
||||
const FFID = bof2ConstantsQuery?.data?.propFeedIdentifier?.value;
|
||||
@@ -29,8 +27,6 @@ const SettingForms = () => {
|
||||
const GPSFormat = bof2ConstantsQuery?.data?.propGpsFormat?.value;
|
||||
const timestampSource = bof2ConstantsQuery?.data?.propTimeZoneType?.value;
|
||||
|
||||
const options = cleanArray(rawOptions);
|
||||
|
||||
const initialValues: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants = {
|
||||
format: format ?? "JSON",
|
||||
enabled: enabled === "true",
|
||||
@@ -109,7 +105,7 @@ const SettingForms = () => {
|
||||
{({ isSubmitting, touched }) => (
|
||||
<Form>
|
||||
<div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
|
||||
<BearerTypeCard options={options} />
|
||||
<BearerTypeCard />
|
||||
<ChannelCard touched={touched} isSubmitting={isSubmitting} />
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
Reference in New Issue
Block a user