change change change
This commit is contained in:
parent
cdbbeecc70
commit
49341b025b
@ -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 { SchedulerEvents } from './SchedulerEvents';
|
||||
import { days, hours } from '../constants/index';
|
||||
import styled from 'styled-components/macro';
|
||||
|
||||
const SchedulerWrapper = styled.div`
|
||||
display: flex;
|
||||
border-collapse: collapse;
|
||||
flex: 1;
|
||||
background-color: white;
|
||||
@ -66,30 +65,46 @@ export const Scheduler = () => {
|
||||
|
||||
const wrapperRef = useRef<HTMLDivElement>(null);
|
||||
const [wrapperHeight, setWrapperHeight] = useState(0);
|
||||
const [, updateState] = useState<any>();
|
||||
const forceUpdate = useCallback(() => updateState({}), []);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (cellRef.current && wrapperRef.current) {
|
||||
if (cellRef.current) {
|
||||
setCellWidth(cellRef.current.getBoundingClientRect().width);
|
||||
setCellTop(cellRef.current.getBoundingClientRect().top);
|
||||
setWrapperHeight(wrapperRef.current.getBoundingClientRect().height);
|
||||
cellRef.current.style.backgroundColor = "blue";
|
||||
console.log("XDDD")
|
||||
}
|
||||
|
||||
};
|
||||
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 (
|
||||
<>
|
||||
<SchedulerWrapper ref={wrapperRef}>
|
||||
<TableHead>
|
||||
{days.map((day, indexCell) =>
|
||||
indexCell === 0 ? (
|
||||
<TableCell height={wrapperHeight / 26} isHourColumn={true} key={indexCell} ref={cellRef}>
|
||||
<TableCell height={wrapperHeight / 26} isHourColumn={true} key={indexCell} >
|
||||
{day}
|
||||
</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}
|
||||
</TableCell>
|
||||
),
|
||||
@ -102,22 +117,25 @@ export const Scheduler = () => {
|
||||
indexCell === 0 ? (
|
||||
<TableCell height={wrapperHeight / 26} isHourColumn={true} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
) : indexRow === 23 ? (
|
||||
<TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
|
||||
</TableCell>)
|
||||
: (indexRow === 0 && indexCell === 1) ? (<TableCell height={wrapperHeight / 26} ref={cellRef} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
) : indexCell === 5 ? (
|
||||
<TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
) : indexRow % 2 !== 0 ? (
|
||||
<TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
) : <TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
) : indexRow === 23 ? (
|
||||
<TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
) : indexCell === 5 ? (
|
||||
<TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
) : indexRow % 2 !== 0 ? (
|
||||
<TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
) : <TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
))}
|
||||
|
@ -11,7 +11,7 @@ interface SchedulerEventsProps {
|
||||
|
||||
export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
|
||||
const { basket } = useContext(coursesContext)!;
|
||||
|
||||
console.log(`values: cellTop: ${cellTop}, cellWidth: ${cellWidth}, cellHeight: ${cellHeight}`);
|
||||
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
|
||||
|
||||
interface GroupTimeToEventRowMapping {
|
||||
@ -33,7 +33,7 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
|
||||
const merged = [...classes, ...lectures];
|
||||
|
||||
//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,
|
||||
day,
|
||||
lecturer,
|
||||
@ -56,18 +56,18 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
|
||||
indexRow={index}
|
||||
cellTop={
|
||||
index === 0
|
||||
? cellTop + (cellHeight + cellHeight * 2 * index + cellHeight / 4)
|
||||
? cellTop + cellHeight/2
|
||||
: index === 1
|
||||
? cellTop + (cellHeight + cellHeight * 2 * index)
|
||||
: index === 2
|
||||
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4)
|
||||
: index === 3
|
||||
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4)
|
||||
: index === 4
|
||||
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2)
|
||||
: index === 5
|
||||
? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 4)
|
||||
: 0
|
||||
? cellTop + (cellHeight + cellHeight * 2 * index)
|
||||
: index === 2
|
||||
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2)
|
||||
: index === 3
|
||||
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2)
|
||||
: index === 4
|
||||
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight)
|
||||
: index === 5
|
||||
? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 2)
|
||||
: 0
|
||||
}
|
||||
cellWidth={cellWidth}
|
||||
cellHeight={cellHeight}
|
||||
|
@ -31,7 +31,7 @@ const SchedulerEvent = styled.div<SchedulerEventProps>`
|
||||
top: ${({ cellTop }) => cellTop}px;
|
||||
left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
|
||||
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
|
||||
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
|
||||
height: ${({ cellHeight }) => cellHeight * 3}px;
|
||||
z-index: 2;
|
||||
`;
|
||||
|
||||
@ -48,7 +48,7 @@ const Classes = styled.div<ClassesProps>`
|
||||
z-index: 2;
|
||||
border-radius: 10px;
|
||||
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
|
||||
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
|
||||
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 2}px;
|
||||
padding-left: 10px;
|
||||
text-align: left;
|
||||
background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
|
||||
@ -82,7 +82,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
|
||||
const open = Boolean(anchorEl);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
{[...Array(5)].map((_, eventIndex) => (
|
||||
<SchedulerEvent
|
||||
eventIndex={eventIndex}
|
||||
@ -142,6 +142,6 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
|
||||
)}
|
||||
</SchedulerEvent>
|
||||
))}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user