91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
import type { SightingType } from "../../types/types";
|
|
import NumberPlate from "../PlateStack/NumberPlate";
|
|
import SightingModal from "../SightingModal/SightingModal";
|
|
import { useState } from "react";
|
|
import HotListImg from "/Hotlist_Hit.svg";
|
|
import { useAlertHitContext } from "../../context/AlertHitContext";
|
|
import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
|
|
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, formatAge, getNPEDCategory } from "../../utils/utils";
|
|
import { faX } from "@fortawesome/free-solid-svg-icons";
|
|
import { faClock } from "@fortawesome/free-regular-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import Badge from "../UI/Badge";
|
|
|
|
type AlertItemProps = {
|
|
item: SightingType;
|
|
};
|
|
|
|
const AlertItem = ({ item }: AlertItemProps) => {
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const { dispatch } = useAlertHitContext();
|
|
const { mutation } = useCameraBlackboard();
|
|
|
|
const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
|
|
|
|
const isHotListHit = checkIsHotListHit(item);
|
|
const cat = getNPEDCategory(item);
|
|
const isNPEDHitA = cat === "A";
|
|
const isNPEDHitB = cat === "B";
|
|
const isNPEDHitC = cat === "C";
|
|
|
|
const handleClick = () => {
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const closeModal = () => {
|
|
setIsModalOpen(false);
|
|
};
|
|
|
|
const handleDelete = async (deletedItem: SightingType | null) => {
|
|
const res = await mutation.mutateAsync({
|
|
operation: "VIEW",
|
|
path: "alertHistory",
|
|
});
|
|
const oldArray = res?.result;
|
|
const updatedArray = oldArray?.filter((item: SightingType) => item?.ref !== deletedItem?.ref);
|
|
|
|
mutation.mutate({
|
|
operation: "INSERT",
|
|
path: "alertHistory",
|
|
value: updatedArray,
|
|
});
|
|
dispatch({ type: "REMOVE", payload: item });
|
|
};
|
|
return (
|
|
<div className="flex flex-col w-full relative">
|
|
<div className="border border-gray-600 rounded-lg items-center p-4">
|
|
<div className="flex flex-row space-x-3 ml-4">
|
|
<Badge text={`Seen: ${formatAge(item.timeStampMillis)}`} icon={faClock} />
|
|
</div>
|
|
<button onClick={() => handleDelete(item)} className="absolute right-2 top-3">
|
|
<FontAwesomeIcon icon={faX} size="xl" />
|
|
</button>
|
|
|
|
<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>
|
|
<div className="h-20">
|
|
<NumberPlate vrm={item.vrm} motion={motionAway} />
|
|
</div>
|
|
</div>
|
|
<SightingModal
|
|
isSightingModalOpen={isModalOpen}
|
|
handleClose={closeModal}
|
|
sighting={item}
|
|
onDelete={handleDelete}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AlertItem;
|