Fix dashboard buttons

This commit is contained in:
Nick Mowen 2023-12-16 13:12:46 -07:00
parent 7798237c91
commit 04a0615ab8
2 changed files with 19 additions and 9 deletions

View File

@ -18,7 +18,7 @@ import { FaWalking } from "react-icons/fa";
import { LuEar } from "react-icons/lu"; import { LuEar } from "react-icons/lu";
import { TbMovie } from "react-icons/tb"; import { TbMovie } from "react-icons/tb";
import MiniEventCard from "@/components/card/MiniEventCard"; import MiniEventCard from "@/components/card/MiniEventCard";
import { Event } from "@/types/event"; import { Event as FrigateEvent } from "@/types/event";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
export function Dashboard() { export function Dashboard() {
@ -29,7 +29,7 @@ export function Dashboard() {
now.setMinutes(now.getMinutes() - 30); now.setMinutes(now.getMinutes() - 30);
return now.getTime() / 1000; return now.getTime() / 1000;
}, []); }, []);
const { data: events, mutate: updateEvents } = useSWR<Event[]>([ const { data: events, mutate: updateEvents } = useSWR<FrigateEvent[]>([
"events", "events",
{ limit: 10, after: recentTimestamp }, { limit: 10, after: recentTimestamp },
]); ]);
@ -116,7 +116,10 @@ function Camera({ camera }: { camera: CameraConfig }) {
className={`${ className={`${
detectValue == "ON" ? "text-primary" : "text-gray-400" detectValue == "ON" ? "text-primary" : "text-gray-400"
}`} }`}
onClick={() => sendDetect(detectValue == "ON" ? "OFF" : "ON")} onClick={(e) => {
e.stopPropagation();
sendDetect(detectValue == "ON" ? "OFF" : "ON");
}}
> >
<FaWalking /> <FaWalking />
</Button> </Button>
@ -130,11 +133,12 @@ function Camera({ camera }: { camera: CameraConfig }) {
: "text-gray-400" : "text-gray-400"
: "text-red-500" : "text-red-500"
} }
onClick={() => onClick={(e) => {
e.stopPropagation();
camera.record.enabled_in_config camera.record.enabled_in_config
? sendRecord(recordValue == "ON" ? "OFF" : "ON") ? sendRecord(recordValue == "ON" ? "OFF" : "ON")
: {} : {};
} }}
> >
<TbMovie /> <TbMovie />
</Button> </Button>
@ -144,7 +148,10 @@ function Camera({ camera }: { camera: CameraConfig }) {
className={`${ className={`${
snapshotValue == "ON" ? "text-primary" : "text-gray-400" snapshotValue == "ON" ? "text-primary" : "text-gray-400"
}`} }`}
onClick={() => sendSnapshot(detectValue == "ON" ? "OFF" : "ON")} onClick={(e) => {
e.stopPropagation();
sendSnapshot(detectValue == "ON" ? "OFF" : "ON");
}}
> >
<AiOutlinePicture /> <AiOutlinePicture />
</Button> </Button>
@ -155,7 +162,10 @@ function Camera({ camera }: { camera: CameraConfig }) {
className={`${ className={`${
audioValue == "ON" ? "text-primary" : "text-gray-400" audioValue == "ON" ? "text-primary" : "text-gray-400"
}`} }`}
onClick={() => sendAudio(detectValue == "ON" ? "OFF" : "ON")} onClick={(e) => {
e.stopPropagation();
sendAudio(detectValue == "ON" ? "OFF" : "ON");
}}
> >
<LuEar /> <LuEar />
</Button> </Button>

View File

@ -39,7 +39,7 @@
--accent-foreground: 210 40% 98%; --accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%; --destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%; --border: 217.2 36.6% 12.5%;
--input: 217.2 38.6% 29.5%; --input: 217.2 38.6% 29.5%;
--ring: 224.3 76.3% 48%; --ring: 224.3 76.3% 48%;
} }