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

added zoom functionality, need to add endpoint to post

Browse Source
This commit is contained in:
Toba Ojo
2025-09-29 15:21:22 +01:00
parent 3b9469496b
commit c5c8218e1a
9 changed files with 171 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,19 +3,25 @@ import type {
CameraConfig,
CameraSettingErrorValues,
CameraSettingValues,
ZoomLevel,
} from "../../types/types";
import { useMemo, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
import CardHeader from "../UI/CardHeader";
type CameraSettingsProps = {
initialData: CameraConfig;
updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
zoomLevel?: ZoomLevel;
onZoomLevelChange?: (level: ZoomLevel) => void;
};
const CameraSettingFields = ({
initialData,
updateCameraConfig,
zoomLevel,
onZoomLevelChange,
}: CameraSettingsProps) => {
const [showPwd, setShowPwd] = useState(false);
@@ -26,8 +32,9 @@ const CameraSettingFields = ({
userName: "",
password: "",
id: initialData?.id,
zoom: zoomLevel?.level ? zoomLevel.level : 1,
}),
[initialData?.id, initialData?.propURI?.value]
[initialData?.id, initialData?.propURI?.value, zoomLevel?.level]
);
const validateValues = (values: CameraSettingValues) => {
@@ -41,16 +48,24 @@ const CameraSettingFields = ({
};
const handleSubmit = (values: CameraSettingValues) => {
console.log(values);
updateCameraConfig(values);
};
const handleRadioButtonChange = (levelNumber: number) => {
if (!onZoomLevelChange || !zoomLevel) return;
onZoomLevelChange({
...zoomLevel,
level: zoomLevel?.level !== levelNumber ? levelNumber : zoomLevel?.level,
});
};
return (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validate={validateValues}
validateOnChange={false}
enableReinitialize
>
{({ errors, touched }) => (
<Form className="flex flex-col space-y-6 p-2">
@@ -111,7 +126,7 @@ const CameraSettingFields = ({
{errors.password}
</small>
)}
<div className="flex gap-2 items-center relative">
<div className="flex gap-2 items-center relative mb-4">
<Field
id="password"
name="password"
@@ -127,7 +142,82 @@ const CameraSettingFields = ({
icon={showPwd ? faEyeSlash : faEye}
/>
</div>
<div className="my-3">
<CardHeader title="Zoom settings" />
<div className="mx-auto flex gap-10 items-center ">
<div>
<Field
type="radio"
name="zoom"
value={zoomLevel?.level ? zoomLevel.level.toString() : "1"}
checked={zoomLevel?.level === 1}
className="hidden peer"
id="zoom1"
onChange={() => handleRadioButtonChange(1)}
/>
<label
htmlFor="zoom1"
className="px-6 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"
>
x1
</label>
</div>
<div>
<Field
type="radio"
name="zoom"
value={zoomLevel?.level ? zoomLevel.level.toString() : "2"}
checked={zoomLevel?.level === 2}
className="hidden peer"
id="zoom2"
onChange={() => handleRadioButtonChange(2)}
/>
<label
htmlFor="zoom2"
className="px-6 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"
>
x2
</label>
</div>
<div>
<Field
type="radio"
name="zoom"
value={zoomLevel?.level ? zoomLevel.level.toString() : "4"}
checked={zoomLevel?.level === 4}
className="hidden peer"
id="zoom4"
onChange={() => handleRadioButtonChange(4)}
/>
<label
htmlFor="zoom4"
className="px-6 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"
>
x4
</label>
</div>
<div>
<Field
type="radio"
name="zoom"
value={zoomLevel?.level ? zoomLevel.level.toString() : "8"}
checked={zoomLevel?.level === 8}
className="hidden peer"
id="zoom8"
onChange={() => handleRadioButtonChange(8)}
/>
<label
htmlFor="zoom8"
className="px-6 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"
>
x8
</label>
</div>
</div>
</div>
<button
type="submit"
className="bg-[#26B170] text-white rounded-lg p-2 mx-auto h-[100%] w-full"

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

@@ -1,18 +1,23 @@
import { useFetchCameraConfig } from "../../hooks/useCameraConfig";
import type { ZoomLevel } from "../../types/types";
import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";
import CameraSettingFields from "./CameraSettingFields";
import { faWrench } from "@fortawesome/free-solid-svg-icons";
const CameraSettings = ({ title, side }: { title: string; side: string }) => {
const {
data,
isError,
isPending,
updateCameraConfig,
updateCameraConfigError,
} = useFetchCameraConfig(side);
console.log(updateCameraConfigError);
const CameraSettings = ({
title,
side,
zoomLevel,
onZoomLevelChange,
}: {
title: string;
side: string;
zoomLevel?: ZoomLevel;
onZoomLevelChange?: (level: ZoomLevel) => void;
}) => {
const { data, isError, isPending, updateCameraConfig } =
useFetchCameraConfig(side);
return (
<Card className="overflow-hidden min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4">
@@ -23,6 +28,8 @@ const CameraSettings = ({ title, side }: { title: string; side: string }) => {
<CameraSettingFields
initialData={data}
updateCameraConfig={updateCameraConfig}
zoomLevel={zoomLevel}
onZoomLevelChange={onZoomLevelChange}
/>
</div>
</Card>