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

33
src/components/SettingForms/Channel1-JSON/ChannelCard.tsx
View File

@@ -3,18 +3,17 @@ import Card from "../../UI/Card";
import CardHeader from "../../UI/CardHeader";
import ChannelFields from "./ChannelFields";
import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
import { useCameraBackOfficeOutput } from "../../../hooks/useCameraBackOfficeOutput";
import { useCameraBackOfficeOutput } from "../../../hooks/useBackOfficeConfig";
import { useEffect, useMemo } from "react";
type ChannelCardProps = {
touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
isSubmitting: boolean;
handleFormSubmit: (values: BearerTypeFieldType & InitialValuesForm) => Promise<void>;
};
const ChannelCard = ({ touched, isSubmitting, handleFormSubmit }: ChannelCardProps) => {
const { values, resetForm } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
const { backOfficeQuery, backOfficeMutation } = useCameraBackOfficeOutput(values?.format);
const ChannelCard = ({ touched, isSubmitting }: ChannelCardProps) => {
const { values, setFieldValue } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
const { backOfficeQuery } = useCameraBackOfficeOutput(values?.format);
const mapped = useMemo(() => {
const d = backOfficeQuery.data;
@@ -29,22 +28,10 @@ const ChannelCard = ({ touched, isSubmitting, handleFormSubmit }: ChannelCardPro
useEffect(() => {
if (!backOfficeQuery.isSuccess) return;
resetForm({ values: { ...values, ...mapped } });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [backOfficeQuery.isSuccess, mapped]);
console.log(backOfficeQuery.isFetching);
const handleSubmit = async () => {
const backOfficeData = {
format: values.format,
backOfficeURL: values.backOfficeURL,
connectTimeoutSeconds: values.connectTimeoutSeconds,
password: values.password,
readTimeoutSeconds: values.readTimeoutSeconds,
username: values.username,
};
await backOfficeMutation.mutateAsync(backOfficeData);
};
for (const [key, value] of Object.entries(mapped)) {
setFieldValue(key, value);
}
}, [backOfficeQuery.isSuccess, mapped, setFieldValue]);
return (
<Card className="p-4">
@@ -53,9 +40,7 @@ const ChannelCard = ({ touched, isSubmitting, handleFormSubmit }: ChannelCardPro
touched={touched}
isSubmitting={isSubmitting}
backOfficeData={backOfficeQuery}
backOfficeMutation={backOfficeMutation}
handleFormSubmit={handleFormSubmit}
handleSubmit={handleSubmit}
format={values?.format}
/>
</Card>
);

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>
</>
);
};