table and events finally working :')
This commit is contained in:
Maciek Głowacki
parent
49341b025b
commit
96ed785c29
@ -8,7 +8,7 @@ const SchedulerWrapper = styled.div`
|
||||
border-collapse: collapse;
|
||||
flex: 1;
|
||||
background-color: white;
|
||||
padding: 5px 15px 5px 5px;
|
||||
padding: 10px 40px 25px 10px;
|
||||
border-radius: 5px;
|
||||
margin-right: 20px;
|
||||
flex-direction: column;
|
||||
@ -18,96 +18,84 @@ const SchedulerWrapper = styled.div`
|
||||
`;
|
||||
|
||||
const TableBody = styled.div`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% * 25 / 26);
|
||||
`;
|
||||
|
||||
const TableRow = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const TableHead = styled.div`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: calc(100% / 26);
|
||||
`;
|
||||
|
||||
interface TableCellProps {
|
||||
height: number;
|
||||
cellHeight?: number;
|
||||
isHourColumn?: boolean;
|
||||
}
|
||||
|
||||
const TableCell = styled.div<TableCellProps>`
|
||||
height: ${({ height }) => height}px;
|
||||
border-width: ${({ isHourColumn }) => !isHourColumn && '2px'};
|
||||
border-style: ${({ isHourColumn }) => !isHourColumn && 'none solid dotted none'};
|
||||
border-color: rgb(242, 243, 245);
|
||||
margin-top: ${({ isHourColumn, height }) => isHourColumn ? -(height / 2) : 0}px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: ${({ isHourColumn }) => isHourColumn ? 'flex-end' : 'center'};
|
||||
flex: ${({ isHourColumn }) => isHourColumn ? '1' : '5'};
|
||||
margin-right: ${({ isHourColumn }) => isHourColumn ? '10px' : '0px'};
|
||||
font-size: 0.75vw;
|
||||
justify-content: ${({ isHourColumn }) => (isHourColumn ? 'flex-end' : 'center')};
|
||||
flex: ${({ isHourColumn }) => (isHourColumn ? '1' : '5')};
|
||||
margin-right: ${({ isHourColumn }) => (isHourColumn ? '10px' : '0px')};
|
||||
margin-top: ${({ isHourColumn, cellHeight }) => (isHourColumn ? `-${cellHeight}px` : '0px')};
|
||||
font-size: 0.75vw;
|
||||
user-select: none;
|
||||
border-collapse:collapse;
|
||||
border-collapse: collapse;
|
||||
:nth-child(2) {
|
||||
border-left: 2px solid rgb(242, 243, 245);
|
||||
}
|
||||
font-weight: bold;
|
||||
`;
|
||||
|
||||
`;
|
||||
|
||||
export const Scheduler = () => {
|
||||
const cellRef = useRef<HTMLDivElement>(null);
|
||||
const [cellWidth, setCellWidth] = useState(0);
|
||||
const [cellTop, setCellTop] = useState(0);
|
||||
const [cellHeight, setCellHeight] = useState(0);
|
||||
|
||||
const wrapperRef = useRef<HTMLDivElement>(null);
|
||||
const [wrapperHeight, setWrapperHeight] = useState(0);
|
||||
const [, updateState] = useState<any>();
|
||||
const forceUpdate = useCallback(() => updateState({}), []);
|
||||
|
||||
console.log('cell height: ', cellHeight);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (cellRef.current) {
|
||||
setCellWidth(cellRef.current.getBoundingClientRect().width);
|
||||
setCellTop(cellRef.current.getBoundingClientRect().top);
|
||||
cellRef.current.style.backgroundColor = "blue";
|
||||
console.log("XDDD")
|
||||
setCellHeight(cellRef.current.getBoundingClientRect().height);
|
||||
cellRef.current.style.backgroundColor = 'blue';
|
||||
}
|
||||
|
||||
};
|
||||
handleResize();
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('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}>
|
||||
<SchedulerWrapper>
|
||||
<TableHead>
|
||||
{days.map((day, indexCell) =>
|
||||
indexCell === 0 ? (
|
||||
<TableCell height={wrapperHeight / 26} isHourColumn={true} key={indexCell} >
|
||||
<TableCell isHourColumn={true} key={indexCell}>
|
||||
{day}
|
||||
</TableCell>
|
||||
) : (
|
||||
<TableCell height={wrapperHeight / 26} style={{ borderStyle: 'none none solid none' }} key={indexCell}>
|
||||
{day}
|
||||
</TableCell>
|
||||
),
|
||||
<TableCell style={{ borderStyle: 'none none solid none' }} key={indexCell}>
|
||||
{day}
|
||||
</TableCell>
|
||||
),
|
||||
)}
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
@ -115,32 +103,31 @@ export const Scheduler = () => {
|
||||
<TableRow key={indexRow}>
|
||||
{[hour, '', '', '', '', ''].map((value, indexCell) =>
|
||||
indexCell === 0 ? (
|
||||
<TableCell height={wrapperHeight / 26} isHourColumn={true} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>)
|
||||
: (indexRow === 0 && indexCell === 1) ? (<TableCell height={wrapperHeight / 26} ref={cellRef} key={`${indexRow}${indexCell}`}>
|
||||
<TableCell isHourColumn={true} cellHeight={cellHeight} 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>
|
||||
) : indexRow === 0 && indexCell === 1 ? (
|
||||
<TableCell ref={cellRef} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
) : indexRow === 23 ? (
|
||||
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
) : indexCell === 5 ? (
|
||||
<TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
|
||||
) : indexRow % 2 !== 0 ? (
|
||||
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
) : (
|
||||
<TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
|
||||
),
|
||||
)}
|
||||
</TableRow>
|
||||
))}
|
||||
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={cellHeight} />
|
||||
</TableBody>
|
||||
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 26} />
|
||||
</SchedulerWrapper>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -14,10 +14,7 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
|
||||
console.log(`values: cellTop: ${cellTop}, cellWidth: ${cellWidth}, cellHeight: ${cellHeight}`);
|
||||
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
|
||||
|
||||
interface GroupTimeToEventRowMapping {
|
||||
[time: string]: number;
|
||||
}
|
||||
const groupTimeToEventRowMapping: GroupTimeToEventRowMapping = {
|
||||
const groupTimeToEventRowMapping: { [time: string]: number } = {
|
||||
'8.15': 0,
|
||||
'10.00': 1,
|
||||
'11.45': 2,
|
||||
@ -56,18 +53,18 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
|
||||
indexRow={index}
|
||||
cellTop={
|
||||
index === 0
|
||||
? cellTop + cellHeight/2
|
||||
? cellHeight / 2
|
||||
: index === 1
|
||||
? 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
|
||||
? cellHeight * 4
|
||||
: index === 2
|
||||
? cellHeight * 7.5
|
||||
: index === 3
|
||||
? cellHeight * 11.5
|
||||
: index === 4
|
||||
? cellHeight * 15
|
||||
: index === 5
|
||||
? cellHeight * 18.5
|
||||
: 0
|
||||
}
|
||||
cellWidth={cellWidth}
|
||||
cellHeight={cellHeight}
|
||||
|
||||
@ -18,38 +18,38 @@ const useStyles = makeStyles((theme: Theme) =>
|
||||
}),
|
||||
);
|
||||
|
||||
interface SchedulerEventProps {
|
||||
interface ClassesWrapperProps {
|
||||
eventIndex: number;
|
||||
cellTop: number;
|
||||
cellWidth: number;
|
||||
cellHeight: number;
|
||||
}
|
||||
|
||||
const SchedulerEvent = styled.div<SchedulerEventProps>`
|
||||
const ClassesWrapper = styled.div<ClassesWrapperProps>`
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: ${({ cellTop }) => cellTop}px;
|
||||
left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
|
||||
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
|
||||
left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 15 + cellWidth * eventIndex}px;
|
||||
width: ${({ cellWidth }) => cellWidth - 10}px;
|
||||
height: ${({ cellHeight }) => cellHeight * 3}px;
|
||||
z-index: 2;
|
||||
padding-left: 10px;
|
||||
`;
|
||||
|
||||
interface ClassesProps {
|
||||
cellWidth: number;
|
||||
cellHeight: number;
|
||||
groupType: GroupType;
|
||||
}
|
||||
|
||||
const Classes = styled.div<ClassesProps>`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
border-radius: 10px;
|
||||
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
|
||||
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 2}px;
|
||||
padding-left: 10px;
|
||||
height: ${({ cellHeight }) => cellHeight * 3}px;
|
||||
margin-right: 5px;
|
||||
text-align: left;
|
||||
background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
|
||||
box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59);
|
||||
@ -84,7 +84,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
|
||||
return (
|
||||
<div>
|
||||
{[...Array(5)].map((_, eventIndex) => (
|
||||
<SchedulerEvent
|
||||
<ClassesWrapper
|
||||
eventIndex={eventIndex}
|
||||
cellTop={cellTop}
|
||||
cellWidth={cellWidth}
|
||||
@ -97,8 +97,10 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
|
||||
group.day === eventIndex && (
|
||||
<>
|
||||
<Classes
|
||||
onClick={() => {
|
||||
console.log('group: ', group);
|
||||
}}
|
||||
groupType={group.type}
|
||||
cellWidth={cellWidth}
|
||||
cellHeight={cellHeight}
|
||||
id={`eventRow${indexRow}eventCol${eventIndex}${index}`}
|
||||
key={index}
|
||||
@ -109,7 +111,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
|
||||
>
|
||||
<div>
|
||||
<p style={{ fontWeight: 700 }}>{groups[index].name}</p>
|
||||
<p >{groups[index].room}</p>
|
||||
<p>{groups[index].room}</p>
|
||||
</div>
|
||||
</Classes>
|
||||
<Popover
|
||||
@ -140,7 +142,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
|
||||
</>
|
||||
),
|
||||
)}
|
||||
</SchedulerEvent>
|
||||
</ClassesWrapper>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user