Merge pull request 'develop' (#12) from develop into main

Reviewed-on: #12

src/components/PopupSettings/NPEDCategoryPopup.tsx

@@ -0,0 +1,67 @@
+import Card from "../UI/Card";
+import CardHeader from "../UI/CardHeader";
+import NPEDCatToggle from "../SettingForms/NPED/NPEDCatToggle";
+import FormGroup from "../SettingForms/components/FormGroup";
+import { Form, Formik } from "formik";
+import { useIntegrationsContext } from "../../context/IntegrationsContext";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import type { CategoryPopups } from "../../types/types";
+import { toast } from "sonner";
+
+const NPEDCategoryPopup = () => {
+  const { state, dispatch } = useIntegrationsContext();
+  const { mutation } = useCameraBlackboard();
+
+  const isCatAEnabled = state?.iscatEnabled?.catA;
+  const isCatBEnabled = state?.iscatEnabled?.catB;
+  const isCatCEnabled = state?.iscatEnabled?.catC;
+  const isCatDEnabled = state?.iscatEnabled?.catD;
+
+  const initialValues = {
+    catA: isCatAEnabled ?? true,
+    catB: isCatBEnabled ?? true,
+    catC: isCatCEnabled ?? true,
+    catD: isCatDEnabled ?? false,
+  };
+
+  const handleSubmit = async (values: CategoryPopups) => {
+    const result = await mutation.mutateAsync({
+      operation: "INSERT",
+      value: values,
+      path: "CategoryPopup",
+    });
+    if (result?.reason === "OK") toast.success("Pop up settings saved");
+    dispatch({ type: "NPEDCATENABLED", payload: values });
+  };
+
+  return (
+    <Card className="p-4">
+      <CardHeader title={"Alert Pop ups"} />
+      <p className="italic my-2">Allows alerts to pop up to user.</p>
+      <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+        <Form className="flex flex-col space-y-5 px-2">
+          <FormGroup>
+            <NPEDCatToggle name={"catA"} label="NPED Category A" />
+          </FormGroup>
+          <FormGroup>
+            <NPEDCatToggle name={"catB"} label="NPED Category B" />
+          </FormGroup>
+          <FormGroup>
+            <NPEDCatToggle name={"catC"} label="NPED Category C" />
+          </FormGroup>
+          <FormGroup>
+            <NPEDCatToggle name={"catD"} label="NPED Category D" />
+          </FormGroup>
+          <button
+            type="submit"
+            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+          >
+            Save
+          </button>
+        </Form>
+      </Formik>
+    </Card>
+  );
+};
+
+export default NPEDCategoryPopup;

src/components/SettingForms/Channel1-JSON/ChannelFields.tsx

@@ -234,7 +234,7 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
 
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
           >
             {isSubmitting ? "Saving..." : "Save Changes"}
           </button>

src/components/SettingForms/NPED/NPEDCard.tsx

@@ -6,7 +6,7 @@ import NPEDIcon from "/NPED.svg";
 const NPEDCard = () => {
   return (
     <Card className="p-4">
-      <CardHeader title={"NPED Config"} img={NPEDIcon} />
+      <CardHeader title={"NPED"} img={NPEDIcon} />
       <NPEDFields />
     </Card>
   );

src/components/SettingForms/NPED/NPEDCatToggle.tsx

@@ -0,0 +1,22 @@
+import { Field } from "formik";
+
+type NPEDToggleProps = {
+  name: string;
+  label: string;
+};
+
+const NPEDCatToggle = ({ name, label }: NPEDToggleProps) => {
+  return (
+    <label className="flex items-center gap-3 cursor-pointer select-none w-full justify-between">
+      <span className="text-lg">{label}</span>
+      <Field id={name} type="checkbox" name={name} className="sr-only peer" />
+      <div
+        className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-[''] 
+      after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition 
+      after:duration-300 peer-checked:after:translate-x-5"
+      />
+    </label>
+  );
+};
+
+export default NPEDCatToggle;

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -13,20 +13,18 @@ const NPEDFields = () => {
   const [showPwd, setShowPwd] = useState(false);
   const { signIn, signOut } = useNPEDAuth();
 
-  const initialValues = state.npedUser
-    ? {
-        username: state.npedUser?.propUsername?.value,
-        password: state.npedUser?.propPassword?.value,
-        clientId: state.npedUser?.propClientID?.value,
-        frontId: "NPED",
-        rearId: "NPED",
-      }
-    : {
-        username: "",
-        password: "",
-        clientId: "",
-        frontId: "NPED",
-        rearId: "NPED",
+  const username = state.npedUser?.propUsername?.value;
+  const password = state.npedUser?.propPassword?.value;
+  const clientId = state.npedUser?.propClientID?.value;
+  const frontId = "NPED";
+  const rearId = "NPED";
+
+  const initialValues = {
+    username: username ?? "",
+    password: password ?? "",
+    clientId: clientId ?? "",
+    frontId: frontId,
+    rearId: rearId,
   };
 
   const handleSubmit = async (values: NPEDFieldType) => {
@@ -100,17 +98,18 @@ const NPEDFields = () => {
               className="p-1.5 border border-gray-400 rounded-lg"
             />
           </FormGroup>
+
           {!state.npedUser?.propClientID?.value ? (
             <button
               type="submit"
-              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
             >
               {isSubmitting ? "Logging in..." : "Login"}
             </button>
           ) : (
             <button
               type="button"
-              className="w-1/4  border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
+              className="w-full md:w-1/4  border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
               onClick={handleLogoutClick}
             >
               Logout

src/components/SettingForms/NPED/NPEDHotlist.tsx

@@ -47,7 +47,7 @@ const NPEDHotlist = () => {
             />
             <button
               type="submit"
-              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
               // disabled={errors ? true : false}
             >
               Upload

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -139,7 +139,7 @@ const SoundSettingsFields = () => {
           </div>
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
           >
             Save Settings
           </button>

src/components/SettingForms/Sound/SoundUpload.tsx

@@ -96,7 +96,7 @@ const SoundUpload = () => {
           {errors.soundFile && <p className="text-red-500 text-sm mt-1">Not an mp3 file</p>}
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 mt-[5%]"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 mt-[5%]"
             disabled={errors.soundFile ? true : false}
           >
             Upload

src/components/SettingForms/System/SystemConfigFields.tsx

@@ -167,7 +167,7 @@ const SystemConfigFields = () => {
           </FormGroup>
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
             disabled={isSubmitting}
           >
             {saveSystemSettingsLoading ? "Saving..." : "Save System Settings"}

src/components/SettingForms/System/SystemFileUpload.tsx

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

src/components/SettingForms/WiFi&Modem/ModemSettings.tsx

@@ -178,7 +178,7 @@ const ModemSettings = () => {
             )}
             <button
               type="submit"
-              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
             >
               {isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
             </button>

src/components/SightingModal/SightingModal.tsx

@@ -21,6 +21,7 @@ type SightingModalProps = {
 
 const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }: SightingModalProps) => {
   const { dispatch } = useAlertHitContext();
+
   const { query, mutation } = useCameraBlackboard();
 
   const hotlistNames = getHotlistName(sighting?.metadata?.hotlistMatches);
@@ -160,27 +161,26 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                   <dd className="font-medium text-2xl">{sighting?.seenCount ?? "-"}</dd>
                 </div>
 
-                {sighting?.make ||
-                  (sighting?.make.trim() && (
+                {sighting?.make && sighting.make.trim() && sighting.make.toLowerCase() !== "disabled" && (
                   <div>
                     <dt className="text-gray-300">Make</dt>
-                      <dd className="font-medium text-2xl">{sighting?.make ?? "-"}</dd>
+                    <dd className="font-medium text-2xl">{sighting.make}</dd>
                   </div>
-                  ))}
-                {sighting?.model ||
-                  (!sighting?.model.trim() && (
+                )}
+
+                {sighting?.model && sighting.model.trim() && sighting.model.toLowerCase() !== "disabled" && (
                   <div>
                     <dt className="text-gray-300">Model</dt>
-                      <dd className="font-medium text-2xl">{sighting?.model ?? "-"}</dd>
+                    <dd className="font-medium text-2xl">{sighting.model}</dd>
                   </div>
-                  ))}
-                {sighting?.color ||
-                  (!sighting?.color.trim() && (
+                )}
+
+                {sighting?.color && sighting.color.trim() && sighting.color.toLowerCase() !== "disabled" && (
                   <div className="sm:col-span-2">
                     <dt className="text-gray-300">Colour</dt>
-                      <dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
+                    <dd className="font-medium text-2xl">{sighting.color}</dd>
                   </div>
-                  ))}
+                )}
 
                 <div>
                   <dt className="text-gray-300">Time</dt>

src/components/SightingsWidget/SightingWidget.tsx

@@ -68,6 +68,11 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
   const hasAutoOpenedRef = useRef(false);
   const npedRef = useRef(false);
 
+  const isCatAEnabled = integrationState?.iscatEnabled?.catA;
+  const isCatBEnabled = integrationState?.iscatEnabled?.catB;
+  const isCatCEnabled = integrationState?.iscatEnabled?.catC;
+  const isCatDEnabled = integrationState?.iscatEnabled?.catD;
+
   const enqueue = useCallback((sighting: SightingType, kind: HitKind) => {
     const id = sighting.vrm ?? sighting.ref;
     if (processedRefs.current.has(id)) return;
@@ -118,7 +123,11 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
       if (processedRefs.current.has(id)) continue;
       const isHotlistHit = checkIsHotListHit(sighting);
       const npedcategory = sighting?.metadata?.npedJSON?.["NPED CATEGORY"];
-      const isNPED = npedcategory === "A" || npedcategory === "B" || npedcategory === "C";
+      const isNPED =
+        (npedcategory === "A" && isCatAEnabled) ||
+        (npedcategory === "B" && isCatBEnabled) ||
+        (npedcategory === "C" && isCatCEnabled) ||
+        (npedcategory === "D" && isCatDEnabled);
 
       if (isNPED || isHotlistHit) {
         enqueue(sighting, isNPED ? "NPED" : "HOTLIST"); // enqueue ONLY
@@ -148,7 +157,8 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
       const isNPEDHitA = cat === "A";
       const isNPEDHitB = cat === "B";
       const isNPEDHitC = cat === "C";
-      return isNPEDHitA || isNPEDHitB || isNPEDHitC;
+      const isNPEDHitD = cat === "D";
+      return isNPEDHitA || isNPEDHitB || isNPEDHitC || isNPEDHitD;
     });
     const firstHot = rows?.find((r) => {
       const isHotListHit = checkIsHotListHit(r);

src/components/UI/Header.tsx

@@ -1,15 +1,26 @@
 import { Link } from "react-router";
 import Logo from "/MAV.svg";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGear, faHome, faListCheck, faMaximize, faMinimize, faRotate } from "@fortawesome/free-solid-svg-icons";
+import {
+  faBars,
+  faGear,
+  faHome,
+  faListCheck,
+  faMaximize,
+  faMinimize,
+  faRotate,
+} from "@fortawesome/free-solid-svg-icons";
 import { useState } from "react";
 import SoundBtn from "./SoundBtn";
 import { useIntegrationsContext } from "../../context/IntegrationsContext";
 
 export default function Header() {
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const { state } = useIntegrationsContext();
 
+  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
+
   const sessionStarted = state.sessionStarted;
 
   const sessionPaused = state.sessionPaused;
@@ -36,7 +47,7 @@ export default function Header() {
         </Link>
       </div>
       <div className="flex flex-col lg:flex-row items-center space-x-24 justify-items-center">
-        <div className="flex flex-row lg:flex-row space-x-2">
+        <div className="flex flex-row lg:flex-row space-x-2 mx-auto  p-2 md:p-0 items-center">
           {sessionStarted && sessionPaused ? (
             <p className="text-gray-400 font-bold">Session Paused</p>
           ) : (
@@ -44,7 +55,7 @@ export default function Header() {
           )}
         </div>
 
-        <div className="flex flex-row space-x-8">
+        <div className="flex flex-row space-x-6 md:space-x-8 items-center">
           <Link to={"/"}>
             <FontAwesomeIcon className="text-white" icon={faHome} size="2x" />
           </Link>
@@ -59,15 +70,35 @@ export default function Header() {
             <FontAwesomeIcon icon={faRotate} size="2x" />
           </div>
           <SoundBtn />
-          <Link to={"/session-settings"}>
+          <div className="md:hidden">
+            <FontAwesomeIcon icon={faBars} size="2x" onClick={toggleMenu} />
+          </div>
+
+          <Link className="hidden md:flex" to={"/session-settings"}>
             <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
           </Link>
 
-          <Link to={"/system-settings"}>
+          <Link className="hidden md:flex" to={"/system-settings"}>
             <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
           </Link>
         </div>
       </div>
+      {isMenuOpen && (
+        <div className="md:hidden">
+          <ul className="flex flex-row gap-5">
+            <li onClick={() => setIsMenuOpen(false)}>
+              <Link to={"/session-settings"}>
+                <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
+              </Link>
+            </li>
+            <li onClick={() => setIsMenuOpen(false)}>
+              <Link to={"/system-settings"}>
+                <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
+              </Link>
+            </li>
+          </ul>
+        </div>
+      )}
     </div>
   );
 }

src/context/providers/IntegrationsContextProvider.tsx

@@ -12,17 +12,39 @@ export const IntegrationsProvider = ({ children }: IntegrationsProviderType) =>
   const { mutation } = useCameraBlackboard();
 
   useEffect(() => {
+    let isMounted = true;
+
     const fetchData = async () => {
+      try {
         const result = await mutation.mutateAsync({
           operation: "VIEW",
           path: "sessionStats",
         });
-      if (!result.result || typeof result.result === "string") return;
 
-      dispatch({ type: "UPDATE", payload: result?.result });
+        if (!isMounted) return;
+
+        const catResult = await mutation.mutateAsync({
+          operation: "VIEW",
+          path: "CategoryPopup",
+        });
+
+        if (!isMounted) return;
+        if (!result?.result || typeof result.result === "string") return;
+
+        dispatch({ type: "UPDATE", payload: result.result });
+        dispatch({ type: "NPEDCATENABLED", payload: catResult.result });
+      } catch (error) {
+        console.error("Error in fetchData:", error);
+      }
     };
+
     fetchData();
+
+    return () => {
+      isMounted = false;
+    };
   }, []);
+
   return (
     <IntegrationsContext.Provider
       value={{

src/context/reducers/IntegrationsContextReducer.ts

@@ -6,6 +6,12 @@ export const initialState = {
   sessionPaused: false,
   savedSightings: [],
   npedUser: null,
+  iscatEnabled: {
+    catA: true,
+    catB: true,
+    catC: true,
+    catD: false,
+  },
 };
 
 export function reducer(state: NPEDSTATE, action: NPEDACTION) {
@@ -40,6 +46,11 @@ export function reducer(state: NPEDSTATE, action: NPEDACTION) {
         ...state,
         sessionList: action.payload,
       };
+    case "NPEDCATENABLED":
+      return {
+        ...state,
+        iscatEnabled: action.payload,
+      };
     default:
       return { ...state };
   }

src/hooks/useCameraZoom.ts

@@ -11,7 +11,6 @@ const getCameraMode = async (options: { camera: string }) => {
 };
 
 const updateCameraMode = async (options: { camera: string; mode: string }) => {
-  console.log(options);
   const dayNightPayload = {
     id: options.camera,
     fields: [

src/index.css

@@ -33,7 +33,7 @@ body {
 }
 
 .arrow-outline path {
-  stroke: black; /* outline color */
-  stroke-width: 20px; /* thickness of outline (tweak this) */
+  stroke: black;
+  stroke-width: 20px;
   stroke-linejoin: round;
 }

src/pages/SystemSettings.tsx

@@ -10,6 +10,7 @@ import { Toaster } from "sonner";
 import { useNPEDAuth } from "../hooks/useNPEDAuth";
 import SoundSettingsCard from "../components/SettingForms/Sound/SoundSettingsCard";
 import SoundUploadCard from "../components/SettingForms/Sound/SoundUploadCard";
+import NPEDCategoryPopup from "../components/PopupSettings/NPEDCategoryPopup";
 
 const SystemSettings = () => {
   useNPEDAuth();
@@ -21,7 +22,7 @@ const SystemSettings = () => {
           <Tab>System</Tab>
           <Tab>Output</Tab>
           <Tab>Integrations</Tab>
-          <Tab>WiFi and Modem</Tab>
+          <Tab>WiFi & Modem</Tab>
           <Tab>Sound</Tab>
         </TabList>
         <TabPanel>
@@ -38,6 +39,7 @@ const SystemSettings = () => {
           <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
             <NPEDCard />
             <NPEDHotlistCard />
+            <NPEDCategoryPopup />
           </div>
         </TabPanel>
         <TabPanel>

src/types/types.ts

@@ -423,6 +423,7 @@ export type NPEDSTATE = {
   sessionPaused: boolean;
   savedSightings: DedupedSightings;
   npedUser: NPEDUser;
+  iscatEnabled: CategoryPopups;
 };
 
 export type NPEDACTION = {
@@ -430,3 +431,10 @@ export type NPEDACTION = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   payload: any;
 };
+
+export type CategoryPopups = {
+  catA: boolean;
+  catB: boolean;
+  catC: boolean;
+  catD: boolean;
+};