Count Groups per day
This commit is contained in:
parent
44a01cec69
commit
74a467d528
@ -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`}
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user