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

fixed type errors

Browse Source
This commit is contained in:
Toba Ojo
2025-09-16 14:20:38 +01:00
parent c506c395e6
commit b98e3ed85d
21 changed files with 161 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/CameraSettings/CameraSettingFields.tsx
View File

@@ -4,23 +4,31 @@ import type {
CameraSettingErrorValues,
CameraSettingValues,
} from "../../types/types";
import { useMemo, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
type CameraSettingsProps = {
initialData: CameraConfig;
updateCameraConfig: (values: CameraSettingValues) => void;
updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
};
const CameraSettingFields = ({
initialData,
updateCameraConfig,
}: CameraSettingsProps) => {
const initialValues: CameraSettingValues = {
friendlyName: initialData?.propLEDDriverControlURI?.value,
cameraAddress: "",
userName: "",
password: "",
id: initialData?.id,
};
const [showPwd, setShowPwd] = useState(false);
const initialValues = useMemo<CameraSettingValues>(
() => ({
friendlyName: initialData?.propLEDDriverControlURI?.value ?? "",
cameraAddress: "",
userName: "",
password: "",
id: initialData?.id,
}),
[initialData?.id, initialData?.propLEDDriverControlURI?.value]
);
const validateValues = (values: CameraSettingValues) => {
const errors: CameraSettingErrorValues = {};
@@ -34,7 +42,6 @@ const CameraSettingFields = ({
const handleSubmit = (values: CameraSettingValues) => {
updateCameraConfig(values);
return;
};
return (
@@ -43,6 +50,7 @@ const CameraSettingFields = ({
onSubmit={handleSubmit}
validate={validateValues}
validateOnChange={false}
enableReinitialize
>
{({ errors, touched }) => (
<Form className="flex flex-col space-y-4 p-2">
@@ -103,22 +111,30 @@ const CameraSettingFields = ({
{errors.password}
</small>
)}
<Field
id="password"
name="password"
type="password"
className="p-2 border border-gray-400 rounded-lg"
placeholder="Enter password"
autoComplete="new-password"
/>
</div>
<div className="flex gap-2 items-center relative">
<Field
id="password"
name="password"
type={showPwd ? "text" : "password"}
className="p-2 border border-gray-400 rounded-lg w-full "
placeholder="Enter password"
autoComplete="new-password"
/>
<FontAwesomeIcon
type="button"
className="absolute right-5 end-0"
onClick={() => setShowPwd((s) => !s)}
icon={showPwd ? faEyeSlash : faEye}
/>
</div>
<button
type="submit"
className="bg-blue-800 text-white rounded-lg p-2 mx-auto"
>
Save settings
</button>
<button
type="submit"
className="bg-blue-800 text-white rounded-lg p-2 mx-auto"
>
Save settings
</button>
</div>
</Form>
)}
</Formik>

5
src/components/HistoryList/HistoryList.tsx
View File

@@ -6,16 +6,17 @@ import AlertItem from "./AlertItem";
const HistoryList = () => {
const { state } = useAlertHitContext();
console.log(state);
return (
<Card className="h-100">
<CardHeader title="Alert History" />
<div className="flex flex-col gap-1">
{state?.alertList?.length >= 0 ? (
{state?.alertList?.length > 0 ? (
state?.alertList?.map((alertItem, index) => (
<AlertItem key={index} item={alertItem} />
))
) : (
<p>No Search results</p>
<p>No Alert results</p>
)}
</div>
</Card>

1
src/components/RearCameraOverview/RearCameraOverviewCard.tsx
View File

@@ -27,7 +27,6 @@ const RearCameraOverviewCard = ({ className }: CardProps) => {
<div className="flex flex-col space-y-3 h-full" {...handlers}>
<CardHeader title="Rear Overview" icon={faCamera} />
<SightingOverview />
{/* <SnapshotContainer side="TargetDetectionRear" /> */}
</div>
</Card>
);

18
src/components/SessionForm/HitSearchCard.tsx
View File

@@ -6,9 +6,8 @@ import { useState } from "react";
const SessionCard = () => {
const [searchTerm, setSearchTerm] = useState("");
const { state, disptach } = useAlertHitContext();
const { dispatch } = useAlertHitContext();
console.log(state);
return (
<Card>
<CardHeader title={"Hit Search"} />
@@ -27,16 +26,29 @@ const SessionCard = () => {
type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter VRM"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
</FormGroup>
<button
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
onClick={() => disptach({ type: "SEARCH", payload: searchTerm })}
onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
disabled={searchTerm.trim().length < 2}
>
Search Hit list
</button>
{searchTerm && (
<button
className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-full max-w-md"
onClick={() => {
setSearchTerm("");
dispatch({ type: "SEARCH", payload: "" });
}}
>
Clear Search
</button>
)}
</div>
</Card>
);

23
src/components/SessionForm/SessionCard.tsx
View File

@@ -2,22 +2,29 @@ import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";
const SessionCard = () => {
function onStart(): void {
throw new Error("Function not implemented.");
}
return (
<Card>
<CardHeader title={"Session"} />
<CardHeader title="Session" />
<div className="flex flex-col gap-4">
<button
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
//onClick={() => handleModemSave(apn, username, password, authType)}
onClick={onStart}
>
Start Session
</button>
<h2 className="text-white mb-2">Number of Vehicles: </h2>
<h2 className="text-white mb-2">Vehicles without Tax: </h2>
<h2 className="text-white mb-2">Vehicles without MOT: </h2>
<h2 className="text-white mb-2">Vehicles with NPED Cat A: </h2>
<h2 className="text-white mb-2">Vehicles with NPED Cat B: </h2>
<h2 className="text-white mb-2">Vehicles with NPED Cat C: </h2>
<ul className="text-white space-y-2">
<li>Number of Vehicles: </li>
<li>Vehicles without Tax: </li>
<li>Vehicles without MOT: </li>
<li>Vehicles with NPED Cat A: </li>
<li>Vehicles with NPED Cat B: </li>
<li>Vehicles with NPED Cat C: </li>
</ul>
</div>
</Card>
);

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

@@ -1,9 +1,12 @@
import { Field, useFormikContext } from "formik";
import FormGroup from "../components/FormGroup";
import { useState } from "react";
import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const ChannelFields = () => {
useFormikContext();
const [showPwd, setShowPwd] = useState(false);
return (
<div className="flex flex-col space-y-2">
<FormGroup>
@@ -32,11 +35,17 @@ const ChannelFields = () => {
<label htmlFor="password">Password</label>
<Field
name={"password"}
type="password"
type={showPwd ? "text" : "password"}
id="password"
placeholder="Back office password"
className="p-1.5 border border-gray-400 rounded-lg"
/>
<FontAwesomeIcon
type="button"
className="absolute right-5 end-0"
onClick={() => setShowPwd((s) => !s)}
icon={showPwd ? faEyeSlash : faEye}
/>
</FormGroup>
<FormGroup>
<label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>

15
src/components/SettingForms/NPED/NPEDFields.tsx
View File

@@ -3,14 +3,18 @@ import FormGroup from "../components/FormGroup";
import type { NPEDErrorValues, NPEDFieldType } from "../../../types/types";
import { useNPEDAuth } from "../../../hooks/useNPEDAuth";
import { toast } from "sonner";
import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
const NPEDFields = () => {
const [showPwd, setShowPwd] = useState(false);
const { signIn, user, signOut } = useNPEDAuth();
const initialValues = user
? {
username: user.propUsername.value,
password: "",
password: user.propPassword.value,
clientId: user.propClientID.value,
frontId: "NPED",
rearId: "NPED",
@@ -49,6 +53,7 @@ const NPEDFields = () => {
initialValues={initialValues}
onSubmit={handleSubmit}
validate={validateValues}
enableReinitialize
>
{({ errors, touched }) => (
<Form className="flex flex-col space-y-5">
@@ -76,11 +81,17 @@ const NPEDFields = () => {
)}
<Field
name="password"
type="password"
type={showPwd ? "text" : "password"}
id="password"
placeholder="NPED Password"
className="p-1.5 border border-gray-400 rounded-lg"
/>
<FontAwesomeIcon
type="button"
className="absolute right-5 end-0"
onClick={() => setShowPwd((s) => !s)}
icon={showPwd ? faEyeSlash : faEye}
/>
</FormGroup>
<FormGroup>
<label htmlFor="clientId">Client ID</label>

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

@@ -7,13 +7,13 @@ import type { SystemValues, SystemValuesErrors } from "../../../types/types";
import { useSystemConfig } from "../../../hooks/useSystemConfig";
const SystemConfigFields = () => {
const { saveSystemSettings, getSystemSettingsData } = useSystemConfig();
console.log(getSystemSettingsData);
const { saveSystemSettings, systemSettingsData } = useSystemConfig();
const initialvalues: SystemValues = {
deviceName: "",
timeZone: "",
sntpServer: "",
sntpInterval: 60,
deviceName: systemSettingsData?.deviceName ?? "",
timeZone: systemSettingsData?.timeZone ?? "",
sntpServer: systemSettingsData?.sntpServer ?? "",
sntpInterval: systemSettingsData?.sntpInterval ?? 60,
softwareUpdate: null,
};
@@ -34,6 +34,9 @@ const SystemConfigFields = () => {
initialValues={initialvalues}
onSubmit={handleSubmit}
validate={validateValues}
enableReinitialize
validateOnChange
validateOnBlur
>
{({ values, errors, touched }) => (
<Form className="flex flex-col space-y-5">
@@ -55,6 +58,7 @@ const SystemConfigFields = () => {
type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter device name"
autoComplete="off"
/>
</FormGroup>
<FormGroup>
@@ -75,6 +79,7 @@ const SystemConfigFields = () => {
as="select"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full max-w-xs"
>
<option value="">Select a timezone…</option>
{timezones.map((timezone) => (
<option value={timezone.value} key={timezone.label}>
{timezone.label}
@@ -100,6 +105,7 @@ const SystemConfigFields = () => {
type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter SNTP server address"
autoComplete="off"
/>
</FormGroup>
<FormGroup>
@@ -119,6 +125,7 @@ const SystemConfigFields = () => {
name="sntpInterval"
type="number"
min={1}
inputMode="numeric"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
/>
</FormGroup>
@@ -133,12 +140,14 @@ const SystemConfigFields = () => {
selectedFile={values.softwareUpdate}
/>
<button
type="button"
className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full max-w-md"
onClick={handleSoftReboot}
>
Software Reboot
</button>
<button
type="button"
className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full max-w-md"
onClick={handleHardReboot}
>

1
src/components/SettingForms/System/timezones.ts
View File

@@ -1,5 +1,4 @@
export const timezones = [
{ value: "Europe/London (UTC+00)", label: "Select Time Zone" },
{ value: "Europe/London (UTC+00)", label: "UTC (UTC+00)" },
{ value: "Africa/Cairo (UTC+02)", label: "Africa/Cairo (UTC+02)" },
{

5
src/components/SightingsWidget/InfoBar.tsx
View File

@@ -1,15 +1,14 @@
import type { SightingType, SightingWidgetType } from "../../types/types";
import type { SightingType } from "../../types/types";
import { capitalize, formatAge } from "../../utils/utils";
type InfoBarprops = {
obj: SightingWidgetType | SightingType;
obj: SightingType;
};
const InfoBar = ({ obj }: InfoBarprops) => {
const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
return (
<div className="flex items-center gap-3 text-xs bg-neutral-900 px-2 py-1 rounded justify-between">
<div className="flex items-center gap-3 text-xs">
{" "}
<div className="min-w-14">CH: {obj ? obj.charHeight : "—"}</div>
<div className="min-w-14">Seen: {obj ? obj.seenCount : "—"}</div>
<div className="min-w-20">{obj ? capitalize(obj.motion) : "—"}</div>

12
src/components/SightingsWidget/SightingWidget.tsx
View File

@@ -1,5 +1,5 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import type { SightingType, SightingWidgetType } from "../../types/types";
import type { SightingType } from "../../types/types";
import { BLANK_IMG } from "../../utils/utils";
import NumberPlate from "../PlateStack/NumberPlate";
import Card from "../UI/Card";
@@ -44,10 +44,10 @@ export default function SightingHistoryWidget({
selectedSighting,
} = useSightingFeedContext();
const { disptach } = useAlertHitContext();
const { dispatch } = useAlertHitContext();
const onRowClick = useCallback(
(sighting: SightingType | SightingWidgetType) => {
(sighting: SightingType) => {
if (!sighting) return;
setSightingModalOpen(!isSightingModalOpen);
setSelectedSighting(sighting);
@@ -55,7 +55,7 @@ export default function SightingHistoryWidget({
[isSightingModalOpen, setSelectedSighting, setSightingModalOpen]
);
const rows = useMemo(
() => sightings?.filter(Boolean) as SightingWidgetType[],
() => sightings?.filter(Boolean) as SightingType[],
[sightings]
);
@@ -64,13 +64,13 @@ export default function SightingHistoryWidget({
const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
if (isNPEDHit) {
disptach({
dispatch({
type: "ADD",
payload: obj,
});
}
});
}, [rows, disptach]);
}, [rows, dispatch]);
const handleClose = () => {
setSightingModalOpen(false);

4
src/components/SightingsWidget/SightingWidgetDetails.tsx
View File

@@ -1,8 +1,8 @@
import type { SightingWidgetType } from "../../types/types";
import type { SightingType } from "../../types/types";
import { useState } from "react";
type SightingWidgetDetailsProps = {
effectiveSelected: SightingWidgetType | null;
effectiveSelected: SightingType | null;
};
const SightingWidgetDetails = ({