diff --git a/src/components/SettingForms/SettingForms/SettingForms.tsx b/src/components/SettingForms/SettingForms/SettingForms.tsx
index c0a31b9..632d076 100644
--- a/src/components/SettingForms/SettingForms/SettingForms.tsx
+++ b/src/components/SettingForms/SettingForms/SettingForms.tsx
@@ -1,83 +1,12 @@
-import { Formik, Form } from "formik";
import BearerTypeCard from "../BearerType/BearerTypeCard";
import ChannelCard from "../Channel1-JSON/ChannelCard";
-import type { InitialValuesForm } from "../../../types/types";
-import { useState } from "react";
-import AdvancedToggle from "../../UI/AdvancedToggle";
-import OverviewTextCard from "../OverviewText/OverviewTextCard";
-import SightingDataCard from "../SightingData/SightingDataCard";
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",
- invertMotion: false,
- maxPlateValueLength: 0,
- vrmToTransit: "plain VRM ASCII (default)",
- staticReadAction: "Use Lane Direction",
- noRegionAction: "send",
- countryCodeType: "IBAN 2 Character code (default)",
- filterMinConfidence: 0,
- filterMaxConfidence: 100,
- overviewQualityOverride: 0,
- sightingDataEnabled: false,
- sighthingDataVerbose: false,
- includeVRM: false,
- includeMotion: false,
- includeTimestamp: false,
- timestampFormat: "UTC",
- includeCameraName: false,
- customFieldA: "",
- customFieldB: "",
- customFieldC: "",
- customFieldD: "",
- overlayPosition: "Top",
- };
-
- const handleSubmit = (values: InitialValuesForm) => {
- alert(JSON.stringify(values));
- };
-
return (
-
-
-
+
+
+
+
);
};
diff --git a/src/components/SettingForms/SightingData/SightingDataFields.tsx b/src/components/SettingForms/SightingData/SightingDataFields.tsx
index 262d694..0259714 100644
--- a/src/components/SettingForms/SightingData/SightingDataFields.tsx
+++ b/src/components/SettingForms/SightingData/SightingDataFields.tsx
@@ -1,10 +1,8 @@
-import { Field, useFormikContext } from "formik";
+import { Field } from "formik";
import FormGroup from "../components/FormGroup";
import FormToggle from "../components/FormToggle";
const SightingDataFields = () => {
- useFormikContext();
-
return (
diff --git a/src/hooks/useCameraOutput.ts b/src/hooks/useCameraOutput.ts
new file mode 100644
index 0000000..9c7f681
--- /dev/null
+++ b/src/hooks/useCameraOutput.ts
@@ -0,0 +1,128 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import { useEffect } from "react";
+import { toast } from "sonner";
+import type { BearerTypeFieldType, InitialValuesForm } 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 conditionally
+ {
+ 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();
+};
+
+const getBackOfficeConfig = async () => {
+ const response = await fetch(
+ `${CAM_BASE}/api/fetch-config?id=Dispatcher-json`
+ );
+ if (!response.ok) throw new Error("Cannot get Back Office configuration");
+ return response.json();
+};
+
+const updateBackOfficeConfig = async (data: InitialValuesForm) => {
+ const updateConfigPayload = {
+ id: "Dispatcher-json",
+ fields: [
+ {
+ property: "propBackofficeURL",
+ value: data.backOfficeURL,
+ },
+ {
+ property: "propConnectTimeoutSeconds",
+ value: data.connectTimeoutSeconds,
+ },
+ {
+ property: "propPassword",
+ value: data.password,
+ },
+ {
+ property: "propReadTimeoutSeconds",
+ value: data.readTimeoutSeconds,
+ },
+ {
+ property: "propUsername",
+ value: data.username,
+ },
+ ],
+ };
+ const response = await fetch(
+ `${CAM_BASE}/api/update-config?id=Dispatcher-json`,
+ {
+ method: "POST",
+ body: JSON.stringify(updateConfigPayload),
+ }
+ );
+ if (!response.ok) throw new Error("Cannot update Back Office configuration");
+ return response.json();
+};
+
+export const useCameraOutput = () => {
+ const dispatcherQuery = useQuery({
+ queryKey: ["dispatcher"],
+ queryFn: getDispatcherConfig,
+ });
+
+ const backOfficeQuery = useQuery({
+ queryKey: ["backoffice"],
+ queryFn: getBackOfficeConfig,
+ });
+
+ const dispatcherMutation = useMutation({
+ mutationFn: updateDispatcherConfig,
+ mutationKey: ["dispatcherUpdate"],
+ onError: (error) => toast.error(error.message),
+ onSuccess: (data) => {
+ if (data) {
+ toast.success("Settings successfully updated");
+ }
+ },
+ });
+
+ const backOfficeMutation = useMutation({
+ mutationKey: ["backOfficeUpdate"],
+ mutationFn: updateBackOfficeConfig,
+ 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]);
+
+ useEffect(() => {
+ if (backOfficeQuery.isError) toast.error(backOfficeQuery.error.message);
+ }, [backOfficeQuery?.error?.message, backOfficeQuery.isError]);
+
+ return {
+ dispatcherQuery,
+ dispatcherMutation,
+ backOfficeQuery,
+ backOfficeMutation,
+ };
+};
diff --git a/src/types/types.ts b/src/types/types.ts
index bb1361e..6169124 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -49,9 +49,6 @@ export type BearerTypeFieldType = {
};
export type InitialValuesForm = {
- format: string;
- enabled: boolean;
- verbose: boolean;
backOfficeURL: string;
username: string;
password: string;
@@ -59,6 +56,14 @@ export type InitialValuesForm = {
readTimeoutSeconds: number;
};
+export type InitialValuesFormErrors = {
+ backOfficeURL?: string;
+ username?: string;
+ password?: string;
+ connectTimeoutSeconds?: string;
+ readTimeoutSeconds?: string;
+};
+
export type NPEDFieldType = {
frontId: string;
username: string | undefined;
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);