TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- updated form to include bof2 constants

Browse Source 
- refactored code to make more scalable and use one form
This commit is contained in:
Toba Ojo
2025-11-04 10:24:06 +00:00
parent 933c101cbc
commit 538b623ac6
7 changed files with 237 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
View File

@@ -1,73 +1,24 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Field, Form, useFormikContext, type FormikTouched } from "formik";
import { Field, useFormikContext, type FormikTouched } from "formik";
import FormGroup from "../components/FormGroup";
import { useEffect, useState } from "react";
import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import type { BearerTypeFieldType, InitialValuesForm, InitialValuesFormErrors } from "../../../types/types";
import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
import { toast } from "sonner";
import type { UseMutationResult, UseQueryResult } from "@tanstack/react-query";
import type { UseQueryResult } from "@tanstack/react-query";
type ChannelFieldsProps = {
touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
isSubmitting: boolean;
backOfficeMutation: UseMutationResult<any, Error, InitialValuesForm, unknown>;
backOfficeData: UseQueryResult<any, Error>;
handleFormSubmit: (values: BearerTypeFieldType & InitialValuesForm) => Promise<void>;
handleSubmit: () => void;
format?: string;
};
const ChannelFields = ({
touched,
isSubmitting,
backOfficeMutation,
handleFormSubmit,
handleSubmit,
}: ChannelFieldsProps) => {
const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) => {
const [showPwd, setShowPwd] = useState(false);
const { submitCount, isValid, values, setErrors, errors } = useFormikContext<
BearerTypeFieldType & InitialValuesForm
>();
const validateValues = (values: InitialValuesForm): InitialValuesFormErrors => {
const errors: InitialValuesFormErrors = {};
const url = values.backOfficeURL?.trim();
const username = values.username?.trim();
const password = values.password?.trim();
if (!url) {
errors.backOfficeURL = "Required";
}
if (!username) errors.username = "Required";
if (!password) errors.password = "Required";
const read = Number(values.readTimeoutSeconds);
if (!Number.isFinite(read)) {
errors.readTimeoutSeconds = "Must be a number";
} else if (read < 0) {
errors.readTimeoutSeconds = "Must be ≥ 0";
}
const connect = Number(values.connectTimeoutSeconds);
if (!Number.isFinite(connect)) {
errors.connectTimeoutSeconds = "Must be a number";
} else if (connect < 0) {
errors.connectTimeoutSeconds = "Must be ≥ 0";
}
return errors;
};
const onSubmit = (values: BearerTypeFieldType & InitialValuesForm) => {
const validationErrors = validateValues(values);
if (Object.values(validationErrors).length > 0) {
setErrors(validationErrors);
return;
}
handleFormSubmit(values);
handleSubmit();
};
const { submitCount, isValid, values, errors } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
const ValidationToastOnce = () => {
useEffect(() => {
@@ -79,7 +30,7 @@ const ChannelFields = ({
};
return (
<Form>
<>
<div className="flex flex-col space-y-2 px-2">
<FormGroup>
<label htmlFor="backoffice" className="m-0">
@@ -152,16 +103,75 @@ const ChannelFields = ({
} 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="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>
<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="button"
onClick={() => onSubmit(values)}
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 || backOfficeMutation.isPending ? "Saving..." : "Save Changes"}
{isSubmitting ? "Saving..." : "Save Changes"}
</button>
<ValidationToastOnce />
</Form>
</>
);
};