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

Add warning dialog to toggle buttons on camera cards.

Browse Source
This commit is contained in:
Michael Pearson 2022-04-23 09:49:29 +10:00
parent f2030d301f
commit 5ffc06f96f
1 changed files with 56 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
web/src/routes/Cameras.jsx
View File

@ -5,8 +5,9 @@ import CameraImage from '../components/CameraImage';
import ClipIcon from '../icons/Clip'; import ClipIcon from '../icons/Clip';
import MotionIcon from '../icons/Motion'; import MotionIcon from '../icons/Motion';
import SnapshotIcon from '../icons/Snapshot'; import SnapshotIcon from '../icons/Snapshot';
import Dialog from '../components/Dialog';
import { useDetectState, useRecordingsState, useSnapshotsState } from '../api/mqtt'; import { useDetectState, useRecordingsState, useSnapshotsState } from '../api/mqtt';
import { useMemo } from 'preact/hooks'; import { useMemo, useState } from 'preact/hooks';
import useSWR from 'swr'; import useSWR from 'swr';
export default function Cameras() { export default function Cameras() {
@ -40,8 +41,11 @@ function SortedCameras({ unsortedCameras }) {
function Camera({ name }) { function Camera({ name }) {
const { payload: detectValue, send: sendDetect } = useDetectState(name); const { payload: detectValue, send: sendDetect } = useDetectState(name);
const [showToggleDetectDialog, setShowToggleDetectDialog] = useState(false);
const { payload: recordValue, send: sendRecordings } = useRecordingsState(name); const { payload: recordValue, send: sendRecordings } = useRecordingsState(name);
const [showToggleRecordingDialog, setShowToggleRecordingDialog] = useState(false);
const { payload: snapshotValue, send: sendSnapshots } = useSnapshotsState(name); const { payload: snapshotValue, send: sendSnapshots } = useSnapshotsState(name);
const [showToggleSnapshotDialog, setShowToggleSnapshotDialog] = useState(false);
const href = `/cameras/${name}`; const href = `/cameras/${name}`;
const buttons = useMemo(() => { const buttons = useMemo(() => {
return [ return [
@ -56,7 +60,7 @@ function Camera({ name }) {
icon: MotionIcon, icon: MotionIcon,
color: detectValue === 'ON' ? 'blue' : 'gray', color: detectValue === 'ON' ? 'blue' : 'gray',
onClick: () => { onClick: () => {
sendDetect(detectValue === 'ON' ? 'OFF' : 'ON'); setShowToggleDetectDialog(true);
}, },
}, },
{ {
@ -64,7 +68,7 @@ function Camera({ name }) {
icon: ClipIcon, icon: ClipIcon,
color: recordValue === 'ON' ? 'blue' : 'gray', color: recordValue === 'ON' ? 'blue' : 'gray',
onClick: () => { onClick: () => {
sendRecordings(recordValue === 'ON' ? 'OFF' : 'ON'); setShowToggleRecordingDialog(true);
}, },
}, },
{ {
@ -72,14 +76,60 @@ function Camera({ name }) {
icon: SnapshotIcon, icon: SnapshotIcon,
color: snapshotValue === 'ON' ? 'blue' : 'gray', color: snapshotValue === 'ON' ? 'blue' : 'gray',
onClick: () => { onClick: () => {
sendSnapshots(snapshotValue === 'ON' ? 'OFF' : 'ON'); setShowToggleSnapshotDialog(true);
}, },
}, },
], ],
[detectValue, sendDetect, recordValue, sendRecordings, snapshotValue, sendSnapshots] [detectValue, recordValue, snapshotValue]
);
const dialogs = useMemo(
() => [
{
showDialog: showToggleRecordingDialog,
dismiss: () => setShowToggleRecordingDialog(false),
title: `${recordValue === 'ON' ? 'Disable' : 'Enable '} recordings?`,
callback: () => {
sendRecordings(recordValue === 'ON' ? 'OFF' : 'ON');
setShowToggleRecordingDialog(false);
}
},
{
showDialog: showToggleDetectDialog,
dismiss: () => setShowToggleDetectDialog(false),
title: `${detectValue === 'ON' ? 'Disable' : 'Enable '} detection?`,
callback: () => {
sendDetect(snapshotValue === 'ON' ? 'OFF' : 'ON');
setShowToggleDetectDialog(false);
}
},
{
showDialog: showToggleSnapshotDialog,
dismiss: () => setShowToggleSnapshotDialog(false),
title: `${snapshotValue === 'ON' ? 'Disable' : 'Enable '} snapshots?`,
callback: () => {
sendSnapshots(snapshotValue === 'ON' ? 'OFF' : 'ON');
setShowToggleSnapshotDialog(false);
},
},
],
[showToggleDetectDialog, showToggleRecordingDialog, showToggleSnapshotDialog, detectValue, recordValue, snapshotValue]
); );
return ( return (
<Fragment>
<Card buttons={buttons} href={href} header={name} icons={icons} media={<CameraImage camera={name} stretch />} /> <Card buttons={buttons} href={href} header={name} icons={icons} media={<CameraImage camera={name} stretch />} />
{dialogs.map(({showDialog, dismiss, title, callback}) =>
showDialog ? <Dialog
title={title}
text="Are you sure?"
onDismiss={dismiss}
actions={[
{text: 'Yes', color: 'red', onClick: callback},
{text: 'Cancel', onClick: dismiss},
]}
/> : null
)}
</Fragment>
); );
} }