import React from 'react';
-import { Container, Navbar } from 'react-bootstrap';
+import { Button, Container, Navbar } from 'react-bootstrap';
import AutoTracking from './AutoTracking';
+import ConfigDialog from './ConfigDialog';
import ToggleIcon from './ToggleIcon';
+import Icon from '../common/Icon';
import { useTracker } from '../../hooks/tracker';
const mapWild = {
};
const Toolbar = () => {
- const { config, setConfig } = useTracker();
+ const [showConfigDialog, setShowConfigDialog] = React.useState(false);
+ const { config, saveConfig } = useTracker();
const controller = React.useMemo(() => ({
getActive: (state, icons) => config[mapWild[icons[0]]] ? icons[0] : null,
getDefault: (state, icons) => icons[0],
handlePrimary: (state, setState, icons) => {
const prop = mapWild[icons[0]];
- setConfig(c => ({ ...c, [prop]: !c[prop] }));
+ saveConfig({ [prop]: !config[prop] });
},
handleSecondary: () => null,
- }), [config, setConfig]);
+ }), [config, saveConfig]);
return <Navbar bg="dark" className="tracker-toolbar" variant="dark">
<Container fluid>
<div className="button-bar">
+ <Button
+ className="me-3"
+ onClick={() => setShowConfigDialog(true)}
+ variant="outline-secondary"
+ >
+ <Icon.SETTINGS />
+ </Button>
<ToggleIcon controller={controller} icons={['map']} />
<ToggleIcon controller={controller} icons={['compass']} />
<ToggleIcon controller={controller} icons={['small-key']} />
</div>
<AutoTracking />
</Container>
+ <ConfigDialog onHide={() => setShowConfigDialog(false)} show={showConfigDialog} />
</Navbar>;
};