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

update camera base URL, enhance alert context, and improve history list functionality

Browse Source
This commit is contained in:
Toba Ojo
2025-09-24 12:28:14 +01:00
parent fe28247b1c
commit efd037754e
12 changed files with 224 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

@@ -1,5 +1,5 @@
VITE_BASEURL=http://192.168.75.11/ VITE_BASEURL=http://192.168.75.11/
VITE_CAM_BASE=http://100.113.222.39 VITE_CAM_BASE=http://100.72.72.70
VITE_FOLKESTONE_BASE=http://100.116.253.81 VITE_FOLKESTONE_BASE=http://100.116.253.81
VITE_TESTURL=http://100.82.205.44/SightingListRear/sightingSummary?mostRecentRef=-1 VITE_TESTURL=http://100.82.205.44/SightingListRear/sightingSummary?mostRecentRef=-1
VITE_OUTSIDE_BASEURL=http://100.82.205.44 VITE_OUTSIDE_BASEURL=http://100.82.205.44

74
.github/copilot-instructions.md vendored Normal file
View File

@@ -0,0 +1,74 @@
# Copilot Instructions for in-car-system-fe
## Project Overview
- **Type:** React + TypeScript SPA using Vite
- **Purpose:** In-car system frontend for camera management, sighting history, and system settings
- **Key Directories:**
- `src/components/`: UI components grouped by feature (Camera, Sighting, Settings, etc.)
- `src/context/`: React context for global state (e.g., AlertHit, NPEDUser, SightingFeed)
- `src/hooks/`: Custom React hooks for data fetching, config, and UI logic
- `src/pages/`: Top-level route views (Dashboard, Camera, Session, SystemSettings)
- `src/types/`: Shared TypeScript types
- `src/utils/`: Utility functions and config helpers
## Architecture & Patterns
- **Component Structure:**
- Feature-based folders (e.g., `CameraSettings`, `SightingOverview`)
- Components are mostly functional, using hooks and context for state
- **State Management:**
- Uses React Context for cross-component state (see `src/context/providers/`)
- Reducers in `src/context/reducers/` for complex state updates
- **Data Flow:**
- Data is fetched and managed via custom hooks (see `src/hooks/`)
- Context providers wrap the app in `main.tsx`
- **Styling:**
- CSS modules (e.g., `App.css`, `index.css`)
- No CSS-in-JS or styled-components
## Developer Workflows
- **Install:** `npm install`
- **Start Dev Server:** `npm run dev`
- **Build:** `npm run build`
- **Preview Build:** `npm run preview`
- **Lint:** `npm run lint` (uses ESLint, see `eslint.config.js`)
- **Type Check:** `tsc --noEmit`
- **Test:** _No test framework configured by default_
## Project Conventions
- **TypeScript:**
- All components and hooks are typed; shared types in `src/types/types.ts`
- **Component Naming:**
- Use PascalCase for components and folders
- Suffix with `Container`, `Card`, or `Modal` for UI roles
- **Assets:**
- Images in `public/` or `src/assets/`
- Sounds in `src/assets/sounds/`
- **No Redux, MobX, or external state libraries**
- **No backend API code in this repo**
## Integration Points
- **External:**
- No direct backend integration code; data is assumed to come from context/hooks
- Sound assets for UI feedback in `src/assets/sounds/ui/`
## Examples
- **Add a new camera setting:**
- Create a new component in `src/components/CameraSettings/`
- Add state via context or a custom hook if needed
- **Add a new page:**
- Add a file to `src/pages/` and update routing in the main app (see `main.tsx`)
## References
- See `README.md` for Vite/ESLint setup details
- See `src/context/` and `src/hooks/` for app-specific state/data patterns
---
_If any conventions or workflows are unclear, please ask for clarification or examples from the codebase._

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/MAV-Blue.svg" /> <link rel="icon" type="image/svg+xml" href="/MAV-Blue.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MAV | In Car System</title> <title>MAV Mobile</title>
</head> </head>
<body> <body>
<div id="root" class="min-h-screen flex flex-col"></div> <div id="root" class="min-h-screen flex flex-col"></div>

1
src/components/HistoryList/AlertItem.tsx
View File

