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

4
src/App.tsx
View File

@@ -19,8 +19,8 @@ function App() {
<Routes>
<Route path="/" element={<Container />}>
<Route index element={<Dashboard />} />
<Route path="camera-settings" element={<FrontCamera />} />
<Route path="rear-camera-settings" element={<RearCamera />} />
<Route path="a-camera-settings" element={<FrontCamera />} />
<Route path="b-camera-settings" element={<RearCamera />} />
<Route path="system-settings" element={<SystemSettings />} />
<Route path="session-settings" element={<Session />} />
<Route path="*" element={<Navigate to="/" replace />} />

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();

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

@@ -57,10 +57,12 @@ 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">
{!showSettings && (
<>
<FormGroup>
<label htmlFor="apn" className="font-medium whitespace-nowrap md:w-2/3">
APN
@@ -119,6 +121,8 @@ const ModemSettings = () => {
<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"
@@ -128,7 +132,6 @@ const ModemSettings = () => {
</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")}
/>
)}
</>

9
src/hooks/useCameraWifiandModem.ts
View File

@@ -3,9 +3,10 @@ import { CAM_BASE } from "../utils/config";
import type { ModemConfig, WifiConfig } from "../types/types";
import { useEffect } from "react";
import { toast } from "sonner";
const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : "";
const getWiFiSettings = async () => {
const response = await fetch(`${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-wifi`, {
const response = await fetch(`${camBase}/api/fetch-config?id=ModemAndWifiManager-wifi`, {
signal: AbortSignal.timeout(500),
});
if (!response.ok) {
@@ -15,7 +16,7 @@ const getWiFiSettings = async () => {
};
const updateWifiSettings = async (wifiConfig: WifiConfig) => {
const response = await fetch(`${CAM_BASE}/api/update-config?id=ModemAndWifiManager-wifi`, {
const response = await fetch(`${camBase}/api/update-config?id=ModemAndWifiManager-wifi`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(wifiConfig),
@@ -27,7 +28,7 @@ const updateWifiSettings = async (wifiConfig: WifiConfig) => {
};
const getModemSettings = async () => {
const response = await fetch(`${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-modem`, {
const response = await fetch(`${camBase}/api/fetch-config?id=ModemAndWifiManager-modem`, {
signal: AbortSignal.timeout(500),
});
if (!response.ok) {
@@ -37,7 +38,7 @@ const getModemSettings = async () => {
};
const updateModemSettings = async (modemConfig: ModemConfig) => {
const response = await fetch(`${CAM_BASE}/api/update-config?id=ModemAndWifiManager-modem`, {
const response = await fetch(`${camBase}/api/update-config?id=ModemAndWifiManager-modem`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(modemConfig),

1
src/hooks/useCameraZoom.ts
View File

@@ -5,6 +5,7 @@ import { toast } from "sonner";
import { useEffect } from "react";
async function zoomIn(options: ZoomInOptions) {
console.log(options);
const response = await fetch(
`${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplierText?.toLowerCase()}`,
{