Merged in develop (pull request #18)

Develop

.env

@@ -1,9 +0,0 @@
-VITE_BASEURL=http://192.168.75.11/
-VITE_CAM_BASE=http://100.118.196.113:8080
-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
-VITE_FOLKESTONE_URL=http://100.116.253.81/mergedHistory/sightingSummary?mostRecentRef=
-VITE_MAV_URL=http://192.168.75.11/SightingListFront/sightingSummary?mostRecentRef=
-
-VITE_AGX_BOX_URL=http://100.118.196.113:8080

src/components/CameraSettings/CameraSettingFields.tsx

@@ -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>

src/components/HistoryList/AlertItem.tsx

@@ -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"
             />
           )}

src/components/HistoryList/HistoryList.tsx

@@ -11,9 +11,22 @@ const HistoryList = () => {
   const { state, dispatch, isLoading, error } = useAlertHitContext();
   const { mutation } = useCameraBlackboard();
 
-  const handleDeleteClick = (alertItem: SightingType, idx?: number) => {
+  const handleDeleteClick = async (deletedItem: SightingType) => {
-    dispatch({ type: "REMOVE", payload: alertItem });
+    const res = await mutation.mutateAsync({
-    mutation.mutate({ operation: "POP", path: "alertHistory", value: idx });
+      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>

src/components/SightingModal/SightingModal.tsx

@@ -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

src/hooks/useCameraBlackboard.ts

@@ -4,8 +4,10 @@ import type { CameraBlackBoardOptions } from "../types/types";
 import { useEffect } from "react";
 import { toast } from "sonner";
 
+const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : "";
+
 const getAllBlackboardData = async () => {
-  const response = await fetch(`${CAM_BASE}/api/blackboard`, {
+  const response = await fetch(`${camBase}/api/blackboard`, {
     signal: AbortSignal.timeout(500),
   });
   if (!response.ok) {
@@ -15,7 +17,7 @@ const getAllBlackboardData = async () => {
 };
 
 const viewBlackboardData = async (options: CameraBlackBoardOptions) => {
-  const response = await fetch(`${CAM_BASE}/api/blackboard`, {
+  const response = await fetch(`/${camBase}api/blackboard`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(options),

src/hooks/useCameraConfig.ts

@@ -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",
+        property: "propURI",
-        value: data.friendlyName,
+        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) => {

src/utils/config.ts

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

src/utils/utils.ts

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