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

added delete functionality and updated button styles

Browse Source
This commit is contained in:
Toba Ojo
2025-09-23 16:02:14 +01:00
parent c2074f86a2
commit fe28247b1c
15 changed files with 150 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CameraSettings/CameraSettingFields.tsx
View File

@@ -130,7 +130,7 @@ const CameraSettingFields = ({
<button
type="submit"
className="bg-blue-800 text-white rounded-lg p-2 mx-auto h-[100%] w-full"
className="bg-[#26B170] text-white rounded-lg p-2 mx-auto h-[100%] w-full"
>
Save settings
</button>

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

@@ -4,6 +4,10 @@ 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";
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";
type AlertItemProps = {
item: SightingType;
@@ -11,8 +15,12 @@ type AlertItemProps = {
const AlertItem = ({ item }: AlertItemProps) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const { dispatch } = useAlertHitContext();
const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true;
const isNPEDHitA = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
const isNPEDHitB = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
const isNPEDHitC = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
const handleClick = () => {
setIsModalOpen(true);
@@ -21,35 +29,63 @@ const AlertItem = ({ item }: AlertItemProps) => {
const closeModal = () => {
setIsModalOpen(false);
};
const handleDelete = () => {
dispatch({ type: "REMOVE", payload: item });
};
return (
<>
<InfoBar obj={item} />
<div
className=" flex flex-row p-4 border border-gray-400 rounded-lg items-center w-full mx-auto justify-between"
onClick={handleClick}
>
{isHotListHit && (
<img
src={HotListImg}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
)}
<div className="flex flex-col w-full">
<div className="border border-gray-400 rounded-lg items-center py-1">
<InfoBar obj={item} />
<div
className=" flex flex-row p-4 w-full mx-auto justify-between"
onClick={handleClick}
>
{isHotListHit && (
<img
src={HotListImg}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
)}
{isNPEDHitA && (
<img
src={NPED_CAT_A}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
)}
{isNPEDHitB && (
<img
src={NPED_CAT_B}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
)}
{isNPEDHitC && (
<img
src={NPED_CAT_C}
alt="hotlistHit"
className="h-20 object-contain rounded-md"
/>
)}
<div className="flex flex-col">
<small>MAKE: {item.make}</small>
<small>MODEL: {item.model}</small>
<small>COLOUR: {item.color}</small>
<div className="flex flex-col">
<small>MAKE: {item.make}</small>
<small>MODEL: {item.model}</small>
<small>COLOUR: {item.color}</small>
</div>
<NumberPlate vrm={item.vrm} motion={motionAway} />
</div>
<NumberPlate vrm={item.vrm} motion={motionAway} />
<SightingModal
isSightingModalOpen={isModalOpen}
handleClose={closeModal}
sighting={item}
onDelete={handleDelete}
/>
</div>
<SightingModal
isSightingModalOpen={isModalOpen}
handleClose={closeModal}
sighting={item}
/>
</>
</div>
);
};

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

@@ -1,18 +1,30 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useAlertHitContext } from "../../context/AlertHitContext";
import type { 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 } = useAlertHitContext();
const { state, dispatch } = useAlertHitContext();
const handleDeleteClick = (alertItem: SightingType) =>
dispatch({ type: "REMOVE", payload: alertItem });
return (
<Card className="h-100">
<CardHeader title="Alert History" />
<div className="flex flex-col gap-1">
{state?.alertList?.length > 0 ? (
state?.alertList?.map((alertItem, index) => (
<AlertItem key={index} item={alertItem} />
<div key={index} className="flex flex-row space-x-2">
<AlertItem item={alertItem} />
<button onClick={() => handleDeleteClick(alertItem)}>
<div className="p-4">
<FontAwesomeIcon icon={faTrash} size="2x" />
</div>
</button>
</div>
))
) : (
<p>No Alert results</p>

4
src/components/SessionForm/HitSearchCard.tsx
View File

@@ -32,7 +32,7 @@ const SessionCard = () => {
</div>
</FormGroup>
<button
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full mx-auto"
onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
disabled={searchTerm.trim().length < 2}
>
@@ -40,7 +40,7 @@ const SessionCard = () => {
</button>
{searchTerm && (
<button
className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-full max-w-md"
className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-full mx-auto"
onClick={() => {
setSearchTerm("");
dispatch({ type: "SEARCH", payload: "" });

2
src/components/SessionForm/SessionCard.tsx
View File

@@ -13,7 +13,7 @@ const SessionCard = () => {
<CardHeader title="Session" />
<div className="flex flex-col gap-4">
<button
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full"
onClick={() => {
play();
}}

4
src/components/SettingForms/SettingForms/SettingForms.tsx
View File

@@ -72,9 +72,9 @@ const SettingForms = () => {
)}
<button
type="submit"
className="w-1/4 text-white bg-blue-700 hover:bg-blue-800 font-small rounded-lg text-sm px-2 py-2.5"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
>
Save changes
Save Changes
</button>
</Form>
</Formik>

6
src/components/SettingForms/System/SystemConfigFields.tsx
View File

@@ -130,7 +130,7 @@ const SystemConfigFields = () => {
</FormGroup>
<button
type="submit"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
>
Save System Settings
</button>
@@ -144,14 +144,14 @@ const SystemConfigFields = () => {
<button
type="button"
className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full max-w-md"
className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full md:w-[50%]"
onClick={handleSoftReboot}
>
Software Reboot
</button>
<button
type="button"
className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full max-w-md"
className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full md:w-[50%]"
onClick={handleHardReboot}
>
Hardware Reboot

2
src/components/SettingForms/System/SystemFileUpload.tsx
View File

@@ -53,7 +53,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
</FormGroup>
<button
type="button"
className="w-full max-w-md text-white bg-[#26B170] hover:bg-green-700 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full md:w-[50%] text-white bg-[#26B170] hover:bg-green-700 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
disabled={!selectedFile}
onClick={handleFileUploadClick}
>

2
src/components/SettingForms/WiFi&Modem/ModemCard.tsx
View File

@@ -85,7 +85,7 @@ const ModemCard = () => {
</select>
</FormGroup>
<button
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
//onClick={() => handleModemSave(apn, username, password, authType)}
>
Save Modem Settings

2
src/components/SettingForms/WiFi&Modem/WiFiCard.tsx
View File

@@ -67,7 +67,7 @@ const WiFiCard = () => {
</select>
</FormGroup>
<button
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
//onClick={() => handleWiFiSave(ssid, password, encryption)}
>
Save WiFi Settings

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

@@ -1,4 +1,4 @@
import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
import { faCheck, faTrash, faX } from "@fortawesome/free-solid-svg-icons";
import type { SightingType } from "../../types/types";
import NumberPlate from "../PlateStack/NumberPlate";
import ModalComponent from "../UI/ModalComponent";
@@ -14,12 +14,14 @@ type SightingModalProps = {
isSightingModalOpen: boolean;
handleClose: () => void;
sighting: SightingType | null;
onDelete?: () => void;
};
const SightingModal = ({
isSightingModalOpen,
handleClose,
sighting,
onDelete,
}: SightingModalProps) => {
const { dispatch } = useAlertHitContext();
@@ -34,6 +36,13 @@ const SightingModal = ({
handleClose();
};
const handleDeleteClick = () => {
if (!onDelete) return;
onDelete();
handleClose();
toast.success("Sighting removed from alert list");
};
const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";
const isHotListHit = sighting?.metadata?.hotlistMatches?.Hotlist0 === true;
const isNPEDHitA = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
@@ -147,20 +156,40 @@ const SightingModal = ({
</div>
<div className="mt-3 flex flex-col-reverse gap-3 md:flex-row md:justify-center">
<button
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-green-600 text-white hover:bg-green-700 w-full md:w-full"
onClick={handleAcknowledgeButton}
>
<FontAwesomeIcon icon={faCheck} />
Accept
</button>
<button
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
onClick={handleClose}
>
<FontAwesomeIcon icon={faX} />
Deny
</button>
{onDelete ? (
<button
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-blue-600 text-white hover:bg-blue-700 w-full md:w-full"
onClick={handleClose}
>
<FontAwesomeIcon icon={faX} />
Close
</button>
) : (
<button
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-green-600 text-white hover:bg-green-700 w-full md:w-full"
onClick={handleAcknowledgeButton}
>
<FontAwesomeIcon icon={faCheck} />
Accept
</button>
)}
{onDelete ? (
<button
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
onClick={handleDeleteClick}
>
<FontAwesomeIcon icon={faTrash} />
Delete
</button>
) : (
<button
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
onClick={handleClose}
>
<FontAwesomeIcon icon={faX} />
Deny
</button>
)}
</div>
</div>
</ModalComponent>

6
src/components/UI/Header.tsx
View File

@@ -97,7 +97,7 @@ export default function Header() {
<img src={Logo} alt="Logo" width={150} height={150} />
</Link>
</div>
<div className="flex flex-col md:flex-row items-center space-x-24 justify-items-center">
<div className="flex flex-col lg:flex-row items-center space-x-24 justify-items-center">
<div className="flex flex-col leading-tight text-white tabular-nums text-xl text-right mx-auto md:mx-10 space-y-1 my-2">
<h2>Local: {localStr}</h2>
<h2>UTC: {utcStr}</h2>
@@ -113,7 +113,7 @@ export default function Header() {
<div onClick={refreshBrowser}>
<FontAwesomeIcon icon={faRotate} size="2x" />
</div>
<SoundBtn />
<Link to={"/session-settings"}>
<FontAwesomeIcon
className="text-white"
@@ -121,7 +121,7 @@ export default function Header() {
size="2x"
/>
</Link>
<SoundBtn />
<Link to={"/system-settings"}>
<FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
</Link>

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

@@ -41,6 +41,15 @@ export function reducer(state: AlertState, action: AlertPayload) {
}
}
case "REMOVE": {
return {
...state,
alertList: state.alertList.filter(
(alertItem) => alertItem.vrm !== action.payload.vrm
),
};
}
default:
return { ...state };
}

6
src/pages/Dashboard.tsx
View File

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

4
src/types/types.ts
View File

@@ -160,6 +160,10 @@ export type AlertPayload =
| {
payload: string;
type: "SEARCH";
}
| {
type: "REMOVE";
payload: SightingType;
};
export type ActionType = {