TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- addressed bugs flagged by BR

Browse Source
This commit is contained in:
Toba Ojo
2025-11-10 13:44:29 +00:00
parent ddeedd2d72
commit feddaa1eb0
9 changed files with 60 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/CameraOverview/SnapshotContainer.tsx
View File

@@ -10,18 +10,9 @@ type SnapshotContainerProps = {
onZoomLevelChange?: (level: number) => void;
};
export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelChange }: SnapshotContainerProps) => {
export const SnapshotContainer = ({ side, settingsPage }: SnapshotContainerProps) => {
const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
const handleZoomClick = () => {
const baseLevel = zoomLevel ?? 1;
const newLevel = baseLevel >= 4 ? 1 : baseLevel * 2;
if (onZoomLevelChange) onZoomLevelChange(newLevel);
if (!zoomLevel) return;
};
return (
<div className="flex flex-col md:flex-row">
<NavigationArrow side={side} settingsPage={settingsPage} />
@@ -32,7 +23,7 @@ export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelCh
<Loading message="Camera Preview" />
</div>
)}
<canvas onClick={handleZoomClick} ref={canvasRef} className="block w-full h-full z-20" />
<canvas ref={canvasRef} className="absolute w-full h-full z-20" />
</div>
</div>
);

101
src/components/CameraSettings/CameraSettingFields.tsx
View File

