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;