mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
Camera group dialog changes and fixes (#11117)
* camera group dialog changes and fixes * use drawer on mobile * spacing
This commit is contained in:
Josh Hawkins
GitHub
parent
c035241b39
commit
d0aefc2121
@ -3,7 +3,7 @@ import {
|
||||
FrigateConfig,
|
||||
GROUP_ICONS,
|
||||
} from "@/types/frigateConfig";
|
||||
import { isDesktop } from "react-device-detect";
|
||||
import { isDesktop, isMobile } from "react-device-detect";
|
||||
import useSWR from "swr";
|
||||
import { MdHome } from "react-icons/md";
|
||||
import { usePersistedOverlayState } from "@/hooks/use-overlay-state";
|
||||
@ -11,19 +11,54 @@ import { Button } from "../ui/button";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
||||
import { getIconForGroup } from "@/utils/iconUtil";
|
||||
import { LuPencil, LuPlus, LuTrash } from "react-icons/lu";
|
||||
import { LuPencil, LuPlus } from "react-icons/lu";
|
||||
import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
|
||||
import { Drawer, DrawerContent } from "../ui/drawer";
|
||||
import { Input } from "../ui/input";
|
||||
import { Separator } from "../ui/separator";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "../ui/dropdown-menu";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "../ui/alert-dialog";
|
||||
import axios from "axios";
|
||||
import FilterSwitch from "./FilterSwitch";
|
||||
import { HiOutlineDotsVertical, HiTrash } from "react-icons/hi";
|
||||
import IconWrapper from "../ui/icon-wrapper";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
import { toast } from "sonner";
|
||||
import ActivityIndicator from "../indicators/activity-indicator";
|
||||
import { ScrollArea, ScrollBar } from "../ui/scroll-area";
|
||||
|
||||
type CameraGroupSelectorProps = {
|
||||
className?: string;
|
||||
@ -71,16 +106,21 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
|
||||
|
||||
const [addGroup, setAddGroup] = useState(false);
|
||||
|
||||
const Scroller = isMobile ? ScrollArea : "div";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center justify-start gap-2 ${className ?? ""} ${isDesktop ? "flex-col" : ""}`}
|
||||
>
|
||||
<>
|
||||
<NewGroupDialog
|
||||
open={addGroup}
|
||||
setOpen={setAddGroup}
|
||||
currentGroups={groups}
|
||||
activeGroup={group}
|
||||
setGroup={setGroup}
|
||||
/>
|
||||
|
||||
<Scroller className={`${isMobile ? "whitespace-nowrap" : ""}`}>
|
||||
<div
|
||||
className={`flex items-center justify-start gap-2 ${className ?? ""} ${isDesktop ? "flex-col" : "whitespace-nowrap"}`}
|
||||
>
|
||||
<Tooltip open={tooltip == "default"}>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
@ -114,7 +154,9 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
|
||||
size="xs"
|
||||
onClick={() => setGroup(name, group != "default")}
|
||||
onMouseEnter={() => (isDesktop ? showTooltip(name) : null)}
|
||||
onMouseLeave={() => (isDesktop ? showTooltip(undefined) : null)}
|
||||
onMouseLeave={() =>
|
||||
isDesktop ? showTooltip(undefined) : null
|
||||
}
|
||||
>
|
||||
{getIconForGroup(config.icon)}
|
||||
</Button>
|
||||
@ -125,7 +167,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
{isDesktop && (
|
||||
|
||||
<Button
|
||||
className="text-muted-foreground bg-secondary"
|
||||
size="xs"
|
||||
@ -133,8 +175,10 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
|
||||
>
|
||||
<LuPlus className="size-4 text-primary" />
|
||||
</Button>
|
||||
)}
|
||||
{isMobile && <ScrollBar orientation="horizontal" className="h-0" />}
|
||||
</div>
|
||||
</Scroller>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -142,195 +186,462 @@ type NewGroupDialogProps = {
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
currentGroups: [string, CameraGroupConfig][];
|
||||
activeGroup?: string;
|
||||
setGroup: (value: string | undefined, replace?: boolean | undefined) => void;
|
||||
};
|
||||
function NewGroupDialog({ open, setOpen, currentGroups }: NewGroupDialogProps) {
|
||||
function NewGroupDialog({
|
||||
open,
|
||||
setOpen,
|
||||
currentGroups,
|
||||
activeGroup,
|
||||
setGroup,
|
||||
}: NewGroupDialogProps) {
|
||||
const { mutate: updateConfig } = useSWR<FrigateConfig>("config");
|
||||
|
||||
// editing group and state
|
||||
|
||||
const [editingGroupName, setEditingGroupName] = useState("");
|
||||
|
||||
const editingGroup = useMemo(() => {
|
||||
if (currentGroups && editingGroupName !== undefined) {
|
||||
return currentGroups.find(
|
||||
([groupName]) => groupName === editingGroupName,
|
||||
);
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}, [currentGroups, editingGroupName]);
|
||||
|
||||
const [editState, setEditState] = useState<"none" | "add" | "edit">("none");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// callbacks
|
||||
|
||||
const onDeleteGroup = useCallback(
|
||||
async (name: string) => {
|
||||
// TODO: reset order on groups when deleting
|
||||
|
||||
await axios
|
||||
.put(`config/set?camera_groups.${name}`, { requires_restart: 0 })
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
if (activeGroup == name) {
|
||||
// deleting current group
|
||||
setGroup("default");
|
||||
}
|
||||
updateConfig();
|
||||
} else {
|
||||
setOpen(false);
|
||||
setEditState("none");
|
||||
toast.error(`Failed to save config changes: ${res.statusText}`, {
|
||||
position: "top-center",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
setOpen(false);
|
||||
setEditState("none");
|
||||
toast.error(
|
||||
`Failed to save config changes: ${error.response.data.message}`,
|
||||
{ position: "top-center" },
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false);
|
||||
});
|
||||
},
|
||||
[updateConfig, activeGroup, setGroup, setOpen],
|
||||
);
|
||||
|
||||
const onSave = () => {
|
||||
setOpen(false);
|
||||
setEditState("none");
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
setEditingGroupName("");
|
||||
setEditState("none");
|
||||
};
|
||||
|
||||
const onEditGroup = useCallback((group: [string, CameraGroupConfig]) => {
|
||||
setEditingGroupName(group[0]);
|
||||
setEditState("edit");
|
||||
}, []);
|
||||
|
||||
const Overlay = isDesktop ? Dialog : Drawer;
|
||||
const Content = isDesktop ? DialogContent : DrawerContent;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster className="toaster group z-[100]" position="top-center" />
|
||||
<Overlay
|
||||
open={open}
|
||||
onOpenChange={(open) => {
|
||||
setEditState("none");
|
||||
setOpen(open);
|
||||
}}
|
||||
>
|
||||
<Content
|
||||
className={`min-w-0 ${isMobile ? "w-full p-3 rounded-t-2xl max-h-[90%]" : "w-6/12 max-h-dvh overflow-y-auto"}`}
|
||||
>
|
||||
<div className="flex flex-col my-4 overflow-y-auto">
|
||||
{editState === "none" && (
|
||||
<>
|
||||
<div className="flex flex-row justify-between items-center py-2">
|
||||
<DialogTitle>Camera Groups</DialogTitle>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="size-6 p-1 rounded-md text-background bg-secondary-foreground"
|
||||
onClick={() => {
|
||||
setEditState("add");
|
||||
}}
|
||||
>
|
||||
<LuPlus />
|
||||
</Button>
|
||||
</div>
|
||||
{currentGroups.map((group) => (
|
||||
<CameraGroupRow
|
||||
key={group[0]}
|
||||
group={group}
|
||||
onDeleteGroup={() => onDeleteGroup(group[0])}
|
||||
onEditGroup={() => onEditGroup(group)}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{editState != "none" && (
|
||||
<>
|
||||
<div className="flex flex-row justify-between items-center mb-3">
|
||||
<DialogTitle>
|
||||
{editState == "add" ? "Add" : "Edit"} Camera Group
|
||||
</DialogTitle>
|
||||
</div>
|
||||
<CameraGroupEdit
|
||||
currentGroups={currentGroups}
|
||||
editingGroup={editingGroup}
|
||||
isLoading={isLoading}
|
||||
setIsLoading={setIsLoading}
|
||||
onSave={onSave}
|
||||
onCancel={onCancel}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Content>
|
||||
</Overlay>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type CameraGroupRowProps = {
|
||||
group: [string, CameraGroupConfig];
|
||||
onDeleteGroup: () => void;
|
||||
onEditGroup: () => void;
|
||||
};
|
||||
|
||||
export function CameraGroupRow({
|
||||
group,
|
||||
onDeleteGroup,
|
||||
onEditGroup,
|
||||
}: CameraGroupRowProps) {
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
|
||||
if (!group) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
key={group[0]}
|
||||
className="flex md:p-1 rounded-lg flex-row items-center justify-between md:mx-2 my-1.5 transition-background duration-100"
|
||||
>
|
||||
<div className={`flex items-center`}>
|
||||
<p className="cursor-default">{group[0]}</p>
|
||||
</div>
|
||||
<AlertDialog
|
||||
open={deleteDialogOpen}
|
||||
onOpenChange={() => setDeleteDialogOpen(!deleteDialogOpen)}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Confirm Delete</AlertDialogTitle>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to delete the camera group{" "}
|
||||
<em>{group[0]}</em>?
|
||||
</AlertDialogDescription>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={onDeleteGroup}>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{isMobile && (
|
||||
<>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>
|
||||
<HiOutlineDotsVertical className="size-5" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem onClick={onEditGroup}>Edit</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setDeleteDialogOpen(true)}>
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</>
|
||||
)}
|
||||
{!isMobile && (
|
||||
<div className="flex flex-row gap-2 items-center">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<IconWrapper
|
||||
icon={LuPencil}
|
||||
className={`size-[15px] cursor-pointer`}
|
||||
onClick={onEditGroup}
|
||||
/>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Edit</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<IconWrapper
|
||||
icon={HiTrash}
|
||||
className={`size-[15px] cursor-pointer`}
|
||||
onClick={() => setDeleteDialogOpen(true)}
|
||||
/>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Delete</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type CameraGroupEditProps = {
|
||||
currentGroups: [string, CameraGroupConfig][];
|
||||
editingGroup?: [string, CameraGroupConfig];
|
||||
isLoading: boolean;
|
||||
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
onSave?: () => void;
|
||||
onCancel?: () => void;
|
||||
};
|
||||
|
||||
export function CameraGroupEdit({
|
||||
currentGroups,
|
||||
editingGroup,
|
||||
isLoading,
|
||||
setIsLoading,
|
||||
onSave,
|
||||
onCancel,
|
||||
}: CameraGroupEditProps) {
|
||||
const { data: config, mutate: updateConfig } =
|
||||
useSWR<FrigateConfig>("config");
|
||||
|
||||
const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
|
||||
|
||||
// add fields
|
||||
|
||||
const [editState, setEditState] = useState<"none" | "add" | "edit">("none");
|
||||
const [newTitle, setNewTitle] = useState("");
|
||||
const [icon, setIcon] = useState("");
|
||||
const [cameras, setCameras] = useState<string[]>([]);
|
||||
|
||||
// validation
|
||||
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const onCreateGroup = useCallback(async () => {
|
||||
if (!newTitle) {
|
||||
setError("A title must be selected");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!icon) {
|
||||
setError("An icon must be selected");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!cameras || cameras.length < 2) {
|
||||
setError("At least 2 cameras must be selected");
|
||||
return;
|
||||
}
|
||||
|
||||
setError("");
|
||||
const orderQuery = `camera_groups.${newTitle}.order=${currentGroups.length}`;
|
||||
const iconQuery = `camera_groups.${newTitle}.icon=${icon}`;
|
||||
const cameraQueries = cameras
|
||||
.map((cam) => `&camera_groups.${newTitle}.cameras=${cam}`)
|
||||
.join("");
|
||||
|
||||
const req = axios.put(
|
||||
`config/set?${orderQuery}&${iconQuery}${cameraQueries}`,
|
||||
{ requires_restart: 0 },
|
||||
const formSchema = z.object({
|
||||
name: z
|
||||
.string()
|
||||
.min(2, {
|
||||
message: "Camera group name must be at least 2 characters.",
|
||||
})
|
||||
.transform((val: string) => val.trim().replace(/\s+/g, "_"))
|
||||
.refine(
|
||||
(value: string) => {
|
||||
return (
|
||||
editingGroup !== undefined ||
|
||||
!currentGroups.map((group) => group[0]).includes(value)
|
||||
);
|
||||
|
||||
setOpen(false);
|
||||
|
||||
if ((await req).status == 200) {
|
||||
setNewTitle("");
|
||||
setIcon("");
|
||||
setCameras([]);
|
||||
updateConfig();
|
||||
}
|
||||
}, [currentGroups, cameras, newTitle, icon, setOpen, updateConfig]);
|
||||
|
||||
const onDeleteGroup = useCallback(
|
||||
async (name: string) => {
|
||||
const req = axios.put(`config/set?camera_groups.${name}`, {
|
||||
requires_restart: 0,
|
||||
},
|
||||
{
|
||||
message: "Camera group name already exists.",
|
||||
},
|
||||
),
|
||||
cameras: z.array(z.string()).min(2, {
|
||||
message: "You must select at least two cameras.",
|
||||
}),
|
||||
icon: z.string(),
|
||||
});
|
||||
|
||||
if ((await req).status == 200) {
|
||||
updateConfig();
|
||||
const onSubmit = useCallback(
|
||||
async (values: z.infer<typeof formSchema>) => {
|
||||
if (!values) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
const order =
|
||||
editingGroup === undefined
|
||||
? currentGroups.length + 1
|
||||
: editingGroup[1].order;
|
||||
|
||||
const orderQuery = `camera_groups.${values.name}.order=${order}`;
|
||||
const iconQuery = `camera_groups.${values.name}.icon=${values.icon}`;
|
||||
const cameraQueries = values.cameras
|
||||
.map((cam) => `&camera_groups.${values.name}.cameras=${cam}`)
|
||||
.join("");
|
||||
|
||||
axios
|
||||
.put(`config/set?${orderQuery}&${iconQuery}${cameraQueries}`, {
|
||||
requires_restart: 0,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
toast.success(`Camera group (${values.name}) has been saved.`, {
|
||||
position: "top-center",
|
||||
});
|
||||
updateConfig();
|
||||
if (onSave) {
|
||||
onSave();
|
||||
}
|
||||
} else {
|
||||
toast.error(`Failed to save config changes: ${res.statusText}`, {
|
||||
position: "top-center",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
toast.error(
|
||||
`Failed to save config changes: ${error.response.data.message}`,
|
||||
{ position: "top-center" },
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false);
|
||||
});
|
||||
},
|
||||
[updateConfig],
|
||||
[currentGroups, setIsLoading, onSave, updateConfig, editingGroup],
|
||||
);
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
mode: "onChange",
|
||||
defaultValues: {
|
||||
name: (editingGroup && editingGroup[0]) ?? "",
|
||||
icon: editingGroup && editingGroup[1].icon,
|
||||
cameras: editingGroup && editingGroup[1].cameras,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(open) => {
|
||||
setEditState("none");
|
||||
setNewTitle("");
|
||||
setIcon("");
|
||||
setCameras([]);
|
||||
setOpen(open);
|
||||
}}
|
||||
>
|
||||
<DialogContent className="min-w-0 w-96">
|
||||
<DialogTitle>Camera Groups</DialogTitle>
|
||||
{currentGroups.map((group) => (
|
||||
<div key={group[0]} className="flex justify-between items-center">
|
||||
{group[0]}
|
||||
<div className="flex justify-center gap-1">
|
||||
<Button
|
||||
className="bg-transparent"
|
||||
size="icon"
|
||||
onClick={() => {
|
||||
setNewTitle(group[0]);
|
||||
setIcon(group[1].icon);
|
||||
setCameras(group[1].cameras);
|
||||
setEditState("edit");
|
||||
}}
|
||||
>
|
||||
<LuPencil />
|
||||
</Button>
|
||||
<Button
|
||||
className="text-destructive bg-transparent"
|
||||
size="icon"
|
||||
onClick={() => onDeleteGroup(group[0])}
|
||||
>
|
||||
<LuTrash />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{currentGroups.length > 0 && <DropdownMenuSeparator />}
|
||||
{editState == "none" && (
|
||||
<Button
|
||||
className="text-primary justify-start"
|
||||
variant="ghost"
|
||||
onClick={() => setEditState("add")}
|
||||
>
|
||||
<LuPlus className="size-4 mr-1" />
|
||||
Create new group
|
||||
</Button>
|
||||
)}
|
||||
{editState != "none" && (
|
||||
<>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="mt-2 space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
disabled={editState == "edit"}
|
||||
value={newTitle}
|
||||
onChange={(e) => setNewTitle(e.target.value)}
|
||||
className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
|
||||
placeholder="Enter a name..."
|
||||
disabled={editingGroup !== undefined}
|
||||
{...field}
|
||||
/>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div className="flex justify-start gap-2 items-center cursor-pointer">
|
||||
{icon.length == 0 ? "Select Icon" : "Icon: "}
|
||||
{icon ? getIconForGroup(icon) : <div className="size-4" />}
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuRadioGroup value={icon} onValueChange={setIcon}>
|
||||
{GROUP_ICONS.map((gIcon) => (
|
||||
<DropdownMenuRadioItem
|
||||
key={gIcon}
|
||||
className="w-full flex justify-start items-center gap-2 cursor-pointer hover:bg-secondary"
|
||||
value={gIcon}
|
||||
>
|
||||
{getIconForGroup(gIcon)}
|
||||
{gIcon}
|
||||
</DropdownMenuRadioItem>
|
||||
))}
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div className="flex justify-start gap-2 items-center cursor-pointer">
|
||||
{cameras.length == 0
|
||||
? "Select Cameras"
|
||||
: `${cameras.length} Cameras`}
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Separator className="flex my-2 bg-secondary" />
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="cameras"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Cameras</FormLabel>
|
||||
<FormDescription>Select cameras for this group.</FormDescription>
|
||||
{[
|
||||
...(birdseyeConfig?.enabled ? ["birdseye"] : []),
|
||||
...Object.keys(config?.cameras ?? {}),
|
||||
].map((camera) => (
|
||||
<FormControl key={camera}>
|
||||
<FilterSwitch
|
||||
key={camera}
|
||||
isChecked={cameras.includes(camera)}
|
||||
isChecked={field.value && field.value.includes(camera)}
|
||||
label={camera.replaceAll("_", " ")}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
setCameras([...cameras, camera]);
|
||||
} else {
|
||||
const index = cameras.indexOf(camera);
|
||||
setCameras([
|
||||
...cameras.slice(0, index),
|
||||
...cameras.slice(index + 1),
|
||||
]);
|
||||
}
|
||||
const updatedCameras = checked
|
||||
? [...(field.value || []), camera]
|
||||
: (field.value || []).filter((c) => c !== camera);
|
||||
form.setValue("cameras", updatedCameras);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
{error && <div className="text-danger">{error}</div>}
|
||||
<Button variant="select" onClick={onCreateGroup}>
|
||||
Submit
|
||||
</Button>
|
||||
</>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
/>
|
||||
|
||||
<Separator className="flex my-2 bg-secondary" />
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="icon"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-3">
|
||||
<FormLabel>Icon</FormLabel>
|
||||
<FormControl>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an icon" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{GROUP_ICONS.map((gIcon) => (
|
||||
<SelectItem key={gIcon} value={gIcon}>
|
||||
<div className="flex flex-row justify-start items-center gap-2">
|
||||
<div className="size-4">{getIconForGroup(gIcon)}</div>
|
||||
{gIcon}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Separator className="flex my-2 bg-secondary" />
|
||||
|
||||
<div className="flex flex-row gap-2 pt-5">
|
||||
<Button className="flex flex-1" onClick={onCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="select"
|
||||
disabled={isLoading}
|
||||
className="flex flex-1"
|
||||
type="submit"
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<ActivityIndicator />
|
||||
<span>Saving...</span>
|
||||
</div>
|
||||
) : (
|
||||
"Save"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -551,14 +551,6 @@ export function ZoneObjectSelector({
|
||||
|
||||
const labels = new Set<string>();
|
||||
|
||||
// Object.values(config.cameras).forEach((camera) => {
|
||||
// camera.objects.track.forEach((label) => {
|
||||
// if (!ATTRIBUTE_LABELS.includes(label)) {
|
||||
// labels.add(label);
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
||||
cameraConfig.objects.track.forEach((label) => {
|
||||
if (!ATTRIBUTE_LABELS.includes(label)) {
|
||||
labels.add(label);
|
||||
|
||||
@ -38,7 +38,13 @@ function Live() {
|
||||
// settings
|
||||
|
||||
const includesBirdseye = useMemo(() => {
|
||||
if (config && cameraGroup && cameraGroup != "default") {
|
||||
if (
|
||||
config &&
|
||||
Object.keys(config.camera_groups).length &&
|
||||
cameraGroup &&
|
||||
config.camera_groups[cameraGroup] &&
|
||||
cameraGroup != "default"
|
||||
) {
|
||||
return config.camera_groups[cameraGroup].cameras.includes("birdseye");
|
||||
} else {
|
||||
return false;
|
||||
@ -50,7 +56,12 @@ function Live() {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (cameraGroup && cameraGroup != "default") {
|
||||
if (
|
||||
Object.keys(config.camera_groups).length &&
|
||||
cameraGroup &&
|
||||
config.camera_groups[cameraGroup] &&
|
||||
cameraGroup != "default"
|
||||
) {
|
||||
const group = config.camera_groups[cameraGroup];
|
||||
return Object.values(config.cameras)
|
||||
.filter((conf) => conf.enabled && group.cameras.includes(conf.name))
|
||||
|
||||
@ -144,7 +144,9 @@ export default function LiveDashboardView({
|
||||
{isMobile && (
|
||||
<div className="h-11 relative flex items-center justify-between">
|
||||
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
|
||||
<div className="max-w-[45%]">
|
||||
<CameraGroupSelector />
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
className={`p-1 ${
|
||||
|
||||
Loading…
Reference in New Issue
Block a user