-
Notifications
You must be signed in to change notification settings - Fork 5
/
Reservation.js
73 lines (69 loc) · 2.33 KB
/
Reservation.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import classnames from 'classnames';
import moment from 'moment';
import React, { PropTypes } from 'react';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Popover from 'react-bootstrap/lib/Popover';
import FontAwesome from 'react-fontawesome';
import utils from '../utils';
import Link from './Link';
Reservation.propTypes = {
begin: PropTypes.string.isRequired,
end: PropTypes.string.isRequired,
visualBegin: PropTypes.string,
visualEnd: PropTypes.string,
eventSubject: PropTypes.string,
id: PropTypes.number.isRequired,
numberOfParticipants: PropTypes.number,
onClick: PropTypes.func.isRequired,
reserverName: PropTypes.string,
userPermissions: PropTypes.shape({
canModify: PropTypes.bool.isRequired,
}).isRequired,
};
function Reservation(props) {
// If a reservation is between slots, the visual
// and actual start/end times can be different
const visualStartTime = moment(props.visualBegin || props.begin);
const visualEndTime = moment(props.visualEnd || props.end);
const startTime = moment(props.begin);
const endTime = moment(props.end);
const width = utils.getTimeSlotWidth({ startTime: visualStartTime, endTime: visualEndTime });
const popover = (
<Popover id={`popover-${props.id}`} title={props.eventSubject}>
<div>
<FontAwesome fixedWidth name="clock-o" />{' '}
{startTime.format('HH:mm')}–{endTime.format('HH:mm')}
</div>
<div><FontAwesome fixedWidth name="user" /> {props.reserverName}</div>
{Boolean(props.numberOfParticipants) && (
<div><FontAwesome fixedWidth name="users" /> {props.numberOfParticipants}</div>
)}
</Popover>
);
return (
<Link
className="reservation-link"
onClick={() => props.onClick(props.id)}
>
<OverlayTrigger
overlay={popover}
placement="top"
trigger={['hover', 'focus']}
>
<div
className={classnames(
'reservation',
{ 'reservation-can-modify': props.userPermissions.canModify },
)}
style={{ width }}
>
<div className="names">
<div className="reserver-name">{props.reserverName}</div>
<div className="event-subject">{props.eventSubject}</div>
</div>
</div>
</OverlayTrigger>
</Link>
);
}
export default Reservation;