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

improved user experience

Browse Source
This commit is contained in:
ElMoribond 2021-07-12 14:46:59 +02:00 committed by GitHub
parent f2eebf2a02
commit 8652b454bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/AppBar.jsx
View File

@ -6,17 +6,14 @@ import AutoAwesomeIcon from './icons/AutoAwesome';
import LightModeIcon from './icons/LightMode'; import LightModeIcon from './icons/LightMode';
import DarkModeIcon from './icons/DarkMode'; import DarkModeIcon from './icons/DarkMode';
import FrigateRestartIcon from './icons/FrigateRestart'; import FrigateRestartIcon from './icons/FrigateRestart';
import Dialog from './components/Dialog'; import DialogRestart from './components/DialogRestart';
import { useDarkMode } from './context'; import { useDarkMode } from './context';
import { useCallback, useRef, useState } from 'preact/hooks'; import { useCallback, useRef, useState } from 'preact/hooks';
import { useRestart } from './api/mqtt';
export default function AppBar() { export default function AppBar() {
const [showMoreMenu, setShowMoreMenu] = useState(false); const [showMoreMenu, setShowMoreMenu] = useState(false);
const [showDialog, setShowDialog] = useState(false); const [showDialogRestart, setShowDialogRestart] = useState(false);
const [showDialogWait, setShowDialogWait] = useState(false);
const { setDarkMode } = useDarkMode(); const { setDarkMode } = useDarkMode();
const { send: sendRestart } = useRestart();
const handleSelectDarkMode = useCallback( const handleSelectDarkMode = useCallback(
(value, label) => { (value, label) => {
@ -36,16 +33,6 @@ export default function AppBar() {
setShowMoreMenu(false); setShowMoreMenu(false);
}, [setShowMoreMenu]); }, [setShowMoreMenu]);
const handleClickRestartDialog = useCallback(() => {
setShowDialog(false);
setShowDialogWait(true);
sendRestart();
}, [setShowDialog]); // eslint-disable-line react-hooks/exhaustive-deps
const handleDismissRestartDialog = useCallback(() => {
setShowDialog(false);
}, [setShowDialog]);
const handleRestart = useCallback(() => { const handleRestart = useCallback(() => {
setShowMoreMenu(false); setShowMoreMenu(false);
setShowDialog(true); setShowDialog(true);
@ -63,24 +50,8 @@ export default function AppBar() {
<MenuSeparator /> <MenuSeparator />
<MenuItem icon={FrigateRestartIcon} label="Restart Frigate" onSelect={handleRestart} /> <MenuItem icon={FrigateRestartIcon} label="Restart Frigate" onSelect={handleRestart} />
</Menu> </Menu>
) : null},
{showDialog ? (
<Dialog
onDismiss={handleDismissRestartDialog}
title="Restart Frigate"
text="Are you sure?"
actions={[
{ text: 'Yes', color: 'red', onClick: handleClickRestartDialog },
{ text: 'Cancel', onClick: handleDismissRestartDialog },
]}
/>
) : null},
{showDialogWait ? (
<Dialog
title="Restart in progress"
text="Please wait a few seconds for the restart to complete before reloading the page."
/>
) : null} ) : null}
<DialogRestart showDialog={showDialogRestart} setShowDialog={setShowDialogRestart} />
</Fragment> </Fragment>
); );
} }