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

added NPED cat sorting

Browse Source
This commit is contained in:
Toba Ojo
2025-09-22 09:26:45 +01:00
parent 50cedaf2c4
commit 69eb5cc7be
15 changed files with 212 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/SightingsWidget/SightingWidget.tsx
View File

@@ -7,9 +7,12 @@ import CardHeader from "../UI/CardHeader";
import clsx from "clsx";
import { useSightingFeedContext } from "../../context/SightingFeedContext";
import SightingModal from "../SightingModal/SightingModal";
// import { useAlertHitContext } from "../../context/AlertHitContext";
import { useAlertHitContext } from "../../context/AlertHitContext";
import InfoBar from "./InfoBar";
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";
function useNow(tickMs = 1000) {
const [, setNow] = useState(() => Date.now());
@@ -17,16 +20,16 @@ function useNow(tickMs = 1000) {
const id = setInterval(() => setNow(Date.now()), tickMs);
return () => clearInterval(id);
}, [tickMs]);
return undefined;
return null;
}
type SightingHistoryProps = {
baseUrl?: string;
entries?: number; // number of rows to show
pollMs?: number; // poll frequency
entries?: number;
pollMs?: number;
autoSelectLatest?: boolean;
title: string;
className: React.HTMLAttributes<HTMLDivElement> | string;
className: string;
};
// /type SightingHistoryWidgetProps = React.HTMLAttributes<HTMLDivElement>;
@@ -45,17 +48,17 @@ export default function SightingHistoryWidget({
selectedSighting,
} = useSightingFeedContext();
// const { dispatch } = useAlertHitContext();
const { dispatch } = useAlertHitContext();
const hasAutoOpenedRef = useRef(false);
const onRowClick = useCallback(
(sighting: SightingType) => {
if (!sighting) return;
setSightingModalOpen(!isSightingModalOpen);
setSightingModalOpen(true);
setSelectedSighting(sighting);
},
[isSightingModalOpen, setSelectedSighting, setSightingModalOpen]
[setSelectedSighting, setSightingModalOpen]
);
const rows = useMemo(
@@ -63,28 +66,34 @@ export default function SightingHistoryWidget({
[sightings]
);
// useEffect(() => {
// rows?.forEach((obj) => {
// const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
useEffect(() => {
rows?.forEach((obj) => {
const isNPEDHitA = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
const isNPEDHitB = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
const isNPEDHitC = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
// if (isNPEDHit) {
// dispatch({
// type: "ADD",
// payload: obj,
// });
// }
// });
// }, [rows, dispatch]);
if (isNPEDHitA || isNPEDHitB || isNPEDHitC) {
dispatch({
type: "ADD",
payload: obj,
});
}
});
}, [rows, dispatch]);
useEffect(() => {
if (hasAutoOpenedRef.current) return;
const firstHot = rows?.find(
(r) => r?.metadata?.hotlistMatches?.Hotlist0 === true
);
const firstHot = rows?.find((r) => {
// const hotlistHit = r?.metadata?.hotlistMatches?.Hotlist0 === true;
const isNPEDHitA = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
const isNPEDHitB = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
const isNPEDHitC = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
return isNPEDHitA || isNPEDHitB || isNPEDHitC;
});
if (firstHot) {
setSelectedSighting(firstHot);
setSightingModalOpen(true);
hasAutoOpenedRef.current = true; // prevent future auto-opens
hasAutoOpenedRef.current = true;
}
}, [rows, setSelectedSighting, setSightingModalOpen]);
@@ -98,8 +107,15 @@ export default function SightingHistoryWidget({
<div className="flex flex-col gap-3 ">
{/* Rows */}
<div className="flex flex-col">
{rows?.map((obj, idx) => {
// const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
{rows?.map((obj) => {
const isNPEDHitA =
obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
const isNPEDHitB =
obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
const isNPEDHitC =
obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
const isNPEDHitD =
obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "D";
const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
const primaryIsColour = obj?.srcCam === 1;
const secondaryMissing = (obj?.vrmSecondary ?? "") === "";
@@ -107,14 +123,16 @@ export default function SightingHistoryWidget({
obj?.metadata?.hotlistMatches?.Hotlist0 === true;
return (
<div
key={idx}
className={`border border-neutral-700 rounded-md mb-2 p-2 cursor-pointer`}
key={obj.ref}
className={`border border-neutral-700 rounded-md mb-2 p-2 cursor-pointer `}
onClick={() => onRowClick(obj)}
>
<InfoBar obj={obj} />
{/* Patch row */}
<div
className={`flex items-center gap-3 mt-2 justify-between`}
className={`flex items-center gap-3 mt-2 justify-between ${
isNPEDHitD ? "border border-amber-600" : ""
}`}
>
<div
className={`border p-1 ${
@@ -135,6 +153,28 @@ export default function SightingHistoryWidget({
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"
/>
)}
<NumberPlate motion={motionAway} vrm={obj?.vrm} />
</div>
</div>