From f6da0d9c72ffb8540c0b1a16ab8fc0095d8c4a04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Sun, 9 Aug 2020 21:41:52 +0200 Subject: [PATCH] Added group to event mapping --- .../Scheduler/SchedulerEvents/index.tsx | 114 ++++++++++-------- .../Scheduler/SchedulerRow/index.tsx | 21 ++-- 2 files changed, 78 insertions(+), 57 deletions(-) diff --git a/src/components/Scheduler/SchedulerEvents/index.tsx b/src/components/Scheduler/SchedulerEvents/index.tsx index 27517cf..d02c2fa 100644 --- a/src/components/Scheduler/SchedulerEvents/index.tsx +++ b/src/components/Scheduler/SchedulerEvents/index.tsx @@ -1,6 +1,7 @@ -import React, { useContext } from "react"; +import React, { useContext, useEffect, useState } from "react"; import { SchedulerRow } from "../SchedulerRow"; import { LecturesContext } from "../../../businesslogic/LecturesProvider"; +import { Group } from "../../../businesslogic/types/group"; interface SchedulerEventsProps { cellTop: number; @@ -11,58 +12,75 @@ export const SchedulerEvents = ({ cellTop, cellWidth, }: SchedulerEventsProps) => { -// const handleEventClick = (e: React.MouseEvent) => { -// const eventDiv = e.target as HTMLDivElement; -// eventDiv.style.backgroundColor = "#1547C5"; -// }; - const mapGroupToEvent = () => { - + // const handleEventClick = (e: React.MouseEvent) => { + // const eventDiv = e.target as HTMLDivElement; + // eventDiv.style.backgroundColor = "#1547C5"; + // }; + + const { choosenGroups } = useContext(LecturesContext); + + const [groupsMappedToEvents, setGroupsMappedToEvents] = useState([]); + + + + // const groups: Array = [{ 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) { + 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]); + } } - -const { choosenGroups } = useContext(LecturesContext); - - const group = {0: {id: 5, day: 4, time: "11.45", lecturer: "dr Dorota Blinkiewicz", room: "A2-3"}} + mapGroupTimeToEventRow(choosenGroups); + }, [choosenGroups]); + + + useEffect(() => { + console.log(groupsMappedToEvents); + + }, [groupsMappedToEvents]); - console.log(choosenGroups) return ( + +
- - - - - - + { + [...Array(6)].map((_, index) => ( + { return group.eventRow === index })} + indexRow={index} + cellTop={cellTop + (10 + 70 * index)} + cellWidth={cellWidth} + /> + )) + } + +
); }; diff --git a/src/components/Scheduler/SchedulerRow/index.tsx b/src/components/Scheduler/SchedulerRow/index.tsx index c63958d..dd1f693 100644 --- a/src/components/Scheduler/SchedulerRow/index.tsx +++ b/src/components/Scheduler/SchedulerRow/index.tsx @@ -19,28 +19,31 @@ export const SchedulerRow = ({ // 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 (
- {[...Array(5)].map((value, index) => ( + {[...Array(5)].map((value, eventIndex) => (
- - {groups.map((value, index) => ( -
{groups[index]?.lecturer}
- ))} + + {groups.map((group, index) => + ( + parseInt(group.day) === eventIndex ?
{groups[index]?.lecturer}
+ : null + ))}
))}