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

updated ui and added NPED back

Browse Source
This commit is contained in:
Toba Ojo
2025-09-21 20:10:05 +01:00
parent 8f6fba1e63
commit 50cedaf2c4
11 changed files with 537 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.production Normal file
View File

@@ -0,0 +1 @@
VITE_CAM_BASE=

2
index.html
View File

@@ -7,7 +7,7 @@
<title>MAV | In Car System</title>
</head>
<body>
<div id="root"></div>
<div id="root" class="min-h-screen flex flex-col"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

497
public/NPED.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 252 KiB

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

@@ -130,7 +130,7 @@ const CameraSettingFields = ({
<button
type="submit"
className="bg-blue-800 text-white rounded-lg p-2 mx-auto"
className="bg-blue-800 text-white rounded-lg p-2 mx-auto h-[100%] w-full"
>
Save settings
</button>

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

@@ -13,13 +13,12 @@ const CameraSettings = ({ title, side }: { title: string; side: string }) => {
updateCameraConfigError,
} = useFetchCameraConfig(side);
console.log(updateCameraConfigError);
console.log(isPending);
return (
<Card>
{isError && <>Cannot Fetch camera config</>}
{isPending ? (
<>Loading</>
) : (
{isPending && <>Loading camera config</>}
{isError && <>Error fetching camera config</>}
<div className="relative flex flex-col space-y-3 h-full">
<CardHeader title={title} icon={faWrench} />
<CameraSettingFields
@@ -27,7 +26,6 @@ const CameraSettings = ({ title, side }: { title: string; side: string }) => {
updateCameraConfig={updateCameraConfig}
/>
</div>
)}
</Card>
);
};

9
src/components/HistoryList/AlertItem.tsx
View File

@@ -12,7 +12,7 @@ type AlertItemProps = {
const AlertItem = ({ item }: AlertItemProps) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
// const isNPEDHit = item?.metadata?.npedJSON?.status_code === 404;
const isNPEDHit = item?.metadata?.npedJSON?.status_code === 404;
const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true;
const handleClick = () => {
@@ -36,6 +36,13 @@ const AlertItem = ({ item }: AlertItemProps) => {
className="h-20 object-contain rounded-md"
/>
)}
{isNPEDHit && (
<img
src={HotListImg}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
)}
<div className="flex flex-col">
<small>MAKE: {item.make}</small>
<small>MODEL: {item.model}</small>

3
src/components/SettingForms/NPED/NPEDCard.tsx
View File

@@ -1,11 +1,12 @@
import Card from "../../UI/Card";
import CardHeader from "../../UI/CardHeader";
import NPEDFields from "./NPEDFields";
import NPEDIcon from "/NPED.svg";
const NPEDCard = () => {
return (
<Card>
<CardHeader title={"NPED Config"} img={"/NPED.jpg"} />
<CardHeader title={"NPED Config"} img={NPEDIcon} />
<NPEDFields />
</Card>
);

6
src/components/SettingForms/SightingData/SightingDataFields.tsx
View File

@@ -26,6 +26,7 @@ const SightingDataFields = () => {
<Field
as="select"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
name="overviewImageScaleFactor"
>
<option value="HIGH">Full</option>
<option value="MEDIUM">3/4</option>
@@ -38,6 +39,7 @@ const SightingDataFields = () => {
<Field
as="select"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
name="overviewType"
>
<option value="PlainOverview">Plain Overview</option>
<option value="IncludePlatePatches">Include Plate Patches</option>
@@ -60,6 +62,7 @@ const SightingDataFields = () => {
<Field
as="select"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
name="vrmToTransit"
>
<option value="PlainOverview">plain VRM ASCII (default)</option>
<option value="IncludePlatePatches">plain VRM ASCII (default)</option>
@@ -70,6 +73,7 @@ const SightingDataFields = () => {
<Field
as="select"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
name="staticReadAction"
>
<option value="UseLaneDirection">Use Lane Direction</option>
<option value="IncludePlatePatches">plain VRM ASCII (default)</option>
@@ -80,6 +84,7 @@ const SightingDataFields = () => {
<Field
as="select"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
name="noRegionAction"
>
<option value="UseLaneDirection">Send</option>
<option value="IncludePlatePatches">plain VRM ASCII (default)</option>
@@ -90,6 +95,7 @@ const SightingDataFields = () => {
<Field
as="select"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
name="countryCodeType"
>
<option value="IBAN 2 Character code (default)">
IBAN 2 Character code (default)

4
src/components/UI/Container.tsx
View File

@@ -4,9 +4,11 @@ import { Outlet } from "react-router";
const Container = () => {
return (
<div>
<div className="min-h-screen">
<Header />
<div className="min-h-screen">
<Outlet />
</div>
<Footer />
</div>
);

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

@@ -90,16 +90,14 @@ export default function Header() {
const utcStr = formatFromMs(serverNowMs, "utc");
return (
<div className="relative bg-[#253445] border-b border-gray-500 items-center mx-auto px-2 sm:px-6 lg:px-8 p-4 flex flex-row justify-between">
{/* Left: Logo */}
<div className="relative bg-[#253445] border-b border-gray-500 items-center mx-auto px-2 sm:px-6 lg:px-8 p-4 flex flex-col md:flex-row justify-between">
<div className="w-30">
<Link to={"/"}>
<img src={Logo} alt="Logo" width={150} height={150} />
</Link>
</div>
{/* Right: Texts stacked + icons */}
<div className="flex items-center space-x-24 ">
<div className="flex flex-col leading-tight text-white tabular-nums text-xl text-right">
<div className="flex flex-col md:flex-row items-center space-x-24 justify-items-center">
<div className="flex flex-col leading-tight text-white tabular-nums text-xl text-right mx-auto md:mx-10">
<h2>Local: {localStr}</h2>
<h2>UTC: {utcStr}</h2>
</div>

4
src/hooks/useGetOverviewSnapshot.ts
View File

@@ -1,9 +1,11 @@
import { useRef, useCallback, useEffect } from "react";
import { useQuery } from "@tanstack/react-query";
import { CAM_BASE } from "../utils/config";
const apiUrl = import.meta.env.VITE_LOCAL_BASE;
const apiUrl = CAM_BASE;
async function fetchSnapshot(cameraSide: string) {
console.log(`${apiUrl}/${cameraSide}-preview`);
const response = await fetch(`${apiUrl}/${cameraSide}-preview`);
if (!response.ok) {
throw new Error("Cannot reach endpoint");