frontend/src/components/SchedulerEvents.tsx

82 lines
2.6 KiB
TypeScript
Raw Normal View History

2020-08-12 04:13:14 +02:00
import React, { useContext, useEffect, useState } from 'react';
import { SchedulerRow } from './SchedulerRow';
import { coursesContext } from '../contexts/CoursesProvider';
import { Group, Basket } from '../types';
2020-08-09 20:44:35 +02:00
interface SchedulerEventsProps {
cellTop: number;
cellWidth: number;
cellHeight: number;
2020-09-11 08:08:49 +02:00
onClick: (e: React.MouseEvent) => void
2020-08-09 20:44:35 +02:00
}
2020-09-11 08:08:49 +02:00
export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: SchedulerEventsProps) => {
const { basket } = useContext(coursesContext)!;
2020-08-09 21:41:52 +02:00
2020-08-18 00:21:21 +02:00
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
2020-08-09 21:41:52 +02:00
interface GroupTimeToEventRowMapping {
2020-08-12 04:13:14 +02:00
[time: string]: number;
2020-08-09 21:41:52 +02:00
}
const groupTimeToEventRowMapping: GroupTimeToEventRowMapping = {
2020-08-20 18:14:28 +02:00
'8.15': 0,
2020-08-12 04:13:14 +02:00
'10.00': 1,
'11.45': 2,
'13.45': 3,
'15.30': 4,
'17.15': 5,
};
2020-08-09 21:41:52 +02:00
useEffect(() => {
function mapGroupTimeToEventRow(basket: Array<Basket>) {
2020-08-26 18:42:29 +02:00
const classes = basket.map(({ classes }) => classes).filter((cl) => cl !== null) as Array<Group>;
const lectures = basket.map(({ lecture }) => lecture).filter((lec) => lec !== null) as Array<Group>;
const merged = [...classes, ...lectures];
2020-08-26 18:42:29 +02:00
if (merged.length >= 1) {
const groupsMapped = merged.map(({ id, day, lecturer, room, time }) => ({
id,
day,
lecturer,
room,
eventRow: groupTimeToEventRowMapping[time],
}));
setChoosenGroupsMappedToEvents(groupsMapped);
}
2020-08-17 23:56:34 +02:00
}
mapGroupTimeToEventRow(basket);
}, [basket]);
2020-08-09 21:41:52 +02:00
2020-08-09 20:44:35 +02:00
return (
<div>
2020-08-12 04:13:14 +02:00
{[...Array(6)].map((_, index) => (
<SchedulerRow
2020-09-11 08:08:49 +02:00
onClick={onClick}
2020-08-12 04:13:14 +02:00
key={index}
2020-08-18 00:21:21 +02:00
groups={choosenGroupsMappedToEvents.filter((group: any) => {
2020-08-12 04:13:14 +02:00
return group.eventRow === index;
})}
indexRow={index}
cellTop={
index === 0
? cellTop + (cellHeight + cellHeight * 2 * index + cellHeight / 4)
: index === 1
? cellTop + (cellHeight + cellHeight * 2 * index)
: index === 2
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4)
: index === 3
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4)
: index === 4
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2)
: index === 5
? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 4)
: 0
}
2020-08-12 04:13:14 +02:00
cellWidth={cellWidth}
cellHeight={cellHeight}
2020-08-12 04:13:14 +02:00
/>
))}
2020-08-09 20:44:35 +02:00
</div>
);
};