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

added delete functionality and updated button styles

Browse Source
This commit is contained in:
Toba Ojo
2025-09-23 16:02:14 +01:00
parent c2074f86a2
commit fe28247b1c
15 changed files with 150 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,10 @@ import SightingModal from "../SightingModal/SightingModal";
import InfoBar from "../SightingsWidget/InfoBar";
import { useState } from "react";
import HotListImg from "/Hotlist_Hit.svg";
import { useAlertHitContext } from "../../context/AlertHitContext";
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";
type AlertItemProps = {
item: SightingType;
@@ -11,8 +15,12 @@ type AlertItemProps = {
const AlertItem = ({ item }: AlertItemProps) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const { dispatch } = useAlertHitContext();
const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true;
const isNPEDHitA = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
const isNPEDHitB = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
const isNPEDHitC = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
const handleClick = () => {
setIsModalOpen(true);
@@ -21,35 +29,63 @@ const AlertItem = ({ item }: AlertItemProps) => {
const closeModal = () => {
setIsModalOpen(false);
};
const handleDelete = () => {
dispatch({ type: "REMOVE", payload: item });
};
return (
<>
<InfoBar obj={item} />
<div
className=" flex flex-row p-4 border border-gray-400 rounded-lg items-center w-full mx-auto justify-between"
onClick={handleClick}
>
{isHotListHit && (
<img
src={HotListImg}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
)}
<div className="flex flex-col w-full">
<div className="border border-gray-400 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="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 className="flex flex-col">
<small>MAKE: {item.make}</small>
<small>MODEL: {item.model}</small>
<small>COLOUR: {item.color}</small>
<div className="flex flex-col">
<small>MAKE: {item.make}</small>
<small>MODEL: {item.model}</small>
<small>COLOUR: {item.color}</small>
</div>
<NumberPlate vrm={item.vrm} motion={motionAway} />
</div>
<NumberPlate vrm={item.vrm} motion={motionAway} />
<SightingModal
isSightingModalOpen={isModalOpen}
handleClose={closeModal}
sighting={item}
onDelete={handleDelete}
/>
</div>
<SightingModal
isSightingModalOpen={isModalOpen}
handleClose={closeModal}
sighting={item}
/>
</>
</div>
);
};