frontend/containers/Travel/Header.tsx (view raw)
1import Typography from '@material-ui/core/Typography';
2import IconButton from '@material-ui/core/IconButton';
3import Icon from '@material-ui/core/Icon';
4import {makeStyles} from '@material-ui/core/styles';
5import moment from 'moment';
6import {useTranslation} from 'react-i18next';
7import Link from '@material-ui/core/Link';
8import {Travel} from '../../generated/graphql';
9
10interface Props {
11 travel: Travel;
12 toggleEditing: () => void;
13}
14
15const Header = (props: Props) => {
16 const {travel, toggleEditing} = props;
17 const classes = useStyles();
18 const {t} = useTranslation();
19
20 return (
21 <div className={classes.header}>
22 <IconButton
23 size="small"
24 color="primary"
25 className={classes.editBtn}
26 onClick={toggleEditing}
27 id="EditTravelBtn"
28 >
29 <Icon>edit</Icon>
30 </IconButton>
31 {!!travel.departure && (
32 <Typography variant="overline" id="TravelDeparture">
33 {moment(travel.departure).format('LLLL')}
34 </Typography>
35 )}
36 <Typography variant="h5" id="TravelName">
37 {travel.vehicle?.name}
38 </Typography>
39 {!!travel.vehicle?.phone_number && (
40 <div className={classes.section}>
41 <Typography variant="subtitle2">
42 {t('travel.fields.phone')}
43 </Typography>
44 <Typography variant="body2" id="TravelPhone">
45 {travel.vehicle?.phone_number}
46 </Typography>
47 </div>
48 )}
49 {!!travel.meeting && (
50 <div className={classes.section}>
51 <Typography variant="subtitle2">
52 {t('travel.fields.meeting_point')}
53 </Typography>
54 <Typography variant="body2" id="TravelMeeting">
55 <Link
56 component="a"
57 target="_blank"
58 rel="noopener noreferrer"
59 href={`https://maps.google.com/?q=${encodeURI(travel.meeting)}`}
60 >
61 {travel.meeting}
62 </Link>
63 </Typography>
64 </div>
65 )}
66 {!!travel.details && (
67 <div className={classes.section}>
68 <Typography variant="subtitle2">
69 {t('travel.fields.details')}
70 </Typography>
71 <Typography variant="body2" id="TravelDetails">
72 {travel.details}
73 </Typography>
74 </div>
75 )}
76 </div>
77 );
78};
79
80const useStyles = makeStyles(theme => ({
81 header: {
82 padding: theme.spacing(2),
83 },
84 editBtn: {
85 position: 'absolute',
86 top: 0,
87 right: 0,
88 margin: theme.spacing(1),
89 zIndex: theme.zIndex.speedDial,
90 },
91 section: {
92 marginTop: theme.spacing(2),
93 },
94}));
95
96export default Header;