From 4da240a204b2d92a23ab993942d2c8312c4eb788 Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Wed, 15 Oct 2025 11:00:52 +0100 Subject: [PATCH 1/5] - added prettier config file - improved sound state to remove pooling - increased size of naviagtion arrows and fixed navigation onClick - decreased width of nav bar - fixed button to reveal passwords in some password fields --- .prettierrc | 3 + TODO.txt | 19 ---- .../CameraSettings/CameraSettingFields.tsx | 31 ++---- .../CameraSettings/CameraSettings.tsx | 3 +- .../Channel1-JSON/ChannelFields.tsx | 37 ++++---- .../SettingForms/NPED/NPEDFields.tsx | 38 ++++---- .../SettingForms/WiFi&Modem/ModemSettings.tsx | 25 +++-- .../WiFi&Modem/WiFiSettingsForm.tsx | 28 +++--- .../SettingForms/components/FormGroup.tsx | 2 +- src/components/UI/Header.tsx | 4 +- src/components/UI/NavigationArrow.tsx | 17 ++-- src/context/SoundContext.ts | 1 + .../providers/SoundContextProvider.tsx | 47 ++++++++- src/hooks/useCameraBlackboard.ts | 3 +- src/hooks/useCameraConfig.ts | 8 +- src/hooks/useCameraOutput.ts | 15 +-- src/hooks/useCameraWifiandModem.ts | 50 ++++------ src/hooks/useSightingFeed.ts | 95 ++++++++----------- src/pages/Dashboard.tsx | 2 +- src/pages/FrontCamera.tsx | 7 +- 20 files changed, 211 insertions(+), 224 deletions(-) create mode 100644 .prettierrc delete mode 100644 TODO.txt diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..963354f --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "printWidth": 120 +} diff --git a/TODO.txt b/TODO.txt deleted file mode 100644 index 8f76759..0000000 --- a/TODO.txt +++ /dev/null @@ -1,19 +0,0 @@ -TODO: - -Hotlist upload (Question for Dion about API) and hits popping up in sighting stack. -NPED API working and catagories popping up in sighting stack. Images added to public folder. -Make the friendly name of each camera permeate throughout. -Make favicon MAV logo. -Swipe down to get to session page. -I have made an error I don't know how to fix in SightingFeedProvider.tsx -There is a bug in /front-camera-settings where the navigation arrow doesn't have a transparent background. I don't know why it is only that one and I can't find out why. Very strange. -The selected sighting in the sighting stack seems a tad buggy. Sometimes multiple get selected. -Can the selected sighting be shown in full detail. How this will look is still up for debate. Either as a pop up card as in AiQ Flexi, or in the OVerview card?? -How do you know if the time has sync? Make UTC red if not sync. -Can the relative aspect ratio in SightingOverview.tsx be the ratio of image pixel size of the image to best take advantage of the space? -obscure details on dashboard to a toggle - - -FYI: - -Session, WiFi and Modem stuff isn't implimented in the backend. Those are just placeholders for now. diff --git a/src/components/CameraSettings/CameraSettingFields.tsx b/src/components/CameraSettings/CameraSettingFields.tsx index 8c5836b..1cb3786 100644 --- a/src/components/CameraSettings/CameraSettingFields.tsx +++ b/src/components/CameraSettings/CameraSettingFields.tsx @@ -1,10 +1,5 @@ import { Formik, Field, Form } from "formik"; -import type { - CameraConfig, - CameraSettingErrorValues, - CameraSettingValues, - ZoomInOptions, -} from "../../types/types"; +import type { CameraConfig, CameraSettingErrorValues, CameraSettingValues, ZoomInOptions } from "../../types/types"; import { useEffect, useMemo, useState } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons"; @@ -28,8 +23,7 @@ const CameraSettingFields = ({ updateCameraConfigError, }: CameraSettingsProps) => { const [showPwd, setShowPwd] = useState(false); - const cameraControllerSide = - initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB"; + const cameraControllerSide = initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB"; const { mutation, query } = useCameraZoom({ camera: cameraControllerSide }); const zoomOptions = [1, 2, 4, 8]; @@ -109,9 +103,7 @@ const CameraSettingFields = ({
{touched.friendlyName && errors.friendlyName && ( - - {errors.friendlyName} - + {errors.friendlyName} )} {touched.cameraAddress && errors.cameraAddress && ( - - {errors.cameraAddress} - + {errors.cameraAddress} )} {touched.userName && errors.userName && ( - - {errors.userName} - + {errors.userName} )} {touched.password && errors.password && ( - - {errors.password} - + {errors.password} )}
{updateCameraConfigError ? ( - ) : ( diff --git a/src/components/CameraSettings/CameraSettings.tsx b/src/components/CameraSettings/CameraSettings.tsx index 7f371c9..c491f6c 100644 --- a/src/components/CameraSettings/CameraSettings.tsx +++ b/src/components/CameraSettings/CameraSettings.tsx @@ -15,8 +15,7 @@ const CameraSettings = ({ zoomLevel?: number; onZoomLevelChange?: (level: number) => void; }) => { - const { data, updateCameraConfig, updateCameraConfigError } = - useFetchCameraConfig(side); + const { data, updateCameraConfig, updateCameraConfigError } = useFetchCameraConfig(side); return ( diff --git a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx index 387eec0..5fe42fe 100644 --- a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx +++ b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx @@ -120,24 +120,27 @@ const ChannelFields = () => { - - setShowPwd((s) => !s)} - icon={showPwd ? faEyeSlash : faEye} - /> +
+ + setShowPwd((s) => !s)} + icon={showPwd ? faEyeSlash : faEye} + /> +
+ - {touched.password && errors.password && ( - - {errors.password} - - )} - - setShowPwd((s) => !s)} - icon={showPwd ? faEyeSlash : faEye} - /> +
+ + {touched.password && errors.password && ( + + {errors.password} + + )} + setShowPwd((s) => !s)} + icon={showPwd ? faEyeSlash : faEye} + /> +
diff --git a/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx b/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx index c031de8..15ed3cc 100644 --- a/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx +++ b/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx @@ -4,9 +4,12 @@ import type { ModemSettingsType } from "../../../types/types"; import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem"; import { useEffect, useState } from "react"; import ModemToggle from "./ModemToggle"; +import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; const ModemSettings = () => { const [showSettings, setShowSettings] = useState(false); + const [showPwd, setShowPwd] = useState(false); const { modemQuery, modemMutation } = useWifiAndModem(); const apn = modemQuery?.data?.propAPN?.value; @@ -102,13 +105,21 @@ const ModemSettings = () => { > Password - +
+ + setShowPwd((s) => !s)} + icon={showPwd ? faEyeSlash : faEye} + /> +
- - setShowPwd((s) => !s)} - icon={showPwd ? faEyeSlash : faEye} - /> +
+ + setShowPwd((s) => !s)} + icon={showPwd ? faEyeSlash : faEye} + /> +