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

Merged in bugfix/minor-issues-4 (pull request #17)

Browse Source 
Bugfix/minor issues 4
This commit is contained in:
Toba Ojo
2025-10-13 12:07:13 +00:00
parent 9f3674e460 eca3e9783e
commit dcc1f64599
7 changed files with 64 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -104,7 +104,7 @@ const CameraSettingFields = ({
validateOnChange={false}
enableReinitialize
>
{({ errors, touched, isSubmitting }) => (
{({ errors, touched }) => (
<Form className="flex flex-col space-y-6 p-2">
<div className="flex flex-col space-y-2 relative">
<label htmlFor="friendlyName">Name</label>
@@ -119,6 +119,7 @@ const CameraSettingFields = ({
type="text"
className="p-2 border border-gray-400 rounded-lg"
placeholder="Enter camera name"
disabled
/>
</div>
@@ -135,7 +136,7 @@ const CameraSettingFields = ({
type="text"
className="p-2 border border-gray-400 rounded-lg"
placeholder="RTSP://..."
autoComplete="street-address"
disabled
/>
</div>
@@ -153,6 +154,7 @@ const CameraSettingFields = ({
className="p-2 border border-gray-400 rounded-lg"
placeholder="Enter user name"
autoComplete="username"
disabled
/>
</div>
@@ -170,7 +172,7 @@ const CameraSettingFields = ({
type={showPwd ? "text" : "password"}
className="p-2 border border-gray-400 rounded-lg w-full "
placeholder="Enter password"
autoComplete="new-password"
disabled
/>
<FontAwesomeIcon
type="button"
@@ -207,15 +209,20 @@ const CameraSettingFields = ({
</div>
<div className="mt-3">
{updateCameraConfigError ? (
<button className="bg-red-500 text-white rounded-lg p-2 mx-auto h-[100%] w-full">
<button
className="bg-red-500 text-white rounded-lg p-2 mx-auto h-[100%] w-full"
disabled
>
Retry
</button>
) : (
<button
type="submit"
className="bg-[#26B170] text-white rounded-lg p-2 mx-auto h-[100%] w-full"
className="bg-blue-700 text-white rounded-lg p-2 mx-auto h-[100%] w-full"
disabled
>
{isSubmitting ? "Saving" : "Save settings"}
{/* {isSubmitting ? "Saving" : "Save settings"} bg-[#26B170] */}
{"Disabled: Coming soon"}
</button>
)}
</div>

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

@@ -5,6 +5,7 @@ import InfoBar from "../SightingsWidget/InfoBar";
import { useState } from "react";
import HotListImg from "/Hotlist_Hit.svg";
import { useAlertHitContext } from "../../context/AlertHitContext";
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";
@@ -17,6 +18,7 @@ type AlertItemProps = {
const AlertItem = ({ item }: AlertItemProps) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const { dispatch } = useAlertHitContext();
const { mutation } = useCameraBlackboard();
// const {d} = useCameraBlackboard();
const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
@@ -34,12 +36,26 @@ const AlertItem = ({ item }: AlertItemProps) => {
setIsModalOpen(false);
};
const handleDelete = () => {
const handleDelete = async (deletedItem: SightingType | null) => {
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: item });
};
return (
<div className="flex flex-col w-full">
<div className="border border-gray-400 rounded-lg items-center py-1">
<div className="border border-gray-600 rounded-lg items-center py-1">
<InfoBar obj={item} />
<div
className=" flex flex-row p-4 w-full mx-auto justify-between"
@@ -55,21 +71,21 @@ const AlertItem = ({ item }: AlertItemProps) => {
{isNPEDHitA && (
<img
src={NPED_CAT_A}
alt="hotlistHit"
alt="NPEDHITicon"
className="h-20 object-contain rounded-md"
/>
)}
{isNPEDHitB && (
<img
src={NPED_CAT_B}
alt="hotlistHit"
alt="NPEDHITicon"
className="h-20 object-contain rounded-md"
/>
)}
{isNPEDHitC && (
<img
src={NPED_CAT_C}
alt="hotlistHit"
alt="NPEDHITicon"
className="h-20 object-contain rounded-md"
/>
)}

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

@@ -11,9 +11,22 @@ const HistoryList = () => {
const { state, dispatch, isLoading, error } = useAlertHitContext();
const { mutation } = useCameraBlackboard();
const handleDeleteClick = (alertItem: SightingType, idx?: number) => {
dispatch({ type: "REMOVE", payload: alertItem });
mutation.mutate({ operation: "POP", path: "alertHistory", value: idx });
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) => {
@@ -40,7 +53,7 @@ const HistoryList = () => {
state?.alertList?.map((alertItem, index) => (
<div key={index} className="flex flex-row space-x-2">
<AlertItem item={alertItem} />
<button onClick={() => handleDeleteClick(alertItem, index)}>
<button onClick={() => handleDeleteClick(alertItem)}>
<div className="p-4">
<FontAwesomeIcon icon={faTrash} size="2x" />
</div>

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

@@ -16,7 +16,7 @@ type SightingModalProps = {
isSightingModalOpen: boolean;
handleClose: () => void;
sighting: SightingType | null;
onDelete?: () => void;
onDelete?: (deletedItem: SightingType | null) => void;
};
const SightingModal = ({
@@ -47,6 +47,7 @@ const SightingModal = ({
path: "alertHistory",
value: sighting,
});
toast.success("Sighting Successfully added to alert list");
}
dispatch({ type: "ADD", payload: sighting });
@@ -58,9 +59,9 @@ const SightingModal = ({
}
};
const handleDeleteClick = () => {
const handleDeleteClick = (deletedItem: SightingType | null) => {
if (!onDelete) return;
onDelete();
onDelete(deletedItem);
handleClose();
toast.success("Sighting removed from alert list");
};
@@ -84,7 +85,7 @@ const SightingModal = ({
{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}
onClick={() => handleDeleteClick(sighting)}
>
<FontAwesomeIcon icon={faTrash} />
Delete
@@ -234,7 +235,7 @@ const SightingModal = ({
{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}
onClick={() => handleDeleteClick(sighting)}
>
<FontAwesomeIcon icon={faTrash} />
Delete

8
src/hooks/useCameraConfig.ts
View File

@@ -17,6 +17,7 @@ const fetchCameraSideConfig = async ({ queryKey }: { queryKey: string[] }) => {
const updateCamerasideConfig = async (data: {
id: string | number;
friendlyName: string;
cameraAddress: string;
}) => {
const updateUrl = `${base_url}/update-config?id=${data.id}`;
@@ -24,16 +25,17 @@ const updateCamerasideConfig = async (data: {
id: data.friendlyName,
fields: [
{
property: "id",
value: data.friendlyName,
property: "propURI",
value: data.cameraAddress,
},
],
};
console.log(updateConfigPayload);
const response = await fetch(updateUrl, {
method: "POST",
body: JSON.stringify(updateConfigPayload),
});
if (!response.ok) throw new Error("Cannot reach update camera endpoint");
if (!response.ok) throw new Error("Feature unavailable: Coming soon");
};
export const useFetchCameraConfig = (cameraSide: string) => {

5
src/utils/config.ts
View File

@@ -1,7 +1,4 @@
const rawCamBase = import.meta.env.VITE_AGX_BOX_URL;
export const CAM_BASE =
rawCamBase && rawCamBase.trim().length > 0
? rawCamBase
: window.location.origin;
export const CAM_BASE = rawCamBase ? rawCamBase : window.location.origin;
export const OUTSIDE_CAM_BASE = import.meta.env.VITE_OUTSIDE_BASEURL;

1
src/utils/utils.ts
View File

@@ -136,6 +136,7 @@ export const checkIsHotListHit = (sigthing: SightingType | null) => {
const isHotListHit = Object.values(
sigthing?.metadata?.hotlistMatches
).includes(true);
return isHotListHit;
}
};