frontend/src/components/Scheduler.tsx

104 lines
2.9 KiB
TypeScript
Raw Normal View History

import React, { useEffect, MouseEvent, useRef } from 'react';
2020-08-17 23:56:34 +02:00
import { useState } from 'react';
import { SchedulerEvents } from './SchedulerEvents';
import { days, hours } from '../constants/index';
import styled from 'styled-components/macro';
2020-07-20 17:53:50 +02:00
2020-08-12 04:13:14 +02:00
const SchedulerWrapper = styled.div`
border-collapse: collapse;
flex-grow: 1;
2020-08-12 04:13:14 +02:00
`;
2020-07-20 17:53:50 +02:00
2020-08-12 04:13:14 +02:00
const TableBody = styled.div`
width: 100%;
display: flex;
flex-direction: column;
`;
2020-07-20 17:53:50 +02:00
2020-08-12 04:13:14 +02:00
const TableRow = styled.div`
display: flex;
`;
2020-08-05 23:54:30 +02:00
2020-08-12 04:13:14 +02:00
const TableHead = styled.div`
display: flex;
width: 100%;
`;
2020-08-09 19:29:03 +02:00
interface TableCellProps {
height: number;
}
const TableCell = styled.div<TableCellProps>`
height: ${({ height }) => height}px;
2020-08-12 04:13:14 +02:00
border: 1px solid #ddd;
2020-08-30 10:42:52 +02:00
display: flex;
align-items: center;
justify-content: center;
2020-08-12 04:13:14 +02:00
flex: 1;
2020-10-08 20:21:52 +02:00
font-size: 1.25vw;
2020-08-12 04:13:14 +02:00
`;
2020-07-20 17:53:50 +02:00
const T = styled.table`
width: 100%;
height: 100%;
`;
2020-07-20 17:53:50 +02:00
export const Scheduler = () => {
2020-08-09 19:29:03 +02:00
const cellRef = useRef<HTMLDivElement>(null);
const [cellWidth, setCellWidth] = useState(0);
const [cellTop, setCellTop] = useState(0);
2020-07-30 18:06:27 +02:00
const wrapperRef = useRef<HTMLDivElement>(null);
const [wrapperHeight, setWrapperHeight] = useState(0);
2020-08-09 19:29:03 +02:00
useEffect(() => {
const handleResize = () => {
if (cellRef.current && wrapperRef.current) {
2020-08-09 19:29:03 +02:00
setCellWidth(cellRef.current.getBoundingClientRect().width);
setCellTop(cellRef.current.getBoundingClientRect().top);
setWrapperHeight(wrapperRef.current.getBoundingClientRect().height);
2020-08-09 19:29:03 +02:00
}
2020-08-09 20:44:35 +02:00
};
2020-08-09 19:29:03 +02:00
handleResize();
2020-08-17 23:56:34 +02:00
window.addEventListener('resize', handleResize);
2020-08-09 19:29:03 +02:00
}, []);
2020-07-20 17:53:50 +02:00
return (
<>
<SchedulerWrapper ref={wrapperRef}>
2020-08-12 04:13:14 +02:00
<TableHead>
2020-10-08 20:21:52 +02:00
{days.map((day, indexCell) =>
indexCell === 0 ? (
<TableCell /* style={{ flexGrow: 1 }} */ height={wrapperHeight / 13} key={indexCell} ref={cellRef}>
{day}
</TableCell>
) : (
<TableCell /* style={{ flexGrow: 3 }} */ height={wrapperHeight / 13} key={indexCell} ref={cellRef}>
{day}
</TableCell>
),
)}
2020-08-12 04:13:14 +02:00
</TableHead>
<TableBody>
2020-08-09 19:29:03 +02:00
{hours.map((hour, indexRow) => (
2020-08-12 04:13:14 +02:00
<TableRow key={indexRow}>
2020-08-17 23:56:34 +02:00
{[hour, '', '', '', '', ''].map((value, indexCell) =>
2020-10-08 20:21:52 +02:00
indexCell === 0 ? (
<TableCell /* style={{ flexGrow: 1 }} */ height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
2020-08-09 20:44:35 +02:00
) : (
2020-10-08 20:21:52 +02:00
<TableCell /* style={{ flexGrow: 3 }} */ height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
2020-08-17 23:56:34 +02:00
),
2020-08-09 20:44:35 +02:00
)}
2020-08-12 04:13:14 +02:00
</TableRow>
2020-08-05 23:54:30 +02:00
))}
2020-08-12 04:13:14 +02:00
</TableBody>
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13} />
2020-08-12 04:13:14 +02:00
</SchedulerWrapper>
2020-07-20 17:53:50 +02:00
</>
);
};