y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

change change change

Browse Source
This commit is contained in:
Maciek Głowacki 2020-11-13 23:05:10 +01:00
parent cdbbeecc70
commit 49341b025b
3 changed files with 56 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/Scheduler.tsx
View File

@ -1,11 +1,10 @@
import React, { useEffect, MouseEvent, useRef } from 'react'; import React, { useEffect, MouseEvent, useRef, useCallback, useLayoutEffect } from 'react';
import { useState } from 'react'; import { useState } from 'react';
import { SchedulerEvents } from './SchedulerEvents'; import { SchedulerEvents } from './SchedulerEvents';
import { days, hours } from '../constants/index'; import { days, hours } from '../constants/index';
import styled from 'styled-components/macro'; import styled from 'styled-components/macro';
const SchedulerWrapper = styled.div` const SchedulerWrapper = styled.div`
display: flex;
border-collapse: collapse; border-collapse: collapse;
flex: 1; flex: 1;
background-color: white; background-color: white;
@ -66,30 +65,46 @@ export const Scheduler = () => {
const wrapperRef = useRef<HTMLDivElement>(null); const wrapperRef = useRef<HTMLDivElement>(null);
const [wrapperHeight, setWrapperHeight] = useState(0); const [wrapperHeight, setWrapperHeight] = useState(0);
const [, updateState] = useState<any>();
const forceUpdate = useCallback(() => updateState({}), []);
useEffect(() => { useEffect(() => {
const handleResize = () => { const handleResize = () => {
if (cellRef.current && wrapperRef.current) { if (cellRef.current) {
setCellWidth(cellRef.current.getBoundingClientRect().width); setCellWidth(cellRef.current.getBoundingClientRect().width);
setCellTop(cellRef.current.getBoundingClientRect().top); setCellTop(cellRef.current.getBoundingClientRect().top);
setWrapperHeight(wrapperRef.current.getBoundingClientRect().height); cellRef.current.style.backgroundColor = "blue";
console.log("XDDD")
} }
}; };
handleResize(); handleResize();
window.addEventListener('resize', handleResize);
}, []); }, []);
useEffect(() => {
const handleWrapperResize = () => {
if (wrapperRef.current) {
setWrapperHeight(wrapperRef.current.getBoundingClientRect().height);
}
}
window.addEventListener('resize', handleWrapperResize);
return () => window.removeEventListener('resize', handleWrapperResize);
}, [])
return ( return (
<> <>
<SchedulerWrapper ref={wrapperRef}> <SchedulerWrapper ref={wrapperRef}>
<TableHead> <TableHead>
{days.map((day, indexCell) => {days.map((day, indexCell) =>
indexCell === 0 ? ( indexCell === 0 ? (
<TableCell height={wrapperHeight / 26} isHourColumn={true} key={indexCell} ref={cellRef}> <TableCell height={wrapperHeight / 26} isHourColumn={true} key={indexCell} >
{day} {day}
</TableCell> </TableCell>
) : ( ) : (
<TableCell height={wrapperHeight / 26} style={{ borderStyle: 'none none solid none' }} key={indexCell} ref={cellRef}> <TableCell height={wrapperHeight / 26} style={{ borderStyle: 'none none solid none' }} key={indexCell}>
{day} {day}
</TableCell> </TableCell>
), ),
@ -102,22 +117,25 @@ export const Scheduler = () => {
indexCell === 0 ? ( indexCell === 0 ? (
<TableCell height={wrapperHeight / 26} isHourColumn={true} key={`${indexRow}${indexCell}`}> <TableCell height={wrapperHeight / 26} isHourColumn={true} key={`${indexRow}${indexCell}`}>
{value} {value}
</TableCell> </TableCell>)
) : indexRow === 23 ? ( : (indexRow === 0 && indexCell === 1) ? (<TableCell height={wrapperHeight / 26} ref={cellRef} key={`${indexRow}${indexCell}`}>
<TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
{value} {value}
</TableCell> </TableCell>
) : indexCell === 5 ? ( ) : indexRow === 23 ? (
<TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}> <TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
{value} {value}
</TableCell> </TableCell>
) : indexRow % 2 !== 0 ? ( ) : indexCell === 5 ? (
<TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}> <TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
{value} {value}
</TableCell> </TableCell>
) : <TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}> ) : indexRow % 2 !== 0 ? (
{value} <TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
</TableCell> {value}
</TableCell>
) : <TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
)} )}
</TableRow> </TableRow>
))} ))}

26
src/components/SchedulerEvents.tsx
View File

@ -11,7 +11,7 @@ interface SchedulerEventsProps {
export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => { export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
const { basket } = useContext(coursesContext)!; const { basket } = useContext(coursesContext)!;
console.log(`values: cellTop: ${cellTop}, cellWidth: ${cellWidth}, cellHeight: ${cellHeight}`);
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]); const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
interface GroupTimeToEventRowMapping { interface GroupTimeToEventRowMapping {
@ -33,7 +33,7 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
const merged = [...classes, ...lectures]; const merged = [...classes, ...lectures];
//deleted if statement, maybe it is needed //deleted if statement, maybe it is needed
const groupsMapped = merged.map(({ id, day, lecturer, room, time, name,type }) => ({ const groupsMapped = merged.map(({ id, day, lecturer, room, time, name, type }) => ({
id, id,
day, day,
lecturer, lecturer,
@ -56,18 +56,18 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
indexRow={index} indexRow={index}
cellTop={ cellTop={
index === 0 index === 0
? cellTop + (cellHeight + cellHeight * 2 * index + cellHeight / 4) ? cellTop + cellHeight/2
: index === 1 : index === 1
? cellTop + (cellHeight + cellHeight * 2 * index) ? cellTop + (cellHeight + cellHeight * 2 * index)
: index === 2 : index === 2
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4) ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2)
: index === 3 : index === 3
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4) ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2)
: index === 4 : index === 4
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2) ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight)
: index === 5 : index === 5
? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 4) ? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 2)
: 0 : 0
} }
cellWidth={cellWidth} cellWidth={cellWidth}
cellHeight={cellHeight} cellHeight={cellHeight}

8
src/components/SchedulerRow.tsx
View File

@ -31,7 +31,7 @@ const SchedulerEvent = styled.div<SchedulerEventProps>`
top: ${({ cellTop }) => cellTop}px; top: ${({ cellTop }) => cellTop}px;
left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px; left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px; width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px; height: ${({ cellHeight }) => cellHeight * 3}px;
z-index: 2; z-index: 2;
`; `;
@ -48,7 +48,7 @@ const Classes = styled.div<ClassesProps>`
z-index: 2; z-index: 2;
border-radius: 10px; border-radius: 10px;
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px; width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px; height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 2}px;
padding-left: 10px; padding-left: 10px;
text-align: left; text-align: left;
background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')}; background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
@ -82,7 +82,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
return ( return (
<> <div>
{[...Array(5)].map((_, eventIndex) => ( {[...Array(5)].map((_, eventIndex) => (
<SchedulerEvent <SchedulerEvent
eventIndex={eventIndex} eventIndex={eventIndex}
@ -142,6 +142,6 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
)} )}
</SchedulerEvent> </SchedulerEvent>
))} ))}
</> </div>
); );
}; };