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 { 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`}
|
||||||
|
@ -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}
|
||||||
|
Loading…
Reference in New Issue
Block a user