Added group to event mapping
This commit is contained in:
Maciek Głowacki
parent
aa38625207
commit
f6da0d9c72
|
|
@ -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<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]);
|
||||
}
|
||||
}
|
||||
|
||||
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 (
|
||||
|
||||
|
||||
<div>
|
||||
<SchedulerRow
|
||||
groups={choosenGroups}
|
||||
indexRow={0}
|
||||
cellTop={cellTop + 10}
|
||||
cellWidth={cellWidth}
|
||||
/>
|
||||
<SchedulerRow
|
||||
groups={[]}
|
||||
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}
|
||||
/>
|
||||
{
|
||||
[...Array(6)].map((_, index) => (
|
||||
<SchedulerRow
|
||||
key={index}
|
||||
groups={groupsMappedToEvents.filter((group: any) => { return group.eventRow === index })}
|
||||
indexRow={index}
|
||||
cellTop={cellTop + (10 + 70 * index)}
|
||||
cellWidth={cellWidth}
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div>
|
||||
{[...Array(5)].map((value, index) => (
|
||||
{[...Array(5)].map((value, eventIndex) => (
|
||||
<div
|
||||
key = {`eventRow${indexRow}eventCol${index}`}
|
||||
id={`eventRow${indexRow}eventCol${index}`}
|
||||
key={`eventRow${indexRow}eventCol${eventIndex}`}
|
||||
id={`eventRow${indexRow}eventCol${eventIndex}`}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: cellTop,
|
||||
left: cellWidth + 5 + cellWidth * index,
|
||||
left: cellWidth + 5 + cellWidth * eventIndex,
|
||||
width: (cellWidth * 2) / 3,
|
||||
height: 60,
|
||||
backgroundColor: "lightblue",
|
||||
zIndex: 2,
|
||||
}}
|
||||
>
|
||||
|
||||
{groups.map((value, index) => (
|
||||
<div key={index}>{groups[index]?.lecturer}</div>
|
||||
))}
|
||||
|
||||
{groups.map((group, index) =>
|
||||
(
|
||||
parseInt(group.day) === eventIndex ? <div key={index}>{groups[index]?.lecturer}</div>
|
||||
: null
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue