resources/js/components/tracker/ConfigDialog.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Col, Form, Modal, Row } from 'react-bootstrap';
   4 import { useTranslation } from 'react-i18next';
   5
   6 import LargeCheck from '../common/LargeCheck';
   7 import { useTracker } from '../../hooks/tracker';
   8
   9 const ConfigDialog = ({
  10         onHide,
  11         show,
  12 }) => {
  13         const { config, saveConfig } = useTracker();
  14         const { t } = useTranslation();
  15
  16         const handleChange = React.useCallback(({ target: { name, value } }) => {
  17                 saveConfig({ [name]: value });
  18         }, [saveConfig]);
  19
  20         return <Modal className="tracker-config-dialog" onHide={onHide} show={show} size="lg">
  21                 <Modal.Header closeButton>
  22                         <Modal.Title>
  23                                 {t('tracker.config.title')}
  24                         </Modal.Title>
  25                 </Modal.Header>
  26                 <Modal.Body>
  27                         <Row>
  28                                 <Col sm={6}>
  29                                         <h3>{t('tracker.config.wildItems')}</h3>
  30                                         <Form.Group
  31                                                 className="d-flex justify-content-between my-2"
  32                                                 controlId="tracker.wildMap"
  33                                         >
  34                                                 <Form.Label>{t('tracker.config.wildMap')}</Form.Label>
  35                                                 <Form.Control
  36                                                         as={LargeCheck}
  37                                                         name="wildMap"
  38                                                         onChange={handleChange}
  39                                                         value={!!config.wildMap}
  40                                                 />
  41                                         </Form.Group>
  42                                         <Form.Group
  43                                                 className="d-flex justify-content-between my-2"
  44                                                 controlId="tracker.wildCompass"
  45                                         >
  46                                                 <Form.Label>{t('tracker.config.wildCompass')}</Form.Label>
  47                                                 <Form.Control
  48                                                         as={LargeCheck}
  49                                                         name="wildCompass"
  50                                                         onChange={handleChange}
  51                                                         value={!!config.wildCompass}
  52                                                 />
  53                                         </Form.Group>
  54                                         <Form.Group
  55                                                 className="d-flex justify-content-between my-2"
  56                                                 controlId="tracker.wildSmall"
  57                                         >
  58                                                 <Form.Label>{t('tracker.config.wildSmall')}</Form.Label>
  59                                                 <Form.Control
  60                                                         as={LargeCheck}
  61                                                         name="wildSmall"
  62                                                         onChange={handleChange}
  63                                                         value={!!config.wildSmall}
  64                                                 />
  65                                         </Form.Group>
  66                                         <Form.Group
  67                                                 className="d-flex justify-content-between my-2"
  68                                                 controlId="tracker.wildBig"
  69                                         >
  70                                                 <Form.Label>{t('tracker.config.wildBig')}</Form.Label>
  71                                                 <Form.Control
  72                                                         as={LargeCheck}
  73                                                         name="wildBig"
  74                                                         onChange={handleChange}
  75                                                         value={!!config.wildBig}
  76                                                 />
  77                                         </Form.Group>
  78                                 </Col>
  79                                 <Col sm={6}>
  80                                         <h3>{t('tracker.config.showItems')}</h3>
  81                                         <Form.Group
  82                                                 className="d-flex justify-content-between my-2"
  83                                                 controlId="tracker.showMap"
  84                                         >
  85                                                 <Form.Label>{t('tracker.config.showMap')}</Form.Label>
  86                                                 <Form.Select
  87                                                         className="w-auto"
  88                                                         name="showMap"
  89                                                         onChange={handleChange}
  90                                                         value={config.showMap || 'always'}
  91                                                 >
  92                                                         <option value="never">
  93                                                                 {t('tracker.config.showItemOptions.never')}
  94                                                         </option>
  95                                                         <option value="situational">
  96                                                                 {t('tracker.config.showItemOptions.situational')}
  97                                                         </option>
  98                                                         <option value="always">
  99                                                                 {t('tracker.config.showItemOptions.always')}
 100                                                         </option>
 101                                                 </Form.Select>
 102                                         </Form.Group>
 103                                         <Form.Group
 104                                                 className="d-flex justify-content-between my-2"
 105                                                 controlId="tracker.showCompass"
 106                                         >
 107                                                 <Form.Label>{t('tracker.config.showCompass')}</Form.Label>
 108                                                 <Form.Select
 109                                                         className="w-auto"
 110                                                         name="showCompass"
 111                                                         onChange={handleChange}
 112                                                         value={config.showCompass || 'always'}
 113                                                 >
 114                                                         <option value="never">
 115                                                                 {t('tracker.config.showItemOptions.never')}
 116                                                         </option>
 117                                                         <option value="situational">
 118                                                                 {t('tracker.config.showItemOptions.situational')}
 119                                                         </option>
 120                                                         <option value="always">
 121                                                                 {t('tracker.config.showItemOptions.always')}
 122                                                         </option>
 123                                                 </Form.Select>
 124                                         </Form.Group>
 125                                         <Form.Group
 126                                                 className="d-flex justify-content-between my-2"
 127                                                 controlId="tracker.showSmall"
 128                                         >
 129                                                 <Form.Label>{t('tracker.config.showSmall')}</Form.Label>
 130                                                 <Form.Select
 131                                                         className="w-auto"
 132                                                         name="showSmall"
 133                                                         onChange={handleChange}
 134                                                         value={config.showSmall || 'always'}
 135                                                 >
 136                                                         <option value="never">
 137                                                                 {t('tracker.config.showItemOptions.never')}
 138                                                         </option>
 139                                                         <option value="situational">
 140                                                                 {t('tracker.config.showItemOptions.situational')}
 141                                                         </option>
 142                                                         <option value="always">
 143                                                                 {t('tracker.config.showItemOptions.always')}
 144                                                         </option>
 145                                                 </Form.Select>
 146                                         </Form.Group>
 147                                         <Form.Group
 148                                                 className="d-flex justify-content-between my-2"
 149                                                 controlId="tracker.showBig"
 150                                         >
 151                                                 <Form.Label>{t('tracker.config.showBig')}</Form.Label>
 152                                                 <Form.Select
 153                                                         className="w-auto"
 154                                                         name="showBig"
 155                                                         onChange={handleChange}
 156                                                         value={config.showBig || 'always'}
 157                                                 >
 158                                                         <option value="never">
 159                                                                 {t('tracker.config.showItemOptions.never')}
 160                                                         </option>
 161                                                         <option value="situational">
 162                                                                 {t('tracker.config.showItemOptions.situational')}
 163                                                         </option>
 164                                                         <option value="always">
 165                                                                 {t('tracker.config.showItemOptions.always')}
 166                                                         </option>
 167                                                 </Form.Select>
 168                                         </Form.Group>
 169                                 </Col>
 170                         </Row>
 171                 </Modal.Body>
 172         </Modal>;
 173 };
 174
 175 ConfigDialog.propTypes = {
 176         onHide: PropTypes.func,
 177         show: PropTypes.bool,
 178 };
 179
 180 export default ConfigDialog;