- added plate patch to alert item
- added hotlist name pick up on modals
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user