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 styled from 'styled-components/macro';
import Popover from '@material-ui/core/Popover';
@ -66,13 +66,24 @@ const StyledTypography = styled(Typography)`
`;
const BoldParagraph = styled.p`
flex: 3;
`;
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;
margin-top: 30px;
padding: 0 10px 0 10px;
padding: 0 5px 0 5px;
display: flex;
justify-content: space-between;
`;
@ -85,11 +96,28 @@ interface SchedulerRowProps {
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) => {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
const [popoverId, setPopoverId] = useState<string | null>(null);
const groupsPerDay = getGroupsPerDay(groups);
//looks weird
const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
setAnchorEl(event.currentTarget);
@ -101,6 +129,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
setPopoverId(null);
};
const open = Boolean(anchorEl);
return (
@ -129,13 +158,15 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
onMouseEnter={(e) => handlePopoverOpen(e)}
onMouseLeave={handlePopoverClose}
>
<BoldParagraph>{groups[index].name}</BoldParagraph>
<TextWrapper>
<div>
{groups[index].time[0]} - {groups[index].time[1]}
</div>
<div>3/30</div>
</TextWrapper>
<ClassWrap>
<BoldParagraph>{groups[index].name}</BoldParagraph>
<TextWrapper>
<div>
{cellWidth > 200 ? `${groups[index].time[0]} - ${groups[index].time[1]}` : ''}
</div>
<div>3/30</div>
</TextWrapper>
</ClassWrap>
</StyledSchedulerEvent>
<Popover
id={`mouse-over-popover`}

View File

@ -58,6 +58,22 @@ const InputWrapper = styled.div`
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`
font-family: 'Roboto', sans-serif;
font-size: 18px;
@ -143,6 +159,10 @@ export default function ({ handleTransfer }: TopbarProps) {
<FlexboxColumn>
<ClickAwayListener onClickAway={handleCloseDropdown}>
<InputWrapper>
<SelectSearch>
<SelectOption value="Student">Student</SelectOption>
<SelectOption value="Przedmiot">Przedmiot</SelectOption>
</SelectSearch>
<Input
placeholder="Wyszukaj przedmiot..."
onChange={handleChange}