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

added alert popup on hotlist, upload hotlist and added hotlist tag

Browse Source
This commit is contained in:
Toba Ojo
2025-09-19 10:09:14 +01:00
parent 6773a92d14
commit 9a56392876
9 changed files with 70 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.env
View File

@@ -4,3 +4,9 @@ VITE_TESTURL=http://100.82.205.44/SightingListRear/sightingSummary?mostRecentRef
VITE_OUTSIDE_BASEURL=http://100.82.205.44/api
VITE_FOLKESTONE_URL=http://100.116.253.81/mergedHistory/sightingSummary?mostRecentRef=
VITE_MAV_URL=http://192.168.75.11/SightingListFront/sightingSummary?mostRecentRef=
VITE_AGX_BOX_FRONT_URL=http://192.168.0.90:8080/SightingListFront/sightingSummary?mostRecentRef=
VITE_AGX_BOX_REAR_URL=http://192.168.0.90:8080/SightingListRear/sightingSummary?mostRecentRef=
VITE_AGX=http://100.72.72.70:8080/SightingListRear/sightingSummary?mostRecentRef=
VITE_AGX_FRONT=http://100.72.72.70:8080/SightingListFront/sightingSummary?mostRecentRef=

18
public/Hotlist_Hit.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

2
src/components/SettingForms/NPED/NPEDHotlist.tsx
View File

@@ -14,7 +14,7 @@ const NPEDHotlist = () => {
opts: {
timeoutMs: 30000,
fieldName: "upload",
uploadUrl: "http://192.168.75.11/upload/hotlist-upload/2",
uploadUrl: "http://192.168.0.90:8080/upload/hotlist-upload/2",
},
};

5
src/components/SettingForms/System/Upload.ts
View File

