frontend/src/components/Scheduler/SchedulerRow/index.tsx

50 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';
import styled from 'styled-components';
interface SchedulerEventProps {
eventIndex: number;
cellTop: number;
cellWidth: number;
}
const SchedulerEvent = styled.div<SchedulerEventProps>`
position: absolute;
top: ${(props) => props.cellTop}px;
left: ${(props) => props.cellWidth + 5 + props.cellWidth * props.eventIndex}px;
width: ${(props) => (props.cellWidth * 2) / 3}px;
height: 60px;
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;
}
2020-08-12 04:13:14 +02:00
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: SchedulerRowProps) => {
2020-08-17 20:14:19 +02:00
console.log(`You passed me these of a groupzzz`);
console.log(groups)
2020-08-09 20:44:35 +02:00
return (
2020-08-12 04:13:14 +02:00
<>
2020-08-09 21:41:52 +02:00
{[...Array(5)].map((value, eventIndex) => (
2020-08-12 04:13:14 +02:00
<SchedulerEvent
eventIndex={eventIndex}
cellTop={cellTop}
cellWidth={cellWidth}
2020-08-09 21:41:52 +02:00
key={`eventRow${indexRow}eventCol${eventIndex}`}
id={`eventRow${indexRow}eventCol${eventIndex}`}
2020-08-09 20:44:35 +02:00
>
2020-08-09 21:41:52 +02:00
{groups.map((group, index) =>
2020-08-12 20:52:53 +02:00
group.day === eventIndex ? <div key={index}>{groups[index]?.lecturer}</div> : null,
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
);
};