diff --git a/src/components/CameraOverview/SnapshotContainer.tsx b/src/components/CameraOverview/SnapshotContainer.tsx index 87cb48f..a59a44c 100644 --- a/src/components/CameraOverview/SnapshotContainer.tsx +++ b/src/components/CameraOverview/SnapshotContainer.tsx @@ -5,6 +5,7 @@ import { useCameraZoom } from "../../hooks/useCameraZoom"; import { useEffect } from "react"; import Loading from "../UI/Loading"; import ErrorState from "../UI/ErrorState"; +import { zoomMapping } from "../../utils/utils"; type SnapshotContainerProps = { side: string; @@ -13,20 +14,14 @@ type SnapshotContainerProps = { onZoomLevelChange?: (level: number) => void; }; -export const SnapshotContainer = ({ - side, - settingsPage, - zoomLevel, - onZoomLevelChange, -}: SnapshotContainerProps) => { +export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelChange }: SnapshotContainerProps) => { const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side); - const cameraControllerSide = - side === "CameraA" ? "CameraControllerA" : "CameraControllerB"; + const cameraControllerSide = side === "CameraA" ? "CameraControllerA" : "CameraControllerB"; const { mutation } = useCameraZoom({ camera: cameraControllerSide }); const handleZoomClick = () => { const baseLevel = zoomLevel ?? 1; - const newLevel = baseLevel >= 8 ? 1 : baseLevel * 2; + const newLevel = baseLevel >= 4 ? 1 : baseLevel * 2; if (onZoomLevelChange) onZoomLevelChange(newLevel); @@ -35,9 +30,11 @@ export const SnapshotContainer = ({ useEffect(() => { if (zoomLevel) { + const text = zoomMapping(zoomLevel); const zoomInOptions: ZoomInOptions = { camera: cameraControllerSide, multiplier: zoomLevel, + multiplierText: text, }; mutation.mutate(zoomInOptions); } diff --git a/src/components/CameraSettings/CameraSettingFields.tsx b/src/components/CameraSettings/CameraSettingFields.tsx index 1cb3786..1218236 100644 --- a/src/components/CameraSettings/CameraSettingFields.tsx +++ b/src/components/CameraSettings/CameraSettingFields.tsx @@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons"; import CardHeader from "../UI/CardHeader"; import { useCameraZoom } from "../../hooks/useCameraZoom"; -import { parseRTSPUrl } from "../../utils/utils"; +import { parseRTSPUrl, zoomMapping } from "../../utils/utils"; type CameraSettingsProps = { initialData: CameraConfig; @@ -25,7 +25,12 @@ const CameraSettingFields = ({ const [showPwd, setShowPwd] = useState(false); const cameraControllerSide = initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB"; const { mutation, query } = useCameraZoom({ camera: cameraControllerSide }); - const zoomOptions = [1, 2, 4, 8]; + const zoomOptions = [1, 2, 4]; + // const zoomTextOptions = [ + // { label: "near", value: 4 }, + // { label: "medium", value: 2 }, + // { label: "far", value: 1 }, + // ]; const parsed = parseRTSPUrl(initialData?.propURI?.value); @@ -36,6 +41,7 @@ const CameraSettingFields = ({ }, [query?.data, onZoomLevelChange]); const getZoomLevel = (levelstring: string | undefined) => { + console.log(levelstring); switch (levelstring) { case "1x": return 1; @@ -46,8 +52,6 @@ const CameraSettingFields = ({ case "4x": return 4; - case "8x": - return 8; default: return 1; } @@ -80,11 +84,13 @@ const CameraSettingFields = ({ const handleRadioButtonChange = async (levelNumber: number) => { if (!onZoomLevelChange || !zoomLevel) return; + const text = zoomMapping(levelNumber); onZoomLevelChange(levelNumber); const zoomInOptions: ZoomInOptions = { camera: cameraControllerSide, multiplier: levelNumber, + multiplierText: text, }; mutation.mutate(zoomInOptions); @@ -169,7 +175,7 @@ const CameraSettingFields = ({
-
+
{zoomOptions.map((zoom) => (
- x{zoom} + {zoomMapping(zoom)}
))} diff --git a/src/components/PlateStack/NumberPlate.tsx b/src/components/PlateStack/NumberPlate.tsx index 3e359fd..d99eb60 100644 --- a/src/components/PlateStack/NumberPlate.tsx +++ b/src/components/PlateStack/NumberPlate.tsx @@ -40,9 +40,7 @@ const NumberPlate = ({ motion, vrm, size }: NumberPlateProps) => { return (
@@ -50,9 +48,7 @@ const NumberPlate = ({ motion, vrm, size }: NumberPlateProps) => {
-

- {vrm && formatNumberPlate(vrm)} -

+

{vrm && formatNumberPlate(vrm)}

); diff --git a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx index 24cde7c..397b760 100644 --- a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx +++ b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx @@ -58,9 +58,7 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) => type="text" id="backoffice" placeholder="https://www.backoffice.com" - className={`p-1.5 border ${ - errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 " - } rounded-lg w-full md:w-60`} + className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`} /> @@ -70,9 +68,7 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) => type="text" id="username" placeholder="Back office username" - className={`p-1.5 border ${ - errors.username && touched.username ? "border-red-500" : "border-gray-400 " - } rounded-lg w-full md:w-60`} + className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`} /> @@ -159,7 +155,6 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) => id="timestampSource" className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60" > - @@ -172,9 +167,8 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) => id="GPSFormat" className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60" > - - + diff --git a/src/components/SettingForms/SettingForms/SettingForms.tsx b/src/components/SettingForms/SettingForms/SettingForms.tsx index f89b538..f8451d9 100644 --- a/src/components/SettingForms/SettingForms/SettingForms.tsx +++ b/src/components/SettingForms/SettingForms/SettingForms.tsx @@ -46,16 +46,6 @@ const SettingForms = () => { 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"; diff --git a/src/components/UI/NavigationArrow.tsx b/src/components/UI/NavigationArrow.tsx index e133a88..92e3ee4 100644 --- a/src/components/UI/NavigationArrow.tsx +++ b/src/components/UI/NavigationArrow.tsx @@ -38,7 +38,7 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => { icon={faArrowLeft} size="2xl" className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30" - onClick={() => navigationDest(side)} + onClick={() => navigationDest("Rear")} /> )} diff --git a/src/hooks/useCameraZoom.ts b/src/hooks/useCameraZoom.ts index fb02523..d37416f 100644 --- a/src/hooks/useCameraZoom.ts +++ b/src/hooks/useCameraZoom.ts @@ -1,8 +1,4 @@ -import { - useMutation, - useQuery, - type QueryFunctionContext, -} from "@tanstack/react-query"; +import { useMutation, useQuery, type QueryFunctionContext } from "@tanstack/react-query"; import { CAM_BASE } from "../utils/config"; import type { zoomConfig, ZoomInOptions } from "../types/types"; import { toast } from "sonner"; @@ -10,7 +6,7 @@ import { useEffect } from "react"; async function zoomIn(options: ZoomInOptions) { const response = await fetch( - `${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplier}x`, + `${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplierText?.toLowerCase()}`, { signal: AbortSignal.timeout(500), } @@ -22,11 +18,9 @@ async function zoomIn(options: ZoomInOptions) { return response.json(); } -async function fetchZoomInConfig({ - queryKey, -}: QueryFunctionContext<[string, zoomConfig]>) { +async function fetchZoomInConfig({ queryKey }: QueryFunctionContext<[string, zoomConfig]>) { const [, { camera }] = queryKey; - const response = await fetch(`${CAM_BASE}/Ip${camera}-inspect`, { + const response = await fetch(`${CAM_BASE}/Ip${camera}-command`, { signal: AbortSignal.timeout(500), }); if (!response.ok) { diff --git a/src/types/types.ts b/src/types/types.ts index 83d2a88..60c9994 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -374,6 +374,7 @@ export type ModemConfig = { export type ZoomInOptions = { camera: string; multiplier: number; + multiplierText?: string; }; export type zoomConfig = { @@ -407,5 +408,6 @@ export type NPEDSTATE = { export type NPEDACTION = { type: string; + // eslint-disable-next-line @typescript-eslint/no-explicit-any payload: any; }; diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 4f869e5..0a52ae3 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -158,3 +158,16 @@ export function getHotlistName(obj: HotlistMatches | undefined) { export const getNPEDCategory = (r?: SightingType | null) => r?.metadata?.npedJSON?.["NPED CATEGORY"] as "A" | "B" | "C" | "D" | undefined; + +export const zoomMapping = (zoomLevel: number) => { + switch (zoomLevel) { + case 1: + return "Far"; + case 2: + return "Medium"; + case 4: + return "Close"; + default: + break; + } +};