@@ -16,6 +16,7 @@ type AlertItemProps = {
const AlertItem = ({ item }: AlertItemProps) => { const AlertItem = ({ item }: AlertItemProps) => {
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const { dispatch } = useAlertHitContext(); const { dispatch } = useAlertHitContext();
// const {d} = useCameraBlackboard();
const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY"; const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true; const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true;
const isNPEDHitA = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "A"; const isNPEDHitA = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";

29
src/components/HistoryList/HistoryList.tsx
View File

@@ -1,25 +1,46 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useAlertHitContext } from "../../context/AlertHitContext"; import { useAlertHitContext } from "../../context/AlertHitContext";
import type { SightingType } from "../../types/types"; import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
import type { CameraBlackBoardOptions, SightingType } from "../../types/types";
import Card from "../UI/Card"; import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader"; import CardHeader from "../UI/CardHeader";
import AlertItem from "./AlertItem"; import AlertItem from "./AlertItem";
import { faTrash } from "@fortawesome/free-solid-svg-icons"; import { faTrash } from "@fortawesome/free-solid-svg-icons";
const HistoryList = () => { const HistoryList = () => {
const { state, dispatch } = useAlertHitContext(); const { state, dispatch, isLoading, error } = useAlertHitContext();
const { mutation } = useCameraBlackboard();
const handleDeleteClick = (alertItem: SightingType) => const handleDeleteClick = (alertItem: SightingType, idx?: number) => {
dispatch({ type: "REMOVE", payload: alertItem }); dispatch({ type: "REMOVE", payload: alertItem });
mutation.mutate({ operation: "POP", path: "alertHistory", value: idx });
};
const handleClearListClick = (listName: CameraBlackBoardOptions) => {
dispatch({ type: "DELETE", payload: [] });
mutation.mutate({
operation: "DELETE",
path: listName.path,
});
};
return ( return (
<Card className="h-100"> <Card className="h-100">
<CardHeader title="Alert History" /> <CardHeader title="Alert History" />
<button
className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition md:w-[10%] mb-2"
onClick={() => handleClearListClick({ path: "alertHistory" })}
>
Clear List
</button>
{isLoading && <p>Loading...</p>}
{error && <p className="text-red-500">Error: {error.message}</p>}
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
{state?.alertList?.length > 0 ? ( {state?.alertList?.length > 0 ? (
state?.alertList?.map((alertItem, index) => ( state?.alertList?.map((alertItem, index) => (
<div key={index} className="flex flex-row space-x-2"> <div key={index} className="flex flex-row space-x-2">
<AlertItem item={alertItem} /> <AlertItem item={alertItem} />
<button onClick={() => handleDeleteClick(alertItem)}> <button onClick={() => handleDeleteClick(alertItem, index)}>
<div className="p-4"> <div className="p-4">
<FontAwesomeIcon icon={faTrash} size="2x" /> <FontAwesomeIcon icon={faTrash} size="2x" />
</div> </div>

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

@@ -5,6 +5,7 @@ import ModalComponent from "../UI/ModalComponent";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useAlertHitContext } from "../../context/AlertHitContext"; import { useAlertHitContext } from "../../context/AlertHitContext";
import { toast, Toaster } from "sonner"; import { toast, Toaster } from "sonner";
import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
import HotListImg from "/Hotlist_Hit.svg"; import HotListImg from "/Hotlist_Hit.svg";
import NPED_CAT_A from "/NPED_Cat_A.svg"; import NPED_CAT_A from "/NPED_Cat_A.svg";
import NPED_CAT_B from "/NPED_Cat_B.svg"; import NPED_CAT_B from "/NPED_Cat_B.svg";
@@ -24,16 +25,37 @@ const SightingModal = ({
onDelete, onDelete,
}: SightingModalProps) => { }: SightingModalProps) => {
const { dispatch } = useAlertHitContext(); const { dispatch } = useAlertHitContext();
const { query, mutation } = useCameraBlackboard();
const handleAcknowledgeButton = () => { const handleAcknowledgeButton = () => {
if (!sighting) { try {
toast.error("Cannot add sighting to alert list"); if (!sighting) {
toast.error("Cannot add sighting to alert list");
handleClose();
return;
}
if (!query.data.alertHistory) {
mutation.mutate({
operation: "INSERT",
path: "alertHistory",
value: [sighting],
});
} else {
mutation.mutate({
operation: "APPEND",
path: "alertHistory",
value: sighting,
});
}
dispatch({ type: "ADD", payload: sighting });
toast.success("Sighting successfully added to alert list");
handleClose();
} catch (error) {
console.log(error);
toast.error("Failed to add sighting to alert list");
handleClose(); handleClose();
return;
} }
dispatch({ type: "ADD", payload: sighting });
toast.success("Sighting successfully added to alert list");
handleClose();
}; };
const handleDeleteClick = () => { const handleDeleteClick = () => {

3
src/context/AlertHitContext.ts
View File

@@ -5,6 +5,9 @@ type AlertHitContextValueType = {
state: AlertState; state: AlertState;
action?: AlertPayload; action?: AlertPayload;
dispatch: React.Dispatch<AlertPayload>; dispatch: React.Dispatch<AlertPayload>;
isLoading?: boolean;
isError?: boolean;
error?: Error | null;
}; };
export const AlertHitContext = createContext< export const AlertHitContext = createContext<

27
src/context/providers/AlertHitProvider.tsx
View File

@@ -1,6 +1,8 @@
import { useReducer, type ReactNode } from "react"; import { useEffect, useReducer, type ReactNode } from "react";
import AlertHitContext from "../AlertHitContext"; import AlertHitContext from "../AlertHitContext";
import { reducer, initalState } from "../reducers/AlertReducers"; import { reducer, initalState } from "../reducers/AlertReducers";
import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
import type { SightingType } from "../../types/types";
type AlertHitProviderTypeProps = { type AlertHitProviderTypeProps = {
children: ReactNode; children: ReactNode;
@@ -8,9 +10,30 @@ type AlertHitProviderTypeProps = {
export const AlertHitProvider = ({ children }: AlertHitProviderTypeProps) => { export const AlertHitProvider = ({ children }: AlertHitProviderTypeProps) => {
const [state, dispatch] = useReducer(reducer, initalState); const [state, dispatch] = useReducer(reducer, initalState);
const { query } = useCameraBlackboard();
useEffect(() => {
if (query.data) {
query?.data?.alertHistory?.forEach((element: SightingType) => {
dispatch({ type: "ADD", payload: element });
});
} else if (query.error) {
console.error("Error fetching alert hits:", query.error);
} else {
console.log("Loading alert hits...");
}
}, [query.data, query.error, query.isLoading]);
return ( return (
<AlertHitContext.Provider value={{ state, dispatch }}> <AlertHitContext.Provider
value={{
state,
dispatch,
isLoading: query.isLoading,
isError: query.isError,
error: query.error,
}}
>
{children} {children}
</AlertHitContext.Provider> </AlertHitContext.Provider>
); );

7
src/context/reducers/AlertReducers.ts
View File

@@ -50,6 +50,13 @@ export function reducer(state: AlertState, action: AlertPayload) {
}; };
} }
case "DELETE": {
return {
...state,
alertList: action.payload,
};
}
default: default:
return { ...state }; return { ...state };
} }

42
src/hooks/useCameraBlackboard.ts Normal file
View File

@@ -0,0 +1,42 @@
import { useMutation, useQuery } from "@tanstack/react-query";
import { CAM_BASE } from "../utils/config";
import type { CameraBlackBoardOptions } from "../types/types";
const getBlackboardData = async () => {
const response = await fetch(`${CAM_BASE}/api/blackboard`);
if (!response.ok) {
throw new Error("Failed to fetch blackboard data");
}
return response.json();
};
const viewBlackboardData = async (options: CameraBlackBoardOptions) => {
const response = await fetch(`${CAM_BASE}/api/blackboard`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(options),
});
if (!response.ok) {
throw new Error("Failed to fetch blackboard data");
}
return response.json();
};
export const useCameraBlackboard = () => {
const query = useQuery({
queryKey: ["cameraBlackboard"],
queryFn: getBlackboardData,
});
const mutation = useMutation({
mutationKey: ["cameraBlackboard"],
mutationFn: (options?: CameraBlackBoardOptions) =>
viewBlackboardData({
operation: options?.operation,
path: options?.path,
value: options?.value,
}),
});
return { query, mutation };
};

6
src/pages/Dashboard.tsx
View File

@@ -6,13 +6,13 @@ import { CAM_BASE } from "../utils/config";
const Dashboard = () => { const Dashboard = () => {
const dev_REAR_URL = `${CAM_BASE}/SightingListRear/sightingSummary?mostRecentRef=`; 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); console.log(CAM_BASE);
return ( 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"> <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={folkURL} side="Front"> <SightingFeedProvider url={dev_FRONT_URL} side="Front">
<FrontCameraOverviewCard className="order-1" /> <FrontCameraOverviewCard className="order-1" />
<SightingHistoryWidget <SightingHistoryWidget
className="order-3" className="order-3"

14
src/types/types.ts
View File

@@ -164,6 +164,10 @@ export type AlertPayload =
| { | {
type: "REMOVE"; type: "REMOVE";
payload: SightingType; payload: SightingType;
}
| {
type: "DELETE";
payload: [];
}; };
export type ActionType = { export type ActionType = {
@@ -237,3 +241,13 @@ export type CameraConfig = {
datatype: "boolean"; datatype: "boolean";
}; };
}; };
export type CameraBlackBoardOptions = {
operation?: string;
path?: string;
value?: object | string | number | (string | number)[];
};
export type CameraBlackboardResponse = {
data: object;
};