frontend/src/components/Scheduler.tsx

136 lines
4.3 KiB
TypeScript
Raw Normal View History

2021-01-05 23:46:51 +01:00
import React, { useLayoutEffect, 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';
2021-01-12 22:59:12 +01:00
import { SchedulerEvent } from '../types';
2020-07-20 17:53:50 +02:00
2020-08-12 04:13:14 +02:00
const SchedulerWrapper = styled.div`
border-collapse: collapse;
2020-11-08 15:49:10 +01:00
flex: 1;
2020-11-08 18:05:21 +01:00
background-color: white;
2020-11-19 21:57:34 +01:00
padding: 10px 40px 25px 10px;
2020-11-08 18:05:21 +01:00
border-radius: 5px;
margin-right: 20px;
2020-11-21 04:02:38 +01:00
margin-left: 20px;
2020-11-08 18:05:21 +01:00
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 3px 3px 3px -2px rgba(0, 0, 0, 0.59);
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`
2020-11-19 21:57:34 +01:00
position: relative;
2020-08-12 04:13:14 +02:00
width: 100%;
display: flex;
flex-direction: column;
2020-11-19 21:57:34 +01:00
height: calc(100% * 25 / 26);
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 TableRow = styled.div`
display: flex;
2020-11-19 21:57:34 +01:00
height: 100%;
2020-08-12 04:13:14 +02:00
`;
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-11-19 21:57:34 +01:00
height: calc(100% / 26);
2020-08-12 04:13:14 +02:00
`;
2020-08-09 19:29:03 +02:00
interface TableCellProps {
2020-11-19 21:57:34 +01:00
cellHeight?: number;
2020-11-08 15:49:10 +01:00
isHourColumn?: boolean;
}
const TableCell = styled.div<TableCellProps>`
2020-11-26 01:53:07 +01:00
border-width: ${({ isHourColumn }) => !isHourColumn && '1px'};
2020-11-08 18:05:21 +01:00
border-style: ${({ isHourColumn }) => !isHourColumn && 'none solid dotted none'};
2020-11-26 01:53:07 +01:00
border-color: rgb(235, 235, 235);
2020-08-30 10:42:52 +02:00
display: flex;
align-items: center;
2020-11-19 21:57:34 +01:00
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;
2020-11-08 15:49:10 +01:00
user-select: none;
2020-11-19 21:57:34 +01:00
border-collapse: collapse;
2020-11-08 18:05:21 +01:00
:nth-child(2) {
2020-11-26 01:53:07 +01:00
border-left: 1px solid rgb(235, 235, 235);
2020-11-08 18:05:21 +01:00
}
font-weight: bold;
2020-11-19 21:57:34 +01:00
`;
2021-01-12 22:59:12 +01:00
interface SchedulerProps {
schedulerEvents: Array<SchedulerEvent>;
}
export const Scheduler = ({ schedulerEvents }: SchedulerProps) => {
2020-08-09 19:29:03 +02:00
const cellRef = useRef<HTMLDivElement>(null);
const [cellWidth, setCellWidth] = useState(0);
2020-11-19 21:57:34 +01:00
const [cellHeight, setCellHeight] = useState(0);
2020-07-30 18:06:27 +02:00
2020-12-12 20:32:09 +01:00
useLayoutEffect(() => {
2020-08-09 19:29:03 +02:00
const handleResize = () => {
2020-11-13 23:05:10 +01:00
if (cellRef.current) {
2020-08-09 19:29:03 +02:00
setCellWidth(cellRef.current.getBoundingClientRect().width);
2020-11-19 21:57:34 +01:00
setCellHeight(cellRef.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-11-19 21:57:34 +01:00
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
2020-08-09 19:29:03 +02:00
}, []);
2020-07-20 17:53:50 +02:00
return (
2020-11-26 01:53:07 +01:00
<SchedulerWrapper>
<TableHead>
{days.map((day, indexCell) =>
indexCell === 0 ? (
<TableCell isHourColumn={true} key={indexCell}>
{day}
</TableCell>
) : (
<TableCell style={{ borderStyle: 'none none solid none' }} key={indexCell}>
{day}
</TableCell>
),
)}
</TableHead>
<TableBody>
{hours.map((hour, indexRow) => (
<TableRow key={indexRow}>
{[hour, '', '', '', '', ''].map((value, indexCell) =>
indexCell === 0 ? (
<TableCell isHourColumn={true} cellHeight={cellHeight} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : indexRow === 0 && indexCell === 1 ? (
<TableCell ref={cellRef} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : indexRow === 23 ? (
<TableCell style={{ borderBottom: '1px solid rgb(235, 235, 235)' }} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : indexRow === 5 ? (
<TableCell style={{ borderBottom: '1px solid rgb(235, 235, 235)' }} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : indexRow % 2 !== 0 ? (
<TableCell style={{ borderBottom: '1px solid rgb(235, 235, 235)' }} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : (
<TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
),
)}
</TableRow>
))}
2021-01-12 22:59:12 +01:00
<SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} schedulerEvents={schedulerEvents} />
2020-11-26 01:53:07 +01:00
</TableBody>
</SchedulerWrapper>
2020-07-20 17:53:50 +02:00
);
};