administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 20:25:26 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Update revamped design and add export to values

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-01 08:23:59 -07:00
parent 54877a5598
commit f4c427fa98
2 changed files with 63 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
web/src/components/filter/ReviewActionGroup.tsx
View File

@ -1,21 +1,18 @@
import { LuCheckSquare, LuTrash, LuX } from "react-icons/lu";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "../ui/tooltip";
import { LuCheckSquare, LuFileUp, LuTrash } from "react-icons/lu";
import { useCallback } from "react";
import axios from "axios";
import { Button } from "../ui/button";
type ReviewActionGroupProps = {
selectedReviews: string[];
setSelectedReviews: (ids: string[]) => void;
onExport: (id: string) => void;
pullLatestData: () => void;
};
export default function ReviewActionGroup({
selectedReviews,
setSelectedReviews,
onExport,
pullLatestData,
}: ReviewActionGroupProps) {
const onClearSelected = useCallback(() => {
@ -37,36 +34,43 @@ export default function ReviewActionGroup({
}, [selectedReviews, setSelectedReviews, pullLatestData]);
return (
<div className="absolute inset-x-2 md:inset-x-[40%] top-0 p-2 bg-primary-foreground md:border-2 md:rounded-lg flex justify-between items-center">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="cursor-pointer" onClick={onClearSelected}>
<LuX />
</div>
</TooltipTrigger>
<TooltipContent>Unselect All</TooltipContent>
</Tooltip>
<div className="flex gap-2 items-center">
<Tooltip>
<TooltipTrigger asChild>
<div className="cursor-pointer" onClick={onMarkAsReviewed}>
<LuCheckSquare />
</div>
</TooltipTrigger>
<TooltipContent>Mark Selected As Reviewed</TooltipContent>
</Tooltip>
<div className="text-sm font-thin">|</div>
<Tooltip>
<TooltipTrigger asChild>
<div className="cursor-pointer" onClick={onDelete}>
<LuTrash />
</div>
</TooltipTrigger>
<TooltipContent>Delete Selected</TooltipContent>
</Tooltip>
</div>
</TooltipProvider>
<div className="absolute inset-x-2 inset-y-0 md:left-auto md:right-2 p-2 flex gap-2 justify-between items-center">
<div className="text-sm text-gray-500">{`${selectedReviews.length} selected | `}</div>
<Button size="sm" variant="link" onClick={onClearSelected}>
Unselect
</Button>
{selectedReviews.length == 1 && (
<Button
className="flex items-center"
variant="secondary"
size="sm"
onClick={() => {
onExport(selectedReviews[0]);
onClearSelected();
}}
>
<LuFileUp className="mr-1" />
Export
</Button>
)}
<Button
className="flex items-center"
variant="secondary"
size="sm"
onClick={onMarkAsReviewed}
>
<LuCheckSquare className="mr-1" />
Mark as reviewed
</Button>
<Button
className="flex items-center"
variant="secondary"
size="sm"
onClick={onDelete}
>
<LuTrash className="mr-1" />
Delete
</Button>
</div>
);
}

25
web/src/views/events/EventView.tsx
View File

@ -246,13 +246,29 @@ export default function EventView({
pullLatestData();
}, [currentItems, minimapBounds]);
const exportReview = useCallback(
(id: string) => {
const review = currentItems?.find((seg) => seg.id == id);
if (!review) {
return;
}
axios.post(
`export/${review.camera}/start/${review.start_time}/end/${review.end_time}`,
{ playback: "realtime" },
);
},
[selectedReviews],
);
if (!config) {
return <ActivityIndicator />;
}
return (
<div className="flex flex-col size-full">
<div className="relative flex justify-between mb-2">
<div className="h-8 relative flex justify-between items-center mb-2">
{isMobile && (
<Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
)}
@ -290,11 +306,14 @@ export default function EventView({
<div className="hidden md:block">Motion</div>
</ToggleGroupItem>
</ToggleGroup>
<ReviewFilterGroup filter={filter} onUpdateFilter={updateFilter} />
{selectedReviews.length > 0 && (
{selectedReviews.length <= 0 ? (
<ReviewFilterGroup filter={filter} onUpdateFilter={updateFilter} />
) : (
<ReviewActionGroup
selectedReviews={selectedReviews}
setSelectedReviews={setSelectedReviews}
onExport={exportReview}
pullLatestData={pullLatestData}
/>
)}