import React, { Fragment, MouseEvent, useState, useEffect, useContext } from 'react'; import { GroupType, SchedulerEvent } from '../types'; import styled, { css } from 'styled-components/macro'; import Popover from '@material-ui/core/Popover'; import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import { MONDAY_TO_FRIDAY } from '../constants'; import { coursesContext } from '../contexts/CoursesProvider'; const useStyles = makeStyles((theme: Theme) => createStyles({ popover: { fontSize: '14px', }, paper: { padding: '15px 15px 15px 15px', textAlign: 'left', lineHeight: `1 !important`, }, }), ); const PopoverSpan = styled.span` font-weight: bold; margin-right: 2px; `; interface SchedulerEventsWrapperProps { eventIndex: number; rowTop: number; cellWidth: number; cellHeight: number; } const SchedulerEventsWrapper = styled.div` position: absolute; display: flex; top: ${({ rowTop }) => rowTop}px; left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 4 + cellWidth * eventIndex}px; width: ${({ cellWidth }) => cellWidth - 10}px; height: ${({ cellHeight }) => cellHeight * 3}px; z-index: 2; padding-left: 10px; `; interface SchedulerEventProps { cellWidth: number; cellHeight: number; groupType: GroupType; isHovered: boolean; } const StyledSchedulerEvent = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 20000; font-size: 0.65vw; line-height: normal; border-radius: 10px; height: ${({ cellHeight }) => cellHeight * 3}px; width: ${({ cellWidth }) => (cellWidth * 3) / 4}px; margin-right: 5px; padding: 5px 5px 0 5px; text-align: center; background-color: ${({ groupType, isHovered }) => { if (isHovered) { return groupType === 'CLASS' ? '#FFE485' : '#D2EBFF'; } else { return groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff'; } }}; ${({ isHovered }) => isHovered && css` transition: background-color ease-in 0.4s; `} transition: background-color ease-out 0.4s; box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75); cursor: pointer; `; const threeStyles = () => { return css` white-space: nowrap; text-overflow: ellipsis; max-width: 70px; `; }; type BoldParagraphProps = { isThree?: boolean; }; const BoldParagraph = styled.p` overflow: hidden; flex: 3; ${({ isThree }) => isThree && threeStyles} `; const ClassWrap = styled.div` font-weight: 700; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: normal; `; const TextWrapper = styled.div` flex: 1; width: inherit; padding: 0 3px 5px 3px; display: flex; justify-content: space-between; `; interface SchedulerRowProps { groups: Array; indexRow: number; rowTop: number; cellWidth: number; cellHeight: number; } const getGroupsPerDay = (groups: Array) => { const groupsPerDay: any = { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0 }; for (const group of groups) { groupsPerDay[group.day]++; } return groupsPerDay; }; export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }: SchedulerRowProps) => { const { hoveredGroup } = useContext(coursesContext)!; const classes = useStyles(); const groupsPerDay = getGroupsPerDay(groups); const [anchorEl, setAnchorEl] = React.useState(null); const [popoverId, setPopoverId] = useState(null); //looks weird const handlePopoverOpen = (event: MouseEvent) => { setAnchorEl(event.currentTarget); setPopoverId(event.currentTarget.id); }; const handlePopoverClose = (e: MouseEvent) => { console.log('current target:', e.currentTarget); console.log(' target:', e.target); setPopoverId(null); setAnchorEl(null); console.log('click awayyy'); }; useEffect(() => { console.log('anchorEl: ', anchorEl); }, [anchorEl]); const open = Boolean(anchorEl); const id = open ? 'simple-popover' : undefined; return (
{[...Array(MONDAY_TO_FRIDAY)].map((_, eventIndex) => ( {groups.map( (group, index) => group.day === eventIndex && ( handlePopoverOpen(e)} > = 3}>{groups[index].name} {groupsPerDay[group.day] < 3 ? (
{`${groups[index].time}-${groups[index].endTime}`}
3/{groups[index].capacity}
) : (
3/{groups[index].capacity}
)}
{}}>

{groups[index].name}

Prowadzący: {groups[index].lecturer}

Sala zajęć: {groups[index].room}

Kod przedmiotu: ACB129

Kod grupy: FVJ753

Punkty ECTS: 2

), )}
))}
); };