X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftracker%2FToolbar.js;h=020826635a65a215fa89bf452c81d5af58734a61;hb=249e06be11d0f7778d99956c87d4f0a8ac7e69f7;hp=169d7bc3bce7eedc6ff72e77dba50c7faeb4251e;hpb=b5a50d74cf042fa7fc874d8184dc37ae20bb74dd;p=alttp.git

diff --git a/resources/js/components/tracker/Toolbar.js b/resources/js/components/tracker/Toolbar.js
index 169d7bc..0208266 100644
--- a/resources/js/components/tracker/Toolbar.js
+++ b/resources/js/components/tracker/Toolbar.js
@@ -1,8 +1,10 @@
 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 = {
@@ -13,21 +15,29 @@ 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']} />
@@ -35,6 +45,7 @@ const Toolbar = () => {
 			</div>
 			<AutoTracking />
 		</Container>
+		<ConfigDialog onHide={() => setShowConfigDialog(false)} show={showConfigDialog} />
 	</Navbar>;
 };