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

Compare commits

base: TobaOjo:feature/cameras-2
Branches Tags
TobaOjo:main TobaOjo:develop TobaOjo:feature/brushsize TobaOjo:bugfix/zoomchangeAndOneShot TobaOjo:bugfix/minor-issues-2 TobaOjo:enhancement/dynamiccameraFeed TobaOjo:bugfix/dashboard TobaOjo:feature/ws-Camera TobaOjo:enhancement/responsive TobaOjo:feature/digitalZoom TobaOjo:feature/cameraControls-2 TobaOjo:feature/includeoption TobaOjo:feature/resetAll TobaOjo:feature/blackboard TobaOjo:feature/osdOverlayOptions TobaOjo:enhancement/customFields TobaOjo:enhancement/statusIndicators TobaOjo:enhancement/videoFeed TobaOjo:enhancement/dashboardFeedback TobaOjo:feature/settingsPage TobaOjo:enhancement/regionSelector TobaOjo:enhancement/systemHealth TobaOjo:feature/cameraControls TobaOjo:feature/targetdetection TobaOjo:feature/output-2 TobaOjo:feature/cameras-2 TobaOjo:feature/outputPage TobaOjo:feature/dashboardPage TobaOjo:feature/baywatchPage
..
compare: TobaOjo:feature/output-2
Branches Tags
TobaOjo:main TobaOjo:develop TobaOjo:feature/brushsize TobaOjo:bugfix/zoomchangeAndOneShot TobaOjo:bugfix/minor-issues-2 TobaOjo:enhancement/dynamiccameraFeed TobaOjo:bugfix/dashboard TobaOjo:feature/ws-Camera TobaOjo:enhancement/responsive TobaOjo:feature/digitalZoom TobaOjo:feature/cameraControls-2 TobaOjo:feature/includeoption TobaOjo:feature/resetAll TobaOjo:feature/blackboard TobaOjo:feature/osdOverlayOptions TobaOjo:enhancement/customFields TobaOjo:enhancement/statusIndicators TobaOjo:enhancement/videoFeed TobaOjo:enhancement/dashboardFeedback TobaOjo:feature/settingsPage TobaOjo:enhancement/regionSelector TobaOjo:enhancement/systemHealth TobaOjo:feature/cameraControls TobaOjo:feature/targetdetection TobaOjo:feature/output-2 TobaOjo:feature/cameras-2 TobaOjo:feature/outputPage TobaOjo:feature/dashboardPage TobaOjo:feature/baywatchPage

8 Commits
feature/ca ... feature/ou

Author SHA1 Message Date
Toba Ojo
3c10ff82cb - updated base for endpoints 
- added loading states
- need to add new form for ftp type
 2025-11-27 09:43:09 +00:00
