Merged in develop (pull request #12)

Develop

src/components/CameraSettings/CameraSettings.tsx

@@ -17,7 +17,7 @@ const CameraSettings = ({
 }) => {
   const { data, updateCameraConfig, updateCameraConfigError } =
     useFetchCameraConfig(side);
-  console.log(updateCameraConfigError);
+
   return (
     <Card className="overflow-hidden min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4">
       <div className="relative flex flex-col space-y-3">

src/components/HistoryList/AlertItem.tsx

@@ -15,7 +15,7 @@ type AlertItemProps = {
 
 const AlertItem = ({ item }: AlertItemProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const { dispatch, isError } = useAlertHitContext();
+  const { dispatch } = useAlertHitContext();
 
   // const {d} = useCameraBlackboard();
   const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
@@ -24,7 +24,6 @@ const AlertItem = ({ item }: AlertItemProps) => {
   const isNPEDHitB = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
   const isNPEDHitC = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
 
-  console.log(isError);
   const handleClick = () => {
     setIsModalOpen(true);
   };

src/components/SightingModal/SightingModal.tsx

@@ -49,10 +49,9 @@ const SightingModal = ({
       }
 
       dispatch({ type: "ADD", payload: sighting });
-      toast.success("Sighting successfully added to alert list");
       handleClose();
     } catch (error) {
-      console.log(error);
+      console.error(error);
       toast.error("Failed to add sighting to alert list");
       handleClose();
     }
@@ -80,6 +79,42 @@ const SightingModal = ({
               Sighting Details
             </h2>
           </div>
+          <div className="mt-3 flex-col-reverse gap-3 md:flex-row md:justify-center flex md:hidden">
+            {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>
+            )}
+            {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>
+            )}
+          </div>
           <div className="flex flex-col md:flex-row gap-3 items-center mb-2 justify-between">
             <div className="flex flex-col md:flex-row gap-3 items-center">
               <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
@@ -119,13 +154,13 @@ const SightingModal = ({
               />
             )}
           </div>
-          <div className="flex flex-col md:flex-row items-center gap-3">
+          <div className="flex flex-col lg:flex-row items-center gap-3">
             <img
               src={sighting?.overviewUrl}
               alt="overview patch"
               className="w-full h-56 sm:h-72 md:h-96 rounded-lg object-cover border border-gray-700"
             />
-            <aside className="w-full md:w-80 lg:w-[40%] bg-gray-800/70 text-white rounded-xl py-4 px-2 border h-[70%] border-gray-700">
+            <aside className="w-full lg:w-80  bg-gray-800/70 text-white rounded-xl py-4 px-2 border h-[70%] border-gray-700">
               <h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">
                 Vehicle Info
               </h3>
@@ -177,7 +212,7 @@ const SightingModal = ({
             </aside>
           </div>
 
-          <div className="mt-3 flex flex-col-reverse gap-3 md:flex-row md:justify-center">
+          <div className="mt-3 flex-col-reverse gap-3 md:flex-row md:justify-center hidden md:flex">
             {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"

src/hooks/useCameraBlackboard.ts

@@ -41,10 +41,11 @@ export const useCameraBlackboard = () => {
         value: options?.value,
       }),
     onError: (error) => {
-      toast.error(`cannot get data: ${error.message}`, {
+      toast.error(`${error.message}`, {
         id: "viewBlackboardData",
       });
     },
+    onSuccess: () => toast.success("Sighting successfully added to alert list"),
   });
 
   useEffect(() => {

src/hooks/useGetConfigs.ts

@@ -9,12 +9,12 @@ export const useGetConfigs = () => {
         const response = await fetch(`${apiUrl}/api/config-ids`);
 
         if (!response.ok) {
-          console.log("failed fetching");
+          throw new Error("Cannot get configs");
         }
         const data = await response.json();
         setConfigs(data);
       } catch (error) {
-        console.log(error);
+        console.error(error);
       }
     }
     getConfigs();

src/pages/Dashboard.tsx

@@ -1,14 +1,11 @@
 import FrontCameraOverviewCard from "../components/FrontCameraOverview/FrontCameraOverviewCard";
 import SightingHistoryWidget from "../components/SightingsWidget/SightingWidget";
 import { SightingFeedProvider } from "../context/providers/SightingFeedProvider";
-import { CAM_BASE, OUTSIDE_CAM_BASE } from "../utils/config";
+import { CAM_BASE } from "../utils/config";
 
 const Dashboard = () => {
-  const mode = import.meta.env.MODE;
   const base_url = `${CAM_BASE}/SightingList/sightingSummary?mostRecentRef=`;
-  // const outside_url = `http://100.82.205.44/mergedHistory/sightingSummary?mostRecentRef=`;
+
-  console.log(mode);
-  console.log(OUTSIDE_CAM_BASE);
   return (
     <SightingFeedProvider url={base_url}>
       <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">