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

added nped list functionality

Browse Source
This commit is contained in:
Toba Ojo
2025-08-29 14:55:37 +01:00
parent d2b8827987
commit 4fd3bd4319
15 changed files with 152 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,7 +26,6 @@ const CameraSettingFields = () => {
const handleSubmit = (values: CameraSettingValues) => {
// post values to endpoint
toast("Settings Saved");
console.log(values);
};
return (

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

@@ -8,7 +8,6 @@ export const ValuesComponent = () => {
const BearerTypeFields = () => {
const { values } = useFormikContext();
console.log(values);
return (
<div className="flex flex-col space-y-4">

3
src/components/SettingForms/NPED/NPEDCard.tsx
View File

@@ -1,11 +1,8 @@
import Card from "../../UI/Card";
import CardHeader from "../../UI/CardHeader";
import NPEDFields from "./NPEDFields";
import { useNPEDContext } from "../../../context/NPEDUserContext";
const NPEDCard = () => {
const { user } = useNPEDContext();
console.log(user);
return (
<Card>
<CardHeader title={"NPED Config"} />

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

@@ -5,14 +5,22 @@ import { useNPEDAuth } from "../../../hooks/useNPEDAuth";
import { toast } from "sonner";
const NPEDFields = () => {
const { signIn } = useNPEDAuth();
const { signIn, user, signOut } = useNPEDAuth();
const initialValues = {
const initialValues = user
? {
username: user.propUsername.value,
password: "",
clientId: user.propClientID.value,
frontId: "NPED",
rearId: "NPED",
}
: {
username: "",
password: "",
clientId: "",
frontId: "NPEDFront",
rearId: "NPEDRear",
frontId: "NPED",
rearId: "NPED",
};
const handleSubmit = (values: NPEDFieldType) => {
@@ -20,7 +28,7 @@ const NPEDFields = () => {
...values,
};
signIn(valuesToSend);
toast("Signed in successfully");
toast.success("Signed in successfully");
};
const validateValues = (values: NPEDFieldType) => {
@@ -31,6 +39,10 @@ const NPEDFields = () => {
return errors;
};
const handleLogoutClick = () => {
signOut();
};
return (
<Formik
initialValues={initialValues}
@@ -84,12 +96,22 @@ const NPEDFields = () => {
className="p-1.5 border border-gray-400 rounded-lg"
/>
</FormGroup>
{!user?.propClientID?.value ? (
<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 hover:cursor-pointer"
>
Login
</button>
) : (
<button
type="button"
className="w-1/4 border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
onClick={handleLogoutClick}
>
Logout
</button>
)}
</Form>
)}
</Formik>

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

@@ -23,13 +23,14 @@ const SightingOverview = () => {
setOverlayMode((m) => ((m + 1) % 3) as 0 | 1 | 2);
}, []);
const { effectiveSelected, side, mostRecent, noSighting } =
const { effectiveSelected, side, mostRecent, noSighting, isPending } =
useSightingFeedContext();
useOverviewOverlay(mostRecent, overlayMode, imgRef, canvasRef);
const { sync } = useHiDPICanvas(imgRef, canvasRef);
if (noSighting) return <p>loading</p>;
if (noSighting || isPending) return <p>loading</p>;
return (
<div className="mt-2 grid gap-3">
<div className="inline-block w-[90%] mx-auto" {...handlers}>

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

@@ -50,11 +50,12 @@ export default function SightingHistoryWidget({
{/* Rows */}
<div className="flex flex-col">
{rows?.map((obj, idx) => {
console.log(obj);
const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 201;
const isSelected = obj?.ref === selectedRef;
const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
const primaryIsColour = obj?.srcCam === 1;
const secondaryMissing = (obj?.vrmSecondary ?? "") === "";
return (
<div
key={idx}
@@ -80,7 +81,11 @@ export default function SightingHistoryWidget({
</div>
{/* Patch row */}
<div className="flex items-center gap-3 mt-2">
<div
className={`flex items-center gap-3 mt-2
${isNPEDHit ? "border border-red-600" : ""}
`}
>
<div
className={`border p-1 ${
primaryIsColour ? "" : "ring-2 ring-lime-400"

11
src/components/Skeleton/SkeletonBox.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { clsx } from "clsx";
type SkeletonBoxProps = {
className: string;
};
const SkeletonBox = ({ className }: SkeletonBoxProps) => {
return <div className={clsx(...className)}></div>;
};
export default SkeletonBox;

4
src/context/NPEDUserContext.tsx
View File

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

1
src/hooks/useGetOverviewSnapshot.ts
View File

@@ -4,7 +4,6 @@ import { useQuery } from "@tanstack/react-query";
const apiUrl = import.meta.env.VITE_BASEURL;
async function fetchSnapshot(cameraSide: string) {
console.log(`${apiUrl}/${cameraSide}-preview`);
const response = await fetch(
// `http://100.116.253.81/Colour-preview`
`${apiUrl}/${cameraSide}-preview`

1
src/hooks/useLatestSighting.ts
View File

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef } from "react";
async function fetchSighting() {
const response = await fetch(
// `http://100.82.205.44/api`
`http://100.116.253.81/mergedHistory/sightingSummary?mostRecentRef=-1`
);
if (!response.ok) throw new Error("Failed to fetch sighting");

54
src/hooks/useNPEDAuth.ts
View File

@@ -1,15 +1,22 @@
import { useMutation } from "@tanstack/react-query";
import { useMutation, useQuery } from "@tanstack/react-query";
import type { NPEDFieldType } from "../types/types";
import { useNPEDContext } from "../context/NPEDUserContext";
import { useEffect } from "react";
const base_url = import.meta.env.VITE_OUTSIDE_BASEURL;
async function fetchNPEDDetails() {
const fetchUrl = `${base_url}/fetch-config?id=NPED`;
const response = await fetch(fetchUrl);
if (!response.ok) throw new Error("Cannot reach fetch-config endpoint");
const data = await response.json();
console.log(data);
return response.json();
}
async function signIn(loginDetails: NPEDFieldType) {
const { frontId, rearId, username, password, clientId } = loginDetails;
const NPEDLoginURLFront = `${base_url}/update-config?id=${frontId}`;
const NPEDLoginURLRear = `${base_url}/update-config?id=${rearId}`;
const frontCameraPayload = {
id: frontId,
fields: [
@@ -43,8 +50,6 @@ async function signIn(loginDetails: NPEDFieldType) {
if (!frontCameraResponse.ok) throw new Error("cannot reach NPED endpoint");
if (!rearCameraResponse.ok) throw new Error("cannot reach NPED endpoint");
console.log(frontCameraResponse);
console.log(rearCameraResponse);
return {
frontResponse: frontCameraResponse.json(),
rearResponse: rearCameraResponse.json(),
@@ -52,13 +57,28 @@ async function signIn(loginDetails: NPEDFieldType) {
}
async function signOut() {
const response = await fetch(url, { method: "POST" });
const nullPayload = {
id: "NPED",
fields: [
{ property: "propEnabled", value: false },
{ property: "propUsername", value: "" },
{ property: "propPassword", value: "" },
{ property: "propClientID", value: "" },
],
};
const NPEDLoginURLFront = `${base_url}/update-config?id=NPED`;
const response = await fetch(NPEDLoginURLFront, {
method: "POST",
body: JSON.stringify(nullPayload),
});
if (!response.ok) throw new Error("cannot reach NPED sign out endpoint");
return response.json();
}
export const useNPEDAuth = () => {
const { setUser } = useNPEDContext();
const { setUser, user } = useNPEDContext();
const signInMutation = useMutation({
mutationKey: ["NPEDSignin"],
@@ -69,9 +89,24 @@ export const useNPEDAuth = () => {
const signOutMutation = useMutation({
mutationKey: ["auth", "NPEDSignOut"],
mutationFn: signOut,
onSuccess: () => setUser(null),
});
const fetchdataQuery = useQuery({
queryKey: ["auth", "NPEDFetch"],
queryFn: fetchNPEDDetails,
});
useEffect(() => {
if (fetchdataQuery.isSuccess && fetchdataQuery.data) {
setUser(fetchdataQuery.data);
} else if (
!fetchdataQuery?.data?.propUsername?.value &&
!fetchdataQuery?.data?.propClientID?.value
) {
setUser(null);
}
}, [fetchdataQuery.data, fetchdataQuery.isSuccess, setUser]);
return {
signIn: signInMutation.mutate,
signInAsync: signInMutation.mutateAsync,
@@ -79,7 +114,8 @@ export const useNPEDAuth = () => {
isError: signInMutation.isError,
error: signInMutation.error,
data: signInMutation.data,
user,
setUser,
signOut: signOutMutation.mutate,
};
};

4
src/hooks/useSightingFeed.ts
View File

@@ -6,6 +6,7 @@ import { useQuery } from "@tanstack/react-query";
async function fetchSighting(url: string, ref: number, signal?: AbortSignal) {
const dynamicUrl = `${url}${ref}`;
const res = await fetch(dynamicUrl, { signal });
if (!res.ok) throw new Error(String(res.status));
return (await res.json()) as SightingWidgetType;
@@ -20,12 +21,13 @@ export function useSightingFeed(url: string) {
const [mostRecent, setMostRecent] = useState<SightingWidgetType | null>(null);
const mostRecentRef = useRef<number>(-1);
const lastSeenRef = useRef<number | null>(null);
const { data, isPending } = useQuery({
queryKey: ["sighting"],
queryFn: ({ signal }) => fetchSighting(url, mostRecentRef.current, signal),
refetchInterval: 200,
refetchInterval: 2000,
refetchIntervalInBackground: true,
refetchOnWindowFocus: false,
staleTime: 0,

3
src/pages/Dashboard.tsx
View File

@@ -9,7 +9,8 @@ const Dashboard = () => {
<div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
<SightingFeedProvider
url={
"http://100.116.253.81/mergedHistory/sightingSummary?mostRecentRef="
"http://100.82.205.44/SightingListFront/sightingSummary?mostRecentRef="
// "http://100.116.253.81/mergedHistory/sightingSummary?mostRecentRef="
}
side="Front"
>

3
src/pages/SystemSettings.tsx
View File

@@ -4,8 +4,11 @@ import NPEDCard from "../components/SettingForms/NPED/NPEDCard";
import SettingForms from "../components/SettingForms/SettingForms/SettingForms";
import NPEDHotlistCard from "../components/SettingForms/NPED/NPEDHotlistCard";
import { Toaster } from "sonner";
import { useNPEDAuth } from "../hooks/useNPEDAuth";
const SystemSettings = () => {
const { user } = useNPEDAuth();
console.log(user);
return (
<div className="m-4">
<Tabs selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none">

39
src/types/types.ts
View File

@@ -97,7 +97,25 @@ export type SightingWidgetType = {
plateUrlInfrared?: string;
plateUrlColour?: string;
overviewPlateRect?: [number, number, number, number]; // [x,y,w,h] normalized 0..1
plateTrack?: [number, number, number, number][]; // list of rects normalized 0..1
plateTrack?: [number, number, number, number][];
metadata?: Metadata;
// list of rects normalized 0..1
};
export type Metadata = {
npedJSON: NpedJSON;
"hotlist-matches": HotlistMatches;
};
export type HotlistMatches = {
Hotlist0: boolean;
Hotlist1: boolean;
Hotlist2: boolean;
};
export type NpedJSON = {
status_code: number;
reason_phrase: string;
};
export type NPEDUser = {
@@ -111,3 +129,22 @@ export type NPEDErrorValues = {
password?: string | undefined;
clientId?: string | undefined;
};
export type NPEDCameraConfig = {
id: string;
configHash: string;
propEnabled: Prop;
propUsername: Prop;
propPassword: Prop;
propClientID: Prop;
propConnectTimeoutSeconds: Prop;
propReadTimeoutSeconds: Prop;
propNPEDAuthTokenURL: Prop;
propNPEDLookupURL: Prop;
propVerbose: Prop;
};
export interface Prop {
value: string;
datatype: string;
}