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

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>