TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- updated button to match

Browse Source
This commit is contained in:
Toba Ojo
2025-10-20 10:50:16 +01:00
parent b2dd35b311
commit a54e6a79c1
11 changed files with 74 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/SettingForms/BearerType/BearerTypeFields.tsx
View File

@@ -29,11 +29,7 @@ const BearerTypeFields = () => {
};
return (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
enableReinitialize
>
<Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
{({ isSubmitting }) => (
<Form>
<div className="flex flex-col space-y-4 px-2">
@@ -60,11 +56,9 @@ const BearerTypeFields = () => {
</FormGroup>
<button
type="submit"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
>
{isSubmitting || dispatcherMutation.isPending
? "Saving..."
: "Save Changes"}
{isSubmitting || dispatcherMutation.isPending ? "Saving..." : "Save Changes"}
</button>
</div>
</Form>

52
src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
View File

@@ -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 (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
enableReinitialize
validate={validateValues}
>
<Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize validate={validateValues}>
{({ errors, touched, isSubmitting }) => (
<Form>
<div className="flex flex-col space-y-2 px-2">
@@ -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`}
/>
</FormGroup>
@@ -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`}
/>
</FormGroup>
@@ -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`}
/>
<FontAwesomeIcon
@@ -142,17 +124,13 @@ const ChannelFields = () => {
</FormGroup>
<FormGroup>
<label htmlFor="connectTimeoutSeconds">
Connect Timeout Seconds
</label>
<label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
<Field
name={"connectTimeoutSeconds"}
type="number"
id="connectTimeoutSeconds"
className={`p-1.5 border ${
errors.connectTimeoutSeconds && touched.connectTimeoutSeconds
? "border-red-500"
: "border-gray-400 "
errors.connectTimeoutSeconds && touched.connectTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</FormGroup>
@@ -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`}
/>
</FormGroup>
</div>
<button
type="submit"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
>
{isSubmitting || backOfficeMutation.isPending
? "Saving..."
: "Save Changes"}
{isSubmitting || backOfficeMutation.isPending ? "Saving..." : "Save Changes"}
</button>
<ValidationToastOnce />
</Form>

2
src/components/SettingForms/NPED/NPEDHotlist.tsx
View File

@@ -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") {

38
src/components/SettingForms/Sound/SoundUpload.tsx
View File

@@ -21,25 +21,21 @@ const SoundUpload = () => {
};
return (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
enableReinitialize
>
{({ setFieldValue, errors, setFieldError }) => (
<Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
{({ setFieldValue, errors, setFieldError, values }) => (
<Form>
<label htmlFor="soundFile" className="">
Sound File
</label>
<FormGroup>
<label htmlFor="soundFile">Sound File</label>
<input
type="file"
name="soundFile"
id="sightingSoundinput"
accept="audio/mpeg"
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 &&
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 = () => {
}}
/>
</FormGroup>
{errors.soundFile && (
<p className="text-red-500 text-sm mt-1">Not an mp3 file</p>
)}
<div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
{!values.soundFile && (
<div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
No uploaded sound files
</div>
)}
<p className="max-w-md text-slate-300">
Uploaded Sound files will appear in the <span className="font-bold">drop downs</span> once they are
uploaded. They can be used for any <span className="text-blue-400">Sighting,</span>{" "}
<span className="text-emerald-400">Hotlist</span> or <span className="text-amber-600">NPED</span> hits.
</p>
</div>
{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"
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%]"
disabled={errors.soundFile ? true : false}
>
Upload

57
src/components/SettingForms/System/SystemConfigFields.tsx
View File

@@ -7,8 +7,7 @@ import type { SystemValues, SystemValuesErrors } from "../../../types/types";
import { useSystemConfig } from "../../../hooks/useSystemConfig";
const SystemConfigFields = () => {
const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } =
useSystemConfig();
const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } = useSystemConfig();
const { softRebootMutation, hardRebootMutation } = useReboots();
const initialvalues: SystemValues = {
@@ -26,8 +25,7 @@ const SystemConfigFields = () => {
const interval = Number(values.sntpInterval);
if (!values.deviceName) errors.deviceName = "Required";
if (!values.timeZone) errors.timeZone = "Required";
if (isNaN(interval) || interval <= 0)
errors.sntpInterval = "Cannot be less than 0";
if (isNaN(interval) || interval <= 0) errors.sntpInterval = "Cannot be less than 0";
if (!values.sntpServer) errors.sntpServer = "Required";
return errors;
};
@@ -52,16 +50,11 @@ const SystemConfigFields = () => {
{({ values, errors, touched, isSubmitting }) => (
<Form className="flex flex-col space-y-5 px-2">
<FormGroup>
<label
htmlFor="deviceName"
className="font-medium whitespace-nowrap md:w-1/2 text-left"
>
<label htmlFor="deviceName" className="font-medium whitespace-nowrap md:w-1/2 text-left">
Device Name
</label>
{touched.deviceName && errors.deviceName && (
<small className="absolute right-0 -top-5 text-red-500">
{errors.deviceName}
</small>
<small className="absolute right-0 -top-5 text-red-500">{errors.deviceName}</small>
)}
<Field
id="deviceName"
@@ -73,16 +66,11 @@ const SystemConfigFields = () => {
/>
</FormGroup>
<FormGroup>
<label
htmlFor="timeZone"
className="font-medium whitespace-nowrap md:w-1/2 text-left"
>
<label htmlFor="timeZone" className="font-medium whitespace-nowrap md:w-1/2 text-left">
Local Time Zone
</label>
{touched.timeZone && errors.timeZone && (
<small className="absolute right-0 -top-5 text-red-500">
{errors.timeZone}
</small>
<small className="absolute right-0 -top-5 text-red-500">{errors.timeZone}</small>
)}
<Field
id="timeZone"
@@ -99,16 +87,11 @@ const SystemConfigFields = () => {
</Field>
</FormGroup>
<FormGroup>
<label
htmlFor="sntpServer"
className="font-medium whitespace-nowrap md:w-1/2 text-left"
>
<label htmlFor="sntpServer" className="font-medium whitespace-nowrap md:w-1/2 text-left">
SNTP Server
</label>
{touched.sntpServer && errors.sntpServer && (
<small className="absolute right-0 -top-5 text-red-500">
{errors.sntpServer}
</small>
<small className="absolute right-0 -top-5 text-red-500">{errors.sntpServer}</small>
)}
<Field
id="sntpServer"
@@ -120,16 +103,11 @@ const SystemConfigFields = () => {
/>
</FormGroup>
<FormGroup>
<label
htmlFor="sntpInterval"
className="font-medium whitespace-nowrap md:w-1/2 text-left"
>
<label htmlFor="sntpInterval" className="font-medium whitespace-nowrap md:w-1/2 text-left">
SNTP Interval minutes
</label>
{touched.sntpInterval && errors.sntpInterval && (
<small className="absolute right-0 -top-5 text-red-500">
{errors.sntpInterval}
</small>
<small className="absolute right-0 -top-5 text-red-500">{errors.sntpInterval}</small>
)}
<Field
id="sntpInterval"
@@ -142,15 +120,12 @@ const SystemConfigFields = () => {
</FormGroup>
<button
type="submit"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
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={isSubmitting}
>
{saveSystemSettingsLoading ? "Saving..." : "Save System Settings"}
</button>
<SystemFileUpload
name={"softwareUpdate"}
selectedFile={values.softwareUpdate}
/>
<SystemFileUpload name={"softwareUpdate"} selectedFile={values.softwareUpdate} />
<div className="border-b border-gray-600">
<p>Reboot</p>
</div>
@@ -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"}
</button>
<button
type="button"
className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full md:w-[50%]"
onClick={handleHardReboot}
>
{hardRebootMutation.isPending || isSubmitting
? "Rebooting"
: "Hardware Reboot"}
{hardRebootMutation.isPending || isSubmitting ? "Rebooting" : "Hardware Reboot"}
</button>
</Form>
)}

7
src/components/SettingForms/System/SystemFileUpload.tsx
View File

@@ -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) => {
</FormGroup>
<button
type="button"
className="w-full md:w-[50%] text-white bg-[#26B170] hover:bg-green-700 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
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"
disabled={!selectedFile}
onClick={handleFileUploadClick}
>

37
src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
View File

@@ -56,23 +56,13 @@ const ModemSettings = () => {
return (
<>
<ModemToggle
showSettings={showSettings}
onShowSettings={setShowSettings}
/>
<ModemToggle showSettings={showSettings} onShowSettings={setShowSettings} />
{!showSettings && (
<Formik
initialValues={inititalValues}
onSubmit={handleSubmit}
enableReinitialize
>
<Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
{({ isSubmitting }) => (
<Form className="flex flex-col space-y-5 px-2">
<FormGroup>
<label
htmlFor="apn"
className="font-medium whitespace-nowrap md:w-2/3"
>
<label htmlFor="apn" className="font-medium whitespace-nowrap md:w-2/3">
APN
</label>
<Field
@@ -84,10 +74,7 @@ const ModemSettings = () => {
/>
</FormGroup>
<FormGroup>
<label
htmlFor="username"
className="font-medium whitespace-nowrap md:w-2/3"
>
<label htmlFor="username" className="font-medium whitespace-nowrap md:w-2/3">
Username
</label>
<Field
@@ -99,10 +86,7 @@ const ModemSettings = () => {
/>
</FormGroup>
<FormGroup>
<label
htmlFor="password"
className="font-medium whitespace-nowrap md:w-2/3"
>
<label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
Password
</label>
<div className="flex gap-2 items-center relative mb-4">
@@ -122,10 +106,7 @@ const ModemSettings = () => {
</div>
</FormGroup>
<FormGroup>
<label
htmlFor="password"
className="font-medium whitespace-nowrap md:w-2/3"
>
<label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
Password
</label>
<Field
@@ -140,11 +121,9 @@ const ModemSettings = () => {
</FormGroup>
<button
type="submit"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
className="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"}
{isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
</button>
</Form>
)}

27
src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx
View File

@@ -37,18 +37,11 @@ const WiFiSettingsForm = () => {
await wifiMutation.mutateAsync(wifiConfig);
};
return (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
enableReinitialize
>
<Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
{({ isSubmitting }) => (
<Form className="flex flex-col space-y-5 px-2">
<FormGroup>
<label
htmlFor="ssid"
className="font-medium whitespace-nowrap md:w-2/3"
>
<label htmlFor="ssid" className="font-medium whitespace-nowrap md:w-2/3">
SSID
</label>
<Field
@@ -60,10 +53,7 @@ const WiFiSettingsForm = () => {
/>
</FormGroup>
<FormGroup>
<label
htmlFor="password"
className="font-medium whitespace-nowrap md:w-2/3"
>
<label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
Password
</label>
<div className="flex gap-2 items-center relative mb-4">
@@ -83,10 +73,7 @@ const WiFiSettingsForm = () => {
</div>
</FormGroup>
<FormGroup>
<label
htmlFor="encryption"
className="font-medium whitespace-nowrap md:w-2/3"
>
<label htmlFor="encryption" className="font-medium whitespace-nowrap md:w-2/3">
WPA/Encryption Type
</label>
<Field
@@ -103,11 +90,9 @@ const WiFiSettingsForm = () => {
</FormGroup>
<button
type="submit"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
>
{isSubmitting || wifiMutation.isPending
? "Saving..."
: " Save WiFi settings"}
{isSubmitting || wifiMutation.isPending ? "Saving..." : " Save WiFi settings"}
</button>
</Form>
)}

8
src/components/UI/ModalComponent.tsx
View File

@@ -7,16 +7,12 @@ type ModalComponentProps = {
close: () => void;
};
const ModalComponent = ({
isModalOpen,
children,
close,
}: ModalComponentProps) => {
const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) => {
return (
<Modal
isOpen={isModalOpen}
onRequestClose={close}
className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[90%] mx-auto mt-[1%] md:w-[80%] md:h-[95%] z-[100] overflow-y-auto max-h-screen"
className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[80%] mx-auto mt-[1%] md:w-[70%] md:h-[95%] z-[100] overflow-y-auto max-h-screen"
overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
>
{children}

1
src/components/UI/NavigationArrow.tsx
View File

@@ -11,7 +11,6 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
const navigate = useNavigate();
const navigationDest = (side: string | undefined) => {
console.log(side);
if (settingsPage) {
navigate("/");
return;