TobaOjo/BayIQ-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- addressing feedback

Browse Source
This commit is contained in:
Toba Ojo
2025-12-04 19:14:14 +00:00
parent 3af4e585e7
commit 9208470e53
13 changed files with 229 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/reducers/cameraFeedReducer.ts
View File

@@ -9,25 +9,25 @@ export const initialState: CameraFeedState = {
},
regionsByCamera: {
A: [
{ name: "Region 1", brushColour: "#ff0000" },
{ name: "Region 2", brushColour: "#00ff00" },
{ name: "Region 3", brushColour: "#0400ff" },
{ name: "Region 4", brushColour: "#ffff00" },
{ name: "Region 5", brushColour: "#fc35db" },
{ name: "Bay 1", brushColour: "#ff0000" },
{ name: "Bay 2", brushColour: "#00ff00" },
{ name: "Bay 3", brushColour: "#0400ff" },
{ name: "Bay 4", brushColour: "#ffff00" },
{ name: "Bay 5", brushColour: "#fc35db" },
],
B: [
{ name: "Region 1", brushColour: "#ff0000" },
{ name: "Region 2", brushColour: "#00ff00" },
{ name: "Region 3", brushColour: "#0400ff" },
{ name: "Region 4", brushColour: "#ffff00" },
{ name: "Region 5", brushColour: "#fc35db" },
{ name: "Bay 1", brushColour: "#ff0000" },
{ name: "Bay 2", brushColour: "#00ff00" },
{ name: "Bay 3", brushColour: "#0400ff" },
{ name: "Bay 4", brushColour: "#ffff00" },
{ name: "Bay 5", brushColour: "#fc35db" },
],
C: [
{ name: "Region 1", brushColour: "#ff0000" },
{ name: "Region 2", brushColour: "#00ff00" },
{ name: "Region 3", brushColour: "#0400ff" },
{ name: "Region 4", brushColour: "#ffff00" },
{ name: "Region 5", brushColour: "#fc35db" },
{ name: "Bay 1", brushColour: "#ff0000" },
{ name: "Bay 2", brushColour: "#00ff00" },
{ name: "Bay 3", brushColour: "#0400ff" },
{ name: "Bay 4", brushColour: "#ffff00" },
{ name: "Bay 5", brushColour: "#fc35db" },
],
},

35
src/features/cameras/components/CameraSettings/RegionSelector.tsx
View File

