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

- added plate patch to alert item

Browse Source 
- added hotlist name pick up on modals
This commit is contained in:
Toba Ojo
2025-10-15 12:24:28 +01:00
parent 4da240a204
commit 9c9b8cb6b0
3 changed files with 44 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,9 +43,7 @@ const AlertItem = ({ item }: AlertItemProps) => {
path: "alertHistory",
});
const oldArray = res?.result;
const updatedArray = oldArray?.filter(
(item: SightingType) => item?.ref !== deletedItem?.ref
);
const updatedArray = oldArray?.filter((item: SightingType) => item?.ref !== deletedItem?.ref);
mutation.mutate({
operation: "INSERT",
@@ -58,45 +56,14 @@ const AlertItem = ({ item }: AlertItemProps) => {
<div className="flex flex-col w-full">
<div className="border border-gray-600 rounded-lg items-center py-1">
<InfoBar obj={item} />
<div
className=" flex flex-row p-4 w-full mx-auto justify-between"
onClick={handleClick}
>
{isHotListHit && (
<img
src={HotListImg}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
)}
{isNPEDHitA && (
<img
src={NPED_CAT_A}
alt="NPEDHITicon"
className="h-20 object-contain rounded-md"
/>
)}
{isNPEDHitB && (
<img
src={NPED_CAT_B}
alt="NPEDHITicon"
className="h-20 object-contain rounded-md"
/>
)}
{isNPEDHitC && (
<img
src={NPED_CAT_C}
alt="NPEDHITicon"
className="h-20 object-contain rounded-md"
/>
)}
<div className="flex flex-col">
<small>MAKE: {item.make}</small>
<small>MODEL: {item.model}</small>
<small>COLOUR: {item.color}</small>
<div className="flex flex-row p-4 w-full mx-auto justify-between" onClick={handleClick}>
{isHotListHit && <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
{isNPEDHitA && <img src={NPED_CAT_A} alt="NPEDHITicon" className="h-20 object-contain rounded-md" />}
{isNPEDHitB && <img src={NPED_CAT_B} alt="NPEDHITicon" className="h-20 object-contain rounded-md" />}
{isNPEDHitC && <img src={NPED_CAT_C} alt="NPEDHITicon" className="h-20 object-contain rounded-md" />}
<div className={`border p-1 hidden md:block`}>
<img src={item?.plateUrlColour} height={48} width={200} alt="colour patch" />
</div>
<NumberPlate vrm={item.vrm} motion={motionAway} />
</div>
<SightingModal

92
src/components/SightingModal/SightingModal.tsx
View File

@@ -10,7 +10,7 @@ import HotListImg from "/Hotlist_Hit.svg";
import NPED_CAT_A from "/NPED_Cat_A.svg";
import NPED_CAT_B from "/NPED_Cat_B.svg";
import NPED_CAT_C from "/NPED_Cat_C.svg";
import { checkIsHotListHit, getNPEDCategory } from "../../utils/utils";
import { checkIsHotListHit, getHotlistName, getNPEDCategory } from "../../utils/utils";
type SightingModalProps = {
isSightingModalOpen: boolean;
@@ -19,15 +19,12 @@ type SightingModalProps = {
onDelete?: (deletedItem: SightingType | null) => void;
};
const SightingModal = ({
isSightingModalOpen,
handleClose,
sighting,
onDelete,
}: SightingModalProps) => {
const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }: SightingModalProps) => {
const { dispatch } = useAlertHitContext();
const { query, mutation } = useCameraBlackboard();
const hotlistName = getHotlistName(sighting?.metadata?.hotlistMatches);
const handleAcknowledgeButton = () => {
try {
if (!sighting) {
@@ -78,9 +75,7 @@ const SightingModal = ({
<ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
<div className="max-w-screen-lg mx-auto py-4 px-2">
<div className="border-b border-gray-600 mb-4">
<h2 className="text-lg md:text-xl font-semibold">
Sighting Details
</h2>
<h2 className="text-lg md:text-xl font-semibold">Sighting Details</h2>
</div>
<div className="mt-3 flex-col-reverse gap-3 md:flex-row md:justify-center flex md:hidden">
{onDelete ? (
@@ -121,41 +116,19 @@ const SightingModal = ({
<div className="flex flex-col md:flex-row gap-3 items-center mb-2 justify-between">
<div className="flex flex-col md:flex-row gap-3 items-center">
<NumberPlate vrm={sighting?.vrm} motion={motionAway} />
<img
src={sighting?.plateUrlColour}
alt="plate patch"
className="h-16 object-contain rounded-md"
/>
<img src={sighting?.plateUrlColour} alt="plate patch" className="h-16 object-contain rounded-md" />
{hotlistName && (
<div>
<p className="text-gray-300">Hotlist</p>
<p className="font-medium text-2xl break-all">{hotlistName ? hotlistName[0] : "-"}</p>
</div>
)}
</div>
{isHotListHit && (
<img
src={HotListImg}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
)}
{isNPEDHitA && (
<img
src={NPED_CAT_A}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
)}
{isNPEDHitB && (
<img
src={NPED_CAT_B}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
)}
{isNPEDHitC && (
<img
src={NPED_CAT_C}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
)}
{isHotListHit && <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
{isNPEDHitA && <img src={NPED_CAT_A} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
{isNPEDHitB && <img src={NPED_CAT_B} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
{isNPEDHitC && <img src={NPED_CAT_C} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
</div>
<div className="flex flex-col lg:flex-row items-center gap-3">
<img
@@ -164,52 +137,37 @@ const SightingModal = ({
className="w-full h-56 sm:h-72 md:h-96 rounded-lg object-cover border border-gray-700"
/>
<aside className="w-full lg:w-80 bg-gray-800/70 text-white rounded-xl py-4 px-2 border h-[70%] border-gray-700">
<h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">
Vehicle Info
</h3>
<h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">Vehicle Info</h3>
<dl className="mt-3 gap-x-4 gap-y-2 text-sm">
<div>
<dt className="text-gray-300">VRM</dt>
<dd className="font-medium text-2xl break-all">
{sighting?.vrm ?? "-"}
</dd>
<dd className="font-medium text-2xl break-all">{sighting?.vrm ?? "-"}</dd>
</div>
<div>
<dt className="text-gray-300">Motion</dt>
<dd className="font-medium text-2xl">
{sighting?.motion ?? "-"}
</dd>
<dd className="font-medium text-2xl">{sighting?.motion ?? "-"}</dd>
</div>
<div>
<dt className="text-gray-300">Seen Count</dt>
<dd className="font-medium text-2xl">
{sighting?.seenCount ?? "-"}
</dd>
<dd className="font-medium text-2xl">{sighting?.seenCount ?? "-"}</dd>
</div>
<div>
<dt className="text-gray-300">Make</dt>
<dd className="font-medium text-2xl">
{sighting?.make ?? "-"}
</dd>
<dd className="font-medium text-2xl">{sighting?.make ?? "-"}</dd>
</div>
<div>
<dt className="text-gray-300">Model</dt>
<dd className="font-medium text-2xl">
{sighting?.model ?? "-"}
</dd>
<dd className="font-medium text-2xl">{sighting?.model ?? "-"}</dd>
</div>
<div className="sm:col-span-2">
<dt className="text-gray-300">Colour</dt>
<dd className="font-medium text-2xl">
{sighting?.color ?? "-"}
</dd>
<dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
</div>
<div>
<dt className="text-gray-300">Time</dt>
<dd className="font-medium text-xl">
{sighting?.timeStamp ?? "-"}
</dd>
<dd className="font-medium text-xl">{sighting?.timeStamp ?? "-"}</dd>
</div>
</dl>
</aside>

23
src/utils/utils.ts
View File

@@ -1,7 +1,7 @@
import switchSound from "../assets/sounds/ui/switch.mp3";
import popup from "../assets/sounds/ui/popup_open.mp3";
import notification from "../assets/sounds/ui/notification.mp3";
import type { SightingType } from "../types/types";
import type { HotlistMatches, SightingType } from "../types/types";
export function getSoundFileURL(name: string) {
const sounds: Record<string, string> = {
@@ -79,8 +79,7 @@ export const formatNumberPlate = (plate: string) => {
return formattedPlate;
};
export const BLANK_IMG =
"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
export const BLANK_IMG = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
export function capitalize(s?: string) {
return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
@@ -120,12 +119,7 @@ export function drawRects(
rects.forEach((r) => {
const [x, y, rw, rh] = r;
ctx.beginPath();
ctx.rect(
Math.round(x * w),
Math.round(y * h),
Math.round(rw * w),
Math.round(rh * h)
);
ctx.rect(Math.round(x * w), Math.round(y * h), Math.round(rw * w), Math.round(rh * h));
ctx.stroke();
});
}
@@ -133,13 +127,18 @@ export function drawRects(
export const checkIsHotListHit = (sigthing: SightingType | null) => {
if (!sigthing) return;
if (sigthing?.metadata?.hotlistMatches) {
const isHotListHit = Object.values(
sigthing?.metadata?.hotlistMatches
).includes(true);
const isHotListHit = Object.values(sigthing?.metadata?.hotlistMatches).includes(true);
return isHotListHit;
}
};
export function getHotlistName(obj: HotlistMatches | undefined) {
if (!obj || Object.values(obj).includes(false)) return;
const keys = Object.keys(obj);
return keys;
}
export const getNPEDCategory = (r?: SightingType | null) =>
r?.metadata?.npedJSON?.["NPED CATEGORY"] as "A" | "B" | "C" | undefined;