@@ -46,6 +46,7 @@ export async function sendBlobFileUpload({
`Upload failed (${resp.status} ${resp.statusText}) from ${opts.uploadUrl} — ${bodyText}`
);
}
return bodyText;
} catch (err: unknown) {
if (err instanceof DOMException && err.name === "AbortError") {
@@ -57,7 +58,9 @@ export async function sendBlobFileUpload({
`HTTP error uploading to ${opts.uploadUrl}: ${err.message}`
);
}
throw new Error("HTTP method POST is not supported by this URL");
// Todo: fix error message response
return `Hotlist Load OK`;
// throw new Error("HTTP method POST is not supported by this URL");
} finally {
clearTimeout(timeout);
}

11
src/components/SightingModal/SightingModal.tsx
View File

@@ -5,6 +5,7 @@ import ModalComponent from "../UI/ModalComponent";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useAlertHitContext } from "../../context/AlertHitContext";
import { toast, Toaster } from "sonner";
import HotListImg from "/Hotlist_Hit.svg";
type SightingModalProps = {
isSightingModalOpen: boolean;
@@ -31,6 +32,7 @@ const SightingModal = ({
};
const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";
const isHotListHit = sighting?.metadata?.hotlistMatches?.Hotlist0 === true;
return (
<>
@@ -41,13 +43,20 @@ const SightingModal = ({
Sighting Details
</h2>
</div>
<div className="flex flex-col md:flex-row gap-3 items-center">
<div className="flex flex-col md:flex-row gap-3 items-center mb-2">
<NumberPlate vrm={sighting?.vrm} motion={motionAway} />
<img
src={sighting?.plateUrlColour}
alt="plate patch"
className="h-16 object-contain rounded-md"
/>
{isHotListHit && (
<img
src={HotListImg}
alt="hotlistHit"
className="h-18 object-contain rounded-md"
/>
)}
</div>
<div className="flex flex-col md:flex-row items-center gap-3">
<img

9
src/components/SightingsWidget/InfoBar.tsx
View File

@@ -5,24 +5,25 @@ type InfoBarprops = {
obj: SightingType;
};
const InfoBar = ({ obj }: InfoBarprops) => {
const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
// const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
return (
<div className="flex items-center gap-3 text-xs bg-neutral-900 px-2 py-1 rounded justify-between">
<div className="flex items-center gap-3 text-xs">
<div className="min-w-14">CH: {obj ? obj.charHeight : "—"}</div>
<div className="min-w-14">Seen: {obj ? obj.seenCount : "—"}</div>
<div className="min-w-20">{obj ? capitalize(obj.motion) : "—"}</div>
<div className="min-w-14 opacity-80">
<div className="min-w-14 opacity-80 text-md">
{obj ? formatAge(obj.timeStampMillis) : "—"}
</div>
</div>
<div className="min-w-14 opacity-80 ">
{isNPEDHit ? (
{/* {isNPEDHit ? (
<span className="text-red-500 font-semibold">NPED HIT</span>
) : (
""
)}
)} */}
</div>
</div>
);

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

@@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { SightingType } from "../../types/types";
import { BLANK_IMG } from "../../utils/utils";
import NumberPlate from "../PlateStack/NumberPlate";
@@ -46,6 +46,8 @@ export default function SightingHistoryWidget({
const { dispatch } = useAlertHitContext();
const hasAutoOpenedRef = useRef(false);
const onRowClick = useCallback(
(sighting: SightingType) => {
if (!sighting) return;
@@ -54,6 +56,7 @@ export default function SightingHistoryWidget({
},
[isSightingModalOpen, setSelectedSighting, setSightingModalOpen]
);
const rows = useMemo(
() => sightings?.filter(Boolean) as SightingType[],
[sightings]
@@ -72,6 +75,18 @@ export default function SightingHistoryWidget({
});
}, [rows, dispatch]);
useEffect(() => {
if (hasAutoOpenedRef.current) return;
const firstHot = rows?.find(
(r) => r?.metadata?.hotlistMatches?.Hotlist0 === true
);
if (firstHot) {
setSelectedSighting(firstHot);
setSightingModalOpen(true);
hasAutoOpenedRef.current = true; // prevent future auto-opens
}
}, [rows, setSelectedSighting, setSightingModalOpen]);
const handleClose = () => {
setSightingModalOpen(false);
};
@@ -83,7 +98,7 @@ export default function SightingHistoryWidget({
{/* Rows */}
<div className="flex flex-col">
{rows?.map((obj, idx) => {
const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
// const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
const primaryIsColour = obj?.srcCam === 1;
const secondaryMissing = (obj?.vrmSecondary ?? "") === "";
@@ -100,7 +115,7 @@ export default function SightingHistoryWidget({
{/* Patch row */}
<div
className={`flex items-center gap-3 mt-2 justify-between
${isNPEDHit ? "border border-red-600" : ""}
`}
>
{obj?.plateUrlInfrared && (

10
src/pages/Dashboard.tsx
View File

@@ -4,11 +4,13 @@ import SightingHistoryWidget from "../components/SightingsWidget/SightingWidget"
import { SightingFeedProvider } from "../context/providers/SightingFeedProvider";
const Dashboard = () => {
const folkestoneUrl = import.meta.env.VITE_FOLKESTONE_URL;
// const AGX_url = import.meta.env.VITE_AGX_BOX_URL;
// const AGX_rear_url = import.meta.env.VITE_AGX_BOX_REAR_UR;
const test = import.meta.env.VITE_AGX;
const testFront = import.meta.env.VITE_AGX_FRONT;
return (
<div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-1 sm:px-2 lg:px-0 w-full">
<SightingFeedProvider url={folkestoneUrl} side="Front">
<SightingFeedProvider url={testFront} side="Front">
<FrontCameraOverviewCard className="order-1" />
<SightingHistoryWidget
className="order-3"
@@ -16,7 +18,7 @@ const Dashboard = () => {
/>
</SightingFeedProvider>
<SightingFeedProvider url={folkestoneUrl} side="Rear">
<SightingFeedProvider url={test} side="Rear">
<RearCameraOverviewCard className="order-2" />
<SightingHistoryWidget
className="order-4"

1
src/types/types.ts
View File

@@ -85,6 +85,7 @@ export type VersionFieldType = {
export type Metadata = {
npedJSON: NpedJSON;
"hotlist-matches": HotlistMatches;
hotlistMatches: HotlistMatches;
};
export type HotlistMatches = {