Count Groups per day

This commit is contained in:
wrzesinski-hubert 2020-11-25 00:19:59 +01:00
parent 44a01cec69
commit 74a467d528
2 changed files with 61 additions and 10 deletions

View File

@ -1,4 +1,4 @@
import React, { Fragment, MouseEvent, useState } from 'react'; import React, { Fragment, MouseEvent, useState, useEffect, useRef } from 'react';
import { GroupType, SchedulerEvent } from '../types'; import { GroupType, SchedulerEvent } 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';
@ -66,13 +66,24 @@ const StyledTypography = styled(Typography)`
`; `;
const BoldParagraph = styled.p` const BoldParagraph = styled.p`
flex: 3;
`;
const ClassWrap = styled.div`
font-weight: 700; 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` const TextWrapper = styled.div`
flex: 1;
width: inherit; width: inherit;
margin-top: 30px; padding: 0 5px 0 5px;
padding: 0 10px 0 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
`; `;
@ -85,11 +96,28 @@ interface SchedulerRowProps {
cellHeight: number; cellHeight: number;
} }
const getGroupsPerDay = (groups: Array<SchedulerEvent>) => {
const xd = groups.reduce((sum:any,group:SchedulerEvent)=>{
if (sum.hasOwnProperty(group.day))
{
return sum[group.day]+=1
}
else{
return sum[group.day]=0}
},[])
console.log("123123123",xd);
return xd;
}
export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }: SchedulerRowProps) => { export const SchedulerRow = ({ groups, indexRow, rowTop, 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); const [popoverId, setPopoverId] = useState<string | null>(null);
const groupsPerDay = getGroupsPerDay(groups);
//looks weird //looks weird
const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => { const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
@ -101,6 +129,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
setPopoverId(null); setPopoverId(null);
}; };
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
return ( return (
@ -129,13 +158,15 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
onMouseEnter={(e) => handlePopoverOpen(e)} onMouseEnter={(e) => handlePopoverOpen(e)}
onMouseLeave={handlePopoverClose} onMouseLeave={handlePopoverClose}
> >
<BoldParagraph>{groups[index].name}</BoldParagraph> <ClassWrap>
<TextWrapper> <BoldParagraph>{groups[index].name}</BoldParagraph>
<div> <TextWrapper>
{groups[index].time[0]} - {groups[index].time[1]} <div>
</div> {cellWidth > 200 ? `${groups[index].time[0]} - ${groups[index].time[1]}` : ''}
<div>3/30</div> </div>
</TextWrapper> <div>3/30</div>
</TextWrapper>
</ClassWrap>
</StyledSchedulerEvent> </StyledSchedulerEvent>
<Popover <Popover
id={`mouse-over-popover`} id={`mouse-over-popover`}

View File

@ -58,6 +58,22 @@ const InputWrapper = styled.div`
align-items: center; align-items: center;
`; `;
const SelectSearch = styled.select`
display: flex;
background-color: #f2f4f7;
margin-left: 5px;
outline: none;
border-style: none;
align-items: center;
`;
const SelectOption = styled.option`
background-color: #f2f4f7;
outline: none;
border-style: none;
align-items: center;
`;
const Input = styled.input` const Input = styled.input`
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-size: 18px; font-size: 18px;
@ -143,6 +159,10 @@ export default function ({ handleTransfer }: TopbarProps) {
<FlexboxColumn> <FlexboxColumn>
<ClickAwayListener onClickAway={handleCloseDropdown}> <ClickAwayListener onClickAway={handleCloseDropdown}>
<InputWrapper> <InputWrapper>
<SelectSearch>
<SelectOption value="Student">Student</SelectOption>
<SelectOption value="Przedmiot">Przedmiot</SelectOption>
</SelectSearch>
<Input <Input
placeholder="Wyszukaj przedmiot..." placeholder="Wyszukaj przedmiot..."
onChange={handleChange} onChange={handleChange}