From 3e564b933d4b027e17b9d76ae5a47807565842b3 Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Tue, 7 Oct 2025 11:37:37 +0100 Subject: [PATCH] - refactored bearer form - started refactoring Channel form --- .../BearerType/BearerTypeFields.tsx | 79 +++++++--- .../Channel1-JSON/ChannelFields.tsx | 139 ++++++++++-------- .../SettingForms/SettingForms.tsx | 67 ++++----- src/hooks/useCameraOutput.ts | 59 ++++++++ src/utils/utils.ts | 11 ++ 5 files changed, 238 insertions(+), 117 deletions(-) create mode 100644 src/hooks/useCameraOutput.ts diff --git a/src/components/SettingForms/BearerType/BearerTypeFields.tsx b/src/components/SettingForms/BearerType/BearerTypeFields.tsx index db276b4..86586bd 100644 --- a/src/components/SettingForms/BearerType/BearerTypeFields.tsx +++ b/src/components/SettingForms/BearerType/BearerTypeFields.tsx @@ -1,32 +1,71 @@ -import { Field, useFormikContext } from "formik"; +import { Field, Form, Formik } from "formik"; import FormToggle from "../components/FormToggle"; +import { useCameraOutput } from "../../../hooks/useCameraOutput"; +import { cleanArray } from "../../../utils/utils"; +import FormGroup from "../components/FormGroup"; +import type { BearerTypeFieldType } from "../../../types/types"; export const ValuesComponent = () => { return null; }; const BearerTypeFields = () => { - useFormikContext(); + const { dispatcherQuery, dispatcherMutation } = useCameraOutput(); + + const format = dispatcherQuery?.data?.propFormat?.value; + const rawOptions = dispatcherQuery?.data?.propFormat?.accepted; + const enabled = dispatcherQuery?.data?.propEnabled?.value; + const verbose = dispatcherQuery?.data?.propVerbose?.value; + const options = cleanArray(rawOptions); + + const initialValues: BearerTypeFieldType = { + format: format ?? "JSON", + enabled: enabled === "true", + verbose: verbose === "true", + }; + + const handleSubmit = (values: BearerTypeFieldType) => { + dispatcherMutation.mutate(values); + }; return ( -
-
- - - - - -
-
- - -
-
+ +
+
+ + + + {options?.map((option: string) => ( + + ))} + + + +
+ + +
+ + +
+
+ ); }; diff --git a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx index 7ed45a5..9c0e64e 100644 --- a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx +++ b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx @@ -1,72 +1,89 @@ -import { Field, useFormikContext } from "formik"; +import { Field, Form, Formik } from "formik"; import FormGroup from "../components/FormGroup"; import { useState } from "react"; import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; const ChannelFields = () => { - useFormikContext(); const [showPwd, setShowPwd] = useState(false); + const initialValues = { + backOfficeURL: "", + username: "", + password: "", + connectTimeoutSeconds: 0, + readTimeoutSeconds: 0, + }; + + const handleSubmit = (values) => { + console.log(values); + }; + return ( -
- - - - - - - - - - - - setShowPwd((s) => !s)} - icon={showPwd ? faEyeSlash : faEye} - /> - - - - - - - - - -
+ +
+
+ + + + + + + + + + + + setShowPwd((s) => !s)} + icon={showPwd ? faEyeSlash : faEye} + /> + + + + + + + + + +
+
+ ); }; diff --git a/src/components/SettingForms/SettingForms/SettingForms.tsx b/src/components/SettingForms/SettingForms/SettingForms.tsx index c0a31b9..78e5f8b 100644 --- a/src/components/SettingForms/SettingForms/SettingForms.tsx +++ b/src/components/SettingForms/SettingForms/SettingForms.tsx @@ -11,14 +11,6 @@ const SettingForms = () => { const [advancedToggle, setAdvancedToggle] = useState(false); const initialValues = { - format: "JSON", - enabled: false, - verbose: false, - backOfficeURL: "", - username: "", - password: "", - connectTimeoutSeconds: 0, - readTimeoutSeconds: 0, overviewQuality: "high", overviewImageScaleFactor: "full", overviewType: "Plate Overview", @@ -50,34 +42,37 @@ const SettingForms = () => { }; return ( - -
-
- - -
- - {advancedToggle && ( - <> -
- -
-
- -
- - )} - - -
+
+ + +
+ // + //
+ //
+ // + //
+ // + // {advancedToggle && ( + // <> + //
+ // + //
+ //
+ // + //
+ // + // )} + // + // + //
); }; diff --git a/src/hooks/useCameraOutput.ts b/src/hooks/useCameraOutput.ts new file mode 100644 index 0000000..995072a --- /dev/null +++ b/src/hooks/useCameraOutput.ts @@ -0,0 +1,59 @@ +import { useMutation, useQuery } from "@tanstack/react-query"; +import { CAM_BASE } from "../utils/config"; +import { useEffect } from "react"; +import { toast } from "sonner"; +import type { BearerTypeFieldType } from "../types/types"; + +const getDispatcherConfig = async () => { + const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher`); + if (!response.ok) throw new Error("Cannot get dispatcher configuration"); + return response.json(); +}; + +const updateDispatcherConfig = async (data: BearerTypeFieldType) => { + const updateConfigPayload = { + id: "Dispatcher", + fields: [ + { + property: "propEnabled", + value: data.enabled, + }, + // Todo: figure out how to add verbose + { + property: "propFormat", + value: data.format, + }, + ], + }; + + const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher`, { + method: "POST", + body: JSON.stringify(updateConfigPayload), + }); + if (!response.ok) throw new Error("Cannot update dispatcher configuration"); + return response.json(); +}; + +export const useCameraOutput = () => { + const dispatcherQuery = useQuery({ + queryKey: ["dispatcher"], + queryFn: getDispatcherConfig, + }); + + const dispatcherMutation = useMutation({ + mutationFn: updateDispatcherConfig, + mutationKey: ["dispatcherUpdate"], + onError: (error) => toast.error(error.message), + onSuccess: (data) => { + if (data) { + toast.success("Settings successfully updated"); + } + }, + }); + + useEffect(() => { + if (dispatcherQuery.isError) toast.error(dispatcherQuery.error.message); + }, [dispatcherQuery?.error?.message, dispatcherQuery.isError]); + + return { dispatcherQuery, dispatcherMutation }; +}; diff --git a/src/utils/utils.ts b/src/utils/utils.ts index ebd8391..1c1b257 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -19,6 +19,17 @@ const randomChars = () => { return letter; }; +export function cleanArray(str: string) { + const toArr = str?.split(","); + + const cleaned = toArr?.map((el: string) => { + const test = el.replace(/[^0-9a-z]/gi, ""); + + return test; + }); + return cleaned; +} + export function parseRTSPUrl(url: string) { const regex = /rtsp:\/\/([^:]+):([^@]+)@([^:/]+):?(\d+)?(\/.*)?/; const match = url?.match(regex);