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

develop #22

Merged
TobaOjo merged 74 commits from develop into main 2025-12-09 15:54:53 +00:00
Conversation 0 Commits 74 Files Changed 82 +1294 -36
38 changed files with 1294 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6ecb005417 - Show all commits

1
package.json
View File

@@ -19,6 +19,7 @@
"@tanstack/react-router": "^1.136.18",
"@tanstack/react-router-devtools": "^1.136.18",
"clsx": "^2.1.1",
"formik": "^2.4.9",
"konva": "^10.0.11",
"react": "^19.2.0",
"react-dom": "^19.2.0",

14
src/features/output/components/BearerTypeCard.tsx Normal file
View File

@@ -0,0 +1,14 @@
import Card from "../../../ui/Card";
import CardHeader from "../../../ui/CardHeader";
import BearerTypeFields from "./BearerTypeFields";
const BearerTypeCard = () => {
return (
<Card className="p-4 h-50">
<CardHeader title={"Bearer Type"} />
<BearerTypeFields />
</Card>
);
};
export default BearerTypeCard;

32
src/features/output/components/BearerTypeFields.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { Field } from "formik";
const BearerTypeFields = () => {
return (
<div className="flex flex-row justify-between">
<label htmlFor="format" className="text-xl">
Format
</label>
<Field
as="select"
name="format"
id="format"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
<option key={"JSON"} value={"JSON"}>
JSON
</option>
<option key={"BOF2"} value={"BOF2"}>
BOF2
</option>
<option key={"UTMC"} value={"UTMC"}>
UTMC
</option>
<option key={"FTP"} value={"FTP"}>
FTP
</option>
</Field>
</div>
);
};
export default BearerTypeFields;

24
src/features/output/components/ChannelCard.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { useFormikContext } from "formik";
import Card from "../../../ui/Card";
import CardHeader from "../../../ui/CardHeader";
import ChannelFields from "./ChannelFields";
import type { FormTypes } from "../../../types/types";
const ChannelCard = () => {
const { values, errors, touched } = useFormikContext<FormTypes>();
return (
<Card className="p-4 h-150 md:h-full">
<CardHeader title={`Channel (${values?.format})`} />
<ChannelFields errors={errors} touched={touched} values={values} />
<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"
>
{"Save Changes"}
</button>
</Card>
);
};
export default ChannelCard;

230
src/features/output/components/ChannelFields.tsx Normal file
View File

@@ -0,0 +1,230 @@
import { Field } from "formik";
import type { FormTypes, InitialValuesFormErrors } from "../../../types/types";
type ChannelFieldsProps = {
values: FormTypes;
errors: InitialValuesFormErrors;
touched: {
connectTimeoutSeconds?: boolean | undefined;
readTimeoutSeconds?: boolean | undefined;
};
};
const ChannelFields = ({ errors, touched, values }: ChannelFieldsProps) => {
return (
<div className="flex flex-col gap-4 p-4">
<div className="flex flex-row justify-between">
<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">
<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>
</>
)}
</div>
);
};
export default ChannelFields;

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

@@ -0,0 +1,44 @@
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;

13
src/routes/output.tsx
View File

@@ -1,9 +1,14 @@
import { createFileRoute } from '@tanstack/react-router'
import { createFileRoute } from "@tanstack/react-router";
import Output from "../features/output/components/Output";
export const Route = createFileRoute('/output')({
export const Route = createFileRoute("/output")({
component: RouteComponent,
})
});
function RouteComponent() {
return <div>Hello "/output"!</div>
return (
<div>
<Output />
</div>
);
}

36
src/types/types.ts
View File

@@ -21,3 +21,39 @@ export type SystemHealthStatus = {
id: string;
tags: string[];
};
export type BearerTypeFields = {
format: string;
enabled: boolean;
backOfficeURL: string;
username: string;
password: string;
connectTimeoutSeconds: number;
readTimeoutSeconds: number;
overviewQuality: string;
cropSizeFactor: string;
};
export type OptionalConstants = {
FFID?: string;
SCID?: string;
timestampSource?: string;
GPSFormat?: string;
};
export type OptionalLaneIDs = {
laneId?: string;
LID1?: string;
LID2?: string;
LID3?: string;
};
export type InitialValuesFormErrors = {
backOfficeURL?: string;
username?: string;
password?: string;
connectTimeoutSeconds?: string;
readTimeoutSeconds?: string;
};
export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs;

54
yarn.lock
View File

@@ -994,6 +994,13 @@
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
"@types/hoist-non-react-statics@^3.3.1":
version "3.3.7"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz#306e3a3a73828522efa1341159da4846e7573a6c"
integrity sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==
dependencies:
hoist-non-react-statics "^3.3.0"
"@types/json-schema@^7.0.15":
version "7.0.15"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
@@ -1351,6 +1358,11 @@ deep-is@^0.1.3:
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
deepmerge@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
detect-libc@^2.0.3:
version "2.1.2"
resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.1.2.tgz#689c5dcdc1900ef5583a4cb9f6d7b473742074ad"
@@ -1601,6 +1613,20 @@ flatted@^3.2.9:
resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.3.tgz#67c8fad95454a7c7abebf74bb78ee74a44023358"
integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==
formik@^2.4.9:
version "2.4.9"
resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.9.tgz#7e5b81e9c9e215d0ce2ac8fed808cf7fba0cd204"
integrity sha512-5nI94BMnlFDdQRBY4Sz39WkhxajZJ57Fzs8wVbtsQlm5ScKIR1QLYqv/ultBnobObtlUyxpxoLodpixrsf36Og==
dependencies:
"@types/hoist-non-react-statics" "^3.3.1"
deepmerge "^2.1.1"
hoist-non-react-statics "^3.3.0"
lodash "^4.17.21"
lodash-es "^4.17.21"
react-fast-compare "^2.0.1"
tiny-warning "^1.0.2"
tslib "^2.0.0"
fraction.js@^5.3.4:
version "5.3.4"
resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-5.3.4.tgz#8c0fcc6a9908262df4ed197427bdeef563e0699a"
@@ -1679,6 +1705,13 @@ hermes-parser@^0.25.1:
dependencies:
hermes-estree "0.25.1"
hoist-non-react-statics@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
dependencies:
react-is "^16.7.0"
ignore@^5.2.0:
version "5.3.2"
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
@@ -1886,11 +1919,21 @@ locate-path@^6.0.0:
dependencies:
p-locate "^5.0.0"
lodash-es@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
lodash.merge@^4.6.2:
version "4.6.2"
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
lodash@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -2087,7 +2130,12 @@ react-dom@^19.2.0:
dependencies:
scheduler "^0.27.0"
react-is@^16.13.1:
react-fast-compare@^2.0.1:
version "2.0.4"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -2287,7 +2335,7 @@ tiny-invariant@^1.3.3:
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
tiny-warning@^1.0.3:
tiny-warning@^1.0.2, tiny-warning@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -2312,7 +2360,7 @@ ts-api-utils@^2.1.0:
resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-2.1.0.tgz#595f7094e46eed364c13fd23e75f9513d29baf91"
integrity sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==
tslib@^2.0.1, tslib@^2.4.0:
tslib@^2.0.0, tslib@^2.0.1, tslib@^2.4.0:
version "2.8.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==