y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

split groups at schedule and other stuff

Browse Source
This commit is contained in:
wrzesinski-hubert 2020-09-20 20:23:46 +02:00
parent 44150eb322
commit fe1d103759
1 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/SchedulerRow.tsx
View File

@ -1,4 +1,4 @@
import React, { MouseEvent } from 'react'; import React, { MouseEvent, useEffect, useState } from 'react';
import { Group } from '../types'; import { Group } from '../types';
import styled from 'styled-components/macro'; import styled from 'styled-components/macro';
import Popover from '@material-ui/core/Popover'; import Popover from '@material-ui/core/Popover';
@ -12,6 +12,8 @@ const useStyles = makeStyles((theme: Theme) =>
}, },
paper: { paper: {
padding: theme.spacing(1), padding: theme.spacing(1),
marginLeft: 5,
textAlign:"center"
}, },
}), }),
); );
@ -38,6 +40,10 @@ const Classes = styled.div<SchedulerEventProps>`
border-radius: 10px; border-radius: 10px;
padding-left: 5px; padding-left: 5px;
background-color: rgb(100, 181, 246); background-color: rgb(100, 181, 246);
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
margin-right:5px;
text-align:center;
`; `;
interface SchedulerRowProps { interface SchedulerRowProps {
@ -51,18 +57,25 @@ interface SchedulerRowProps {
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => { export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
const classes = useStyles(); const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null); const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
const [popoverId, setPopoverId] = useState<string|null>(null);
//looks weird //looks weird
const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => { const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
setPopoverId(event.currentTarget.id)
}; };
const handlePopoverClose = () => { const handlePopoverClose = () => {
setAnchorEl(null); setAnchorEl(null);
setPopoverId(null);
}; };
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
useEffect(()=>{
console.log("1231312"+popoverId);
},[popoverId])
return ( return (
<> <>
{[...Array(5)].map((_, eventIndex) => ( {[...Array(5)].map((_, eventIndex) => (
@ -83,35 +96,35 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
cellTop={cellTop} cellTop={cellTop}
cellWidth={cellWidth} cellWidth={cellWidth}
cellHeight={cellHeight} cellHeight={cellHeight}
id={`eventRow${indexRow}eventCol${eventIndex}`} id={`eventRow${indexRow}eventCol${eventIndex}${index}`}
key={index} key={index}
aria-owns={open ? 'mouse-over-popover' : undefined} aria-owns={open ? `mouse-over-popover` : undefined}
aria-haspopup="true" aria-haspopup="true"
onMouseEnter={handlePopoverOpen} onMouseEnter={(e) => handlePopoverOpen(e)}
onMouseLeave={handlePopoverClose} onMouseLeave={handlePopoverClose}
> >
{groups[index].name} {groups[index].name}<p>{groups[index].room}</p>
</Classes> </Classes>
<Popover <Popover
id="mouse-over-popover" id={`mouse-over-popover`}
className={classes.popover} className={classes.popover}
classes={{ classes={{
paper: classes.paper, paper: classes.paper,
}} }}
open={open} open={(popoverId === `eventRow${indexRow}eventCol${eventIndex}${index}`)}
anchorEl={anchorEl} anchorEl={anchorEl}
anchorOrigin={{ anchorOrigin={{
vertical: 'bottom', vertical: 'top',
horizontal: 'left', horizontal: 'right',
}} }}
transformOrigin={{ transformOrigin={{
vertical: 'top', vertical: 'center',
horizontal: 'left', horizontal: 'left',
}} }}
onClose={handlePopoverClose} onClose={handlePopoverClose}
disableRestoreFocus disableRestoreFocus
> >
<Typography>I use Popover.</Typography> <Typography><p>{groups[index].name}</p><p>{groups[index].lecturer}</p><p>{groups[index].room}</p></Typography>
</Popover> </Popover>
</> </>
), ),