]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/results/DetailDialog.js
chat bot protocol ui
[alttp.git] / resources / js / components / results / DetailDialog.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
4 import { useTranslation } from 'react-i18next';
5
6 import Box from '../users/Box';
7 import { getTime } from '../../helpers/Result';
8 import { maySeeResults } from '../../helpers/permissions';
9 import { findResult } from '../../helpers/User';
10 import { useUser } from '../../hooks/user';
11
12 const getPlacement = (result, t) =>
13         `${result.placement}. (${t('results.points', { count: result.score })})`;
14
15 const DetailDialog = ({
16         onHide,
17         round,
18         show,
19         tournament,
20         user,
21 }) => {
22         const { t } = useTranslation();
23         const { user: authUser } = useUser();
24
25         const result = React.useMemo(
26                 () => findResult(user, round),
27                 [round, user],
28         );
29         const maySee = React.useMemo(
30                 () => maySeeResults(authUser, tournament, round),
31                 [authUser, round, tournament],
32         );
33
34         return <Modal className="result-dialog" onHide={onHide} show={show}>
35                 <Modal.Header closeButton>
36                         <Modal.Title>
37                                 {t('results.details')}
38                         </Modal.Title>
39                 </Modal.Header>
40                 <Modal.Body>
41                         <Row>
42                                 <Form.Group as={Col} sm={6}>
43                                         <Form.Label>{t('results.round')}</Form.Label>
44                                         <div>
45                                                 #{round.number || '?'}
46                                                 {' '}
47                                                 {t('rounds.date', { date: new Date(round.created_at) })}
48                                         </div>
49                                 </Form.Group>
50                                 <Form.Group as={Col} sm={6}>
51                                         <Form.Label>{t('results.runner')}</Form.Label>
52                                         <div><Box user={user} /></div>
53                                 </Form.Group>
54                                 <Form.Group as={Col} sm={6}>
55                                         <Form.Label>{t('results.result')}</Form.Label>
56                                         <div>
57                                                 {maySee && result && result.has_finished
58                                                         ? getTime(result, maySee)
59                                                         : t('results.pending')}
60                                         </div>
61                                 </Form.Group>
62                                 <Form.Group as={Col} sm={6}>
63                                         <Form.Label>{t('results.placement')}</Form.Label>
64                                         <div>
65                                                 {maySee && result && result.placement
66                                                         ? getPlacement(result, t)
67                                                         : t('results.pending')}
68                                         </div>
69                                 </Form.Group>
70                                 {maySee && result && result.comment ?
71                                         <Form.Group as={Col} sm={12}>
72                                                 <Form.Label>{t('results.comment')}</Form.Label>
73                                                 <div>{result.comment}</div>
74                                         </Form.Group>
75                                 : null}
76                         </Row>
77                 </Modal.Body>
78                 <Modal.Footer>
79                         <Button onClick={onHide} variant="secondary">
80                                 {t('button.close')}
81                         </Button>
82                 </Modal.Footer>
83         </Modal>;
84 };
85
86 DetailDialog.propTypes = {
87         onHide: PropTypes.func,
88         round: PropTypes.shape({
89                 created_at: PropTypes.string,
90                 number: PropTypes.number,
91         }),
92         show: PropTypes.bool,
93         tournament: PropTypes.shape({
94         }),
95         user: PropTypes.shape({
96         }),
97 };
98
99 export default DetailDialog;