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

- minor bugfixes

Browse Source 
- added developer modal for viewing app data
This commit is contained in:
Toba Ojo
2025-12-12 12:18:17 +00:00
parent b38fbe132b
commit 3fbafbbcc7
10 changed files with 163 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "bayiq-ui",
"private": true,
"version": "0.0.0",
"version": "1.0.1",
"type": "module",
"scripts": {
"dev": "vite",

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

@@ -54,7 +54,7 @@ const RegionSelector = ({
const test = socket.data;
if (!socket.data) return null;
if (!test || !test.magnificationLevel) return "0x";
if (!test || !test.magnificationLevel) return "1x";
return test?.magnificationLevel;
};
@@ -238,7 +238,7 @@ const RegionSelector = ({
/>
<div className="flex flex-col space-y-3">
<span className="text-xl">Digital Zoom mode</span>
<pre className="text-xs text-gray-400">{`current Zoom: ${getMagnificationLevel()}`}</pre>
<pre className="text-xs text-gray-400">{`Current Zoom: ${getMagnificationLevel()}`}</pre>
{mode === "zoom" && <small className={`text-gray-400 italic`}>Click image to digitally zoom</small>}
</div>
</label>

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

@@ -206,7 +206,7 @@ const VideoFeedGridPainter = () => {
onMouseLeave={handleStageMouseUp}
className={`max-w-[55%] md:row-span-3 md:col-span-3 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
mode === "eraser" ? "hover:cursor-pointer" : ""
}`}
} ${mode === "zoom" ? "hover:cursor-zoom-in" : ""}`}
>
<Layer
scaleX={scale}

6
src/features/cameras/hooks/useGetvideoSnapshots.ts
View File

@@ -24,7 +24,11 @@ export const useCreateVideoSnapshot = () => {
if (!snapShot) return;
try {
const bitmap = await createImageBitmap(snapShot);
const bitmap = await createImageBitmap(snapShot, {
resizeWidth: 720,
resizeHeight: 1080,
resizeQuality: "high",
});
if (!bitmap) return;
latestBitmapRef.current = bitmap;
} catch (error) {

17
src/hooks/useGetVersions.ts Normal file
View File

@@ -0,0 +1,17 @@
import { useQuery } from "@tanstack/react-query";
import { CAMBASE } from "../utils/config";
const fetchVersions = async () => {
const response = await fetch(`${CAMBASE}/api/versions`);
if (!response.ok) throw new Error("Cannot get Versions");
return response.json();
};
export const useGetVersions = () => {
const versionsQuery = useQuery({
queryKey: ["getversions"],
queryFn: fetchVersions,
});
return { versionsQuery };
};

13
src/types/types.ts
View File

@@ -243,3 +243,16 @@ export type BlackBoardOptions = {
};
export type CameraZoomConfig = { cameraFeedID: string; zoomLevel: number };
export type versionInfo = {
version: string;
revision: string;
buildtime: string;
appname: string;
MAC: string;
timeStamp: number;
UUID: string;
proquint: string;
"Serial No.": string;
"Model No.": string;
};

76
src/ui/DevModal.tsx Normal file
View File

@@ -0,0 +1,76 @@
import type { versionInfo } from "../types/types";
import ModalComponent from "./ModalComponent";
type DevModalProps = {
isDevModalOpen: boolean;
handleClose: () => void;
data: versionInfo;
};
const DevModal = ({ isDevModalOpen, handleClose, data }: DevModalProps) => {
const uiName = __APP_NAME__;
const uiVersion = __APP_VERSION__;
const commitID = __GIT_COMMIT__;
const commitTimeStamp = __GIT_TIMESTAMP__;
return (
<ModalComponent isModalOpen={isDevModalOpen} close={handleClose}>
<div className="space-y-6">
<div className="border-b border-gray-600 pb-3">
<h2 className="text-2xl font-bold text-gray-100">System Information</h2>
<p className="text-sm text-gray-400 mt-1">Application version details</p>
</div>
<div className="space-y-3">
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide">Frontend (UI)</h3>
<div className="bg-gray-800/50 rounded-lg p-4 space-y-3">
<div className="flex justify-between items-center border-b border-gray-700 pb-2">
<span className="text-gray-400 text-sm">Name</span>
<span className="text-gray-200 font-mono font-semibold">{uiName}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-400 text-sm">Version</span>
<span className="text-gray-200 font-mono font-semibold">{uiVersion}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-400 text-sm">Revision (Commit ID)</span>
<span className="bg-[#233241] p-2 rounded-md text-gray-200 font-mono text-sm">{commitID}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-400 text-sm">Build Time</span>
<span className="text-gray-200 font-mono text-sm">{commitTimeStamp}</span>
</div>
</div>
</div>
<div className="space-y-3">
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide">Backend</h3>
<div className="bg-gray-800/50 rounded-lg p-4 space-y-3">
<div className="flex justify-between items-center border-b border-gray-700 pb-2">
<span className="text-gray-400 text-sm"> Name</span>
<span className="text-gray-200 font-mono font-semibold">{data?.appname || "N/A"}</span>
</div>
<div className="flex justify-between items-center pb-2">
<span className="text-gray-400 text-sm">Version</span>
<span className="text-gray-200 font-mono font-semibold">{data?.version || "N/A"}</span>
</div>
<div className="flex justify-between items-center pb-2">
<span className="text-gray-400 text-sm">Revision (Commit ID)</span>
<span className="bg-[#233241] p-2 rounded-md text-gray-200 font-mono text-sm">
{data?.revision || "N/A"}
</span>
</div>
<div className="flex justify-between items-center pb-2">
<span className="text-gray-400 text-sm">Build Time</span>
<span className="text-gray-200 font-mono text-sm">{data?.buildtime || "N/A"}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-400 text-sm">MAC Address</span>
<span className="text-gray-200 font-mono text-sm">{data?.MAC || "N/A"}</span>
</div>
</div>
</div>
</div>
</ModalComponent>
);
};
export default DevModal;

16
src/ui/Footer.tsx
View File

@@ -1,11 +1,25 @@
import { useState } from "react";
import Logo from "/MAV.svg";
import DevModal from "./DevModal";
import { useGetVersions } from "../hooks/useGetVersions";
const Footer = () => {
const [isDevModalOpen, setDevModalOpen] = useState(false);
const { versionsQuery } = useGetVersions();
const versionData = versionsQuery?.data;
const handleClick = () => {
setDevModalOpen(true);
};
return (
<>
<footer className="bg-gray-900 border-t border-gray-700 text-white py-5 text-left p-8 h-30 mt-5 flex flex-col space-y-4 ">
<img src={Logo} alt="Logo" width={100} height={100} />
<img src={Logo} alt="Logo" width={100} height={100} onClick={handleClick} />
<p className="text-sm">{new Date().getFullYear()} MAV Systems &copy; All rights reserved.</p>
</footer>
<DevModal isDevModalOpen={isDevModalOpen} handleClose={() => setDevModalOpen(false)} data={versionData} />
</>
);
};

6
src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1,6 @@
/// <reference types="vite/client" />
declare const __APP_NAME__: string;
declare const __APP_VERSION__: string;
declare const __GIT_COMMIT__: string;
declare const __GIT_TIMESTAMP__: string;

24
vite.config.ts
View File

@@ -2,10 +2,34 @@ import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import { tanstackRouter } from "@tanstack/router-plugin/vite";
import pkg from "./package.json";
import { execSync } from "child_process";
const gitCommitHash = (() => {
try {
return execSync("git rev-parse --short HEAD").toString().trim();
} catch {
return "unknown";
}
})();
const gitCommitTimeStamp = (() => {
try {
return execSync("git log -1 --format=%cd --date=iso").toString().trim();
} catch {
return "unknown";
}
})();
// https://vite.dev/config/
export default defineConfig({
base: "/bayiq",
define: {
__APP_NAME__: JSON.stringify(pkg.name),
__APP_VERSION__: JSON.stringify(pkg.version),
__GIT_COMMIT__: JSON.stringify(gitCommitHash),
__GIT_TIMESTAMP__: JSON.stringify(gitCommitTimeStamp),
},
plugins: [
tanstackRouter({
target: "react",