Toba Ojo
97ff9a981d - added form fetch and post for optional constants for UTMC 2025-11-26 15:31:19 +00:00
Toba Ojo
e07f769288 - refactor: replace Output component with OutputForms and update related hooks and types 2025-11-26 13:00:41 +00:00
Toba Ojo
90eb976092 - can get data need to post 2025-11-25 23:04:40 +00:00
Toba Ojo
225a2a6168 - added add and remove regions on paint selector 2025-11-25 20:49:11 +00:00
Toba Ojo
2aa0b4377f - minor tweaks to ui across app 2025-11-25 15:49:53 +00:00
Toba Ojo
0d385061e0 - updated icon 2025-11-25 15:02:18 +00:00
TobaOjo
3bbb3166ba Merge pull request '- improved ui for region selector and camera settings' (#5) from feature/cameras-2 into develop 
Reviewed-on: #5
 2025-11-25 14:59:25 +00:00
21 changed files with 669 additions and 262 deletions
Expand all files Collapse all files

2
index.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/MAV-Blue.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BayIQ</title> <title>BayIQ</title>
</head> </head>

18
public/MAV-Blue.svg Normal file
View File

@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 231.27 52.63">
<defs>
<style>
.cls-1 {
fill: #20456f;
}
</style>
</defs>
<g id="Layer_2-2" data-name="Layer_2">
<g>
<g id="Layer_1-2">
<path class="cls-1" d="M150.57,0h-40.57c-7.53,0-13.64,6.11-13.64,13.64v38.99h13.64v-13.68h40.57v13.68h13.64V13.64c0-7.53-6.11-13.64-13.64-13.64ZM110,28.55v-12.59c0-1.72,1.39-3.11,3.11-3.11h34.34c1.72,0,3.11,1.39,3.11,3.11v12.59h-40.57,0ZM88.45,13.64v38.99h-13.64V15.96c0-1.72-1.39-3.11-3.11-3.11h-17.5c-1.72,0-3.11,1.39-3.11,3.11v36.67h-13.73V15.96c0-1.72-1.39-3.11-3.11-3.11h-17.49c-1.72,0-3.11,1.39-3.11,3.11v36.67H0V13.64C0,6.11,6.11,0,13.64,0h23.55c2.72,0,5.18,1.05,7.03,2.76,1.85-1.71,4.32-2.76,7.03-2.76h23.55c7.53,0,13.64,6.11,13.64,13.64h.01ZM193.88,52.63c-1.19,0-2.28-.68-2.8-1.75L166.25,0h13.16c1.19,0,2.28.68,2.8,1.75,0,0,12.25,25.11,16.55,33.92,4.3-8.81,16.55-33.92,16.55-33.92.53-1.07,1.61-1.75,2.8-1.75h13.16l-24.83,50.88c-.52,1.07-1.61,1.75-2.8,1.75h-9.78.02Z"/>
</g>
<path class="cls-1" d="M222.79,48.39c0-2.36,1.9-4.24,4.24-4.24s4.24,1.88,4.24,4.24-1.88,4.24-4.24,4.24-4.24-1.9-4.24-4.24ZM223.45,48.39c0,1.96,1.6,3.58,3.58,3.58s3.56-1.62,3.56-3.58-1.58-3.56-3.56-3.56-3.58,1.56-3.58,3.56ZM228.17,50.83l-1.26-1.92h-.8v1.92h-.72v-4.86h1.98c.9,0,1.62.58,1.62,1.48,0,1.08-.96,1.44-1.24,1.44l1.3,1.94h-.88ZM226.11,46.57v1.72h1.26c.5,0,.88-.34.88-.84,0-.54-.38-.88-.88-.88h-1.26Z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

7
src/features/cameras/components/CameraGrid.tsx
View File

@@ -39,6 +39,13 @@ const CameraGrid = () => {
tabIndex={tabIndex} tabIndex={tabIndex}
setTabIndex={setTabIndex} setTabIndex={setTabIndex}
paintedCells={paintedCellsRef} paintedCells={paintedCellsRef}
onAddRegion={() => {
setRegions((prev) => [...prev, { name: `Region ${prev.length + 1}`, brushColour: "#ffffff" }]);
}}
OnRemoveRegion={() => {
setRegions((prev) => prev.filter((_, i) => i !== selectedRegionIndex));
setSelectedRegionIndex((prev) => (prev > 0 ? prev - 1 : 0));
}}
/> />
<PlatePatch /> <PlatePatch />
</div> </div>

6
src/features/cameras/components/CameraSettings/CameraSettings.tsx
View File

@@ -15,6 +15,8 @@ type CameraSettingsProps = {
setTabIndex: (tabIndex: number) => void; setTabIndex: (tabIndex: number) => void;
tabIndex: number; tabIndex: number;
paintedCells: RefObject<Map<string, PaintedCell>>; paintedCells: RefObject<Map<string, PaintedCell>>;
onAddRegion: () => void;
OnRemoveRegion: () => void;
}; };
const CameraSettings = ({ const CameraSettings = ({
@@ -27,6 +29,8 @@ const CameraSettings = ({
tabIndex, tabIndex,
setTabIndex, setTabIndex,
paintedCells, paintedCells,
onAddRegion,
OnRemoveRegion,
}: CameraSettingsProps) => { }: CameraSettingsProps) => {
return ( return (
<Card className="p-4 col-span-3 row-span-5 col-start-3 md:col-span-3 md:row-span-5 max-h-screen overflow-auto"> <Card className="p-4 col-span-3 row-span-5 col-start-3 md:col-span-3 md:row-span-5 max-h-screen overflow-auto">
@@ -50,6 +54,8 @@ const CameraSettings = ({
mode={mode} mode={mode}
onSelectMode={onSelectMode} onSelectMode={onSelectMode}
paintedCells={paintedCells} paintedCells={paintedCells}
onAddRegion={onAddRegion}
OnRemoveRegion={OnRemoveRegion}
/> />
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>

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

@@ -10,6 +10,8 @@ type RegionSelectorProps = {
mode: string; mode: string;
onSelectMode: (mode: string) => void; onSelectMode: (mode: string) => void;
paintedCells: RefObject<Map<string, PaintedCell>>; paintedCells: RefObject<Map<string, PaintedCell>>;
onAddRegion: () => void;
OnRemoveRegion: () => void;
}; };
const RegionSelector = ({ const RegionSelector = ({
@@ -20,16 +22,26 @@ const RegionSelector = ({
mode, mode,
onSelectMode, onSelectMode,
paintedCells, paintedCells,
onAddRegion,
OnRemoveRegion,
}: RegionSelectorProps) => { }: RegionSelectorProps) => {
const handleChange = (e: { target: { value: string } }) => { const handleChange = (e: { target: { value: string } }) => {
onSelectMode(e.target.value); onSelectMode(e.target.value);
}; };
const handleAddClick = () => {
onAddRegion();
};
const handleResetClick = () => { const handleResetClick = () => {
const map = paintedCells.current; const map = paintedCells.current;
map.clear(); map.clear();
}; };
const handleRemoveClick = () => {
OnRemoveRegion();
};
return ( return (
<div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
<div className="p-2 border border-gray-600 rounded-lg flex flex-col"> <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
@@ -102,9 +114,17 @@ const RegionSelector = ({
); );
})} })}
</> </>
<div className=" mx-auto flex flex-row gap-4 mt-4">
<button className="border border-blue-900 bg-blue-700 px-4 rounded-md" onClick={handleAddClick}>
Add Region
</button>
<button className="border border-red-900 px-4 rounded-md" onClick={handleRemoveClick}>
Remove Region
</button>
</div>
</div> </div>
<div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2"> <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">
<div className="flex flex-col"> <div className="flex flex-col">
<h2 className="text-2xl mb-2">Actions</h2> <h2 className="text-2xl mb-2">Actions</h2>
<button <button

26
src/features/dashboard/components/SystemHealth.tsx
View File

@@ -6,31 +6,41 @@ type SystemHealthProps = {
uptime: string; uptime: string;
statuses: SystemHealthStatus[]; statuses: SystemHealthStatus[];
isLoading: boolean; isLoading: boolean;
isError: boolean;
dateUpdatedAt?: number;
}; };
const SystemHealth = ({ startTime, uptime, statuses, isLoading }: SystemHealthProps) => { const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpdatedAt }: SystemHealthProps) => {
const updatedDate = dateUpdatedAt ? new Date(dateUpdatedAt).toLocaleString() : null;
// console.log(statuses);
if (isError) {
return <span className="text-red-500">Error loading system health.</span>;
}
if (isLoading) { if (isLoading) {
return <span className="text-slate-500">Loading system health…</span>; return <span className="text-slate-500">Loading system health…</span>;
} }
return ( return (
<div className="h-100 md:h-70"> <div className="h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
<div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between"> <div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between">
<div> <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
<h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span> <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
</div> </div>
<div> <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
<h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span> <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
</div> </div>
</div> </div>
<div className="h-50 overflow-auto">
<div>
{statuses?.map((status: SystemHealthStatus) => ( {statuses?.map((status: SystemHealthStatus) => (
<div className="border border-gray-700 p-4 rounded-md m-2 flex justify-between"> <div className="border border-gray-700 p-4 rounded-md m-2 flex justify-between" key={status.id}>
<span>{status.id}</span> <Badge text={status.tags[0]} /> <span>{status.id}</span> <Badge text={status.tags[0]} />
</div> </div>
))} ))}
</div> </div>
<div className="border-t border-gray-500">
<small className="italic text-gray-400">{`Last refeshed ${updatedDate}`}</small>
</div>
</div> </div>
); );
}; };

12
src/features/dashboard/components/SystemOverview.tsx
View File

@@ -11,10 +11,20 @@ const SystemOverview = () => {
const uptime = query?.data?.UptimeHumane; const uptime = query?.data?.UptimeHumane;
const statuses = query?.data?.Status; const statuses = query?.data?.Status;
const isLoading = query?.isLoading; const isLoading = query?.isLoading;
const isError = query?.isError;
const dateUpdatedAt = query?.dataUpdatedAt;
return ( return (
<Card className="p-4"> <Card className="p-4">
<CardHeader title="System Health" refetch={query?.refetch} icon={faArrowsRotate} /> <CardHeader title="System Health" refetch={query?.refetch} icon={faArrowsRotate} />
<SystemHealth startTime={startTime} uptime={uptime} statuses={statuses} isLoading={isLoading} /> <SystemHealth
startTime={startTime}
uptime={uptime}
statuses={statuses}
isLoading={isLoading}
isError={isError}
dateUpdatedAt={dateUpdatedAt}
/>
</Card> </Card>
); );
}; };

3
src/features/dashboard/hooks/useGetSystemHealth.ts
View File

@@ -1,7 +1,8 @@
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { CAMBASE } from "../../../utils/config";
const fetchData = async () => { const fetchData = async () => {
const response = await fetch(`http://100.115.148.59/api/system-health`); const response = await fetch(`${CAMBASE}/api/system-health`);
if (!response.ok) throw new Error("Cannot get System overview"); if (!response.ok) throw new Error("Cannot get System overview");
return response.json(); return response.json();
}; };

4
src/features/output/components/BearerTypeFields.tsx
View File

@@ -1,6 +1,8 @@
import { Field } from "formik"; import { Field, useFormikContext } from "formik";
import type { FormTypes } from "../../../types/types";
const BearerTypeFields = () => { const BearerTypeFields = () => {
useFormikContext<FormTypes>();
return ( return (
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between">
<label htmlFor="format" className="text-xl"> <label htmlFor="format" className="text-xl">

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

@@ -3,14 +3,22 @@ import Card from "../../../ui/Card";
import CardHeader from "../../../ui/CardHeader"; import CardHeader from "../../../ui/CardHeader";
import ChannelFields from "./ChannelFields"; import ChannelFields from "./ChannelFields";
import type { FormTypes } from "../../../types/types"; import type { FormTypes } from "../../../types/types";
import { useGetBearerConfig } from "../hooks/useBearer";
const ChannelCard = () => { const ChannelCard = () => {
const { values, errors, touched } = useFormikContext<FormTypes>(); const { values, errors, touched, setFieldValue } = useFormikContext<FormTypes>();
const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
const outputData = bearerQuery?.data;
return ( return (
<Card className="p-4 h-150 md:h-full"> <Card className="p-4 h-150 md:h-full">
<CardHeader title={`Channel (${values?.format})`} /> <CardHeader title={`Channel (${values?.format})`} />
<ChannelFields errors={errors} touched={touched} values={values} /> <ChannelFields
errors={errors}
touched={touched}
values={values}
outputData={outputData}
onSetFieldValue={setFieldValue}
/>
<button <button
type="submit" 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"

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

@@ -1,5 +1,7 @@
import { Field } from "formik"; import { Field } from "formik";
import type { FormTypes, InitialValuesFormErrors } from "../../../types/types"; import type { FormTypes, InitialValuesFormErrors, OutputDataResponse } from "../../../types/types";
import { useEffect, useMemo } from "react";
import { useOptionalConstants } from "../hooks/useOptionalConstants";
type ChannelFieldsProps = { type ChannelFieldsProps = {
values: FormTypes; values: FormTypes;
@@ -8,220 +10,260 @@ type ChannelFieldsProps = {
connectTimeoutSeconds?: boolean | undefined; connectTimeoutSeconds?: boolean | undefined;
readTimeoutSeconds?: boolean | undefined; readTimeoutSeconds?: boolean | undefined;
}; };
outputData?: OutputDataResponse;
onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
}; };
const ChannelFields = ({ errors, touched, values }: ChannelFieldsProps) => { const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || "");
const optionalConstants = optionalConstantsQuery?.data;
const channelFieldsObject = useMemo(() => {
return {
connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
readTimeoutSeconds: outputData?.propReadTimeoutSeconds?.value || "15",
backOfficeURL: outputData?.propBackofficeURL?.value || "",
username: outputData?.propUsername?.value || "",
password: outputData?.propPassword?.value || "",
SCID: optionalConstants?.propSourceIdentifier?.value || "",
timestampSource: optionalConstants?.propTimeZoneType?.value || "UTC",
GPSFormat: optionalConstants?.propGpsFormat?.value || "Minutes",
FFID: optionalConstants?.propFeedIdentifier?.value || "",
};
}, [
optionalConstants?.propFeedIdentifier?.value,
optionalConstants?.propGpsFormat?.value,
optionalConstants?.propSourceIdentifier?.value,
optionalConstants?.propTimeZoneType?.value,
outputData?.propBackofficeURL?.value,
outputData?.propConnectTimeoutSeconds?.value,
outputData?.propPassword?.value,
outputData?.propReadTimeoutSeconds?.value,
outputData?.propUsername?.value,
]);
useEffect(() => {
for (const [key, value] of Object.entries(channelFieldsObject)) {
onSetFieldValue(key, value);
}
}, [channelFieldsObject, onSetFieldValue, outputData]);
return ( return (
<div className="flex flex-col gap-4 p-4"> <div className="flex flex-col gap-4 p-4">
<div className="flex flex-row justify-between"> {values.format.toLowerCase() !== "ftp" ? (
<label htmlFor="backoffice" className="block mb-2 font-medium">
Back Office URL
</label>
<Field
name={"backOfficeURL"}
type="text"
id="backoffice"
placeholder="https://www.backoffice.com"
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="username" className="block mb-2 font-medium">
Username
</label>
<Field
name={"username"}
type="text"
id="username"
placeholder="Back office username"
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="password">Password</label>
<Field
name={"password"}
type={"password"}
id="password"
placeholder="Back office password"
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
<Field
name={"readTimeoutSeconds"}
type="number"
id="readTimeoutSeconds"
placeholder="https://example.com"
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
<Field
name={"connectTimeoutSeconds"}
type="number"
id="connectTimeoutSeconds"
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="overviewQuality">Overview quality and scale</label>
<Field
name={"overviewQuality"}
as="select"
id="overviewQuality"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
<option value={"HIGH"}>High</option>
<option value={"MEDIUM"}>Medium</option>
<option value={"LOW"}>Low</option>
</Field>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="cropSizeFactor">Crop Size Factor</label>
<Field
name={"cropSizeFactor"}
as="select"
id="cropSizeFactor"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
<option value={"FULL"}>Full</option>
<option value={"3/4"}>3/4</option>
<option value={"1/2"}>1/2</option>
<option value={"1/4"}>1/4</option>
</Field>
</div>
{values.format.toLowerCase() === "utmc" && (
<> <>
<div className="border-b border-gray-500 my-3">
<h2 className="font-bold">{values.format} Constants</h2>
</div>
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between">
<label htmlFor="SCID">Source ID / Camera ID</label> <label htmlFor="backoffice" className="block mb-2 font-medium">
Back Office URL
</label>
<Field <Field
name={"SCID"} name={"backOfficeURL"}
type="text" type="text"
id="SCID" id="backoffice"
placeholder="DEF345" placeholder="https://www.backoffice.com"
className={`p-1.5 border ${ className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/> />
</div> </div>
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between">
<label htmlFor="timestampSource">Timestamp Source</label> <label htmlFor="username" className="block mb-2 font-medium">
Username
</label>
<Field <Field
name={"timestampSource"} name={"username"}
type="text"
id="username"
placeholder="Back office username"
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="password">Password</label>
<Field
name={"password"}
type={"password"}
id="password"
placeholder="Back office password"
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
<Field
name={"readTimeoutSeconds"}
type="number"
id="readTimeoutSeconds"
placeholder="https://example.com"
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
<Field
name={"connectTimeoutSeconds"}
type="number"
id="connectTimeoutSeconds"
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="overviewQuality">Overview quality and scale</label>
<Field
name={"overviewQuality"}
as="select" as="select"
id="timestampSource" id="overviewQuality"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60" className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
> >
<option value={"UTC"}>UTC</option> <option value={"HIGH"}>High</option>
<option value={"local"}>Local</option> <option value={"MEDIUM"}>Medium</option>
<option value={"LOW"}>Low</option>
</Field> </Field>
</div> </div>
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between">
<label htmlFor="GPSFormat">GPS Format</label> <label htmlFor="cropSizeFactor">Crop Size Factor</label>
<Field <Field
name={"GPSFormat"} name={"cropSizeFactor"}
as="select" as="select"
id="GPSFormat" id="cropSizeFactor"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60" className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
> >
<option value={"Minutes"}>Minutes</option> <option value={"FULL"}>Full</option>
<option value={"Decimal Degrees"}>Decimal degrees</option> <option value={"3/4"}>3/4</option>
<option value={"1/2"}>1/2</option>
<option value={"1/4"}>1/4</option>
</Field> </Field>
</div> </div>
{values.format.toLowerCase() === "utmc" && (
<>
<div className="border-b border-gray-500 my-3">
<h2 className="font-bold">{values.format} Constants</h2>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="SCID">Source ID / Camera ID</label>
<Field
name={"SCID"}
type="text"
id="SCID"
placeholder="DEF345"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="timestampSource">Timestamp Source</label>
<Field
name={"timestampSource"}
as="select"
id="timestampSource"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
<option value={"UTC"}>UTC</option>
<option value={"local"}>Local</option>
</Field>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="GPSFormat">GPS Format</label>
<Field
name={"GPSFormat"}
as="select"
id="GPSFormat"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
<option value={"Minutes"}>Minutes</option>
<option value={"Decimal Degrees"}>Decimal degrees</option>
</Field>
</div>
</>
)}
{values.format?.toLowerCase() === "bof2" && (
<>
<div className="space-y-3">
<div className="border-b border-gray-500 my-3">
<h2 className="font-bold">{values.format} Constants</h2>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="FFID">Feed ID / Force ID</label>
<Field
name={"FFID"}
type="text"
id="FFID"
placeholder="ABC123"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="SCID">Source ID / Camera ID</label>
<Field
name={"SCID"}
type="text"
id="SCID"
placeholder="DEF345"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="timestampSource">Timestamp Source</label>
<Field
name={"timestampSource"}
as="select"
id="timestampSource"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
<option value={"UTC"}>UTC</option>
<option value={"LOCAL"}>Local</option>
</Field>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="GPSFormat">GPS Format</label>
<Field
name={"GPSFormat"}
as="select"
id="GPSFormat"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
<option value={"Minutes"}>Minutes</option>
<option value={"Decimal Degrees"}>Decimal degrees</option>
</Field>
</div>
</div>
<div className="space-y-3">
<div className="border-b border-gray-500 my-3">
<h2 className="font-bold">{values.format} Lane ID Config</h2>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="LID1">Lane ID 1 (Camera A)</label>
<Field
name={"LID1"}
type="text"
id="LID1"
placeholder="10"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="LID2">Lane ID 2 (Camera B)</label>
<Field
name={"LID2"}
type="text"
id="LID2"
placeholder="20"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</div>
</div>
</>
)}
</> </>
)} ) : (
{values.format?.toLowerCase() === "bof2" && ( <></>
<>
<div className="space-y-3">
<div className="border-b border-gray-500 my-3">
<h2 className="font-bold">{values.format} Constants</h2>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="FFID">Feed ID / Force ID</label>
<Field
name={"FFID"}
type="text"
id="FFID"
placeholder="ABC123"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="SCID">Source ID / Camera ID</label>
<Field
name={"SCID"}
type="text"
id="SCID"
placeholder="DEF345"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="timestampSource">Timestamp Source</label>
<Field
name={"timestampSource"}
as="select"
id="timestampSource"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
<option value={"UTC"}>UTC</option>
<option value={"local"}>Local</option>
</Field>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="GPSFormat">GPS Format</label>
<Field
name={"GPSFormat"}
as="select"
id="GPSFormat"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
<option value={"Minutes"}>Minutes</option>
<option value={"Decimal Degrees"}>Decimal degrees</option>
</Field>
</div>
</div>
<div className="space-y-3">
<div className="border-b border-gray-500 my-3">
<h2 className="font-bold">{values.format} Lane ID Config</h2>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="LID1">Lane ID 1 (Camera A)</label>
<Field
name={"LID1"}
type="text"
id="LID1"
placeholder="10"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</div>
<div className="flex flex-row justify-between">
<label htmlFor="LID2">Lane ID 2 (Camera B)</label>
<Field
name={"LID2"}
type="text"
id="LID2"
placeholder="20"
className={`p-1.5 border ${
errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
} rounded-lg w-full md:w-60`}
/>
</div>
</div>
</>
)} )}
</div> </div>
); );

44
src/features/output/components/Output.tsx
View File

@@ -1,44 +0,0 @@
import { Formik, Form } from "formik";
import BearerTypeCard from "./BearerTypeCard";
import ChannelCard from "./ChannelCard";
import type { FormTypes } from "../../../types/types";
const Output = () => {
const handleSubmit = (values: FormTypes) => {
console.log(values);
};
const inititalValues: FormTypes = {
format: "JSON",
enabled: true,
backOfficeURL: "",
username: "",
password: "",
connectTimeoutSeconds: Number(5),
readTimeoutSeconds: Number(15),
overviewQuality: "HIGH",
cropSizeFactor: "3/4",
// Bof2 -optional constants
FFID: "",
SCID: "",
timestampSource: "UTC",
GPSFormat: "Minutes",
//BOF2 - optional Lane IDs
laneId: "",
LID1: "",
LID2: "",
};
return (
<Formik initialValues={inititalValues} onSubmit={handleSubmit}>
<Form className="grid grid-cols-1 md:grid-cols-2">
<BearerTypeCard />
<ChannelCard />
</Form>
</Formik>
);
};
export default Output;

105
src/features/output/components/OutputForms.tsx Normal file
View File

@@ -0,0 +1,105 @@
import { Formik, Form } from "formik";
import BearerTypeCard from "./BearerTypeCard";
import ChannelCard from "./ChannelCard";
import type { BearerTypeFields, FormTypes, OptionalBOF2Constants, OptionalUTMCConstants } from "../../../types/types";
import { usePostBearerConfig } from "../hooks/useBearer";
import { useDispatcherConfig } from "../hooks/useDispatcherConfig";
import { useOptionalConstants } from "../hooks/useOptionalConstants";
const OutputForms = () => {
const { bearerMutation } = usePostBearerConfig();
const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
const isLoading = dispatcherQuery?.isLoading;
const format = dispatcherQuery?.data?.propFormat?.value;
const { optionalConstantsQuery, optionalConstantsMutation } = useOptionalConstants(format?.toLowerCase());
const FFID = optionalConstantsQuery?.data?.propFeedIdentifier?.value;
const SCID = optionalConstantsQuery?.data?.propSourceIdentifier?.value;
const timestampSource = optionalConstantsQuery?.data?.propTimeZoneType?.value;
const gpsFormat = optionalConstantsQuery?.data?.propGpsFormat?.value;
const inititalValues: FormTypes = {
format: format ?? "JSON",
enabled: true,
backOfficeURL: "",
username: "",
password: "",
connectTimeoutSeconds: Number(5),
readTimeoutSeconds: Number(15),
overviewQuality: "HIGH",
cropSizeFactor: "3/4",
// optional constants
FFID: FFID ?? "",
SCID: SCID ?? "",
timestampSource: timestampSource ?? "UTC",
GPSFormat: gpsFormat ?? "Minutes",
//BOF2 - optional Lane IDs
laneId: "",
LID1: "",
LID2: "",
// ftp - fields
};
const handleSubmit = async (values: FormTypes) => {
const bearerTypeFields = {
format: values.format,
enabled: values.enabled,
};
const bearerFields: BearerTypeFields = {
format: values.format,
enabled: values.enabled,
backOfficeURL: values.backOfficeURL,
username: values.username,
password: values.password,
connectTimeoutSeconds: values.connectTimeoutSeconds,
readTimeoutSeconds: values.readTimeoutSeconds,
overviewQuality: values.overviewQuality,
cropSizeFactor: values.cropSizeFactor,
};
const result = await dispatcherMutation.mutateAsync(bearerTypeFields);
if (result?.id) {
await bearerMutation.mutateAsync(bearerFields);
if (values.format === "BOF2") {
const optionalBOF2Fields: OptionalBOF2Constants = {
format: values.format,
FFID: values.FFID,
SCID: values.SCID,
timestampSource: values.timestampSource,
GPSFormat: values.GPSFormat,
};
await optionalConstantsMutation.mutateAsync(optionalBOF2Fields);
}
if (values.format === "UTMC") {
const optionalUTMCFields: OptionalUTMCConstants = {
format: values.format,
SCID: values.SCID,
timestampSource: values.timestampSource,
GPSFormat: values.GPSFormat,
};
await optionalConstantsMutation.mutateAsync(optionalUTMCFields);
}
}
};
if (isLoading) {
return <div>Loading...</div>;
}
return (
<Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
<Form className="grid grid-cols-1 md:grid-cols-2">
<BearerTypeCard />
<ChannelCard />
</Form>
</Formik>
);
};
export default OutputForms;

66
src/features/output/hooks/useBearer.ts Normal file
View File

@@ -0,0 +1,66 @@
import { useMutation, useQuery } from "@tanstack/react-query";
import type { BearerTypeFields } from "../../../types/types";
import { CAMBASE } from "../../../utils/config";
const fetchBearerConfig = async (bearerConfig: string) => {
const response = await fetch(`${CAMBASE}/api/fetch-config?id=Dispatcher0-${bearerConfig}`, {
method: "GET",
});
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
};
const postBearerConfig = async (config: BearerTypeFields) => {
const channelConfigPayload = {
id: `Dispatcher0-${config.format.toLowerCase()}`,
fields: [
{
property: "propBackofficeURL",
value: config.backOfficeURL,
},
{
property: "propConnectTimeoutSeconds",
value: config.connectTimeoutSeconds,
},
{
property: "propPassword",
value: config.password,
},
{
property: "propReadTimeoutSeconds",
value: config.readTimeoutSeconds,
},
{
property: "propUsername",
value: config.username,
},
],
};
const response = await fetch(`${CAMBASE}/api/update-config`, {
method: "POST",
body: JSON.stringify(channelConfigPayload),
});
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
};
export const usePostBearerConfig = () => {
const bearerMutation = useMutation({
mutationFn: (query: BearerTypeFields) => postBearerConfig(query),
mutationKey: ["outputs"],
});
return { bearerMutation };
};
export const useGetBearerConfig = (bearerConfig: string) => {
const bearerQuery = useQuery({
queryKey: ["outputs", bearerConfig],
queryFn: () => fetchBearerConfig(bearerConfig),
});
return { bearerQuery };
};

48
src/features/output/hooks/useDispatcherConfig.ts Normal file
View File

@@ -0,0 +1,48 @@
import { useQuery, useMutation } from "@tanstack/react-query";
import type { DispatcherConfig } from "../../../types/types";
import { CAMBASE } from "../../../utils/config";
const getDispatcherConfig = async () => {
const response = await fetch(`${CAMBASE}/api/fetch-config?id=Dispatcher0`);
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
};
const postDispatcherConfig = async (config: DispatcherConfig) => {
const updateConfigPayload = {
id: "Dispatcher0",
fields: [
{
property: "propEnabled",
value: config.enabled,
},
{
property: "propFormat",
value: config.format,
},
],
};
const response = await fetch(`${CAMBASE}/api/update-config`, {
method: "POST",
body: JSON.stringify(updateConfigPayload),
});
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
};
export const useDispatcherConfig = () => {
const dispatcherQuery = useQuery({
queryKey: ["dispatcherConfig"],
queryFn: () => getDispatcherConfig(),
});
const dispatcherMutation = useMutation({
mutationKey: ["postDispatcherConfig"],
mutationFn: (config: DispatcherConfig) => postDispatcherConfig(config),
});
return { dispatcherQuery, dispatcherMutation };
};

63
src/features/output/hooks/useOptionalConstants.ts Normal file
View File

@@ -0,0 +1,63 @@
import { useQuery, useMutation } from "@tanstack/react-query";
import type { OptionalBOF2Constants } from "../../../types/types";
import { CAMBASE } from "../../../utils/config";
const fetchOptionalConstants = async (format: string) => {
if (!format || format === "json") return null;
const response = await fetch(`${CAMBASE}/api/fetch-config?id=Dispatcher0-${format}-constants`);
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
};
const postOptionalConstants = async (config: OptionalBOF2Constants) => {
const fields = [
{
property: "propSourceIdentifier",
value: config?.SCID,
},
{
property: "propTimeZoneType",
value: config?.timestampSource,
},
{
property: "propGpsFormat",
value: config?.GPSFormat,
},
];
if (config.FFID) {
fields.push({
property: "propFeedIdentifier",
value: config.FFID,
});
}
const updateConfigPayload = {
id: `Dispatcher0-${config.format?.toLowerCase()}-constants`,
fields: fields,
};
const response = await fetch(`${CAMBASE}/api/update-config`, {
method: "POST",
body: JSON.stringify(updateConfigPayload),
});
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
};
export const useOptionalConstants = (format: string) => {
const optionalConstantsQuery = useQuery({
queryKey: ["optionalConstants", format],
queryFn: () => fetchOptionalConstants(format),
enabled: !!format && format !== "json",
});
const optionalConstantsMutation = useMutation({
mutationKey: ["postOptionalConstants"],
mutationFn: postOptionalConstants,
});
return { optionalConstantsQuery, optionalConstantsMutation };
};

4
src/routes/output.tsx
View File

@@ -1,5 +1,5 @@
import { createFileRoute } from "@tanstack/react-router"; import { createFileRoute } from "@tanstack/react-router";
import Output from "../features/output/components/Output"; import OutputForms from "../features/output/components/OutputForms";
export const Route = createFileRoute("/output")({ export const Route = createFileRoute("/output")({
component: RouteComponent, component: RouteComponent,
@@ -8,7 +8,7 @@ export const Route = createFileRoute("/output")({
function RouteComponent() { function RouteComponent() {
return ( return (
<div> <div>
<Output /> <OutputForms />
</div> </div>
); );
} }

34
src/types/types.ts
View File

@@ -57,7 +57,41 @@ export type InitialValuesFormErrors = {
}; };
export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs; export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs;
type FieldProperty = {
datatype: string;
value: string;
};
export type OutputDataResponse = {
id: string;
configHash: string;
} & Record<string, FieldProperty>;
export type PaintedCell = { export type PaintedCell = {
colour: string; colour: string;
}; };
export type DispatcherConfig = {
format: string;
enabled: boolean;
};
export type OptionalBOF2Constants = {
format?: string;
FFID?: string;
SCID?: string;
timestampSource?: string;
GPSFormat?: string;
};
export type OptionalUTMCConstants = {
format?: string;
SCID?: string;
timestampSource?: string;
GPSFormat?: string;
};
export type OptionalBOF2LaneIDs = {
laneId?: string;
LID1?: string;
LID2?: string;
LID3?: string;
};

2
src/ui/CardHeader.tsx
View File

@@ -21,7 +21,7 @@ const CardHeader = ({ title, status, icon, refetch }: CameraOverviewHeaderProps)
{status && <StatusIndicators status={status} />} {status && <StatusIndicators status={status} />}
{title} {title}
</h2> </h2>
{icon && <FontAwesomeIcon icon={icon} className="size-4" onClick={refetch} />} {icon && <FontAwesomeIcon icon={icon} className="hover:cursor-pointer" onClick={refetch} />}
</div> </div>
</div> </div>
); );

28
src/ui/Header.tsx
View File

@@ -1,29 +1,39 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGaugeHigh } from "@fortawesome/free-solid-svg-icons";
import { Link } from "@tanstack/react-router"; import { Link } from "@tanstack/react-router";
import Logo from "/MAV.svg"; import Logo from "/MAV.svg";
const Header = () => { const Header = () => {
return ( return (
<header className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between"> <header className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center">
<div className="w-28"> <div className="w-28">
<Link to={"/"}> <Link to={"/"}>
<img src={Logo} alt="Logo" width={150} height={150} /> <img src={Logo} alt="Logo" width={150} height={150} />
</Link> </Link>
</div> </div>
<div className="flex gap-4"> <div className="flex gap-4 text-lg items-center">
<Link to="/" className="[&.active]:font-bold"> <Link
<FontAwesomeIcon icon={faGaugeHigh} /> to="/"
className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
>
{/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
Dashboard Dashboard
</Link> </Link>
<Link to="/baywatch" className="[&.active]:font-bold"> <Link
to="/baywatch"
className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
>
Cameras Cameras
</Link> </Link>
<Link to="/output" className="[&.active]:font-bold"> <Link
to="/output"
className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
>
Output Output
</Link> </Link>
<Link to="/settings" className="[&.active]:font-bold"> <Link
to="/settings"
className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
>
Settings Settings
</Link> </Link>
</div> </div>

1
src/utils/config.ts Normal file
View File

@@ -0,0 +1 @@
export const CAMBASE = import.meta.env.VITE_BASEURL;