@@ -32,30 +32,10 @@ const CameraSettingFields = ({
const parsed = parseRTSPUrl(initialData?.propURI?.value);
const cameraMode = cameraModeQuery?.data?.propDayNightMode?.value;
const handleModeClick = async (mode: string) => {
await cameraModeMutation.mutate({ camera: cameraControllerSide, mode });
};
useEffect(() => {
if (!query?.data) return;
onZoomLevelChange?.(apiZoom);
}, [query?.data, onZoomLevelChange]);
// const getZoomLevel = (levelstring: string | undefined) => {
// console.log(levelstring);
// switch (levelstring) {
// case "1x":
// return 1;
// case "2x":
// return 2;
// case "4x":
// return 4;
// default:
// return 1;
// }
// };
}, [query?.data, onZoomLevelChange, apiZoom]);
const initialValues = useMemo<CameraSettingValues>(
() => ({
@@ -64,11 +44,11 @@ const CameraSettingFields = ({
userName: parsed?.username ?? "",
password: parsed?.password ?? "",
id: initialData?.id,
mode: cameraMode ?? "day",
zoom: apiZoom,
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[initialData?.id, initialData?.propURI?.value, zoomLevel]
[initialData?.id, initialData?.propURI?.value, parsed?.username, parsed?.password, cameraMode, apiZoom]
);
const validateValues = (values: CameraSettingValues) => {
@@ -95,6 +75,7 @@ const CameraSettingFields = ({
mutation.mutate(zoomInOptions);
};
const selectedZoom = zoomLevel ?? 1;
return (
<Formik
@@ -104,8 +85,8 @@ const CameraSettingFields = ({
validateOnChange={false}
enableReinitialize
>
{({ errors, touched }) => (
<Form className="flex flex-col space-y-6 p-2">
{({ errors, touched, values, setFieldValue, isSubmitting }) => (
<Form className="flex flex-col space-y-6 p-2 overflow-x-hidden">
<div className="flex flex-col space-y-2 relative">
<label htmlFor="friendlyName">Name</label>
{touched.friendlyName && errors.friendlyName && (
@@ -117,7 +98,6 @@ const CameraSettingFields = ({
type="text"
className="p-2 border border-gray-400 rounded-lg"
placeholder="Enter camera name"
disabled
/>
</div>
@@ -132,7 +112,6 @@ const CameraSettingFields = ({
type="text"
className="p-2 border border-gray-400 rounded-lg"
placeholder="RTSP://..."
disabled
/>
</div>
@@ -148,7 +127,6 @@ const CameraSettingFields = ({
className="p-2 border border-gray-400 rounded-lg"
placeholder="Enter user name"
autoComplete="username"
disabled
/>
</div>
@@ -164,7 +142,6 @@ const CameraSettingFields = ({
type={showPwd ? "text" : "password"}
className="p-2 border border-gray-400 rounded-lg w-full "
placeholder="Enter password"
disabled
/>
<FontAwesomeIcon
type="button"
@@ -201,42 +178,46 @@ const CameraSettingFields = ({
</div>
<div>
<CardHeader title="Mode" />
<div className="mx-auto grid grid-cols-2 place-items-center">
<button
type="button"
onClick={() => handleModeClick("day")}
className={`px-8 py-2 rounded-md border border-gray-300 ${
cameraMode === "day" ? "bg-gray-100 text-blue-600" : ""
}`}
<div
role="radiogroup"
aria-label="Camera mode"
className="mx-auto grid grid-cols-2 place-items-center gap-3"
>
Day
</button>
<button
type="button"
onClick={() => handleModeClick("night")}
className={`px-8 py-2 rounded-md border border-gray-300 ${
cameraMode === "night" ? "bg-gray-100 text-blue-600" : ""
}`}
{["day", "night"].map((el) => (
<div key={el} className="my-3">
<Field
type="radio"
name="mode"
value={el}
checked={values.mode === el}
id={`mode-${el}`}
className="peer hidden"
disabled={cameraModeMutation.isPending}
onChange={async () => {
setFieldValue("mode", el);
await cameraModeMutation.mutateAsync({ camera: cameraControllerSide, mode: el });
}}
/>
<label
htmlFor={`mode-${el}`}
className={`px-8 py-2 rounded-md border border-gray-300
peer-checked:border-2 peer-checked:border-blue-900
peer-checked:text-blue-600 peer-checked:bg-gray-100
${cameraModeMutation.isPending ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
>
Night
</button>
{el === "day" ? "Day" : "Night"}
</label>
</div>
))}
</div>
</div>
{/* <div className="mt-3">
{updateCameraConfigError ? (
<button className="bg-red-500 text-white rounded-lg p-2 mx-auto h-[100%] w-full" disabled>
Retry
</button>
) : (
<button
type="submit"
className="bg-blue-700 text-white rounded-lg p-2 mx-auto h-[100%] w-full"
disabled
>
<div className="mt-3">
{
<button type="submit" className="bg-green-700 text-white rounded-lg p-2 mx-auto w-full">
{isSubmitting ? "Saving" : "Save settings"}
</button>
)}
</div> */}
}
</div>
</div>
</Form>
)}

3
src/components/CameraSettings/CameraSettings.tsx
View File

@@ -18,10 +18,9 @@ const CameraSettings = ({
const { data, updateCameraConfig, updateCameraConfigError } = useFetchCameraConfig(side);
return (
<Card className="overflow-x-auto min-h-[40vh] md:min-h-[60vh] max-h-[83vh] lg:w-[40%] p-4">
<Card className="overflow-x-visible min-h-[40vh] md:min-h-[60vh] lg:w-[40%] p-4">
<div className="relative flex flex-col space-y-3">
<CardHeader title={title} icon={faWrench} />
{
<CameraSettingFields
initialData={data}

8
src/components/UI/NavigationArrow.tsx
View File

@@ -30,14 +30,14 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
<FontAwesomeIcon
size="2xl"
icon={faArrowRight}
className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30"
className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
onClick={() => navigationDest("a")}
/>
) : (
<FontAwesomeIcon
icon={faArrowLeft}
size="2xl"
className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
onClick={() => navigationDest("b")}
/>
)}
@@ -49,14 +49,14 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
<FontAwesomeIcon
icon={faArrowLeft}
size="2xl"
className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 "
className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
onClick={() => navigationDest("Front")}
/>
<FontAwesomeIcon
icon={faArrowRight}
size="2xl"
className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100"
className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
onClick={() => navigationDest("Rear")}
/>
</>

2
src/hooks/useCameraConfig.ts
View File

@@ -31,7 +31,7 @@ const updateCamerasideConfig = async (data: { id: string | number; friendlyName:
method: "POST",
body: JSON.stringify(updateConfigPayload),
});
if (!response.ok) throw new Error("Feature unavailable: Coming soon");
if (!response.ok) throw new Error("Please make sure fields are filled in correctly");
};
export const useFetchCameraConfig = (cameraSide: string) => {

1
src/hooks/useCameraZoom.ts
View File

@@ -11,6 +11,7 @@ const getCameraMode = async (options: { camera: string }) => {
};
const updateCameraMode = async (options: { camera: string; mode: string }) => {
console.log(options);
const dayNightPayload = {
id: options.camera,
fields: [

6
src/index.css
View File

@@ -31,3 +31,9 @@ body {
}
}
}
.arrow-outline path {
stroke: black; /* outline color */
stroke-width: 20px; /* thickness of outline (tweak this) */
stroke-linejoin: round;
}

2
src/pages/RearCamera.tsx
View File

@@ -6,7 +6,7 @@ import { useState } from "react";
const RearCamera = () => {
const [zoomLevel, setZoomLevel] = useState<number | undefined>(1);
return (
<div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
<div className="mx-auto flex flex-col-reverse lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
<CameraSettings
title="Camera B Settings"
side={"CameraB"}

1
src/types/types.ts
View File

@@ -41,6 +41,7 @@ export type CameraSettingValues = {
userName: string;
password: string;
id: number | string;
mode: string;
};
export type CameraSettingErrorValues = Partial<Record<keyof CameraSettingValues, string>>;