administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-09 04:35:25 +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 { LuCheckSquare, LuFileUp, LuTrash } from "react-icons/lu";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "../ui/tooltip";
import { useCallback } from "react"; import { useCallback } from "react";
import axios from "axios"; import axios from "axios";
import { Button } from "../ui/button";
type ReviewActionGroupProps = { type ReviewActionGroupProps = {
selectedReviews: string[]; selectedReviews: string[];
setSelectedReviews: (ids: string[]) => void; setSelectedReviews: (ids: string[]) => void;
onExport: (id: string) => void;
pullLatestData: () => void; pullLatestData: () => void;
}; };
export default function ReviewActionGroup({ export default function ReviewActionGroup({
selectedReviews, selectedReviews,
setSelectedReviews, setSelectedReviews,
onExport,
pullLatestData, pullLatestData,
}: ReviewActionGroupProps) { }: ReviewActionGroupProps) {
const onClearSelected = useCallback(() => { const onClearSelected = useCallback(() => {
@ -37,36 +34,43 @@ export default function ReviewActionGroup({
}, [selectedReviews, setSelectedReviews, pullLatestData]); }, [selectedReviews, setSelectedReviews, pullLatestData]);
return ( 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"> <div className="absolute inset-x-2 inset-y-0 md:left-auto md:right-2 p-2 flex gap-2 justify-between items-center">
<TooltipProvider> <div className="text-sm text-gray-500">{`${selectedReviews.length} selected | `}</div>
<Tooltip> <Button size="sm" variant="link" onClick={onClearSelected}>
<TooltipTrigger asChild> Unselect
<div className="cursor-pointer" onClick={onClearSelected}> </Button>
<LuX /> {selectedReviews.length == 1 && (
</div> <Button
</TooltipTrigger> className="flex items-center"
<TooltipContent>Unselect All</TooltipContent> variant="secondary"
</Tooltip> size="sm"
<div className="flex gap-2 items-center"> onClick={() => {
<Tooltip> onExport(selectedReviews[0]);
<TooltipTrigger asChild> onClearSelected();
<div className="cursor-pointer" onClick={onMarkAsReviewed}> }}
<LuCheckSquare /> >
</div> <LuFileUp className="mr-1" />
</TooltipTrigger> Export
<TooltipContent>Mark Selected As Reviewed</TooltipContent> </Button>
</Tooltip> )}
<div className="text-sm font-thin">|</div> <Button
<Tooltip> className="flex items-center"
<TooltipTrigger asChild> variant="secondary"
<div className="cursor-pointer" onClick={onDelete}> size="sm"
<LuTrash /> onClick={onMarkAsReviewed}
</div> >
</TooltipTrigger> <LuCheckSquare className="mr-1" />
<TooltipContent>Delete Selected</TooltipContent> Mark as reviewed
</Tooltip> </Button>
</div> <Button
</TooltipProvider> className="flex items-center"
variant="secondary"
size="sm"
onClick={onDelete}
>
<LuTrash className="mr-1" />
Delete
</Button>
</div> </div>
); );
} }

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

@ -246,13 +246,29 @@ export default function EventView({
pullLatestData(); pullLatestData();
}, [currentItems, minimapBounds]); }, [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) { if (!config) {
return <ActivityIndicator />; return <ActivityIndicator />;
} }
return ( return (
<div className="flex flex-col size-full"> <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 && ( {isMobile && (
<Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" /> <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> <div className="hidden md:block">Motion</div>
</ToggleGroupItem> </ToggleGroupItem>
</ToggleGroup> </ToggleGroup>
{selectedReviews.length <= 0 ? (
<ReviewFilterGroup filter={filter} onUpdateFilter={updateFilter} /> <ReviewFilterGroup filter={filter} onUpdateFilter={updateFilter} />
{selectedReviews.length > 0 && ( ) : (
<ReviewActionGroup <ReviewActionGroup
selectedReviews={selectedReviews} selectedReviews={selectedReviews}
setSelectedReviews={setSelectedReviews} setSelectedReviews={setSelectedReviews}
onExport={exportReview}
pullLatestData={pullLatestData} pullLatestData={pullLatestData}
/> />
)} )}