From 7cfebab6c1311809c6002c5a4e143f82018a6551 Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Wed, 15 Oct 2025 15:15:04 +0100 Subject: [PATCH 1/2] - improved UI for sessions page --- .../FrontCameraOverviewCard.tsx | 6 +- .../OverviewVideoContainer.tsx | 6 +- src/components/HistoryList/AlertItem.tsx | 11 ++- src/components/HistoryList/HistoryList.tsx | 51 +++++-------- .../RearCameraOverviewCard.tsx | 13 +--- src/components/SessionForm/HitSearchCard.tsx | 32 ++++----- src/components/SessionForm/SessionCard.tsx | 72 +++++++++---------- src/components/UI/Card.tsx | 2 +- src/pages/Session.tsx | 6 +- 9 files changed, 87 insertions(+), 112 deletions(-) diff --git a/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx b/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx index 75503b1..0aa1787 100644 --- a/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx +++ b/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx @@ -14,11 +14,7 @@ const FrontCameraOverviewCard = () => { }); return ( - +
diff --git a/src/components/FrontCameraSettings/OverviewVideoContainer.tsx b/src/components/FrontCameraSettings/OverviewVideoContainer.tsx index 1a0b7a8..379f95b 100644 --- a/src/components/FrontCameraSettings/OverviewVideoContainer.tsx +++ b/src/components/FrontCameraSettings/OverviewVideoContainer.tsx @@ -30,11 +30,7 @@ const OverviewVideoContainer = ({ trackMouse: true, }); return ( - +
{ dispatch({ type: "REMOVE", payload: item }); }; return ( -
+
+
{isHotListHit && hotlistHit} {isNPEDHitA && NPEDHITicon} @@ -64,7 +69,9 @@ const AlertItem = ({ item }: AlertItemProps) => { - +
+ +
{ const { state, dispatch, isLoading, error } = useAlertHitContext(); const { mutation } = useCameraBlackboard(); - const handleDeleteClick = async (deletedItem: SightingType) => { - 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: deletedItem }); - }; - const handleClearListClick = (listName: CameraBlackBoardOptions) => { dispatch({ type: "DELETE", payload: [] }); mutation.mutate({ @@ -38,7 +18,7 @@ const HistoryList = () => { }; return ( - + -
- )) +
+ {state?.alertList?.map((alertItem) => ( + + ))} +
) : ( -

No Alert results

+
+
+ No Alert Results +
+

+ Alerts will appear here in real-time once there are Hotlist or{" "} + NPED hits. Use{" "} + Start Session to begin capturing results, or add a{" "} + Sighting from the sighting list. +

+
)}
diff --git a/src/components/RearCameraOverview/RearCameraOverviewCard.tsx b/src/components/RearCameraOverview/RearCameraOverviewCard.tsx index 55afe4e..883d096 100644 --- a/src/components/RearCameraOverview/RearCameraOverviewCard.tsx +++ b/src/components/RearCameraOverview/RearCameraOverviewCard.tsx @@ -18,18 +18,9 @@ const RearCameraOverviewCard = ({ className }: CardProps) => { }); const { mostRecent } = useSightingFeedContext(); return ( - +
- +
diff --git a/src/components/SessionForm/HitSearchCard.tsx b/src/components/SessionForm/HitSearchCard.tsx index 745a182..4282ac9 100644 --- a/src/components/SessionForm/HitSearchCard.tsx +++ b/src/components/SessionForm/HitSearchCard.tsx @@ -9,38 +9,36 @@ const SessionCard = () => { const { dispatch } = useAlertHitContext(); return ( - +
+ - -
+
setSearchTerm(e.target.value)} /> + +
- {searchTerm && (
    -
  • Number of Vehicles: {dedupedSightings.length}
    • -
  • Vehicles without Tax: {vehicles.notTaxed.length}
    • -
  • Vehicles without MOT: {vehicles.notMOT.length}
    • -
  • Vehicles with NPED Cat A: {vehicles.npedCatA.length}
    • -
  • Vehicles with NPED Cat B: {vehicles.npedCatB.length}
    • -
  • Vehicles with NPED Cat C: {vehicles.npedCatC.length}
    • +
  • +

    Number of Vehicles:

    + {dedupedSightings.length} +
    • +
  • +

    Vehicles without Tax:

    + {vehicles.notTaxed.length} +
    • +
  • +

    Vehicles without MOT:

    {" "} + {vehicles.notMOT.length} +
    • +
  • +

    Vehicles with NPED Cat A:

    + {vehicles.npedCatA.length} +
    • +
  • +

    Vehicles with NPED Cat B:

    {" "} + {vehicles.npedCatB.length} +
    • +
  • + Vehicles with NPED Cat C:{" "} + {vehicles.npedCatC.length} +
diff --git a/src/components/UI/Card.tsx b/src/components/UI/Card.tsx index 8a4663b..9cadd5d 100644 --- a/src/components/UI/Card.tsx +++ b/src/components/UI/Card.tsx @@ -10,7 +10,7 @@ const Card = ({ children, className }: CardProps) => { return (
diff --git a/src/pages/Session.tsx b/src/pages/Session.tsx index 058bf84..e6b2e83 100644 --- a/src/pages/Session.tsx +++ b/src/pages/Session.tsx @@ -11,8 +11,10 @@ const Session = () => { return (
- - +
+ + +
From c8f4ebf5a968fb89d28d1df8640a79eb025c0be7 Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Wed, 15 Oct 2025 16:11:10 +0100 Subject: [PATCH 2/2] - improvements made to session page alert list --- src/components/HistoryList/AlertItem.tsx | 21 +++++++++++-------- .../SightingModal/SightingModal.tsx | 6 +++++- src/components/UI/Badge.tsx | 18 ++++++++++++++++ 3 files changed, 35 insertions(+), 10 deletions(-) create mode 100644 src/components/UI/Badge.tsx diff --git a/src/components/HistoryList/AlertItem.tsx b/src/components/HistoryList/AlertItem.tsx index 2552a37..97df557 100644 --- a/src/components/HistoryList/AlertItem.tsx +++ b/src/components/HistoryList/AlertItem.tsx @@ -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 (
-
- - -
+ +
{isHotListHit && hotlistHit} {isNPEDHitA && NPEDHITicon} {isNPEDHitB && NPEDHITicon} diff --git a/src/components/SightingModal/SightingModal.tsx b/src/components/SightingModal/SightingModal.tsx index 2cb32e3..70a18a2 100644 --- a/src/components/SightingModal/SightingModal.tsx +++ b/src/components/SightingModal/SightingModal.tsx @@ -120,7 +120,11 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }: {hotlistName && (

Hotlist

-

{hotlistName ? hotlistName[0] : "-"}

+
+

+ {hotlistName ? hotlistName[0] : "-"} +

+
)}
diff --git a/src/components/UI/Badge.tsx b/src/components/UI/Badge.tsx new file mode 100644 index 0000000..96091bc --- /dev/null +++ b/src/components/UI/Badge.tsx @@ -0,0 +1,18 @@ +import type { Icon, IconDefinition } from "@fortawesome/fontawesome-svg-core"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +type BadgeProps = { + icon?: Icon | IconDefinition; + text: string; +}; + +const Badge = ({ icon, text }: BadgeProps) => { + return ( + + {icon && } + {text} + + ); +}; + +export default Badge;