frontend/src/components/SchedulerRow.tsx

48 lines
1.3 KiB
TypeScript
Raw Normal View History

2020-08-12 04:13:14 +02:00
import React from 'react';
import { Group } from '../types';
2020-08-12 04:13:14 +02:00
import styled from 'styled-components';
interface SchedulerEventProps {
eventIndex: number;
cellTop: number;
cellWidth: number;
cellHeight: number;
2020-08-12 04:13:14 +02:00
}
const SchedulerEvent = styled.div<SchedulerEventProps>`
position: absolute;
top: ${({ cellTop }) => cellTop}px;
left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
2020-08-30 10:42:52 +02:00
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
2020-08-12 04:13:14 +02:00
background-color: lightblue;
z-index: 2;
`;
2020-08-09 20:44:35 +02:00
interface SchedulerRowProps {
groups: Array<Group>;
indexRow: number;
cellTop: number;
cellWidth: number;
cellHeight: number;
2020-08-09 20:44:35 +02:00
}
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
2020-08-09 20:44:35 +02:00
return (
2020-08-12 04:13:14 +02:00
<>
2020-08-18 00:21:21 +02:00
{[...Array(5)].map((_, eventIndex) => (
2020-08-12 04:13:14 +02:00
<SchedulerEvent
eventIndex={eventIndex}
cellTop={cellTop}
cellWidth={cellWidth}
cellHeight={cellHeight}
2020-08-18 00:21:21 +02:00
key={eventIndex}
2020-08-09 21:41:52 +02:00
id={`eventRow${indexRow}eventCol${eventIndex}`}
2020-08-09 20:44:35 +02:00
>
{groups.map((group, index) => group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>)}
2020-08-12 04:13:14 +02:00
</SchedulerEvent>
2020-08-09 20:44:35 +02:00
))}
2020-08-12 04:13:14 +02:00
</>
2020-08-09 20:44:35 +02:00
);
};