diff --git a/src/components/CameraSettings/CameraSettingFields.tsx b/src/components/CameraSettings/CameraSettingFields.tsx index 3f88cf9..95d56b9 100644 --- a/src/components/CameraSettings/CameraSettingFields.tsx +++ b/src/components/CameraSettings/CameraSettingFields.tsx @@ -130,7 +130,7 @@ const CameraSettingFields = ({ diff --git a/src/components/HistoryList/AlertItem.tsx b/src/components/HistoryList/AlertItem.tsx index abc4119..f744d4a 100644 --- a/src/components/HistoryList/AlertItem.tsx +++ b/src/components/HistoryList/AlertItem.tsx @@ -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 ( - <> - -
- {isHotListHit && ( - hotlistHit - )} +
+
+ +
+ {isHotListHit && ( + hotlistHit + )} + {isNPEDHitA && ( + hotlistHit + )} + {isNPEDHitB && ( + hotlistHit + )} + {isNPEDHitC && ( + hotlistHit + )} -
- MAKE: {item.make} - MODEL: {item.model} - COLOUR: {item.color} +
+ MAKE: {item.make} + MODEL: {item.model} + COLOUR: {item.color} +
+ +
- - +
- - +
); }; diff --git a/src/components/HistoryList/HistoryList.tsx b/src/components/HistoryList/HistoryList.tsx index bb83749..d5fc61d 100644 --- a/src/components/HistoryList/HistoryList.tsx +++ b/src/components/HistoryList/HistoryList.tsx @@ -1,18 +1,30 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useAlertHitContext } from "../../context/AlertHitContext"; +import type { SightingType } from "../../types/types"; import Card from "../UI/Card"; import CardHeader from "../UI/CardHeader"; import AlertItem from "./AlertItem"; +import { faTrash } from "@fortawesome/free-solid-svg-icons"; const HistoryList = () => { - const { state } = useAlertHitContext(); + const { state, dispatch } = useAlertHitContext(); + const handleDeleteClick = (alertItem: SightingType) => + dispatch({ type: "REMOVE", payload: alertItem }); return (
{state?.alertList?.length > 0 ? ( state?.alertList?.map((alertItem, index) => ( - +
+ + +
)) ) : (

No Alert results

diff --git a/src/components/SessionForm/HitSearchCard.tsx b/src/components/SessionForm/HitSearchCard.tsx index e25fdd3..c2c6b85 100644 --- a/src/components/SessionForm/HitSearchCard.tsx +++ b/src/components/SessionForm/HitSearchCard.tsx @@ -32,7 +32,7 @@ const SessionCard = () => {
{searchTerm && ( diff --git a/src/components/SettingForms/System/SystemConfigFields.tsx b/src/components/SettingForms/System/SystemConfigFields.tsx index 1b14594..d4a728c 100644 --- a/src/components/SettingForms/System/SystemConfigFields.tsx +++ b/src/components/SettingForms/System/SystemConfigFields.tsx @@ -130,7 +130,7 @@ const SystemConfigFields = () => { @@ -144,14 +144,14 @@ const SystemConfigFields = () => {
- - + {onDelete ? ( + + ) : ( + + )} + {onDelete ? ( + + ) : ( + + )}
diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx index d959e63..e038343 100644 --- a/src/components/UI/Header.tsx +++ b/src/components/UI/Header.tsx @@ -97,7 +97,7 @@ export default function Header() { Logo -
+

Local: {localStr}

UTC: {utcStr}

@@ -113,7 +113,7 @@ export default function Header() {
- + - + diff --git a/src/context/reducers/AlertReducers.ts b/src/context/reducers/AlertReducers.ts index 5170933..7eb99bf 100644 --- a/src/context/reducers/AlertReducers.ts +++ b/src/context/reducers/AlertReducers.ts @@ -41,6 +41,15 @@ export function reducer(state: AlertState, action: AlertPayload) { } } + case "REMOVE": { + return { + ...state, + alertList: state.alertList.filter( + (alertItem) => alertItem.vrm !== action.payload.vrm + ), + }; + } + default: return { ...state }; } diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index fb45cd2..e48f28f 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -6,13 +6,13 @@ import { CAM_BASE } from "../utils/config"; const Dashboard = () => { const dev_REAR_URL = `${CAM_BASE}/SightingListRear/sightingSummary?mostRecentRef=`; - const dev_FRONT_URL = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`; - + // const dev_FRONT_URL = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`; + const folkURL = import.meta.env.VITE_FOLKESTONE_URL; console.log(CAM_BASE); return (
- +