From c83122cd52ecc1a5bbb96639b1c57a6e4911034d Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Fri, 24 Oct 2025 12:10:10 +0100 Subject: [PATCH] - added session sighting component - add new session paused state and stop adding to session when true --- src/components/SessionForm/SessionCard.tsx | 80 +++++++++++-------- .../SightingsWidget/SightingWidget.tsx | 3 +- src/components/UI/Header.tsx | 27 +++---- src/components/UI/VehicleSessionItem.tsx | 18 +++++ src/context/NPEDUserContext.ts | 9 +-- .../providers/NPEDUserContextProvider.tsx | 3 + 6 files changed, 84 insertions(+), 56 deletions(-) create mode 100644 src/components/UI/VehicleSessionItem.tsx diff --git a/src/components/SessionForm/SessionCard.tsx b/src/components/SessionForm/SessionCard.tsx index ffdc3aa..588bc07 100644 --- a/src/components/SessionForm/SessionCard.tsx +++ b/src/components/SessionForm/SessionCard.tsx @@ -5,19 +5,26 @@ import type { ReducedSightingType } from "../../types/types"; import { toast } from "sonner"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faFloppyDisk, faPause, faPlay, faStop } from "@fortawesome/free-solid-svg-icons"; +import VehicleSessionItem from "../UI/VehicleSessionItem"; const SessionCard = () => { - const { sessionStarted, setSessionStarted, sessionList } = useNPEDContext(); + const { sessionStarted, setSessionStarted, sessionList, setSessionPaused, sessionPaused } = useNPEDContext(); const handleStartClick = () => { setSessionStarted(!sessionStarted); - toast(`${sessionStarted ? "Vehicle tracking session Ended" : "Vehicle tracking session Started"}`); + setSessionPaused(false); + toast(`${sessionStarted ? "Vehicle tracking session ended" : "Vehicle tracking session started"}`); }; const handleSaveCick = () => { console.log("clicked"); }; + const handlepauseClick = () => { + setSessionPaused(!sessionPaused); + toast(`${sessionStarted ? "Vehicle tracking session paused" : "Vehicle tracking session resumed"}`); + }; + const sightings = [...new Map(sessionList.map((vehicle) => [vehicle.vrm, vehicle]))]; const dedupedSightings = sightings.map((sighting) => sighting[1]); @@ -75,45 +82,52 @@ const SessionCard = () => { {sessionStarted && ( )} diff --git a/src/components/SightingsWidget/SightingWidget.tsx b/src/components/SightingsWidget/SightingWidget.tsx index 4cf0de7..28c2182 100644 --- a/src/components/SightingsWidget/SightingWidget.tsx +++ b/src/components/SightingsWidget/SightingWidget.tsx @@ -71,7 +71,7 @@ export default function SightingHistoryWidget({ className, title }: SightingHist } = useSightingFeedContext(); const { dispatch } = useAlertHitContext(); - const { sessionStarted, setSessionList, sessionList } = useNPEDContext(); + const { sessionStarted, setSessionList, sessionList, sessionPaused } = useNPEDContext(); const processedRefs = useRef>(new Set()); @@ -88,6 +88,7 @@ export default function SightingHistoryWidget({ className, title }: SightingHist useEffect(() => { if (sessionStarted) { if (!mostRecent) return; + if (sessionPaused) return; const reducedMostRecent = reduceObject(mostRecent); setSessionList([...sessionList, reducedMostRecent]); } diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx index b48c938..6fdf67a 100644 --- a/src/components/UI/Header.tsx +++ b/src/components/UI/Header.tsx @@ -1,21 +1,14 @@ import { Link } from "react-router"; import Logo from "/MAV.svg"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faGear, - faHome, - faListCheck, - faMaximize, - faMinimize, - faRotate, -} from "@fortawesome/free-solid-svg-icons"; +import { faGear, faHome, faListCheck, faMaximize, faMinimize, faRotate } from "@fortawesome/free-solid-svg-icons"; import { useState } from "react"; import SoundBtn from "./SoundBtn"; import { useNPEDContext } from "../../context/NPEDUserContext"; export default function Header() { const [isFullscreen, setIsFullscreen] = useState(false); - const { sessionStarted } = useNPEDContext(); + const { sessionStarted, sessionPaused } = useNPEDContext(); const toggleFullscreen = () => { if (!document.fullscreenElement) { @@ -39,9 +32,13 @@ export default function Header() {
- {sessionStarted && ( -
Session Active
- )} +
+ {sessionStarted && sessionPaused ? ( +

Session Paused

+ ) : ( + sessionStarted &&

Session Active

+ )} +
@@ -59,11 +56,7 @@ export default function Header() {
- + diff --git a/src/components/UI/VehicleSessionItem.tsx b/src/components/UI/VehicleSessionItem.tsx new file mode 100644 index 0000000..a0e8ea2 --- /dev/null +++ b/src/components/UI/VehicleSessionItem.tsx @@ -0,0 +1,18 @@ +import clsx from "clsx"; + +type VehicleSessionItemProps = { + sessionNumber: number; + textColour: string; + vehicleTag: string; +}; + +const VehicleSessionItem = ({ sessionNumber, textColour, vehicleTag }: VehicleSessionItemProps) => { + return ( +
  • +

    {vehicleTag}

    + {sessionNumber} +
    • + ); +}; + +export default VehicleSessionItem; diff --git a/src/context/NPEDUserContext.ts b/src/context/NPEDUserContext.ts index 7b36b9e..f776379 100644 --- a/src/context/NPEDUserContext.ts +++ b/src/context/NPEDUserContext.ts @@ -5,17 +5,16 @@ type UserContextValue = { user: NPEDUser | null; setUser: React.Dispatch>; sessionStarted: boolean; + sessionPaused: boolean; + setSessionPaused: React.Dispatch>; setSessionStarted: React.Dispatch>; sessionList: ReducedSightingType[]; setSessionList: React.Dispatch>; }; -export const NPEDUserContext = createContext( - undefined -); +export const NPEDUserContext = createContext(undefined); export const useNPEDContext = () => { const ctx = useContext(NPEDUserContext); - if (!ctx) - throw new Error("useNPEDContext must be used within "); + if (!ctx) throw new Error("useNPEDContext must be used within "); return ctx; }; diff --git a/src/context/providers/NPEDUserContextProvider.tsx b/src/context/providers/NPEDUserContextProvider.tsx index e76247f..6241b8e 100644 --- a/src/context/providers/NPEDUserContextProvider.tsx +++ b/src/context/providers/NPEDUserContextProvider.tsx @@ -10,6 +10,7 @@ export const NPEDUserProvider = ({ children }: NPEDUserProviderType) => { const [user, setUser] = useState(null); const [sessionStarted, setSessionStarted] = useState(false); const [sessionList, setSessionList] = useState([]); + const [sessionPaused, setSessionPaused] = useState(false); return ( { sessionStarted, sessionList, setSessionList, + sessionPaused, + setSessionPaused, }} > {children}