diff --git a/.env b/.env index 28c2d7a..3649f70 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ 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_TESTURL=http://100.82.205.44/SightingListRear/sightingSummary?mostRecentRef=-1 VITE_OUTSIDE_BASEURL=http://100.82.205.44 diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 0000000..1a2bd5b --- /dev/null +++ b/.github/copilot-instructions.md @@ -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._ diff --git a/index.html b/index.html index dcab83b..ce6c072 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - MAV | In Car System + MAV Mobile
diff --git a/src/components/HistoryList/AlertItem.tsx b/src/components/HistoryList/AlertItem.tsx index f744d4a..c8f27d8 100644 --- a/src/components/HistoryList/AlertItem.tsx +++ b/src/components/HistoryList/AlertItem.tsx @@ -16,6 +16,7 @@ type AlertItemProps = { const AlertItem = ({ item }: AlertItemProps) => { const [isModalOpen, setIsModalOpen] = useState(false); const { dispatch } = useAlertHitContext(); + // const {d} = useCameraBlackboard(); const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY"; const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true; const isNPEDHitA = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "A"; diff --git a/src/components/HistoryList/HistoryList.tsx b/src/components/HistoryList/HistoryList.tsx index d5fc61d..5ca0bd4 100644 --- a/src/components/HistoryList/HistoryList.tsx +++ b/src/components/HistoryList/HistoryList.tsx @@ -1,25 +1,46 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 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 CardHeader from "../UI/CardHeader"; import AlertItem from "./AlertItem"; import { faTrash } from "@fortawesome/free-solid-svg-icons"; 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 }); + mutation.mutate({ operation: "POP", path: "alertHistory", value: idx }); + }; + + const handleClearListClick = (listName: CameraBlackBoardOptions) => { + dispatch({ type: "DELETE", payload: [] }); + mutation.mutate({ + operation: "DELETE", + path: listName.path, + }); + }; + return ( + + {isLoading &&

Loading...

} + {error &&

Error: {error.message}

}
{state?.alertList?.length > 0 ? ( state?.alertList?.map((alertItem, index) => (
-