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

- improvements made to session page alert list

Browse Source
This commit is contained in:
Toba Ojo
2025-10-15 16:11:10 +01:00
parent 7cfebab6c1
commit c8f4ebf5a9
3 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,6 @@
import type { SightingType } from "../../types/types";
import NumberPlate from "../PlateStack/NumberPlate";
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";
@@ -9,9 +8,11 @@ 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, getNPEDCategory } from "../../utils/utils";
import { faTrash } from "@fortawesome/free-solid-svg-icons";
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;
@@ -22,7 +23,6 @@ const AlertItem = ({ item }: AlertItemProps) => {
const { dispatch } = useAlertHitContext();
const { mutation } = useCameraBlackboard();
// const {d} = useCameraBlackboard();
const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
const isHotListHit = checkIsHotListHit(item);
@@ -56,12 +56,15 @@ const AlertItem = ({ item }: AlertItemProps) => {
};
return (
<div className="flex flex-col w-full relative">
<div className="border border-gray-600 rounded-lg items-center py-1">
<InfoBar obj={item} />
<button onClick={() => handleDelete(item)} className="absolute right-2 top-1">
<FontAwesomeIcon icon={faTrash} size="xl" />
<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}>
<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" />}