diff --git a/src/features/cameras/hooks/useGetVideoFeed.ts b/src/features/cameras/hooks/useGetVideoFeed.ts index cbee4ac..d228e26 100644 --- a/src/features/cameras/hooks/useGetVideoFeed.ts +++ b/src/features/cameras/hooks/useGetVideoFeed.ts @@ -1,7 +1,8 @@ import { useQuery } from "@tanstack/react-query"; import { CAMBASE } from "../../../utils/config"; +import type { CameraID } from "../../../app/config/cameraConfig"; -const targetDectionFeed = async (cameraFeedID: "A" | "B" | "C" | null) => { +const targetDectionFeed = async (cameraFeedID: CameraID | null) => { const response = await fetch(`${CAMBASE}/TargetDetectionColour${cameraFeedID}-preview`, { signal: AbortSignal.timeout(300000), cache: "no-store", @@ -12,7 +13,7 @@ const targetDectionFeed = async (cameraFeedID: "A" | "B" | "C" | null) => { return response.blob(); }; -const getVideoFeed = async (cameraFeedID: "A" | "B" | "C" | null) => { +const getVideoFeed = async (cameraFeedID: CameraID | null) => { const response = await fetch(`${CAMBASE}/Camera${cameraFeedID}-preview`, { signal: AbortSignal.timeout(300000), cache: "no-store", @@ -23,7 +24,7 @@ const getVideoFeed = async (cameraFeedID: "A" | "B" | "C" | null) => { return response.blob(); }; -export const useGetVideoFeed = (cameraFeedID: "A" | "B" | "C" | null, mode: string) => { +export const useGetVideoFeed = (cameraFeedID: CameraID | null, mode: string) => { const targetDetectionQuery = useQuery({ queryKey: ["getfeed", cameraFeedID], queryFn: () => targetDectionFeed(cameraFeedID), diff --git a/src/features/dashboard/components/cameraStatus/CameraStatusGridItem.tsx b/src/features/dashboard/components/cameraStatus/CameraStatusGridItem.tsx index 812e834..e401e6a 100644 --- a/src/features/dashboard/components/cameraStatus/CameraStatusGridItem.tsx +++ b/src/features/dashboard/components/cameraStatus/CameraStatusGridItem.tsx @@ -1,7 +1,8 @@ import { useState } from "react"; import type { SystemHealthStatus } from "../../../../types/types"; -import { capitalize } from "../../../../utils/utils"; + import SystemHealthModal from "../systemHealth/systemHealthModal/SystemHealthModal"; +import Badge from "../../../../ui/Badge"; type CameraStatusGridItemProps = { title: string; @@ -15,6 +16,10 @@ const CameraStatusGridItem = ({ title, statusCategory }: CameraStatusGridItemPro return status.tags.every((tag) => allowedTags.includes(tag)); }); + const downItems = statusCategory?.filter((status) => { + return status.tags.some((tag) => tag !== "RUNNING" && tag !== "VIDEO-PLAYING"); + }); + const handleClick = () => { setIsOpen(false); }; @@ -24,8 +29,21 @@ const CameraStatusGridItem = ({ title, statusCategory }: CameraStatusGridItemPro className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241] hover:cursor-pointer m-2 h-70" onClick={() => setIsOpen(true)} > -

{capitalize(title)}

-

{isAllGood ? "Click to view module status" : "Some systems down"}

+

+ {isAllGood ? ( + "Click to view module status" + ) : ( + <> +

+ + )} +

- - - ); + return ; } diff --git a/src/routes/output.tsx b/src/routes/output.tsx index f1be44e..b1b86fc 100644 --- a/src/routes/output.tsx +++ b/src/routes/output.tsx @@ -6,9 +6,5 @@ export const Route = createFileRoute("/output")({ }); function RouteComponent() { - return ( -
- -
- ); + return ; } diff --git a/src/routes/settings.tsx b/src/routes/settings.tsx index 4c5c820..4dce84c 100644 --- a/src/routes/settings.tsx +++ b/src/routes/settings.tsx @@ -6,9 +6,5 @@ export const Route = createFileRoute("/settings")({ }); function RouteComponent() { - return ( -
- -
- ); + return ; }