Added group to event mapping

This commit is contained in:
Maciek Głowacki 2020-08-09 21:41:52 +02:00
parent aa38625207
commit f6da0d9c72
2 changed files with 78 additions and 57 deletions

View File

@ -1,6 +1,7 @@
import React, { useContext } from "react"; import React, { useContext, useEffect, useState } from "react";
import { SchedulerRow } from "../SchedulerRow"; import { SchedulerRow } from "../SchedulerRow";
import { LecturesContext } from "../../../businesslogic/LecturesProvider"; import { LecturesContext } from "../../../businesslogic/LecturesProvider";
import { Group } from "../../../businesslogic/types/group";
interface SchedulerEventsProps { interface SchedulerEventsProps {
cellTop: number; cellTop: number;
@ -11,58 +12,75 @@ export const SchedulerEvents = ({
cellTop, cellTop,
cellWidth, cellWidth,
}: SchedulerEventsProps) => { }: SchedulerEventsProps) => {
// const handleEventClick = (e: React.MouseEvent) => { // const handleEventClick = (e: React.MouseEvent) => {
// const eventDiv = e.target as HTMLDivElement; // const eventDiv = e.target as HTMLDivElement;
// eventDiv.style.backgroundColor = "#1547C5"; // eventDiv.style.backgroundColor = "#1547C5";
// }; // };
const mapGroupToEvent = () => {
const { choosenGroups } = useContext(LecturesContext);
const [groupsMappedToEvents, setGroupsMappedToEvents] = useState<any>([]);
// const groups: Array<Group> = [{ id: "5", day: "4", time: "11.45", lecturer: "dr Dorota Blinkiewicz", room: "A2-3" },
// { id: "28", day: "1", time: "13.45", lecturer: "dr Barbara Kołodziejczak", room: "D-3" },
// { id: "69", day: "4", time: "15.30", lecturer: "dr Karol Gierszewski", room: "A2-3" }];
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(groups: Array<Group>) {
for (const group of groups) {
console.log(group);
const groupTime = group.time
const eventRow: number = groupTimeToEventRowMapping[groupTime];
const groupMappedToEvent: any = { id: group.id, day: group.day, eventRow: eventRow, lecturer: group.lecturer, room: group.room };
setGroupsMappedToEvents((groupsMappedToEvents: any) => [...groupsMappedToEvents, groupMappedToEvent]);
}
} }
mapGroupTimeToEventRow(choosenGroups);
const { choosenGroups } = useContext(LecturesContext); }, [choosenGroups]);
const group = {0: {id: 5, day: 4, time: "11.45", lecturer: "dr Dorota Blinkiewicz", room: "A2-3"}}
useEffect(() => {
console.log(groupsMappedToEvents);
}, [groupsMappedToEvents]);
console.log(choosenGroups)
return ( return (
<div> <div>
<SchedulerRow {
groups={choosenGroups} [...Array(6)].map((_, index) => (
indexRow={0} <SchedulerRow
cellTop={cellTop + 10} key={index}
cellWidth={cellWidth} groups={groupsMappedToEvents.filter((group: any) => { return group.eventRow === index })}
/> indexRow={index}
<SchedulerRow cellTop={cellTop + (10 + 70 * index)}
groups={[]} cellWidth={cellWidth}
indexRow={1} />
cellTop={cellTop + 80} ))
cellWidth={cellWidth} }
/>
<SchedulerRow
groups={[]}
indexRow={2}
cellTop={cellTop + 150}
cellWidth={cellWidth}
/>
<SchedulerRow
groups={[]}
indexRow={3}
cellTop={cellTop + 230}
cellWidth={cellWidth}
/>
<SchedulerRow
groups={[]}
indexRow={4}
cellTop={cellTop + 300}
cellWidth={cellWidth}
/>
<SchedulerRow
groups={[]}
indexRow={5}
cellTop={cellTop + 370}
cellWidth={cellWidth}
/>
</div> </div>
); );
}; };

View File

@ -19,28 +19,31 @@ export const SchedulerRow = ({
// eventDiv.style.backgroundColor = "#1547C5"; // eventDiv.style.backgroundColor = "#1547C5";
// }; // };
const group = {0: {id: 5, day: 4, time: "11.45", lecturer: "dr Dorota Blinkiewicz", room: "A2-3"}} console.log(`You passed me these of a groupzzz: ${groups}`)
return ( return (
<div> <div>
{[...Array(5)].map((value, index) => ( {[...Array(5)].map((value, eventIndex) => (
<div <div
key = {`eventRow${indexRow}eventCol${index}`} key={`eventRow${indexRow}eventCol${eventIndex}`}
id={`eventRow${indexRow}eventCol${index}`} id={`eventRow${indexRow}eventCol${eventIndex}`}
style={{ style={{
position: "absolute", position: "absolute",
top: cellTop, top: cellTop,
left: cellWidth + 5 + cellWidth * index, left: cellWidth + 5 + cellWidth * eventIndex,
width: (cellWidth * 2) / 3, width: (cellWidth * 2) / 3,
height: 60, height: 60,
backgroundColor: "lightblue", backgroundColor: "lightblue",
zIndex: 2, zIndex: 2,
}} }}
> >
{groups.map((value, index) => ( {groups.map((group, index) =>
<div key={index}>{groups[index]?.lecturer}</div> (
))} parseInt(group.day) === eventIndex ? <div key={index}>{groups[index]?.lecturer}</div>
: null
))}
</div> </div>
))} ))}
</div> </div>