frontend/src/components/SchedulerEvents.tsx
2020-09-28 20:16:54 +02:00

79 lines
2.6 KiB
TypeScript

import React, { useContext, useEffect, useState, MouseEvent } from 'react';
import { SchedulerRow } from './SchedulerRow';
import { coursesContext } from '../contexts/CoursesProvider';
import { Group, Basket } from '../types';
interface SchedulerEventsProps {
cellTop: number;
cellWidth: number;
cellHeight: number;
}
export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
const { basket } = useContext(coursesContext)!;
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
interface GroupTimeToEventRowMapping {
[time: string]: number;
}
const groupTimeToEventRowMapping: GroupTimeToEventRowMapping = {
'8.15': 0,
'10.00': 1,
'11.45': 2,
'13.45': 3,
'15.30': 4,
'17.15': 5,
};
useEffect(() => {
function mapGroupTimeToEventRow(basket: Array<Basket>) {
const classes = basket.map(({ classes, name }) => ({ ...classes, name })) as Array<Group & { name: string }>;
const lectures = basket.map(({ lecture, name }) => ({ ...lecture, name })) as Array<Group & { name: string }>;
const merged = [...classes, ...lectures];
//deleted if statement, maybe it is needed
const groupsMapped = merged.map(({ id, day, lecturer, room, time, name,type }) => ({
id,
day: day === 5 ? 4 : day,
lecturer,
room,
eventRow: groupTimeToEventRowMapping[time],
name,
type,
}));
setChoosenGroupsMappedToEvents(groupsMapped);
}
mapGroupTimeToEventRow(basket);
}, [basket]);
return (
<div>
{[...Array(6)].map((_, index) => (
<SchedulerRow
key={index}
groups={choosenGroupsMappedToEvents.filter((group: any) => 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
}
cellWidth={cellWidth}
cellHeight={cellHeight}
/>
))}
</div>
);
};