frontend/src/components/Scheduler.tsx

111 lines
2.8 KiB
TypeScript
Raw Normal View History

2020-08-09 20:44:35 +02:00
import React, { useEffect, useRef } from "react";
2020-07-20 17:53:50 +02:00
import { useState } from "react";
2020-08-09 20:44:35 +02:00
import { SchedulerEvents } from "./SchedulerEvents";
import { days, hours } from "../constants/index";
2020-08-12 04:13:14 +02:00
import styled from "styled-components";
2020-07-20 17:53:50 +02:00
2020-08-12 04:13:14 +02:00
const SchedulerWrapper = styled.div`
flex-grow: 3;
margin-top: 20px;
border-collapse: collapse;
`;
2020-07-20 17:53:50 +02:00
2020-08-12 04:13:14 +02:00
const TableBody = styled.div`
width: 100%;
height: 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;
flex-direction: row;
`;
2020-08-05 23:54:30 +02:00
2020-08-12 04:13:14 +02:00
const TableCell = styled.div`
border: 1px solid #ddd;
padding: 10px;
text-align: center;
flex: 1;
`;
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
2020-08-12 04:13:14 +02:00
const TableHeadCell = styled.div`
border: 1px solid #ddd;
padding: 10px;
text-align: center;
flex: 1;
`;
2020-07-20 17:53:50 +02:00
export const Scheduler = () => {
const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
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
2020-08-09 19:29:03 +02:00
useEffect(() => {
const handleResize = () => {
if (cellRef.current) {
setCellWidth(cellRef.current.getBoundingClientRect().width);
setCellTop(cellRef.current.getBoundingClientRect().top);
}
2020-08-09 20:44:35 +02:00
};
2020-08-09 19:29:03 +02:00
handleResize();
2020-08-09 20:44:35 +02:00
window.addEventListener("resize", handleResize);
2020-08-09 19:29:03 +02:00
}, []);
2020-07-20 17:53:50 +02:00
useEffect(() => {
const displayEvents = () => {
currentEventsIds.map((eventId: string) => {
const event = document.getElementById(eventId);
2020-07-30 18:06:27 +02:00
if (event) {
event.style.display = "block";
}
2020-07-20 17:53:50 +02:00
});
};
displayEvents();
}, [currentEventsIds]);
2020-08-09 20:44:35 +02:00
// const handleClick = (e: React.MouseEvent) => {
// const cellId = e.currentTarget.id;
// const column = cellId.slice(0, 1);
// const row = cellId.slice(1);
// const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
2020-07-20 17:53:50 +02:00
2020-08-09 20:44:35 +02:00
// setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, eventId]);
// };
2020-07-20 17:53:50 +02:00
return (
<>
2020-08-12 04:13:14 +02:00
<SchedulerWrapper>
<TableHead>
2020-07-20 17:53:50 +02:00
{days.map((day, index) => (
2020-08-12 04:13:14 +02:00
<TableHeadCell key={index}>{day}</TableHeadCell>
2020-07-20 17:53:50 +02:00
))}
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-09 20:44:35 +02:00
{[hour, "", "", "", "", ""].map((value, indexCell) =>
indexRow === 0 && indexCell === 1 ? (
2020-08-12 04:13:14 +02:00
<TableCell
key={`${indexRow}${indexCell}`}
ref={cellRef}
></TableCell>
2020-08-09 20:44:35 +02:00
) : (
2020-08-12 04:13:14 +02:00
<TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
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>
2020-08-09 20:44:35 +02:00
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} />
2020-08-12 04:13:14 +02:00
</SchedulerWrapper>
2020-07-20 17:53:50 +02:00
</>
);
};