diff --git a/package.json b/package.json index c38c457..3ffc1cd 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "react-modal": "^3.16.3", "react-router": "^7.8.0", "react-swipeable": "^7.0.2", + "react-tabs": "^6.1.0", "tailwindcss": "^4.1.11" }, "devDependencies": { diff --git a/src/components/CameraOverview/SnapshotContainer.tsx b/src/components/CameraOverview/SnapshotContainer.tsx index d4cf2c6..4f9810c 100644 --- a/src/components/CameraOverview/SnapshotContainer.tsx +++ b/src/components/CameraOverview/SnapshotContainer.tsx @@ -3,14 +3,18 @@ import NavigationArrow from "../UI/NavigationArrow"; type SnapshotContainerProps = { side: string; + settingsPage?: boolean; }; -export const SnapshotContainer = ({ side }: SnapshotContainerProps) => { +export const SnapshotContainer = ({ + side, + settingsPage, +}: SnapshotContainerProps) => { const { canvasRef } = useGetOverviewSnapshot(side); return (
- +
); diff --git a/src/components/CameraSettings/CameraSettingFields.tsx b/src/components/CameraSettings/CameraSettingFields.tsx index f55fff6..f9b99f6 100644 --- a/src/components/CameraSettings/CameraSettingFields.tsx +++ b/src/components/CameraSettings/CameraSettingFields.tsx @@ -5,21 +5,20 @@ import type { } from "../../types/types"; const CameraSettingFields = () => { - const initialValues = { + const initialValues: CameraSettingValues = { friendlyName: "", cameraAddress: "", userName: "", password: "", setupCamera: 1, }; + const validateValues = (values: CameraSettingValues) => { const errors: CameraSettingErrorValues = {}; - if (!values.friendlyName) errors.friendlyName = "Required"; if (!values.cameraAddress) errors.cameraAddress = "Required"; if (!values.userName) errors.userName = "Required"; if (!values.password) errors.password = "Required"; - console.log(errors); return errors; }; @@ -35,100 +34,101 @@ const CameraSettingFields = () => { validate={validateValues} validateOnChange={false} > - {({ errors }) => { - return ( -
-
- - {errors.friendlyName && ( - - {errors?.friendlyName} - - )} - -
-
- + {({ errors, touched, setFieldValue }) => ( + +
+ + {touched.friendlyName && errors.friendlyName && ( + + {errors.friendlyName} + + )} + +
- - - - - - -
-
- - {errors.cameraAddress && ( - - {errors?.cameraAddress} - - )} - -
-
- - {errors.userName && ( - - {errors?.userName} - - )} - -
-
- - {errors.password && ( - - {errors?.password} - - )} - -
- -
- ); - }} + + + + + + + +
+ + {touched.cameraAddress && errors.cameraAddress && ( + + {errors.cameraAddress} + + )} + +
+ +
+ + {touched.userName && errors.userName && ( + + {errors.userName} + + )} + +
+ +
+ + {touched.password && errors.password && ( + + {errors.password} + + )} + +
+ + + + )} ); }; diff --git a/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx b/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx index 0c96114..a4ae37c 100644 --- a/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx +++ b/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx @@ -19,7 +19,7 @@ const FrontCameraOverviewCard = () => {
- +
); diff --git a/src/components/FrontCameraSettings/OverviewVideoContainer.tsx b/src/components/FrontCameraSettings/OverviewVideoContainer.tsx index 8bef1d4..207b2f6 100644 --- a/src/components/FrontCameraSettings/OverviewVideoContainer.tsx +++ b/src/components/FrontCameraSettings/OverviewVideoContainer.tsx @@ -7,15 +7,17 @@ import CardHeader from "../UI/CardHeader"; const OverviewVideoContainer = ({ title, side, + settingsPage, }: { title: string; side: string; + settingsPage?: boolean; }) => { return (
- +
); diff --git a/src/components/Output/OutputForm.tsx b/src/components/Output/OutputForm.tsx index e69de29..fe18f83 100644 --- a/src/components/Output/OutputForm.tsx +++ b/src/components/Output/OutputForm.tsx @@ -0,0 +1,13 @@ +import { Formik, Form, Field } from "formik"; + +const OutputForm = () => { + const initialValues = { + includeVRM: false, + includeMotion: false, + includeTimestamp: false, + timeStampFormat: "utc", + }; + return
OutputForm
; +}; + +export default OutputForm; diff --git a/src/components/PlateStack/NumberPlate.tsx b/src/components/PlateStack/NumberPlate.tsx index 8e1b261..6011261 100644 --- a/src/components/PlateStack/NumberPlate.tsx +++ b/src/components/PlateStack/NumberPlate.tsx @@ -1,9 +1,9 @@ import { GB } from "country-flag-icons/react/3x2"; import { formatNumberPlate } from "../../utils/utils"; -import type { Sighting } from "../../types/types"; +import type { SightingType } from "../../types/types"; type NumberPlateProps = { - sighting: Sighting; + sighting: SightingType; }; const NumberPlate = ({ sighting }: NumberPlateProps) => { diff --git a/src/components/SettingForms/BearerType/BearerTypeCard.tsx b/src/components/SettingForms/BearerType/BearerTypeCard.tsx new file mode 100644 index 0000000..0b0442a --- /dev/null +++ b/src/components/SettingForms/BearerType/BearerTypeCard.tsx @@ -0,0 +1,14 @@ +import Card from "../../UI/Card"; +import CardHeader from "../../UI/CardHeader"; +import BearerTypeFields from "./BearerTypeFields"; + +const BearerTypeCard = () => { + return ( + + + + + ); +}; + +export default BearerTypeCard; diff --git a/src/components/SettingForms/BearerType/BearerTypeFields.tsx b/src/components/SettingForms/BearerType/BearerTypeFields.tsx new file mode 100644 index 0000000..9270860 --- /dev/null +++ b/src/components/SettingForms/BearerType/BearerTypeFields.tsx @@ -0,0 +1,35 @@ +import { Field, useFormikContext } from "formik"; + +import FormToggle from "../components/FormToggle"; + +export const ValuesComponent = () => { + return null; +}; + +const BearerTypeFields = () => { + const { values } = useFormikContext(); + console.log(values); + + return ( +
+
+ + + + + +
+
+ + +
+
+ ); +}; + +export default BearerTypeFields; diff --git a/src/components/SettingForms/Channel1-JSON/ChannelCard.tsx b/src/components/SettingForms/Channel1-JSON/ChannelCard.tsx new file mode 100644 index 0000000..7df5df8 --- /dev/null +++ b/src/components/SettingForms/Channel1-JSON/ChannelCard.tsx @@ -0,0 +1,14 @@ +import Card from "../../UI/Card"; +import CardHeader from "../../UI/CardHeader"; +import ChannelFields from "./ChannelFields"; + +const ChannelCard = () => { + return ( + + + + + ); +}; + +export default ChannelCard; diff --git a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx new file mode 100644 index 0000000..3290afe --- /dev/null +++ b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx @@ -0,0 +1,64 @@ +import { Field, useFormikContext } from "formik"; +import FormGroup from "../components/FormGroup"; + +const ChannelFields = () => { + useFormikContext(); + + return ( +
+ + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +export default ChannelFields; diff --git a/src/components/SettingForms/NPED/NPEDCard.tsx b/src/components/SettingForms/NPED/NPEDCard.tsx new file mode 100644 index 0000000..c55acef --- /dev/null +++ b/src/components/SettingForms/NPED/NPEDCard.tsx @@ -0,0 +1,12 @@ +import Card from "../../UI/Card"; +import CardHeader from "../../UI/CardHeader"; + +const NPEDCard = () => { + return ( + + + + ); +}; + +export default NPEDCard; diff --git a/src/components/SettingForms/NPED/NPEDFields.tsx b/src/components/SettingForms/NPED/NPEDFields.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/SettingForms/OverviewText/OverviewTextCard.tsx b/src/components/SettingForms/OverviewText/OverviewTextCard.tsx new file mode 100644 index 0000000..7855cd8 --- /dev/null +++ b/src/components/SettingForms/OverviewText/OverviewTextCard.tsx @@ -0,0 +1,14 @@ +import Card from "../../UI/Card"; +import CardHeader from "../../UI/CardHeader"; +import OverviewTextFields from "./OverviewTextFields"; + +const OverviewTextCard = () => { + return ( + + + + + ); +}; + +export default OverviewTextCard; diff --git a/src/components/SettingForms/OverviewText/OverviewTextFields.tsx b/src/components/SettingForms/OverviewText/OverviewTextFields.tsx new file mode 100644 index 0000000..23545c9 --- /dev/null +++ b/src/components/SettingForms/OverviewText/OverviewTextFields.tsx @@ -0,0 +1,53 @@ +import { Field, useFormikContext } from "formik"; +import FormGroup from "../components/FormGroup"; +import FormToggle from "../components/FormToggle"; + +const OverviewTextFields = () => { + useFormikContext(); + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +export default OverviewTextFields; diff --git a/src/components/SettingForms/SettingForms/SettingForms.tsx b/src/components/SettingForms/SettingForms/SettingForms.tsx new file mode 100644 index 0000000..cae1786 --- /dev/null +++ b/src/components/SettingForms/SettingForms/SettingForms.tsx @@ -0,0 +1,84 @@ +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 ( + +
+
+ + +
+ + {advancedToggle && ( + <> +
+ +
+
+ +
+ + )} + + +
+ ); +}; + +export default SettingForms; diff --git a/src/components/SettingForms/SightingData/SightingDataCard.tsx b/src/components/SettingForms/SightingData/SightingDataCard.tsx new file mode 100644 index 0000000..19c4f56 --- /dev/null +++ b/src/components/SettingForms/SightingData/SightingDataCard.tsx @@ -0,0 +1,14 @@ +import Card from "../../UI/Card"; +import CardHeader from "../../UI/CardHeader"; +import SightingDataFields from "./SightingDataFields"; + +const SightingDataCard = () => { + return ( + + + + + ); +}; + +export default SightingDataCard; diff --git a/src/components/SettingForms/SightingData/SightingDataFields.tsx b/src/components/SettingForms/SightingData/SightingDataFields.tsx new file mode 100644 index 0000000..e2021e2 --- /dev/null +++ b/src/components/SettingForms/SightingData/SightingDataFields.tsx @@ -0,0 +1,123 @@ +import { Field, useFormikContext } from "formik"; +import FormGroup from "../components/FormGroup"; +import FormToggle from "../components/FormToggle"; + +const SightingDataFields = () => { + useFormikContext(); + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +export default SightingDataFields; diff --git a/src/components/SettingForms/components/FormGroup.tsx b/src/components/SettingForms/components/FormGroup.tsx new file mode 100644 index 0000000..081fc7b --- /dev/null +++ b/src/components/SettingForms/components/FormGroup.tsx @@ -0,0 +1,15 @@ +import React from "react"; + +type FormGroupProps = { + children: React.ReactNode; +}; + +const FormGroup = ({ children }: FormGroupProps) => { + return ( +
+ {children} +
+ ); +}; + +export default FormGroup; diff --git a/src/components/SettingForms/components/FormToggle.tsx b/src/components/SettingForms/components/FormToggle.tsx new file mode 100644 index 0000000..5a31f58 --- /dev/null +++ b/src/components/SettingForms/components/FormToggle.tsx @@ -0,0 +1,17 @@ +import { Field } from "formik"; + +const FormToggle = ({ name, label }: { name: string; label?: string }) => { + return ( +