frontend/src/components/SchedulerEvents.tsx

67 lines
1.8 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 } from '../types';
2020-08-09 20:44:35 +02:00
interface SchedulerEventsProps {
cellTop: number;
cellWidth: number;
}
2020-08-12 04:13:14 +02:00
export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => {
2020-08-12 20:52:53 +02:00
const { choosenGroups } = 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
}
2020-08-17 23:56:34 +02:00
//delete later additional mappings
2020-08-09 21:41:52 +02:00
const groupTimeToEventRowMapping: GroupTimeToEventRowMapping = {
2020-08-12 20:52:53 +02:00
'08.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-17 23:56:34 +02:00
'10.17': 0,
'13.55': 1,
2020-08-12 04:13:14 +02:00
};
2020-08-09 21:41:52 +02:00
useEffect(() => {
2020-08-18 00:21:21 +02:00
function mapGroupTimeToEventRow(choosenGroups: Array<Group>) {
2020-08-17 23:56:34 +02:00
const groupsMapped = choosenGroups.map(({ id, day, lecturer, room, time }) => ({
id,
day,
lecturer,
room,
eventRow: groupTimeToEventRowMapping[time],
}));
2020-08-18 00:21:21 +02:00
setChoosenGroupsMappedToEvents(groupsMapped);
2020-08-17 23:56:34 +02:00
}
2020-08-18 00:21:21 +02:00
mapGroupTimeToEventRow(choosenGroups);
2020-08-09 21:41:52 +02:00
}, [choosenGroups]);
2020-08-09 20:44:35 +02:00
return (
<div>
2020-08-12 04:13:14 +02:00
{[...Array(6)].map((_, index) => (
<SchedulerRow
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 == 3
? cellTop + (25 + 80 * index)
: index < 3
? cellTop + (12 + 80 * index)
: cellTop + (25 + 80 * index)
}
2020-08-12 04:13:14 +02:00
cellWidth={cellWidth}
/>
))}
2020-08-09 20:44:35 +02:00
</div>
);
};