@@ -43,14 +43,29 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
});
};
const handleAddRegionClick = () => {
const regionName = `Bay ${regions.length + 1}`;
dispatch({
type: "ADD_NEW_REGION",
payload: { cameraFeedID: cameraFeedID, regionName: regionName, brushColour: "#ffffff" },
});
};
const handleRemoveClick = () => {
dispatch({
type: "REMOVE_REGION",
payload: { cameraFeedID: cameraFeedID, regionName: regions[selectedRegionIndex].name },
});
};
const handleSaveclick = () => {
const regions: ColourData[] = [];
const test = Array.from(paintedCells.entries());
const region1 = test.filter(([, cell]) => cell.region.name === "Region 1");
const region2 = test.filter(([, cell]) => cell.region.name === "Region 2");
const region3 = test.filter(([, cell]) => cell.region.name === "Region 3");
const region4 = test.filter(([, cell]) => cell.region.name === "Region 4");
const region5 = test.filter(([, cell]) => cell.region.name === "Region 5");
const region1 = test.filter(([, cell]) => cell.region.name === "Bay 1");
const region2 = test.filter(([, cell]) => cell.region.name === "Bay 2");
const region3 = test.filter(([, cell]) => cell.region.name === "Bay 3");
const region4 = test.filter(([, cell]) => cell.region.name === "Bay 4");
const region5 = test.filter(([, cell]) => cell.region.name === "Bay 5");
const region1Data = {
id: 1,
cells: region1.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
@@ -130,7 +145,7 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
</div>
</div>
<div className="p-2 border border-gray-600 rounded-lg flex flex-col">
<h2 className="text-2xl mb-2">Region Select</h2>
<h2 className="text-2xl mb-2">Bay Select</h2>
<>
{regions?.map((region, idx) => {
const isSelected = selectedRegionIndex === idx;
@@ -162,6 +177,14 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
);
})}
</>
<div className="flex flex-col gap-4 mt-4">
<button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
Add Bay
</button>
<button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
Remove Bay
</button>
</div>
</div>
<div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">

2
src/features/cameras/components/PlatePatch/SightingEntryTable.tsx
View File

@@ -18,7 +18,7 @@ const SightingEntryTable = () => {
<thead className="bg-gray-700/50 text-gray-200 sticky top-0">
<tr>
<th className="px-4 py-3 font-semibold">VRM</th>
<th className="px-4 py-3 font-semibold">Lane ID</th>
<th className="px-4 py-3 font-semibold">Bay ID</th>
<th className="px-4 py-3 font-semibold text-center">Seen Count</th>
<th className="px-4 py-3 font-semibold">First Seen</th>
<th className="px-4 py-3 font-semibold">Last Seen</th>

2
src/features/cameras/components/PlatePatch/SightingExitTable.tsx
View File

@@ -18,7 +18,7 @@ const SightingExitTable = () => {
<thead className="bg-gray-700/50 text-gray-200 sticky top-0">
<tr>
<th className="px-4 py-3 font-semibold">VRM</th>
<th className="px-4 py-3 font-semibold">Lane ID</th>
<th className="px-4 py-3 font-semibold">Bay ID</th>
<th className="px-4 py-3 font-semibold text-center">Seen Count</th>
<th className="px-4 py-3 font-semibold">First Seen</th>
<th className="px-4 py-3 font-semibold">Last Seen</th>

2
src/features/cameras/components/PlatePatch/SightingPatch.tsx
View File

@@ -8,7 +8,7 @@ const PlatePatch = () => {
return (
<Card className="p-4 w-full md:w-[95%] md:row-start-4 md:col-span-3 md:h-[190%]">
<CardHeader title="Entry / Exit" />
<Tabs>
<Tabs defaultIndex={1}>
<TabList>
<Tab>Entry Sightings</Tab>
<Tab>Exit Sightings</Tab>

1
src/features/cameras/components/Video/VideoFeedGridPainter.tsx
View File

@@ -118,6 +118,7 @@ const VideoFeedGridPainter = () => {
onMouseMove={handleStageMouseMove}
onMouseUp={handleStageMouseUp}
onMouseLeave={handleStageMouseUp}
className="max-w-[55%]"
>
<Layer>
<Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />

9
src/features/output/components/ChannelCard.tsx
View File

@@ -5,7 +5,11 @@ import ChannelFields from "./ChannelFields";
import type { FormTypes } from "../../../types/types";
import { useGetBearerConfig } from "../hooks/useBearer";
const ChannelCard = () => {
type ChannelCardProps = {
customFields: (string | undefined)[];
};
const ChannelCard = ({ customFields }: ChannelCardProps) => {
const { values, errors, touched, setFieldValue } = useFormikContext<FormTypes>();
const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
const outputData = bearerQuery?.data;
@@ -18,10 +22,11 @@ const ChannelCard = () => {
values={values}
outputData={outputData}
onSetFieldValue={setFieldValue}
customFields={customFields}
/>
<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"
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 hover:cursor-pointer"
>
{"Save Changes"}
</button>

25
src/features/output/components/ChannelFields.tsx
View File

@@ -12,12 +12,13 @@ type ChannelFieldsProps = {
};
outputData?: OutputDataResponse;
onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
customFields: (string | undefined)[];
};
const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue, customFields }: ChannelFieldsProps) => {
const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || "");
const optionalConstants = optionalConstantsQuery?.data;
console.log(customFields);
const channelFieldsObject = useMemo(() => {
return {
connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
@@ -269,24 +270,28 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
<FieldArray name="customFields">
{(arrayHelpers) => (
<>
{values?.customFields?.map((_, index) => (
{values?.customFields?.slice(0, 6).map((_, index) => (
<div key={index} className="flex flex-row justify-between items-center mb-4">
<label htmlFor={`customFields.${index}`} className="mr-2">
Custom Field {index + 1}
</label>
<Field
name={`customFields.${index}`}
name={`customFields.${index}.label`}
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder={`Custom Field ${index + 1} label`}
/>
<Field
name={`customFields.${index}.value`}
key={index}
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder={`Enter Custom Field ${index + 1}`}
placeholder={`Enter Custom Field ${index + 1} value`}
autoComplete="off"
/>
</div>
))}
<button
type="button"
onClick={() => arrayHelpers.push("")}
className="mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
onClick={() => arrayHelpers.push({ label: "", value: "" })}
className={`mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
disabled={values?.customFields && values?.customFields?.length >= 6}
>
Add Custom Field
</button>

22
src/features/output/components/OutputForms.tsx
View File

@@ -5,10 +5,12 @@ import type { BearerTypeFields, FormTypes, OptionalBOF2Constants, OptionalUTMCCo
import { usePostBearerConfig } from "../hooks/useBearer";
import { useDispatcherConfig } from "../hooks/useDispatcherConfig";
import { useOptionalConstants } from "../hooks/useOptionalConstants";
import { useCustomFields } from "../hooks/useCustomFields";
const OutputForms = () => {
const { bearerMutation } = usePostBearerConfig();
const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
const { customFieldsQuery } = useCustomFields();
const isLoading = dispatcherQuery?.isLoading;
const format = dispatcherQuery?.data?.propFormat?.value;
@@ -18,6 +20,22 @@ const OutputForms = () => {
const timestampSource = optionalConstantsQuery?.data?.propTimeZoneType?.value;
const gpsFormat = optionalConstantsQuery?.data?.propGpsFormat?.value;
const customFieldLabel1 = customFieldsQuery?.data?.propCustomFieldName1?.value;
const customFieldLabel2 = customFieldsQuery?.data?.propCustomFieldName2?.value;
const customFieldLabel3 = customFieldsQuery?.data?.propCustomFieldName3?.value;
const customFieldLabel4 = customFieldsQuery?.data?.propCustomFieldName4?.value;
const customFieldLabel5 = customFieldsQuery?.data?.propCustomFieldName5?.value;
const customFieldLabel6 = customFieldsQuery?.data?.propCustomFieldName6?.value;
const customfields = [
customFieldLabel1,
customFieldLabel2,
customFieldLabel3,
customFieldLabel4,
customFieldLabel5,
customFieldLabel6,
];
const inititalValues: FormTypes = {
format: format ?? "JSON",
enabled: true,
@@ -43,7 +61,7 @@ const OutputForms = () => {
// ftp - fields
//custom fields
customFields: [],
customFields: customfields ?? ["", "", "", "", "", ""],
};
const handleSubmit = async (values: FormTypes) => {
@@ -99,7 +117,7 @@ const OutputForms = () => {
<Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
<Form className="grid grid-cols-1 md:grid-cols-2">
<BearerTypeCard />
<ChannelCard />
<ChannelCard customFields={customfields} />
</Form>
</Formik>
);

19
src/features/output/hooks/useCustomFields.ts Normal file
View File

@@ -0,0 +1,19 @@
import { useQuery } from "@tanstack/react-query";
import { CAMBASE } from "../../../utils/config";
const fetchCustomFields = async () => {
const response = await fetch(`${CAMBASE}/api/fetch-config?id=SightingAmmend0-custom-fields`);
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
};
export const useCustomFields = () => {
const customFieldsQuery = useQuery({
queryKey: ["customFields"],
queryFn: fetchCustomFields,
});
return { customFieldsQuery };
};

75
src/features/settings/components/SystemConfig.tsx
View File

@@ -1,11 +1,15 @@
import { Formik, Form, Field, FieldArray } from "formik";
import { useSystemSettings } from "../hooks/useSystemSettings";
import type { SystemSettings } from "../../../types/types";
import type { NetworkConfig, SystemSettings } from "../../../types/types";
import { toast } from "sonner";
import { useGetNetworkConfig } from "../hooks/useGetNetworkConfig";
const SystemConfig = () => {
const { systemSettingsQuery, systemSettingsMutation } = useSystemSettings();
const { networkConfigQuery, networkConfigMutation } = useGetNetworkConfig();
const isLoading = networkConfigMutation?.isPending || networkConfigMutation?.isPending;
const isGettingLoading = systemSettingsQuery?.isLoading || networkConfigQuery?.isLoading;
const timeZoneOptions = systemSettingsQuery?.data?.propLocalTimeZone?.accepted;
const timeZoneOpts = timeZoneOptions?.split(",").map((option: string) => option.trim().replace(/\[|\]/g, ""));
const timeSourceOptions = systemSettingsQuery?.data?.propTimeSource?.accepted;
@@ -15,8 +19,11 @@ const SystemConfig = () => {
const SNTPServer = systemSettingsQuery?.data?.propSNTPServer?.value;
const SNTPInterval = systemSettingsQuery?.data?.propSNTPIntervalMinutes?.value;
const timeSource = systemSettingsQuery?.data?.propTimeSource?.value;
// const primaryServer = systemSettingsQuery?.data?.propPrimaryDNSServer?.value;
// const secondaryServer = systemSettingsQuery?.data?.propSecondaryDNSServer?.value;
const primaryServer = networkConfigQuery?.data?.propNameServerPrimary?.value;
const secondaryServer = networkConfigQuery?.data?.propNameServerSecondary?.value;
const ipAddress = networkConfigQuery?.data?.propHost?.value;
const subnetMask = networkConfigQuery?.data?.propNetmask?.value;
const gateway = networkConfigQuery?.data?.propGateway?.value;
const initialValues = {
deviceName: deviceName ?? "",
@@ -25,22 +32,36 @@ const SystemConfig = () => {
SNTPServer: SNTPServer ?? "",
SNTPInterval: SNTPInterval ?? 60,
SNTPIntervalMinutes: SNTPInterval ?? 60,
primaryServer: "",
secondaryServer: "",
primaryServer: primaryServer ?? "",
secondaryServer: secondaryServer ?? "",
timeSource: timeSource ?? "",
ipAddress: ipAddress ?? "",
subnetMask: subnetMask ?? "",
gateway: gateway ?? "",
customFields: [],
};
const handleSubmit = async (values: SystemSettings) => {
const handleSubmit = async (values: SystemSettings & NetworkConfig) => {
const result = await systemSettingsMutation.mutateAsync(values);
const networkResult = await networkConfigMutation.mutateAsync({
ipAddress: values.ipAddress,
subnetMask: values.subnetMask,
gateway: values.gateway,
primaryServer: values.primaryServer,
secondaryServer: values.secondaryServer,
});
if (result.id) {
if (result.id && networkResult.id) {
toast.success("System settings updated successfully");
} else {
toast.error("Failed to update system settings");
}
};
if (isGettingLoading) {
return <div>Loading...</div>;
}
return (
<Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
{({ values }) => (
@@ -106,6 +127,36 @@ const SystemConfig = () => {
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="subnetMask">Subnet Mask</label>
<Field
name="subnetMask"
type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter subnet mask"
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="ipAddress">IP Address</label>
<Field
name="ipAddress"
type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter IP address"
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="gateway">Gateway</label>
<Field
name="gateway"
type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder="Enter gateway"
autoComplete="off"
/>
</div>
<div className="flex flex-row justify-between items-center mb-4">
<label htmlFor="primaryServer">Primary DNS Server</label>
<Field
@@ -133,7 +184,7 @@ const SystemConfig = () => {
<FieldArray name="customFields">
{(arrayHelpers) => (
<>
{values.customFields.map((field, index) => (
{values.customFields.map((_, index) => (
<div key={index} className="flex flex-row justify-between items-center mb-4">
<label htmlFor={`customFields.${index}`} className="mr-2">
Custom Field {index + 1}
@@ -167,8 +218,12 @@ const SystemConfig = () => {
)}
</FieldArray>
</div>
<button type="submit" className="px-4 py-2 bg-green-700 text-white rounded-lg">
Save Settings
<button
type="submit"
className="px-4 py-2 bg-green-700 text-white rounded-lg hover:bg-green-800 hover:cursor-pointer"
disabled={isLoading}
>
{isLoading ? "Saving..." : "Save Settings"}
</button>
</Form>
)}

49
src/features/settings/hooks/useGetNetworkConfig.ts Normal file
View File

@@ -0,0 +1,49 @@
import { useQuery, useMutation } from "@tanstack/react-query";
import { CAMBASE } from "../../../utils/config";
import type { NetworkConfig } from "../../../types/types";
const fetchNetworkConfig = async () => {
const response = await fetch(`${CAMBASE}/api/fetch-config?id=GLOBAL--NetworkConfig`);
if (!response.ok) throw new Error("Network response was not ok");
return response.json();
};
const postNetworkConfig = async (networkConfig: NetworkConfig) => {
const fields = [
{ property: "propNetmask", value: networkConfig.subnetMask },
{ property: "propHost", value: networkConfig.ipAddress },
{ property: "propGateway", value: networkConfig.gateway },
];
if (networkConfig.primaryServer !== undefined) {
fields.push({ property: "propNameServerPrimary", value: networkConfig.primaryServer });
}
if (networkConfig.secondaryServer !== undefined) {
fields.push({ property: "propNameServerSecondary", value: networkConfig.secondaryServer });
}
const networkConfigPayload = {
id: "GLOBAL--NetworkConfig",
fields,
};
const respones = await fetch(`${CAMBASE}/api/update-config?id=GLOBAL--NetworkConfig`, {
method: "POST",
body: JSON.stringify(networkConfigPayload),
});
if (!respones.ok) throw new Error("Network response was not ok");
return respones.json();
};
export const useGetNetworkConfig = () => {
const networkConfigQuery = useQuery({
queryKey: ["networkConfig"],
queryFn: fetchNetworkConfig,
});
const networkConfigMutation = useMutation({
mutationKey: ["networkConfigMutation"],
mutationFn: postNetworkConfig,
});
return { networkConfigQuery, networkConfigMutation };
};

6
src/types/types.ts
View File

@@ -186,6 +186,12 @@ export type SystemSettings = {
timeSource: string;
SNTPServer: string;
SNTPIntervalMinutes: number;
};
export type NetworkConfig = {
ipAddress: string;
subnetMask: string;
gateway: string;
primaryServer?: string;
secondaryServer?: string;
};