simple tracker config dialog

[alttp.git] / resources / js / components / tracker / ConfigDialog.js

diff --git a/resources/js/components/tracker/ConfigDialog.js b/resources/js/components/tracker/ConfigDialog.js
new file mode 100644 (file)
index 0000000..88c6d73
--- /dev/null
+++ b/resources/js/components/tracker/ConfigDialog.js
@@ -0,0 +1,180 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Col, Form, Modal, Row } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import LargeCheck from '../common/LargeCheck';
+import { useTracker } from '../../hooks/tracker';
+
+const ConfigDialog = ({
+       onHide,
+       show,
+}) => {
+       const { config, saveConfig } = useTracker();
+       const { t } = useTranslation();
+
+       const handleChange = React.useCallback(({ target: { name, value } }) => {
+               saveConfig({ [name]: value });
+       }, [saveConfig]);
+
+       return <Modal className="tracker-config-dialog" onHide={onHide} show={show} size="lg">
+               <Modal.Header closeButton>
+                       <Modal.Title>
+                               {t('tracker.config.title')}
+                       </Modal.Title>
+               </Modal.Header>
+               <Modal.Body>
+                       <Row>
+                               <Col sm={6}>
+                                       <h3>{t('tracker.config.wildItems')}</h3>
+                                       <Form.Group
+                                               className="d-flex justify-content-between my-2"
+                                               controlId="tracker.wildMap"
+                                       >
+                                               <Form.Label>{t('tracker.config.wildMap')}</Form.Label>
+                                               <Form.Control
+                                                       as={LargeCheck}
+                                                       name="wildMap"
+                                                       onChange={handleChange}
+                                                       value={!!config.wildMap}
+                                               />
+                                       </Form.Group>
+                                       <Form.Group
+                                               className="d-flex justify-content-between my-2"
+                                               controlId="tracker.wildCompass"
+                                       >
+                                               <Form.Label>{t('tracker.config.wildCompass')}</Form.Label>
+                                               <Form.Control
+                                                       as={LargeCheck}
+                                                       name="wildCompass"
+                                                       onChange={handleChange}
+                                                       value={!!config.wildCompass}
+                                               />
+                                       </Form.Group>
+                                       <Form.Group
+                                               className="d-flex justify-content-between my-2"
+                                               controlId="tracker.wildSmall"
+                                       >
+                                               <Form.Label>{t('tracker.config.wildSmall')}</Form.Label>
+                                               <Form.Control
+                                                       as={LargeCheck}
+                                                       name="wildSmall"
+                                                       onChange={handleChange}
+                                                       value={!!config.wildSmall}
+                                               />
+                                       </Form.Group>
+                                       <Form.Group
+                                               className="d-flex justify-content-between my-2"
+                                               controlId="tracker.wildBig"
+                                       >
+                                               <Form.Label>{t('tracker.config.wildBig')}</Form.Label>
+                                               <Form.Control
+                                                       as={LargeCheck}
+                                                       name="wildBig"
+                                                       onChange={handleChange}
+                                                       value={!!config.wildBig}
+                                               />
+                                       </Form.Group>
+                               </Col>
+                               <Col sm={6}>
+                                       <h3>{t('tracker.config.showItems')}</h3>
+                                       <Form.Group
+                                               className="d-flex justify-content-between my-2"
+                                               controlId="tracker.showMap"
+                                       >
+                                               <Form.Label>{t('tracker.config.showMap')}</Form.Label>
+                                               <Form.Select
+                                                       className="w-auto"
+                                                       name="showMap"
+                                                       onChange={handleChange}
+                                                       value={config.showMap || 'always'}
+                                               >
+                                                       <option value="never">
+                                                               {t('tracker.config.showItemOptions.never')}
+                                                       </option>
+                                                       <option value="situational">
+                                                               {t('tracker.config.showItemOptions.situational')}
+                                                       </option>
+                                                       <option value="always">
+                                                               {t('tracker.config.showItemOptions.always')}
+                                                       </option>
+                                               </Form.Select>
+                                       </Form.Group>
+                                       <Form.Group
+                                               className="d-flex justify-content-between my-2"
+                                               controlId="tracker.showCompass"
+                                       >
+                                               <Form.Label>{t('tracker.config.showCompass')}</Form.Label>
+                                               <Form.Select
+                                                       className="w-auto"
+                                                       name="showCompass"
+                                                       onChange={handleChange}
+                                                       value={config.showCompass || 'always'}
+                                               >
+                                                       <option value="never">
+                                                               {t('tracker.config.showItemOptions.never')}
+                                                       </option>
+                                                       <option value="situational">
+                                                               {t('tracker.config.showItemOptions.situational')}
+                                                       </option>
+                                                       <option value="always">
+                                                               {t('tracker.config.showItemOptions.always')}
+                                                       </option>
+                                               </Form.Select>
+                                       </Form.Group>
+                                       <Form.Group
+                                               className="d-flex justify-content-between my-2"
+                                               controlId="tracker.showSmall"
+                                       >
+                                               <Form.Label>{t('tracker.config.showSmall')}</Form.Label>
+                                               <Form.Select
+                                                       className="w-auto"
+                                                       name="showSmall"
+                                                       onChange={handleChange}
+                                                       value={config.showSmall || 'always'}
+                                               >
+                                                       <option value="never">
+                                                               {t('tracker.config.showItemOptions.never')}
+                                                       </option>
+                                                       <option value="situational">
+                                                               {t('tracker.config.showItemOptions.situational')}
+                                                       </option>
+                                                       <option value="always">
+                                                               {t('tracker.config.showItemOptions.always')}
+                                                       </option>
+                                               </Form.Select>
+                                       </Form.Group>
+                                       <Form.Group
+                                               className="d-flex justify-content-between my-2"
+                                               controlId="tracker.showBig"
+                                       >
+                                               <Form.Label>{t('tracker.config.showBig')}</Form.Label>
+                                               <Form.Select
+                                                       className="w-auto"
+                                                       name="showBig"
+                                                       onChange={handleChange}
+                                                       value={config.showBig || 'always'}
+                                               >
+                                                       <option value="never">
+                                                               {t('tracker.config.showItemOptions.never')}
+                                                       </option>
+                                                       <option value="situational">
+                                                               {t('tracker.config.showItemOptions.situational')}
+                                                       </option>
+                                                       <option value="always">
+                                                               {t('tracker.config.showItemOptions.always')}
+                                                       </option>
+                                               </Form.Select>
+                                       </Form.Group>
+                               </Col>
+                       </Row>
+               </Modal.Body>
+       </Modal>;
+};
+
+ConfigDialog.propTypes = {
+       onHide: PropTypes.func,
+       show: PropTypes.bool,
+};
+
+export default ConfigDialog;