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

- minor tweaks on zoom and navigation arrow

Browse Source
This commit is contained in:
Toba Ojo
2025-11-04 16:09:24 +00:00
parent c127ce8a8c
commit 647fd201a3
9 changed files with 90 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,8 @@
import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
import type { ZoomInOptions } from "../../types/types";
import NavigationArrow from "../UI/NavigationArrow";
import { useCameraZoom } from "../../hooks/useCameraZoom";
import { useEffect } from "react";
import Loading from "../UI/Loading";
import ErrorState from "../UI/ErrorState";
import { reverseZoomMapping, zoomMapping } from "../../utils/utils";
type SnapshotContainerProps = {
side: string;
settingsPage?: boolean;
@@ -16,10 +12,6 @@ type SnapshotContainerProps = {
export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelChange }: SnapshotContainerProps) => {
const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
const cameraControllerSide = side === "CameraA" ? "CameraControllerA" : "CameraControllerB";
const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
const magnification = query?.data?.propMagnification?.value;
const apiZoom = reverseZoomMapping(magnification);
const handleZoomClick = () => {
const baseLevel = zoomLevel ?? 1;
@@ -30,19 +22,6 @@ export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelCh
if (!zoomLevel) return;
};
useEffect(() => {
if (zoomLevel) {
const text = zoomMapping(apiZoom);
const zoomInOptions: ZoomInOptions = {
camera: cameraControllerSide,
multiplier: zoomLevel,
multiplierText: text,
};
console.log(zoomInOptions);
mutation.mutate(zoomInOptions);
}
}, [cameraControllerSide, apiZoom, zoomLevel]);
return (
<div className="flex flex-col md:flex-row">
<NavigationArrow side={side} settingsPage={settingsPage} />

4
src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx
View File

@@ -8,8 +8,8 @@ import SightingOverview from "../SightingOverview/SightingOverview";
const FrontCameraOverviewCard = () => {
const navigate = useNavigate();
const handlers = useSwipeable({
onSwipedRight: () => navigate("/camera-settings"),
onSwipedLeft: () => navigate("/rear-camera-settings"),
onSwipedRight: () => navigate("/a-camera-settings"),
onSwipedLeft: () => navigate("/b-camera-settings"),
trackMouse: true,
});

4
src/components/FrontCameraSettings/OverviewVideoContainer.tsx
View File

@@ -20,11 +20,11 @@ const OverviewVideoContainer = ({
const location = useLocation();
const handlers = useSwipeable({
onSwipedLeft: () => {
if (location.pathname === "/rear-camera-settings") return;
if (location.pathname === "/b-camera-settings") return;
navigate("/");
},
onSwipedRight: () => {
if (location.pathname === "/camera-settings") return;
if (location.pathname === "/a-camera-settings") return;
navigate("/");
},
trackMouse: true,

2
src/components/RearCameraOverview/RearCameraOverviewCard.tsx
View File

@@ -13,7 +13,7 @@ type CardProps = React.HTMLAttributes<HTMLDivElement>;
const RearCameraOverviewCard = ({ className }: CardProps) => {
const navigate = useNavigate();
const handlers = useSwipeable({
onSwipedLeft: () => navigate("/rear-camera-settings"),
onSwipedLeft: () => navigate("/b-camera-settings"),
trackMouse: true,
});
const { mostRecent } = useSightingFeedContext();

141
src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
View File

@@ -57,78 +57,81 @@ const ModemSettings = () => {
return (
<>
<ModemToggle showSettings={showSettings} onShowSettings={setShowSettings} />
{!showSettings && (
<Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
{({ isSubmitting }) => (
<Form className="flex flex-col space-y-5 px-2">
<FormGroup>
<label htmlFor="apn" className="font-medium whitespace-nowrap md:w-2/3">
APN
</label>
<Field
placeholder="Enter APN"
name="apn"
id="apn"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
</FormGroup>
<FormGroup>
<label htmlFor="username" className="font-medium whitespace-nowrap md:w-2/3">
Username
</label>
<Field
placeholder="Enter Username"
name="username"
id="username"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
</FormGroup>
<FormGroup>
<label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
Password
</label>
<div className="flex gap-2 items-center relative mb-4">
<Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
{({ isSubmitting }) => (
<Form className="flex flex-col space-y-5 px-2">
{!showSettings && (
<>
<FormGroup>
<label htmlFor="apn" className="font-medium whitespace-nowrap md:w-2/3">
APN
</label>
<Field
id="password"
name="password"
type={showPwd ? "text" : "password"}
className="p-2 border border-gray-400 rounded-lg w-full"
placeholder="Enter Password"
placeholder="Enter APN"
name="apn"
id="apn"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
<FontAwesomeIcon
type="button"
className="absolute right-5 end-0"
onClick={() => setShowPwd((s) => !s)}
icon={showPwd ? faEyeSlash : faEye}
</FormGroup>
<FormGroup>
<label htmlFor="username" className="font-medium whitespace-nowrap md:w-2/3">
Username
</label>
<Field
placeholder="Enter Username"
name="username"
id="username"
type="text"
className="p-1.5 border border-gray-400 rounded-lg"
/>
</div>
</FormGroup>
<FormGroup>
<label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
Password
</label>
<Field
name="authenticationType"
as="select"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
>
<option value="PAP">PAP</option>
<option value="CHAP">CHAP</option>
<option value="none">None</option>
</Field>
</FormGroup>
<button
type="submit"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
>
{isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
</button>
</Form>
)}
</Formik>
)}
</FormGroup>
<FormGroup>
<label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
Password
</label>
<div className="flex gap-2 items-center relative mb-4">
<Field
id="password"
name="password"
type={showPwd ? "text" : "password"}
className="p-2 border border-gray-400 rounded-lg w-full"
placeholder="Enter Password"
/>
<FontAwesomeIcon
type="button"
className="absolute right-5 end-0"
onClick={() => setShowPwd((s) => !s)}
icon={showPwd ? faEyeSlash : faEye}
/>
</div>
</FormGroup>
<FormGroup>
<label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
Password
</label>
<Field
name="authenticationType"
as="select"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
>
<option value="PAP">PAP</option>
<option value="CHAP">CHAP</option>
<option value="none">None</option>
</Field>
</FormGroup>
</>
)}
<button
type="submit"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
>
{isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
</button>
</Form>
)}
</Formik>
</>
);
};

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

@@ -17,9 +17,9 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
}
if (side === "Front") {
navigate("/camera-settings");
navigate("/a-camera-settings");
} else if (side === "Rear") {
navigate("/Rear-Camera-settings");
navigate("/b-Camera-settings");
}
};
@@ -31,14 +31,14 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
size="2xl"
icon={faArrowRight}
className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30"
onClick={() => navigationDest("Front")}
onClick={() => navigationDest("a")}
/>
) : (
<FontAwesomeIcon
icon={faArrowLeft}
size="2xl"
className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
onClick={() => navigationDest("Rear")}
onClick={() => navigationDest("b")}
/>
)}
</>