frontend/src/components/SchedulerRow.tsx

150 lines
4.5 KiB
TypeScript
Raw Normal View History

2020-10-26 23:14:23 +01:00
import React, { MouseEvent, useState } from 'react';
2020-09-28 20:16:54 +02:00
import { Group, GroupType } from '../types';
import styled from 'styled-components/macro';
import Popover from '@material-ui/core/Popover';
import Typography from '@material-ui/core/Typography';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
popover: {
pointerEvents: 'none',
},
paper: {
padding: theme.spacing(1),
marginLeft: 5,
2020-09-28 18:36:38 +02:00
textAlign: 'center',
},
}),
);
2020-08-12 04:13:14 +02:00
2020-11-19 21:57:34 +01:00
interface ClassesWrapperProps {
2020-08-12 04:13:14 +02:00
eventIndex: number;
cellTop: number;
cellWidth: number;
cellHeight: number;
2020-08-12 04:13:14 +02:00
}
2020-11-19 21:57:34 +01:00
const ClassesWrapper = styled.div<ClassesWrapperProps>`
2020-08-12 04:13:14 +02:00
position: absolute;
display: flex;
top: ${({ cellTop }) => cellTop}px;
2020-11-19 21:57:34 +01:00
left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 15 + cellWidth * eventIndex}px;
width: ${({ cellWidth }) => cellWidth - 10}px;
2020-11-13 23:05:10 +01:00
height: ${({ cellHeight }) => cellHeight * 3}px;
2020-09-11 18:56:14 +02:00
z-index: 2;
2020-11-19 21:57:34 +01:00
padding-left: 10px;
2020-09-11 18:56:14 +02:00
`;
2020-10-26 23:14:23 +01:00
interface ClassesProps {
2020-09-28 20:16:54 +02:00
cellHeight: number;
groupType: GroupType;
}
const Classes = styled.div<ClassesProps>`
2020-09-28 18:36:38 +02:00
display: flex;
2020-11-19 21:57:34 +01:00
flex: 1;
2020-09-28 18:36:38 +02:00
justify-content: center;
align-items: center;
2020-08-12 04:13:14 +02:00
z-index: 2;
2020-09-11 18:56:14 +02:00
border-radius: 10px;
2020-11-19 21:57:34 +01:00
height: ${({ cellHeight }) => cellHeight * 3}px;
margin-right: 5px;
2020-11-03 00:59:42 +01:00
text-align: left;
background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
2020-10-26 23:14:23 +01:00
box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59);
2020-08-12 04:13:14 +02:00
`;
2020-08-09 20:44:35 +02:00
interface SchedulerRowProps {
groups: Array<Group & { name: string }>;
2020-08-09 20:44:35 +02:00
indexRow: number;
cellTop: number;
cellWidth: number;
cellHeight: number;
2020-08-09 20:44:35 +02:00
}
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
2020-09-28 18:36:38 +02:00
const [popoverId, setPopoverId] = useState<string | null>(null);
//looks weird
const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
setAnchorEl(event.currentTarget);
2020-09-28 18:36:38 +02:00
setPopoverId(event.currentTarget.id);
};
const handlePopoverClose = () => {
setAnchorEl(null);
setPopoverId(null);
};
const open = Boolean(anchorEl);
2020-08-09 20:44:35 +02:00
return (
2020-11-13 23:05:10 +01:00
<div>
2020-08-18 00:21:21 +02:00
{[...Array(5)].map((_, eventIndex) => (
2020-11-19 21:57:34 +01:00
<ClassesWrapper
2020-08-12 04:13:14 +02:00
eventIndex={eventIndex}
cellTop={cellTop}
cellWidth={cellWidth}
cellHeight={cellHeight}
2020-08-18 00:21:21 +02:00
key={eventIndex}
2020-08-09 21:41:52 +02:00
id={`eventRow${indexRow}eventCol${eventIndex}`}
2020-08-09 20:44:35 +02:00
>
2020-09-11 18:56:14 +02:00
{groups.map(
(group, index) =>
group.day === eventIndex && (
2020-11-03 00:59:42 +01:00
<>
<Classes
2020-11-19 21:57:34 +01:00
onClick={() => {
console.log('group: ', group);
}}
2020-09-28 20:16:54 +02:00
groupType={group.type}
cellHeight={cellHeight}
id={`eventRow${indexRow}eventCol${eventIndex}${index}`}
key={index}
aria-owns={open ? `mouse-over-popover` : undefined}
aria-haspopup="true"
onMouseEnter={(e) => handlePopoverOpen(e)}
onMouseLeave={handlePopoverClose}
>
2020-11-03 00:59:42 +01:00
<div>
<p style={{ fontWeight: 700 }}>{groups[index].name}</p>
2020-11-19 21:57:34 +01:00
<p>{groups[index].room}</p>
2020-11-03 00:59:42 +01:00
</div>
</Classes>
<Popover
id={`mouse-over-popover`}
className={classes.popover}
classes={{
paper: classes.paper,
}}
2020-09-28 18:36:38 +02:00
open={popoverId === `eventRow${indexRow}eventCol${eventIndex}${index}`}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'center',
horizontal: 'left',
}}
onClose={handlePopoverClose}
disableRestoreFocus
>
2020-09-28 18:36:38 +02:00
<Typography>
<p>{groups[index].name}</p>
<p>{groups[index].lecturer}</p>
<p>{groups[index].room}</p>
</Typography>
</Popover>
2020-11-03 00:59:42 +01:00
</>
2020-09-11 18:56:14 +02:00
),
)}
2020-11-19 21:57:34 +01:00
</ClassesWrapper>
2020-08-09 20:44:35 +02:00
))}
2020-11-13 23:05:10 +01:00
</div>
2020-08-09 20:44:35 +02:00
);
};