diff --git a/src/components/SettingForms/BearerType/BearerTypeFields.tsx b/src/components/SettingForms/BearerType/BearerTypeFields.tsx index b06dde3..d2207c6 100644 --- a/src/components/SettingForms/BearerType/BearerTypeFields.tsx +++ b/src/components/SettingForms/BearerType/BearerTypeFields.tsx @@ -29,11 +29,7 @@ const BearerTypeFields = () => { }; return ( - + {({ isSubmitting }) => (
@@ -60,11 +56,9 @@ const BearerTypeFields = () => {
diff --git a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx index 5fe42fe..ef554b4 100644 --- a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx +++ b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx @@ -4,10 +4,7 @@ import { useEffect, useState } from "react"; import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useCameraOutput } from "../../../hooks/useCameraOutput"; -import type { - InitialValuesForm, - InitialValuesFormErrors, -} from "../../../types/types"; +import type { InitialValuesForm, InitialValuesFormErrors } from "../../../types/types"; import { toast } from "sonner"; const ChannelFields = () => { @@ -17,10 +14,8 @@ const ChannelFields = () => { const backOfficeURL = backOfficeQuery?.data?.propBackofficeURL?.value; const username = backOfficeQuery?.data?.propUsername?.value; const password = backOfficeQuery?.data?.propPassword?.value; - const connectTimeoutSeconds = - backOfficeQuery?.data?.propConnectTimeoutSeconds?.value; - const readTimeoutSeconds = - backOfficeQuery?.data?.propReadTimeoutSeconds?.value; + const connectTimeoutSeconds = backOfficeQuery?.data?.propConnectTimeoutSeconds?.value; + const readTimeoutSeconds = backOfficeQuery?.data?.propReadTimeoutSeconds?.value; const initialValues: InitialValuesForm = { backOfficeURL: backOfficeURL ?? "", @@ -44,9 +39,7 @@ const ChannelFields = () => { return null; }; - const validateValues = ( - values: InitialValuesForm - ): InitialValuesFormErrors => { + const validateValues = (values: InitialValuesForm): InitialValuesFormErrors => { const errors: InitialValuesFormErrors = {}; const url = values.backOfficeURL?.trim(); @@ -78,12 +71,7 @@ const ChannelFields = () => { }; return ( - + {({ errors, touched, isSubmitting }) => (
@@ -98,9 +86,7 @@ const ChannelFields = () => { id="backoffice" placeholder="https://www.backoffice.com" className={`p-1.5 border ${ - errors.backOfficeURL && touched.backOfficeURL - ? "border-red-500" - : "border-gray-400 " + errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 " } rounded-lg w-full md:w-60`} /> @@ -112,9 +98,7 @@ const ChannelFields = () => { id="username" placeholder="Back office username" className={`p-1.5 border ${ - errors.username && touched.username - ? "border-red-500" - : "border-gray-400 " + errors.username && touched.username ? "border-red-500" : "border-gray-400 " } rounded-lg w-full md:w-60`} /> @@ -127,9 +111,7 @@ const ChannelFields = () => { id="password" placeholder="Back office password" className={`p-1.5 border ${ - errors.password && touched.password - ? "border-red-500" - : "border-gray-400 " + errors.password && touched.password ? "border-red-500" : "border-gray-400 " } rounded-lg w-full md:w-60`} /> { - + @@ -164,20 +142,16 @@ const ChannelFields = () => { id="readTimeoutSeconds" placeholder="https://example.com" className={`p-1.5 border ${ - errors.readTimeoutSeconds && touched.readTimeoutSeconds - ? "border-red-500" - : "border-gray-400 " + errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 " } rounded-lg w-full md:w-60`} />
diff --git a/src/components/SettingForms/NPED/NPEDHotlist.tsx b/src/components/SettingForms/NPED/NPEDHotlist.tsx index 003a398..b33421f 100644 --- a/src/components/SettingForms/NPED/NPEDHotlist.tsx +++ b/src/components/SettingForms/NPED/NPEDHotlist.tsx @@ -31,7 +31,7 @@ const NPEDHotlist = () => { type="file" name="file" id="file" - className="file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5" + className="mt-4 w-full flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5" onChange={(e) => { if (e.target.files) { if (e.target.files[0].type !== "text/csv") { diff --git a/src/components/SettingForms/Sound/SoundUpload.tsx b/src/components/SettingForms/Sound/SoundUpload.tsx index 4326746..17f28eb 100644 --- a/src/components/SettingForms/Sound/SoundUpload.tsx +++ b/src/components/SettingForms/Sound/SoundUpload.tsx @@ -21,25 +21,21 @@ const SoundUpload = () => { }; return ( - - {({ setFieldValue, errors, setFieldError }) => ( + + {({ setFieldValue, errors, setFieldError, values }) => (
+ - { - if ( - e.target?.files && - e.target?.files[0]?.type === "audio/mpeg" - ) { + if (e.target?.files && e.target?.files[0]?.type === "audio/mpeg") { setFieldValue("name", e.target.files[0].name); setFieldValue("soundFile", e.target.files[0]); } else { @@ -49,12 +45,24 @@ const SoundUpload = () => { }} /> - {errors.soundFile && ( -

Not an mp3 file

- )} + +
+ {!values.soundFile && ( +
+ No uploaded sound files +
+ )} +

+ Uploaded Sound files will appear in the drop downs once they are + uploaded. They can be used for any Sighting,{" "} + Hotlist or NPED hits. +

+
+ + {errors.soundFile &&

Not an mp3 file

} - +

Reboot

@@ -160,18 +135,14 @@ const SystemConfigFields = () => { className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full md:w-[50%]" onClick={handleSoftReboot} > - {softRebootMutation.isPending || isSubmitting - ? "Rebooting..." - : "Software Reboot"} + {softRebootMutation.isPending || isSubmitting ? "Rebooting..." : "Software Reboot"} )} diff --git a/src/components/SettingForms/System/SystemFileUpload.tsx b/src/components/SettingForms/System/SystemFileUpload.tsx index bf02710..32fd544 100644 --- a/src/components/SettingForms/System/SystemFileUpload.tsx +++ b/src/components/SettingForms/System/SystemFileUpload.tsx @@ -36,7 +36,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => { type="file" name="softwareUpdate" id="softwareUpdate" - className="file:px-10 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5 w-full max-w-xs" + className="mt-4 w-full flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5" onChange={(event) => { const file = event.currentTarget.files?.[0]; if (!file) { @@ -44,8 +44,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => { return; } - if (file?.size > 8 * 1024 * 1024) - toast.error("File is too large (max 8MB)."); + if (file?.size > 8 * 1024 * 1024) toast.error("File is too large (max 8MB)."); setFieldValue(name, file); }} /> @@ -53,7 +52,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => { )} diff --git a/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx b/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx index d4a7fb2..aa2aa71 100644 --- a/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx +++ b/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx @@ -37,18 +37,11 @@ const WiFiSettingsForm = () => { await wifiMutation.mutateAsync(wifiConfig); }; return ( - + {({ isSubmitting }) => (
- - -
)} diff --git a/src/components/UI/ModalComponent.tsx b/src/components/UI/ModalComponent.tsx index fd0e759..2910484 100644 --- a/src/components/UI/ModalComponent.tsx +++ b/src/components/UI/ModalComponent.tsx @@ -7,16 +7,12 @@ type ModalComponentProps = { close: () => void; }; -const ModalComponent = ({ - isModalOpen, - children, - close, -}: ModalComponentProps) => { +const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) => { return ( {children} diff --git a/src/components/UI/NavigationArrow.tsx b/src/components/UI/NavigationArrow.tsx index 3e2c701..e133a88 100644 --- a/src/components/UI/NavigationArrow.tsx +++ b/src/components/UI/NavigationArrow.tsx @@ -11,7 +11,6 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => { const navigate = useNavigate(); const navigationDest = (side: string | undefined) => { - console.log(side); if (settingsPage) { navigate("/"); return; diff --git a/src/types/types.ts b/src/types/types.ts index fb34bc7..2bfd7b7 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -289,7 +289,7 @@ export type FormValues = { export type SoundUploadValue = { name: string; - soundFile: string | undefined; + soundFile: File | null; }; export type SoundState = {