administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-12 01:57:36 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

use table on desktop and keep cards on mobile

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-27 14:46:47 -05:00
parent 229ce5b0f0
commit 1dc1dbc91f
1 changed files with 288 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

416
web/src/views/settings/TriggerView.tsx
View File

@ -13,12 +13,21 @@ import {
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { import {
LuPlus, LuPlus,
LuTrash, LuTrash,
LuPencil, LuPencil,
LuSearch, LuSearch,
LuExternalLink, LuExternalLink,
LuCircle,
} from "react-icons/lu"; } from "react-icons/lu";
import ActivityIndicator from "@/components/indicators/activity-indicator"; import ActivityIndicator from "@/components/indicators/activity-indicator";
import TriggerWizardDialog from "@/components/trigger/TriggerWizardDialog"; import TriggerWizardDialog from "@/components/trigger/TriggerWizardDialog";
@ -136,25 +145,14 @@ export default function TriggerView({
} }
return current; return current;
}); });
const target = document.querySelector(
`#trigger-${triggers_status_ws.name}`,
);
if (target) {
const ring = target.querySelector(".trigger-ring");
if (ring) {
ring.classList.add(`outline-selected`);
ring.classList.remove("outline-transparent");
const timeout = setTimeout(() => { const timeout = setTimeout(() => {
ring.classList.remove(`outline-selected`); setTriggeredTrigger((prev) =>
ring.classList.add("outline-transparent"); (prev || []).filter((name) => name !== triggers_status_ws.name),
setTriggeredTrigger((prev) => );
(prev || []).filter((name) => name !== triggers_status_ws.name), }, 3000);
);
}, 3000); return () => clearTimeout(timeout);
return () => clearTimeout(timeout);
}
}
}, [triggers_status_ws, selectedCamera, mutate]); }, [triggers_status_ws, selectedCamera, mutate]);
useEffect(() => { useEffect(() => {
@ -487,72 +485,69 @@ export default function TriggerView({
</Button> </Button>
</div> </div>
<div className="mb-6 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"> <div className="mb-6 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<div className="scrollbar-container flex-1 overflow-hidden rounded-lg border border-border bg-background_alt"> <div className="flex flex-1 flex-col gap-2 md:hidden">
<div className="h-full overflow-auto p-0"> {triggers.length === 0 ? (
{triggers.length === 0 ? ( <div className="flex h-24 items-center justify-center rounded-lg border border-border bg-background_alt">
<div className="flex h-24 items-center justify-center"> <p className="text-center text-muted-foreground">
<p className="text-center text-muted-foreground"> {t("triggers.table.noTriggers")}
{t("triggers.table.noTriggers")} </p>
</p> </div>
</div> ) : (
) : ( triggers.map((trigger) => (
<div className="space-y-2"> <div
{triggers.map((trigger) => ( key={trigger.name}
<div id={`trigger-${trigger.name}`}
key={trigger.name} className="rounded-lg border border-border bg-background p-4"
id={`trigger-${trigger.name}`} >
className="relative flex items-center justify-between rounded-lg border border-border bg-background p-4 transition-all" <div className="flex items-start justify-between gap-3">
> <div className="flex items-start gap-3">
<div <div className="mt-1">
className={cn( <LuCircle
"trigger-ring pointer-events-none absolute inset-0 z-10 size-full rounded-md outline outline-[3px] -outline-offset-[2.8px] duration-500",
triggeredTrigger.includes(trigger.name)
? "shadow-selected outline-selected"
: "outline-transparent duration-500",
)}
/>
<div className="mr-5 min-w-0 flex-1">
<h3
className={cn( className={cn(
"truncate text-lg font-medium", "size-3 duration-500",
triggeredTrigger.includes(trigger.name)
? "fill-selected text-selected"
: "fill-muted text-muted dark:fill-secondary-highlight dark:text-secondary-highlight",
)}
/>
</div>
<div className="flex-1">
<div
className={cn(
"font-medium",
!trigger.enabled && "opacity-60", !trigger.enabled && "opacity-60",
)} )}
> >
{trigger.friendly_name || trigger.name} {trigger.friendly_name || trigger.name}
</h3> </div>
<div <div className="mt-2 flex flex-col gap-2">
className={cn( <Badge
"mt-1 flex flex-col gap-1 text-sm text-muted-foreground md:flex-row md:items-center md:gap-3", variant={
!trigger.enabled && "opacity-60", trigger.type === "thumbnail"
)} ? "default"
> : "outline"
<div> }
<Badge className={cn(
variant={ "w-fit",
trigger.type === "thumbnail" trigger.type === "thumbnail"
? "default" ? "bg-primary/20 text-primary hover:bg-primary/30"
: "outline" : "",
} !trigger.enabled && "opacity-60",
className={ )}
trigger.type === "thumbnail" >
? "bg-primary/20 text-primary hover:bg-primary/30" {t(`triggers.type.${trigger.type}`)}
: "" </Badge>
}
>
{t(`triggers.type.${trigger.type}`)}
</Badge>
</div>
<Link <Link
to={`/explore?event_id=${trigger_status?.triggers[trigger.name]?.triggering_event_id || ""}`} to={`/explore?event_id=${trigger_status?.triggers[trigger.name]?.triggering_event_id || ""}`}
className={cn( className={cn(
"text-sm", "flex items-center gap-1.5 text-xs text-muted-foreground",
!trigger_status?.triggers[trigger.name] !trigger_status?.triggers[trigger.name]
?.triggering_event_id && ?.triggering_event_id &&
"pointer-events-none", "pointer-events-none",
!trigger.enabled && "opacity-60",
)} )}
> >
<div className="flex flex-row items-center text-xs"> <span>
{t("triggers.table.lastTriggered")}:{" "} {t("triggers.table.lastTriggered")}:{" "}
{trigger_status && {trigger_status &&
trigger_status.triggers[trigger.name] trigger_status.triggers[trigger.name]
@ -581,9 +576,173 @@ export default function TriggerView({
}, },
) )
: "Never"} : "Never"}
</span>
{trigger_status?.triggers[trigger.name]
?.triggering_event_id && (
<LuSearch className="size-3" />
)}
</Link>
</div>
</div>
</div>
<TooltipProvider>
<div className="flex items-center gap-1">
<Tooltip>
<TooltipTrigger asChild>
<Button
size="sm"
variant="outline"
className="h-8 w-8 p-0"
onClick={() => {
setSelectedTrigger(trigger);
setShowCreate(true);
}}
disabled={isLoading}
>
<LuPencil className="size-3.5" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>{t("triggers.table.edit")}</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
size="sm"
variant="destructive"
className="h-8 w-8 p-0"
onClick={() => {
setSelectedTrigger(trigger);
setShowDelete(true);
}}
disabled={isLoading}
>
<LuTrash className="size-3.5" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>{t("triggers.table.deleteTrigger")}</p>
</TooltipContent>
</Tooltip>
</div>
</TooltipProvider>
</div>
</div>
))
)}
</div>
{/* Desktop Table View */}
<div className="scrollbar-container hidden flex-1 overflow-hidden rounded-lg border border-border bg-background_alt md:mr-3 md:block">
<div className="h-full overflow-auto">
<Table>
<TableHeader className="sticky top-0 bg-muted/50">
<TableRow>
<TableHead className="w-4"></TableHead>
<TableHead>{t("name", { ns: "common" })}</TableHead>
<TableHead>{t("triggers.table.type")}</TableHead>
<TableHead>
{t("triggers.table.lastTriggered")}
</TableHead>
<TableHead className="text-right">
{t("triggers.table.actions")}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{triggers.length === 0 ? (
<TableRow>
<TableCell colSpan={5} className="h-24 text-center">
{t("triggers.table.noTriggers")}
</TableCell>
</TableRow>
) : (
triggers.map((trigger) => (
<TableRow
key={trigger.name}
id={`trigger-${trigger.name}`}
className="group"
>
<TableCell>
<LuCircle
className={cn(
"size-3 duration-500",
triggeredTrigger.includes(trigger.name)
? "fill-selected text-selected"
: "fill-muted text-muted dark:fill-secondary-highlight dark:text-secondary-highlight",
)}
/>
</TableCell>
<TableCell className="font-medium">
<div
className={cn(!trigger.enabled && "opacity-60")}
>
{trigger.friendly_name || trigger.name}
</div>
</TableCell>
<TableCell>
<Badge
variant={
trigger.type === "thumbnail"
? "default"
: "outline"
}
className={cn(
trigger.type === "thumbnail"
? "bg-primary/20 text-primary hover:bg-primary/30"
: "",
!trigger.enabled && "opacity-60",
)}
>
{t(`triggers.type.${trigger.type}`)}
</Badge>
</TableCell>
<TableCell>
<Link
to={`/explore?event_id=${trigger_status?.triggers[trigger.name]?.triggering_event_id || ""}`}
className={cn(
"flex items-center gap-1.5 text-sm",
!trigger_status?.triggers[trigger.name]
?.triggering_event_id &&
"pointer-events-none",
!trigger.enabled && "opacity-60",
)}
>
<span>
{trigger_status &&
trigger_status.triggers[trigger.name]
?.last_triggered
? formatUnixTimestampToDateTime(
trigger_status.triggers[trigger.name]
?.last_triggered,
{
timezone: config.ui.timezone,
date_format:
config.ui.time_format == "24hour"
? t(
"time.formattedTimestamp2.24hour",
{
ns: "common",
},
)
: t(
"time.formattedTimestamp2.12hour",
{
ns: "common",
},
),
time_style: "medium",
date_style: "medium",
},
)
: "Never"}
</span>
{trigger_status?.triggers[trigger.name]
?.triggering_event_id && (
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>
<LuSearch className="ml-2 size-3.5" /> <LuSearch className="size-3.5" />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
{t("details.item.button.viewInExplore", { {t("details.item.button.viewInExplore", {
@ -591,63 +750,64 @@ export default function TriggerView({
})} })}
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</div> )}
</Link> </Link>
</div> </TableCell>
</div> <TableCell className="text-right">
<TooltipProvider>
<div className="flex items-center gap-2"> <div className="flex items-center justify-end gap-2">
<TooltipProvider> <Tooltip>
<Tooltip> <TooltipTrigger asChild>
<TooltipTrigger asChild> <Button
<Button size="sm"
size="sm" variant="outline"
variant="outline" className="h-8 px-2"
className="h-8 px-2" onClick={() => {
onClick={() => { setSelectedTrigger(trigger);
setSelectedTrigger(trigger); setShowCreate(true);
setShowCreate(true); }}
}} disabled={isLoading}
disabled={isLoading} >
> <LuPencil className="size-3.5" />
<LuPencil className="size-3.5" /> <span className="ml-1.5 hidden sm:inline-block">
<span className="ml-1.5 hidden sm:inline-block"> {t("triggers.table.edit")}
{t("triggers.table.edit")} </span>
</span> </Button>
</Button> </TooltipTrigger>
</TooltipTrigger> <TooltipContent>
<TooltipContent> <p>{t("triggers.table.edit")}</p>
<p>{t("triggers.table.edit")}</p> </TooltipContent>
</TooltipContent> </Tooltip>
</Tooltip> <Tooltip>
<Tooltip> <TooltipTrigger asChild>
<TooltipTrigger asChild> <Button
<Button size="sm"
size="sm" variant="destructive"
variant="destructive" className="h-8 px-2"
className="h-8 px-2" onClick={() => {
onClick={() => { setSelectedTrigger(trigger);
setSelectedTrigger(trigger); setShowDelete(true);
setShowDelete(true); }}
}} disabled={isLoading}
disabled={isLoading} >
> <LuTrash className="size-3.5" />
<LuTrash className="size-3.5" /> <span className="ml-1.5 hidden sm:inline-block">
<span className="ml-1.5 hidden sm:inline-block"> {t("triggers.table.deleteTrigger")}
{t("triggers.table.deleteTrigger")} </span>
</span> </Button>
</Button> </TooltipTrigger>
</TooltipTrigger> <TooltipContent>
<TooltipContent> <p>{t("triggers.table.deleteTrigger")}</p>
<p>{t("triggers.table.deleteTrigger")}</p> </TooltipContent>
</TooltipContent> </Tooltip>
</Tooltip> </div>
</TooltipProvider> </TooltipProvider>
</div> </TableCell>
</div> </TableRow>
))} ))
</div> )}
)} </TableBody>
</Table>
</div> </div>
</div> </div>
</div> </div>