diff --git a/package.json b/package.json index 430eff4..a56f708 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "bayiq-ui", "private": true, - "version": "0.0.0", + "version": "1.0.1", "type": "module", "scripts": { "dev": "vite", diff --git a/src/features/cameras/components/CameraSettings/RegionSelector.tsx b/src/features/cameras/components/CameraSettings/RegionSelector.tsx index db1a026..cdb6656 100644 --- a/src/features/cameras/components/CameraSettings/RegionSelector.tsx +++ b/src/features/cameras/components/CameraSettings/RegionSelector.tsx @@ -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 = ({ />
Digital Zoom mode - 
{`current Zoom: ${getMagnificationLevel()}`}
+ 
{`Current Zoom: ${getMagnificationLevel()}`}
{mode === "zoom" && Click image to digitally zoom}
diff --git a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx index fd38f24..8d65a8e 100644 --- a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx +++ b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx @@ -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" : ""}`} > { 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) { diff --git a/src/hooks/useGetVersions.ts b/src/hooks/useGetVersions.ts new file mode 100644 index 0000000..bba612c --- /dev/null +++ b/src/hooks/useGetVersions.ts @@ -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 }; +}; diff --git a/src/types/types.ts b/src/types/types.ts index b7dce94..90541ad 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -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; +}; diff --git a/src/ui/DevModal.tsx b/src/ui/DevModal.tsx new file mode 100644 index 0000000..9fd174e --- /dev/null +++ b/src/ui/DevModal.tsx @@ -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 ( + +
+
+

System Information

+

Application version details

+
+
+

Frontend (UI)

+
+
+ Name + {uiName} +
+
+ Version + {uiVersion} +
+
+ Revision (Commit ID) + {commitID} +
+
+ Build Time + {commitTimeStamp} +
+
+
+
+

Backend

+
+
+ Name + {data?.appname || "N/A"} +
+
+ Version + {data?.version || "N/A"} +
+
+ Revision (Commit ID) + + {data?.revision || "N/A"} + +
+
+ Build Time + {data?.buildtime || "N/A"} +
+
+ MAC Address + {data?.MAC || "N/A"} +
+
+
+
+ + ); +}; + +export default DevModal; diff --git a/src/ui/Footer.tsx b/src/ui/Footer.tsx index 3b64f3b..47bbd99 100644 --- a/src/ui/Footer.tsx +++ b/src/ui/Footer.tsx @@ -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 ( - + <> + + setDevModalOpen(false)} data={versionData} /> + ); }; diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..93ff094 --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,6 @@ +/// + +declare const __APP_NAME__: string; +declare const __APP_VERSION__: string; +declare const __GIT_COMMIT__: string; +declare const __GIT_TIMESTAMP__: string; diff --git a/vite.config.ts b/vite.config.ts index d367053..30aa295 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -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",