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 = ({

6
src/context/AlertHitContext.ts
View File

@@ -1,10 +1,10 @@
import { createContext, useContext } from "react";
import type { AlertState, AlertPayload, ActionType } from "../types/types";
import type { AlertState, AlertPayload } from "../types/types";
type AlertHitContextValueType = {
state: AlertState;
action: AlertPayload;
disptach: (action: ActionType) => AlertState;
action?: AlertPayload;
dispatch: React.Dispatch<AlertPayload>;
};
export const AlertHitContext = createContext<

4
src/context/NPEDUserContext.ts
View File

@@ -1,8 +1,8 @@
import { createContext, useContext, type SetStateAction } from "react";
import type { NPEDCameraConfig, NPEDUser } from "../types/types";
import type { NPEDUser } from "../types/types";
type UserContextValue = {
user: NPEDCameraConfig | null;
user: NPEDUser | null;
setUser: React.Dispatch<SetStateAction<NPEDUser | null>>;
};

12
src/context/SightingFeedContext.ts
View File

@@ -1,17 +1,15 @@
import { createContext, useContext } from "react";
import type { SightingType, SightingWidgetType } from "../types/types";
import type { SightingType } from "../types/types";
type SightingFeedContextType = {
sightings: (SightingWidgetType | null | undefined)[];
sightings: (SightingType | null | undefined)[];
selectedRef: number | null;
setSelectedRef: (ref: number | null) => void;
// effectiveSelected: SightingWidgetType | null;
mostRecent: SightingWidgetType | null;
// effectiveSelected: SightingType | null;
mostRecent: SightingType | null;
side: string;
selectedSighting: SightingType | null;
setSelectedSighting: (
sighting: SightingType | SightingWidgetType | null
) => void;
setSelectedSighting: (sighting: SightingType | SightingType | null) => void;
setSightingModalOpen: (isSightingModalOpen: boolean) => void;
isSightingModalOpen: boolean;
};

4
src/context/providers/AlertHitProvider.tsx
View File

@@ -7,10 +7,10 @@ type AlertHitProviderTypeProps = {
};
export const AlertHitProvider = ({ children }: AlertHitProviderTypeProps) => {
const [state, disptach] = useReducer(reducer, initalState);
const [state, dispatch] = useReducer(reducer, initalState);
return (
<AlertHitContext.Provider value={{ state, disptach }}>
<AlertHitContext.Provider value={{ state, dispatch }}>
{children}
</AlertHitContext.Provider>
);

16
src/context/reducers/AlertReducers.ts
View File

@@ -8,18 +8,20 @@ export const initalState = {
export function reducer(state: AlertState, action: AlertPayload) {
switch (action.type) {
case "ADD": {
const alreadyExists = state.allAlerts.some(
(alertItem) => alertItem.vrm === action.payload.vrm
);
if (alreadyExists) {
return { ...state };
} else {
if (action.payload && "vrm" in action.payload) {
const alreadyExists = state.allAlerts.some(
(alertItem) => alertItem.vrm === action.payload.vrm
);
if (alreadyExists) {
return state;
}
return {
...state,
alertList: [...state.allAlerts, action.payload],
allAlerts: [...state.allAlerts, action.payload],
alertList: [...state.allAlerts, action.payload],
};
}
return state;
}
case "SEARCH": {

4
src/hooks/useOverviewOverlay.ts
View File

@@ -1,11 +1,11 @@
import { useEffect } from "react";
import type { SightingWidgetType } from "../types/types";
import type { SightingType } from "../types/types";
import { drawRects } from "../utils/utils";
type Mode = 0 | 1 | 2;
export function useOverviewOverlay(
selected: SightingWidgetType | null | undefined,
selected: SightingType | null | undefined,
overlayMode: Mode,
imgRef: React.RefObject<HTMLImageElement | null>,
canvasRef: React.RefObject<HTMLCanvasElement | null>

11
src/hooks/useSightingFeed.ts
View File

@@ -1,19 +1,16 @@
import { useEffect, useRef, useState } from "react";
import type { SightingType, SightingWidgetType } from "../types/types";
import type { SightingType } from "../types/types";
async function fetchSighting(
url: string,
ref: number
): Promise<SightingWidgetType> {
async function fetchSighting(url: string, ref: number): Promise<SightingType> {
const res = await fetch(`${url}${ref}`);
if (!res.ok) throw new Error(String(res.status));
return await res.json();
}
export function useSightingFeed(url: string) {
const [sightings, setSightings] = useState<SightingWidgetType[]>([]);
const [sightings, setSightings] = useState<SightingType[]>([]);
const [selectedRef, setSelectedRef] = useState<number | null>(null);
const [mostRecent, setMostRecent] = useState<SightingWidgetType | null>(null);
const [mostRecent, setMostRecent] = useState<SightingType | null>(null);
const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(
null
);

2
src/hooks/useSystemConfig.ts
View File

@@ -27,6 +27,6 @@ export const useSystemConfig = () => {
return {
uploadSettings: uploadSettingsMutation.mutate,
saveSystemSettings: saveSystemSettings.mutate,
getSystemSettingsData: getSystemSettings.data,
systemSettingsData: getSystemSettings.data,
};
};

50
src/types/types.ts
View File

@@ -9,8 +9,8 @@ export type SightingType = {
countryCode: string;
timeStamp: string;
detailsUrl: string;
overviewPlateRect: number[];
plateTrack: Array<number[]>;
overviewPlateRect?: [number, number, number, number];
plateTrack?: [number, number, number, number][];
make: string;
model: string;
color: string;
@@ -71,39 +71,6 @@ export type HotlistUploadType = {
file: string | null;
};
export type SightingWidgetType = {
debug: string;
SaFID: string;
ref: number; // unique, increasing
idx?: number; // client-side slot index
vrm: string;
vrmSecondary: string; // empty string means missing
countryCode: string;
timeStamp: string; // formatted string
timeStampMillis: number; // epoch millis
motion: string; // e.g., "AWAY" or "TOWARDS"
seenCount: string;
charHeight: string;
overviewUrl: string;
detailsUrl: string;
make: string;
model: string;
color: string;
category: string;
plateSize: string | number;
overviewSize: string | number;
locationName: string;
laneID: string | number;
radarSpeed: string | number;
trackSpeed: string | number;
srcCam: 0 | 1;
plateUrlInfrared: string;
plateUrlColour: string;
overviewPlateRect: [number, number, number, number]; // [x,y,w,h] normalized 0..1
plateTrack: [number, number, number, number][];
metadata: Metadata;
};
export type VersionFieldType = {
version: string;
revision: string;
@@ -183,10 +150,15 @@ export type AlertState = {
allAlerts: SightingType[];
};
export type AlertPayload = {
payload: SightingType | string;
type: string;
};
export type AlertPayload =
| {
payload: SightingType;
type: "ADD";
}
| {
payload: string;
type: "SEARCH";
};
export type ActionType = {
payload: SightingType | string;