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

added forms and refactored component names

Browse Source
This commit is contained in:
Toba Ojo
2025-08-15 09:32:33 +01:00
parent 92e3617335
commit d537a32e2c
20 changed files with 640 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,5 @@
import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
import { useNavigate } from "react-router";
import NavigationArrow from "../UI/NavigationArrow";
type SnapshotContainerProps = {
side: string;
@@ -9,24 +7,11 @@ type SnapshotContainerProps = {
export const SnapshotContainer = ({ side }: SnapshotContainerProps) => {
const { canvasRef } = useGetOverviewSnapshot(side);
const navigate = useNavigate();
return (
<div className="relative w-full aspect-video">
{side === "CameraFront" || side === "Rear" ? (
<FontAwesomeIcon
icon={faArrowLeft}
className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer"
onClick={() => navigate("/front-camera-settings")}
/>
) : (
<FontAwesomeIcon
icon={faArrowRight}
className="absolute top-[50%] right-[2%] backdrop-blur-md"
/>
)}
<canvas ref={canvasRef} className="w-full h-full object-contain block" />
<NavigationArrow side={side} />
<canvas ref={canvasRef} className="w-full h-full object-contain block " />
</div>
);
};

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

@@ -1,5 +1,136 @@
import { Formik, Field, Form } from "formik";
import type {
CameraSettingErrorValues,
CameraSettingValues,
} from "../../types/types";
const CameraSettingFields = () => {
return <div>CameraSettingFields</div>;
const initialValues = {
friendlyName: "",
cameraAddress: "",
userName: "",
password: "",
setupCamera: 1,
};
const validateValues = (values: CameraSettingValues) => {
const errors: CameraSettingErrorValues = {};
if (!values.friendlyName) errors.friendlyName = "Required";
if (!values.cameraAddress) errors.cameraAddress = "Required";
if (!values.userName) errors.userName = "Required";
if (!values.password) errors.password = "Required";
console.log(errors);
return errors;
};
const handleSubmit = (values: CameraSettingValues) => {
// post values to endpoint
console.log(values);
};
return (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validate={validateValues}
validateOnChange={false}
>
{({ errors }) => {
return (
<Form className="flex flex-col space-y-4 p-2">
<div className="flex flex-col space-y-2">
<label htmlFor="friendlyName" className="relative">
Friendly Name
</label>
{errors.friendlyName && (
<small className="absolute right-0 text-red-500">
{errors?.friendlyName}
</small>
)}
<Field
name={"friendlyName"}
type="text"
className="p-2 border border-gray-400 rounded-lg"
placeholder="Enter camera name"
/>
</div>
<div className="flex flex-col">
<label htmlFor="setupCamera" className="relative">
Setup Camera
</label>
<Field
as="select"
name="setupCamera"
className="p-2 border border-gray-400 rounded-lg text-white"
>
<option value={1} className="bg-[#253445]">
1
</option>
<option value={2} className="bg-[#253445]">
2
</option>
<option value={3} className="bg-[#253445]">
3
</option>
<option value={4} className="bg-[#253445]">
4
</option>
</Field>
</div>
<div className="flex flex-col">
<label htmlFor="cameraAddress">Camera Address</label>
{errors.cameraAddress && (
<small className="absolute right-0 text-red-500">
{errors?.cameraAddress}
</small>
)}
<Field
name={"cameraAddress"}
type="text"
className="p-2 border border-gray-400 rounded-lg"
placeholder="123, London Road..."
/>
</div>
<div className="flex flex-col">
<label htmlFor="userName">User Name</label>
{errors.userName && (
<small className="absolute right-0 text-red-500">
{errors?.userName}
</small>
)}
<Field
name={"userName"}
type="text"
className="p-2 border border-gray-400 rounded-lg"
placeholder="Enter user name"
/>
</div>
<div className="flex flex-col">
<label htmlFor="password">Password</label>
{errors.password && (
<small className="absolute right-0 text-red-500">
{errors?.password}
</small>
)}
<Field
name={"password"}
type="password"
className="p-2 border border-gray-400 rounded-lg"
placeholder="Enter password"
/>
</div>
<button
type="submit"
className="bg-blue-800 rounded-lg p-2 mx-auto"
>
Save settings
</button>
</Form>
);
}}
</Formik>
);
};
export default CameraSettingFields;

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

@@ -1,11 +1,14 @@
import Card from "../UI/Card";
import CameraOverviewHeader from "../CameraOverview/CameraOverviewHeader";
import CardHeader from "../UI/CardHeader";
import CameraSettingFields from "./CameraSettingFields";
import { faWrench } from "@fortawesome/free-solid-svg-icons";
const CameraSettings = ({ title }: { title: string }) => {
return (
<Card>
<div className="relative flex flex-col space-y-3 h-full">
<CameraOverviewHeader title={title} />
<CardHeader title={title} icon={faWrench} />
<CameraSettingFields />
</div>
</Card>
);

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

@@ -1,6 +1,7 @@
import clsx from "clsx";
import Card from "../UI/Card";
import CameraOverviewHeader from "../CameraOverview/CameraOverviewHeader";
import CardHeader from "../UI/CardHeader";
import { faCamera } from "@fortawesome/free-regular-svg-icons";
import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
import { useSwipeable } from "react-swipeable";
import { useNavigate } from "react-router";
@@ -17,7 +18,7 @@ const FrontCameraOverviewCard = () => {
return (
<Card className={clsx("relative min-h-[40vh] md:min-h-[60vh] h-auto")}>
<div className="flex flex-col space-y-3 h-full" {...handlers}>
<CameraOverviewHeader title="Front Overiew" />
<CardHeader title="Front Overiew" icon={faCamera} />
<SnapshotContainer side="CameraFront" />
</div>
</Card>

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

@@ -1,7 +1,8 @@
import clsx from "clsx";
import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
import { faCamera } from "@fortawesome/free-regular-svg-icons";
import Card from "../UI/Card";
import CameraOverviewHeader from "../CameraOverview/CameraOverviewHeader";
import CardHeader from "../UI/CardHeader";
const OverviewVideoContainer = ({
title,
@@ -13,7 +14,7 @@ const OverviewVideoContainer = ({
return (
<Card className={clsx("min-h-[40vh] md:min-h-[60vh] h-auto")}>
<div className="relative flex flex-col space-y-3 h-full">
<CameraOverviewHeader title={title} />
<CardHeader title={title} icon={faCamera} />
<SnapshotContainer side={side} />
</div>
</Card>

14
src/components/Output/Output.tsx Normal file
View File

@@ -0,0 +1,14 @@
import clsx from "clsx";
import Card from "../UI/Card";
import { faSliders } from "@fortawesome/free-solid-svg-icons";
import CardHeader from "../UI/CardHeader";
const Output = () => {
return (
<Card className={clsx("min-h-[40vh] md:min-h-[60vh] h-auto")}>
<CardHeader title="Output" icon={faSliders} />
</Card>
);
};
export default Output;

0
src/components/Output/OutputForm.tsx Normal file
View File

4
src/components/PlateStack/Sighting.tsx
View File

@@ -1,9 +1,9 @@
import NumberPlate from "./NumberPlate";
import SightingCanvas from "../SightingOverview/SightingCanvas";
import type { Sighting } from "../../types/types";
import type { SightingType } from "../../types/types";
type SightingProps = {
sighting: Sighting;
sighting: SightingType;
};
const Sighting = ({ sighting }: SightingProps) => {

6
src/components/PlateStack/Sightings.tsx
View File

@@ -1,4 +1,3 @@
import { useEffect, useState } from "react";
import Card from "../UI/Card";
import SightingHeader from "./SightingHeader";
import Sighting from "./Sighting";
@@ -9,12 +8,7 @@ type SightingProps = {
};
const Sightings = ({ title }: SightingProps) => {
const [sightings, setSightings] = useState([]);
const { data } = useLatestSighting();
// console.log(data);
// useEffect(() => {
// setSightings([...sightings, data]);
// }, [data]);
return (
<Card className="h-[10rem] md:h-[15rem] overflow-x-hidden">

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

@@ -3,7 +3,8 @@ import Card from "../UI/Card";
import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
import { useSwipeable } from "react-swipeable";
import { useNavigate } from "react-router";
import CameraOverviewHeader from "../CameraOverview/CameraOverviewHeader";
import CardHeader from "../UI/CardHeader";
import { faCamera } from "@fortawesome/free-regular-svg-icons";
const RearCameraOverviewCard = () => {
const navigate = useNavigate();
@@ -15,7 +16,7 @@ const RearCameraOverviewCard = () => {
return (
<Card className={clsx("min-h-[40vh] md:min-h-[60vh] h-auto")}>
<div className="flex flex-col space-y-3 h-full" {...handlers}>
<CameraOverviewHeader title="Rear Overiew" />
<CardHeader title="Rear Overiew" icon={faCamera} />
<SnapshotContainer side="TargetDetectionRear" />
</div>
</Card>

10
src/components/CameraOverview/CameraOverviewHeader.tsx → src/components/UI/CardHeader.tsx
View File

@@ -1,22 +1,24 @@
import { faCamera } from "@fortawesome/free-regular-svg-icons";
import type { IconProp } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import clsx from "clsx";
type CameraOverviewHeaderProps = {
title: string;
icon: IconProp;
};
const CameraOverviewHeader = ({ title }: CameraOverviewHeaderProps) => {
const CardHeader = ({ title, icon }: CameraOverviewHeaderProps) => {
return (
<div
className={clsx(
"w-full border-b border-gray-600 flex flex-row items-center space-x-2 md:mb-6"
)}
>
<FontAwesomeIcon icon={faCamera} className="size-4" />
<FontAwesomeIcon icon={icon} className="size-4" />
<h2 className="text-xl">{title}</h2>
</div>
);
};
export default CameraOverviewHeader;
export default CardHeader;

42
src/components/UI/NavigationArrow.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useNavigate } from "react-router";
type NavigationArrowProps = {
side: string;
};
const NavigationArrow = ({ side }: NavigationArrowProps) => {
const navigate = useNavigate();
const navigationDest = (side: string) => {
if (side === "CameraFront") {
navigate("/front-camera-settings");
} else if (side === "Rear") {
navigate("/");
} else if (side === "TargetDetectionRear") {
navigate("/Rear-Camera-settings");
} else {
navigate("/");
}
};
return (
<>
{side === "CameraFront" || side === "Rear" ? (
<FontAwesomeIcon
icon={faArrowLeft}
className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"
onClick={() => navigationDest(side)}
/>
) : (
<FontAwesomeIcon
icon={faArrowRight}
className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"
onClick={() => navigationDest(side)}
/>
)}
</>
);
};
export default NavigationArrow;