frontend/src/components/SchedulerEvents.tsx

76 lines
2.3 KiB
TypeScript
Raw Normal View History

import React, { useContext, useEffect, useState, MouseEvent } 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-08-09 20:44:35 +02:00
}
export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
const { basket } = useContext(coursesContext)!;
2020-11-13 23:05:10 +01:00
console.log(`values: cellTop: ${cellTop}, cellWidth: ${cellWidth}, cellHeight: ${cellHeight}`);
2020-08-18 00:21:21 +02:00
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
2020-08-09 21:41:52 +02:00
2020-11-19 21:57:34 +01:00
const groupTimeToEventRowMapping: { [time: string]: number } = {
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>) {
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 }>;
2020-08-26 18:42:29 +02:00
const merged = [...classes, ...lectures];
//deleted if statement, maybe it is needed
2020-11-13 23:05:10 +01:00
const groupsMapped = merged.map(({ id, day, lecturer, room, time, name, type }) => ({
id,
2020-10-08 20:21:52 +02:00
day,
lecturer,
room,
eventRow: groupTimeToEventRowMapping[time],
name,
2020-09-28 20:16:54 +02:00
type,
}));
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
key={index}
groups={choosenGroupsMappedToEvents.filter((group: any) => group.eventRow === index)}
2020-08-12 04:13:14 +02:00
indexRow={index}
cellTop={
index === 0
2020-11-19 21:57:34 +01:00
? cellHeight / 2
: index === 1
2020-11-19 21:57:34 +01:00
? cellHeight * 4
: index === 2
? cellHeight * 7.5
: index === 3
? cellHeight * 11.5
: index === 4
? cellHeight * 15
: index === 5
? cellHeight * 18.5
: 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>
);
};