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

develop #24

Merged
TobaOjo merged 4 commits from develop into main 2026-01-07 10:08:56 +00:00
Conversation 0 Commits 4 Files Changed 13 +195 -140
13 changed files with 195 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "in-car-system-fe",
"private": true,
"version": "1.0.24",
"version": "1.0.25",
"type": "module",
"scripts": {
"dev": "vite",

31
src/App.tsx
View File

@@ -9,28 +9,25 @@ import { IntegrationsProvider } from "./context/providers/IntegrationsContextPro
import { AlertHitProvider } from "./context/providers/AlertHitProvider";
import { SoundProvider } from "react-sounds";
import SoundContextProvider from "./context/providers/SoundContextProvider";
import WebSocketProvider from "./context/providers/WebSocketProvider";
function App() {
return (
<SoundContextProvider>
<SoundProvider initialEnabled={true}>
<WebSocketProvider>
<IntegrationsProvider>
<AlertHitProvider>
<Routes>
<Route path="/" element={<Container />}>
<Route index element={<Dashboard />} />
<Route path="a-camera-settings" element={<FrontCamera />} />
<Route path="b-camera-settings" element={<RearCamera />} />
<Route path="system-settings" element={<SystemSettings />} />
<Route path="session-settings" element={<Session />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Route>
</Routes>
</AlertHitProvider>
</IntegrationsProvider>
</WebSocketProvider>
<IntegrationsProvider>
<AlertHitProvider>
<Routes>
<Route path="/" element={<Container />}>
<Route index element={<Dashboard />} />
<Route path="a-camera-settings" element={<FrontCamera />} />
<Route path="b-camera-settings" element={<RearCamera />} />
<Route path="system-settings" element={<SystemSettings />} />
<Route path="session-settings" element={<Session />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Route>
</Routes>
</AlertHitProvider>
</IntegrationsProvider>
</SoundProvider>
</SoundContextProvider>
);

52
src/components/SettingForms/SettingForms/SettingForms.tsx
View File

@@ -1,7 +1,7 @@
import { Form, Formik } from "formik";
import BearerTypeCard from "../BearerType/BearerTypeCard";
import ChannelCard from "../Channel1-JSON/ChannelCard";
import { useCameraOutput, useGetDispatcherConfig } from "../../../hooks/useCameraOutput";
import { useCameraOutput, useGetDispatcherConfig, useLaneIds } from "../../../hooks/useCameraOutput";
import type {
BearerTypeFieldType,
InitialValuesForm,
@@ -14,25 +14,37 @@ import { useUpdateBackOfficeConfig } from "../../../hooks/useBackOfficeConfig";
import { useFormVaidate } from "../../../hooks/useFormValidate";
import { useSightingAmend } from "../../../hooks/useSightingAmend";
import StoreCard from "../Store/StoreCard";
import { useEffect } from "react";
const SettingForms = () => {
const qc = useQueryClient();
const { dispatcherQuery, dispatcherMutation, backOfficeDispatcherMutation, bof2LandMutation, laneIdQuery } =
useCameraOutput();
const { dispatcherQuery, dispatcherMutation, backOfficeDispatcherMutation } = useCameraOutput();
const { laneIdQuery: laneIDAQuery, laneIdMutation: laneIDAMutation } = useLaneIds("A");
const { laneIdQuery: laneIDBQuery, laneIdMutation: laneIDBMutation } = useLaneIds("B");
const { backOfficeMutation } = useUpdateBackOfficeConfig();
const { bof2ConstantsQuery } = useGetDispatcherConfig();
const { validateMutation } = useFormVaidate();
const { sightingAmendQuery, sightingAmendMutation } = useSightingAmend();
const { sightingAmendQuery: sightingAmendAQuery, sightingAmendMutation: sightingAmendMutationA } =
useSightingAmend("A");
const { sightingAmendMutation: sightingAmendMutationB } = useSightingAmend("B");
useEffect(() => {
async function fetchData() {
await Promise.all([laneIDAQuery.refetch(), laneIDBQuery.refetch()]);
}
fetchData();
}, [laneIDAQuery, laneIDBQuery]);
const format = dispatcherQuery?.data?.propFormat?.value;
const enabled = dispatcherQuery?.data?.propEnabled?.value;
const sightingQuality = sightingAmendQuery?.data?.propOverviewQuality?.value;
const cropSizeFactor = sightingAmendQuery?.data?.propOverviewImageScaleFactor?.value;
const sightingQualityA = sightingAmendAQuery?.data?.propOverviewQuality?.value;
const cropSizeFactorA = sightingAmendAQuery?.data?.propOverviewImageScaleFactor?.value;
const laneID = laneIdQuery?.data?.id;
const LID1 = laneIdQuery?.data?.propLaneID1?.value;
const LID2 = laneIdQuery?.data?.propLaneID2?.value;
const laneIDA = laneIDAQuery?.data?.id;
const LID1 = laneIDAQuery?.data?.propLaneID1?.value;
const LID2 = laneIDBQuery?.data?.propLaneID1?.value;
const FFID = bof2ConstantsQuery?.data?.propFeedIdentifier?.value;
const SCID = bof2ConstantsQuery?.data?.propSourceIdentifier?.value;
@@ -50,8 +62,8 @@ const SettingForms = () => {
password: "",
connectTimeoutSeconds: Number(5),
readTimeoutSeconds: Number(15),
overviewQuality: sightingQuality ?? "HIGH",
cropSizeFactor: cropSizeFactor ?? "3/4",
overviewQuality: sightingQualityA ?? "HIGH",
cropSizeFactor: cropSizeFactorA ?? "3/4",
// Bof2 - optional constants
FFID: FFID ?? "",
@@ -60,7 +72,7 @@ const SettingForms = () => {
GPSFormat: GPSFormat ?? "",
//BOF2 - optional Lane IDs
laneId: laneID ?? "",
laneId: laneIDA ?? "",
LID1: LID1 ?? "",
LID2: LID2 ?? "",
};
@@ -101,7 +113,8 @@ const SettingForms = () => {
if (validResponse?.reason === "OK") {
await backOfficeMutation.mutateAsync(values);
await sightingAmendMutation.mutateAsync(values);
await sightingAmendMutationA.mutateAsync(values);
await sightingAmendMutationB.mutateAsync(values);
if (values.format.toLowerCase() === "bof2") {
const bof2ConstantsData: OptionalBOF2Constants = {
@@ -111,12 +124,17 @@ const SettingForms = () => {
GPSFormat: values.GPSFormat,
};
const bof2LaneData: OptionalBOF2LaneIDs = {
laneId: laneIdQuery?.data?.id,
const bof2LaneAData: OptionalBOF2LaneIDs = {
laneId: laneIDAQuery?.data?.id,
LID1: values.LID1,
LID2: values.LID2,
};
await bof2LandMutation.mutateAsync(bof2LaneData);
const bof2LaneBData: OptionalBOF2LaneIDs = {
laneId: laneIDBQuery?.data?.id,
LID1: values.LID2,
};
await laneIDAMutation.mutateAsync(bof2LaneAData);
await laneIDBMutation.mutateAsync(bof2LaneBData);
await backOfficeDispatcherMutation.mutateAsync(bof2ConstantsData);
}
} else {

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

@@ -8,6 +8,7 @@ import { useDNSSettings, useSystemConfig } from "../../../hooks/useSystemConfig"
import { ValidateIPaddress, isUtcOutOfSync } from "../../../utils/utils";
import { toast } from "sonner";
import { useSystemStatus } from "../../../hooks/useSystemStatus";
import ResetUserSettings from "./resetUserSettings/ResetUserSettings";
const SystemConfigFields = () => {
const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } = useSystemConfig();
@@ -27,6 +28,7 @@ const SystemConfigFields = () => {
localdate: localDate,
localtime: localTime,
});
const syncTime = new Date(systemStatusQuery?.data?.SystemStatus?.synctime * 1000).toLocaleString();
const sntpInterval = systemSettingsData?.sntpInterval;
const dnsPrimary = dnsQuery?.data?.propNameServerPrimary?.value;
@@ -84,13 +86,6 @@ const SystemConfigFields = () => {
>
{({ values, errors, touched, isSubmitting }) => (
<Form className="flex flex-col space-y-5 px-2">
<div>
{utcOutOfSync?.outOfSync ? (
<span className="text-red-800 bg-red-300 border border-red-800 rounded-lg p-2">UTC is out of sync</span>
) : (
<span className="text-green-300 bg-green-800 border border-green-600 rounded-lg p-2">UTC is in sync</span>
)}
</div>
<FormGroup>
<label htmlFor="deviceName" className="font-medium whitespace-nowrap md:w-1/2 text-left">
Device Name
@@ -189,6 +184,14 @@ const SystemConfigFields = () => {
autoComplete="off"
/>
</FormGroup>
<div className="flex flex-col gap-2 w-70">
{utcOutOfSync?.outOfSync ? (
<span className="text-red-800 bg-red-300 border border-red-800 rounded-lg p-2 ">UTC is out of sync</span>
) : (
<span className="text-green-300 bg-green-800 border border-green-600 rounded-lg p-2">UTC is in sync</span>
)}
<p className="mt-2">Last Sync Time: {syncTime}</p>
</div>
<button
type="submit"
className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
@@ -215,6 +218,7 @@ const SystemConfigFields = () => {
>
{hardRebootMutation.isPending || isSubmitting ? "Rebooting" : "Hardware Reboot"}
</button>
<ResetUserSettings />
</Form>
)}
</Formik>

26
src/components/SettingForms/System/resetUserSettings/ResetUserSettings.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { useState } from "react";
import ResetUserSettingsModal from "./ResetUserSettingsModal";
const ResetUserSettings = () => {
const [isUserSettingsModalOpen, setIsUserSettingsModalOpen] = useState(false);
const handleResetButtonClick = () => {
setIsUserSettingsModalOpen(true);
};
return (
<>
<button
type="button"
onClick={handleResetButtonClick}
className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full md:w-[50%]"
>
Reset user settings
</button>
<ResetUserSettingsModal
isUserSettingsModalOpen={isUserSettingsModalOpen}
setIsUserSettingsModalOpen={setIsUserSettingsModalOpen}
/>
</>
);
};
export default ResetUserSettings;

68
src/components/SettingForms/System/resetUserSettings/ResetUserSettingsModal.tsx Normal file
View File

@@ -0,0 +1,68 @@
import { useSoundContext } from "../../../../context/SoundContext";
import { useCameraBlackboard } from "../../../../hooks/useCameraBlackboard";
import ModalComponent from "../../../UI/ModalComponent";
type ResetUserSettingsModalProps = {
isUserSettingsModalOpen: boolean;
setIsUserSettingsModalOpen: (isOpen: boolean) => void;
};
const ResetUserSettingsModal = ({
isUserSettingsModalOpen,
setIsUserSettingsModalOpen,
}: ResetUserSettingsModalProps) => {
const { state, dispatch } = useSoundContext();
const { mutation } = useCameraBlackboard();
const handleClose = () => {
setIsUserSettingsModalOpen(false);
};
const handleResetAll = async () => {
// Logic to reset all user settings goes here
dispatch({ type: "RESET" });
await mutation.mutateAsync({
operation: "INSERT",
path: "soundSettings",
value: state,
});
handleClose();
};
return (
<ModalComponent isModalOpen={isUserSettingsModalOpen} close={handleClose}>
<div className="p-4">
<h2 className="text-xl font-bold mb-4">Reset All User Settings</h2>
<p className="mb-4">Are you sure you want to reset all user settings to their default values?</p>
<p> This action cannot be undone.</p>
<div className="my-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
<p className="max-w-md text-slate-300">
This will <span className="font-bold">RESET ALL</span> user settings including{" "}
<span className="text-blue-400">Uploaded user sounds</span> ,
<span className="text-emerald-400"> Hotlist Sound hits</span> and{" "}
<span className="text-amber-600">NPED Sound hits</span>.
{/* It will also reset any customized settings within
the app to their original defaults and Clear out the session data and{" "}
<span className="text-rose-400">alert history sightings.</span> */}
</p>
</div>
<div className="flex justify-end gap-4">
<button
onClick={handleResetAll}
className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 hover:cursor-pointer"
>
Reset
</button>
<button
onClick={handleClose}
className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 hover:cursor-pointer "
>
Cancel
</button>
</div>
</div>
</ModalComponent>
);
};
export default ResetUserSettingsModal;

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

@@ -1,5 +1,6 @@
import type React from "react";
import Modal from "react-modal";
import clsx from "clsx";
type ModalComponentProps = {
isModalOpen: boolean;
@@ -12,7 +13,9 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
<Modal
isOpen={isModalOpen}
onRequestClose={close}
className="bg-[#1e2a38] p-3 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[60%] h-[100%] md:h-[95%] lg:h-[80%] z-[100] overflow-y-hidden border border-gray-500"
className={clsx(
"bg-[#1e2a38] p-3 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[60%] h-[100%] md:h-[95%] lg:h-[80%] z-[100] overflow-y-hidden border border-gray-500"
)}
overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100 "
style={{
overlay: {

33
src/context/WebsocketContext.ts
View File

@@ -1,33 +0,0 @@
import { createContext, useContext } from "react";
import type { InfoBarData } from "../types/types";
import { ReadyState } from "react-use-websocket";
type InfoSocketState = {
data: InfoBarData | null;
readyState: ReadyState;
sendJson: (msg: unknown) => void;
send?: (msg: string) => void;
};
type heatmapSocketState = {
data: null;
readyState: ReadyState;
sendJson: (msg: unknown) => void;
send?: (msg: string) => void;
};
export type WebsocketContextValue = {
info: InfoSocketState;
heatmap?: heatmapSocketState;
};
export const WebsocketContext = createContext<WebsocketContextValue | null>(null);
const useWebSocketContext = () => {
const ctx = useContext(WebsocketContext);
if (!ctx) throw new Error("useWebSocketContext must be used inside <WebSocketConext.Provider>");
return ctx;
};
export const useInfoBarSocket = () => useWebSocketContext().info;
export const useHeatmapSocket = () => useWebSocketContext().heatmap;

40
src/context/providers/WebSocketProvider.tsx
View File

@@ -1,40 +0,0 @@
import { useEffect, useMemo, useState, type ReactNode } from "react";
import type { InfoBarData } from "../../types/types";
import useWebSocket from "react-use-websocket";
import { ws_config } from "../../utils/ws_config";
import { WebsocketContext, type WebsocketContextValue } from "../WebsocketContext";
type WebSocketProviderProps = {
children: ReactNode;
};
const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
const [systemData, setSystemData] = useState<InfoBarData | null>(null);
const infoSocket = useWebSocket(ws_config.infoBar, { share: true, shouldReconnect: () => true });
useEffect(() => {
async function parseData() {
if (infoSocket.lastMessage) {
const text = await infoSocket.lastMessage.data.text();
const data = JSON.parse(text);
setSystemData(data);
}
}
parseData();
}, [infoSocket.lastMessage]);
const value = useMemo<WebsocketContextValue>(
() => ({
info: {
data: systemData,
readyState: infoSocket.readyState,
sendJson: infoSocket.sendJsonMessage,
},
}),
[systemData, infoSocket.readyState, infoSocket.sendJsonMessage]
);
return <WebsocketContext.Provider value={value}>{children}</WebsocketContext.Provider>;
};
export default WebSocketProvider;

2
src/context/reducers/SoundContextReducer.ts
View File

@@ -69,6 +69,8 @@ export function reducer(state: SoundState, action: SoundAction): SoundState {
...state,
uploadedSound: action.payload,
};
case "RESET":
return initialState;
default:
return state;
}

36
src/hooks/useCameraOutput.ts
View File

@@ -78,7 +78,11 @@ const updateBOF2LaneId = async (data: OptionalBOF2LaneIDs) => {
},
{
property: "propLaneID2",
value: data?.LID2,
value: data?.LID1,
},
{
property: "propLaneID3",
value: data?.LID1,
},
],
};
@@ -91,8 +95,8 @@ const updateBOF2LaneId = async (data: OptionalBOF2LaneIDs) => {
return response.json();
};
const getBOF2LaneId = async () => {
const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmendA-lane-ids`);
const getBOF2LaneId = async (cameraID: string) => {
const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmend${cameraID}-lane-ids`);
if (!response.ok) throw new Error("Canot get Lane Ids");
return response.json();
};
@@ -124,16 +128,6 @@ export const useCameraOutput = () => {
},
});
const bof2LandMutation = useMutation({
mutationKey: ["updateBOF2LaneId"],
mutationFn: updateBOF2LaneId,
});
const laneIdQuery = useQuery({
queryKey: ["getBOF2LaneId"],
queryFn: getBOF2LaneId,
});
useEffect(() => {
if (dispatcherQuery.isError) toast.error(dispatcherQuery.error.message);
}, [dispatcherQuery?.error?.message, dispatcherQuery.isError]);
@@ -142,8 +136,6 @@ export const useCameraOutput = () => {
dispatcherQuery,
dispatcherMutation,
backOfficeDispatcherMutation,
bof2LandMutation,
laneIdQuery,
};
};
@@ -155,3 +147,17 @@ export const useGetDispatcherConfig = () => {
return { bof2ConstantsQuery };
};
export const useLaneIds = (cameraID: string) => {
const laneIdQuery = useQuery({
queryKey: ["getBOF2LaneId", cameraID],
queryFn: () => getBOF2LaneId(cameraID),
});
const laneIdMutation = useMutation({
mutationKey: ["updateBOF2LaneId", cameraID],
mutationFn: (data: OptionalBOF2LaneIDs) => updateBOF2LaneId(data),
});
return { laneIdQuery, laneIdMutation };
};

16
src/hooks/useSightingAmend.ts
View File

@@ -2,15 +2,15 @@ import { useMutation, useQuery } from "@tanstack/react-query";
import { CAM_BASE } from "../utils/config";
import type { InitialValuesForm } from "../types/types";
const getSightingAmend = async () => {
const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmendA`);
const getSightingAmend = async (cameraId: string) => {
const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmend${cameraId}`);
if (!response.ok) throw new Error("Cannot reach sighting amend endpoint");
return response.json();
};
const updateSightingAmend = async (data: InitialValuesForm) => {
const updateSightingAmend = async (data: InitialValuesForm, cameraID: string) => {
const updateSightingAmendPayload = {
id: "SightingAmmendA",
id: `SightingAmmend${cameraID}`,
fields: [
{
property: "propOverviewQuality",
@@ -30,15 +30,15 @@ const updateSightingAmend = async (data: InitialValuesForm) => {
return response.json();
};
export const useSightingAmend = () => {
export const useSightingAmend = (cameraID: string) => {
const sightingAmendQuery = useQuery({
queryKey: ["getSightingAmend"],
queryFn: getSightingAmend,
queryFn: () => getSightingAmend(cameraID),
});
const sightingAmendMutation = useMutation({
mutationKey: ["updateSightingAmend"],
mutationFn: updateSightingAmend,
mutationKey: ["updateSightingAmend", cameraID],
mutationFn: (data: InitialValuesForm) => updateSightingAmend(data, cameraID),
});
return {

6
src/types/types.ts
View File

@@ -363,7 +363,11 @@ type UploadedState = {
payload: Blob | undefined;
};
export type SoundAction = UpdateAction | AddAction | VolumeAction | UploadedState;
type ResetAction = {
type: "RESET";
};
export type SoundAction = UpdateAction | AddAction | VolumeAction | UploadedState | ResetAction;
export type WifiSettingValues = {
ssid: string;
password: string;