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

addressing PR comments

Browse Source
This commit is contained in:
mitch ross 2021-03-31 12:23:49 -04:00 committed by Mitch Ross
parent f67f3e78ef
commit b282e320cc
2 changed files with 38 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/Dialog.jsx
View File

@ -32,8 +32,8 @@ export default function Dialog({ actions = [], portalRootID = 'dialogs', title,
<p>{text}</p> <p>{text}</p>
</div> </div>
<div className="p-2 flex justify-start flex-row-reverse space-x-2"> <div className="p-2 flex justify-start flex-row-reverse space-x-2">
{actions.map(({ color, text, onClick }, i) => ( {actions.map(({ color, text, onClick, ...props }, i) => (
<Button className="ml-2" color={color} key={i} onClick={onClick} type="text"> <Button className="ml-2" color={color} key={i} onClick={onClick} type="text" {...props}>
{text} {text}
</Button> </Button>
))} ))}

43
web/src/routes/Event.jsx
View File

@ -14,25 +14,46 @@ export default function Event({ eventId }) {
const apiHost = useApiHost(); const apiHost = useApiHost();
const { data, status } = useEvent(eventId); const { data, status } = useEvent(eventId);
const [showDialog, setShowDialog] = useState(false); const [showDialog, setShowDialog] = useState(false);
const [deleteStatus, setDeleteStatus] = useState(FetchStatus.NONE);
const [deleteMessage, setDeleteMessage] = useState();
const handleClickDelete = () => { const handleClickDelete = () => {
setShowDialog(true); setShowDialog(true);
} };
const handleDismissDeleteDialog = () => { const handleDismissDeleteDialog = () => {
setShowDialog(false); setShowDialog(false);
}; };
const handleClickDeleteDialog = useCallback(
async () => { const handleClickDeleteDialog = useCallback(async () => {
await fetch(`${apiHost}/api/events/${eventId}`, {method: 'DELETE'});
setDeleteStatus(FetchStatus.LOADING);
let success;
try {
debugger;
const response = await fetch(`${apiHost}/api/events/${eventId}`, { method: 'DELETE' });
debugger;
const deleteEvent = await response.json();
success = deleteEvent.success;
debugger;
setDeleteStatus(success ? FetchStatus.LOADED : FetchStatus.ERROR);
setDeleteMessage(deleteEvent.message);
} catch (e) {
setDeleteStatus(FetchStatus.ERROR);
}
if (success) {
setDeleteStatus(FetchStatus.LOADED);
setShowDialog(false); setShowDialog(false);
route('/events', true); route('/events', true);
}, [apiHost, eventId, setShowDialog]
); }
}, [apiHost, eventId, setShowDialog]);
if (status !== FetchStatus.LOADED) { if (status !== FetchStatus.LOADED) {
return <ActivityIndicator />; return <ActivityIndicator />
} }
const startime = new Date(data.start_time * 1000); const startime = new Date(data.start_time * 1000);
@ -44,8 +65,8 @@ export default function Event({ eventId }) {
<Heading className="flex-grow"> <Heading className="flex-grow">
{data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span> {data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span>
</Heading> </Heading>
<Button className="self-start" color="red" aria-label="Delete Event" onClick={handleClickDelete}> <Button className="self-start" color="red" onClick={handleClickDelete}>
<Delete className="w-6" /> <Delete className="w-6" /> Delete event
</Button> </Button>
{showDialog ? ( {showDialog ? (
<Dialog <Dialog
@ -53,7 +74,9 @@ export default function Event({ eventId }) {
title="Delete Event?" title="Delete Event?"
text="This event will be permanently deleted along with any related clips and snapshots" text="This event will be permanently deleted along with any related clips and snapshots"
actions={[ actions={[
{ text: 'Delete', color: 'red', onClick: handleClickDeleteDialog }, deleteStatus !== FetchStatus.LOADING
? { text: 'Delete', color: 'red', onClick: handleClickDeleteDialog }
: { text: 'Deleting…', color: 'red', disabled: true },
{ text: 'Cancel', onClick: handleDismissDeleteDialog }, { text: 'Cancel', onClick: handleDismissDeleteDialog },
]} ]}
/> />