From aa38625207aa6fc84d97a244bbce5740821fc8b6 Mon Sep 17 00:00:00 2001 From: wrzesinski-hubert Date: Sun, 9 Aug 2020 20:44:35 +0200 Subject: [PATCH] Scheduler c.d --- src/businesslogic/LecturesProvider.tsx | 17 ++- src/components/RightBar/LectureCard/index.tsx | 5 +- src/components/Scheduler/Row.jsx | 0 .../Scheduler/SchedulerEvent/index.scss | 0 .../Scheduler/SchedulerEvent/index.tsx | 37 ------ .../Scheduler/SchedulerEvents/index.tsx | 68 +++++++++++ .../Scheduler/SchedulerRow/index.tsx | 48 ++++++++ src/components/Scheduler/index.tsx | 108 ++++++------------ src/components/TopBar/Results/index.tsx | 10 +- 9 files changed, 162 insertions(+), 131 deletions(-) delete mode 100644 src/components/Scheduler/Row.jsx delete mode 100644 src/components/Scheduler/SchedulerEvent/index.scss delete mode 100644 src/components/Scheduler/SchedulerEvent/index.tsx create mode 100644 src/components/Scheduler/SchedulerEvents/index.tsx create mode 100644 src/components/Scheduler/SchedulerRow/index.tsx diff --git a/src/businesslogic/LecturesProvider.tsx b/src/businesslogic/LecturesProvider.tsx index 623f446..d56189f 100644 --- a/src/businesslogic/LecturesProvider.tsx +++ b/src/businesslogic/LecturesProvider.tsx @@ -1,34 +1,31 @@ -import React, { useState, useEffect } from "react"; -import { lectures } from "./mockData/lectures"; +import React, { useState } from "react"; import { Lecture } from "./types/lecture"; import { Group } from "./types/group"; interface ILectureContext { lectures: Array; - updateLectures: (lectures: Lecture) => void; + addLecture: (lectures: Lecture) => void; } export const LecturesContext = React.createContext({ lectures: Array(), choosenGroups: Array(), - updateLectures: (lecture: Lecture) => {}, - updateGroups: (group : Group) => {} + addLecture: (lecture: Lecture) => {}, + addGroup: (group : Group) => {} }); export const LecturesProvider: React.FC = (props) => { const [lectures, setLectures] = useState>([]); const [choosenGroups, setChoosenGroups] = useState>([]); - const updateLectures = (lecture: Lecture) => { + const addLecture = (lecture: Lecture) => { setLectures([...lectures, lecture]); }; - const updateGroups = (group : Group) => { + const addGroup = (group : Group) => { setChoosenGroups([...choosenGroups, group]); }; - useEffect(()=>{console.log(`Groups have changed: ${JSON.stringify(choosenGroups)}`)},[choosenGroups]); - return ( {props.children} diff --git a/src/components/RightBar/LectureCard/index.tsx b/src/components/RightBar/LectureCard/index.tsx index 071cd41..4f15f71 100644 --- a/src/components/RightBar/LectureCard/index.tsx +++ b/src/components/RightBar/LectureCard/index.tsx @@ -22,12 +22,11 @@ export default function LectureCard({ isSelected, }: LectureCardProps) { - const {updateGroups} = useContext(LecturesContext); + const {addGroup} = useContext(LecturesContext); function onGroupClick(group : Group){ - console.log(`group is: ${JSON.stringify(group)}`) - updateGroups(group); + addGroup(group); } diff --git a/src/components/Scheduler/Row.jsx b/src/components/Scheduler/Row.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Scheduler/SchedulerEvent/index.scss b/src/components/Scheduler/SchedulerEvent/index.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Scheduler/SchedulerEvent/index.tsx b/src/components/Scheduler/SchedulerEvent/index.tsx deleted file mode 100644 index 5189865..0000000 --- a/src/components/Scheduler/SchedulerEvent/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from "react"; - -interface SchedulerEventProps { - events: Array; - colIndex: number; -} - -export const SchedulerEvent = ({ events, colIndex }: SchedulerEventProps) => { - const handleEventClick = (e: React.MouseEvent) => { - const eventDiv = e.target as HTMLDivElement; - eventDiv.style.backgroundColor = "#1547C5"; - }; - - return ( - <> - {events.map((_, index) => ( -
- :) -
- ))} - - ); -}; diff --git a/src/components/Scheduler/SchedulerEvents/index.tsx b/src/components/Scheduler/SchedulerEvents/index.tsx new file mode 100644 index 0000000..27517cf --- /dev/null +++ b/src/components/Scheduler/SchedulerEvents/index.tsx @@ -0,0 +1,68 @@ +import React, { useContext } from "react"; +import { SchedulerRow } from "../SchedulerRow"; +import { LecturesContext } from "../../../businesslogic/LecturesProvider"; + +interface SchedulerEventsProps { + cellTop: number; + cellWidth: number; +} + +export const SchedulerEvents = ({ + cellTop, + cellWidth, +}: SchedulerEventsProps) => { +// const handleEventClick = (e: React.MouseEvent) => { +// const eventDiv = e.target as HTMLDivElement; +// eventDiv.style.backgroundColor = "#1547C5"; +// }; + const mapGroupToEvent = () => { + + } + +const { choosenGroups } = useContext(LecturesContext); + + const group = {0: {id: 5, day: 4, time: "11.45", lecturer: "dr Dorota Blinkiewicz", room: "A2-3"}} + + + console.log(choosenGroups) + return ( +
+ + + + + + +
+ ); +}; diff --git a/src/components/Scheduler/SchedulerRow/index.tsx b/src/components/Scheduler/SchedulerRow/index.tsx new file mode 100644 index 0000000..c63958d --- /dev/null +++ b/src/components/Scheduler/SchedulerRow/index.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import { Group } from "../../../businesslogic/types/group"; + +interface SchedulerRowProps { + groups: Array; + indexRow: number; + cellTop: number; + cellWidth: number; +} + +export const SchedulerRow = ({ + groups, + indexRow, + cellTop, + cellWidth, +}: SchedulerRowProps) => { + // const handleEventClick = (e: React.MouseEvent) => { + // const eventDiv = e.target as HTMLDivElement; + // eventDiv.style.backgroundColor = "#1547C5"; + // }; + + const group = {0: {id: 5, day: 4, time: "11.45", lecturer: "dr Dorota Blinkiewicz", room: "A2-3"}} + + return ( +
+ {[...Array(5)].map((value, index) => ( +
+ + {groups.map((value, index) => ( +
{groups[index]?.lecturer}
+ ))} +
+ ))} +
+ ); +}; diff --git a/src/components/Scheduler/index.tsx b/src/components/Scheduler/index.tsx index 5e082e7..dcf8a5f 100644 --- a/src/components/Scheduler/index.tsx +++ b/src/components/Scheduler/index.tsx @@ -1,7 +1,7 @@ -import React, { useEffect, useContext, useRef } from "react"; +import React, { useEffect, useRef } from "react"; import { useState } from "react"; import "./index.scss"; -import { LecturesContext } from "../../businesslogic/LecturesProvider"; +import { SchedulerEvents } from "./SchedulerEvents"; const days = ["", "poniedziałek", "wtorek", "środa", "czwartek", "piątek"]; const hours = [ @@ -27,64 +27,54 @@ for (let i = 0; i < hours.length / 2; i++) { let center: "center" = "center"; let row: "row" = "row"; let column: "column" = "column"; -const collapse: "collapse" = "collapse"; +// const collapse: "collapse" = "collapse"; const tbodyStyles = { width: "100%", height: "100%", display: "flex", flexDirection: column, -} +}; const rowStyles = { display: "flex", flexDirection: row, -} +}; const cellStyles = { border: "1px solid #ddd", padding: "10px", textAlign: center, flex: 1, -} +}; const theadStyles = { display: "flex", - width: "100%" -} - -const scheduler = { - marginTop: "20px", - borderCollapse: collapse - -} + width: "100%", +}; +// const scheduler = { +// marginTop: "20px", +// borderCollapse: collapse, +// }; export const Scheduler = () => { const [currentEventsIds, setCurrentEventsIds] = useState>([]); const cellRef = useRef(null); const [cellWidth, setCellWidth] = useState(0); const [cellTop, setCellTop] = useState(0); - const { choosenGroups } = useContext(LecturesContext); - + useEffect(() => { const handleResize = () => { - console.log(`cellref is:`); - console.log(cellRef); if (cellRef.current) { setCellWidth(cellRef.current.getBoundingClientRect().width); setCellTop(cellRef.current.getBoundingClientRect().top); - console.log(`cellwidth: ${cellWidth}`); - console.log("cell ref:"); - console.log(cellRef.current.getBoundingClientRect()); } - } + }; handleResize(); - window.addEventListener('resize', handleResize); - + window.addEventListener("resize", handleResize); }, []); - useEffect(() => { const displayEvents = () => { currentEventsIds.map((eventId: string) => { @@ -97,18 +87,18 @@ export const Scheduler = () => { displayEvents(); }, [currentEventsIds]); - const handleClick = (e: React.MouseEvent) => { - const cellId = e.currentTarget.id; - const column = cellId.slice(0, 1); - const row = cellId.slice(1); - const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`; + // const handleClick = (e: React.MouseEvent) => { + // const cellId = e.currentTarget.id; + // const column = cellId.slice(0, 1); + // const row = cellId.slice(1); + // const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`; - setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, eventId]); - }; + // setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, eventId]); + // }; return ( <> -
+
{days.map((day, index) => (
@@ -118,52 +108,18 @@ export const Scheduler = () => {
{hours.map((hour, indexRow) => ( -
{ - [hour, "", "", "", "", ""].map((value, indexCell) => - indexRow === 0 && indexCell === 1 ? (
) : (
{value}
) - - )}
- ))} -
-
- {[...Array(5)].map((value, index) => ( -
- +
+ {[hour, "", "", "", "", ""].map((value, indexCell) => + indexRow === 0 && indexCell === 1 ? ( +
+ ) : ( +
{value}
+ ) + )}
))}
-
- {[...Array(5)].map((value, index) => ( -
- -
- ))} -
- {[...Array(5)].map((value, index) => ( -
- -
- ))} -
- {[...Array(5)].map((value, index) => ( -
- -
- ))} -
- {[...Array(5)].map((value, index) => ( -
- -
- ))} -
- {[...Array(5)].map((value, index) => ( -
- -
- ))} -
- +
); diff --git a/src/components/TopBar/Results/index.tsx b/src/components/TopBar/Results/index.tsx index 0d2a524..7068d1c 100644 --- a/src/components/TopBar/Results/index.tsx +++ b/src/components/TopBar/Results/index.tsx @@ -1,6 +1,6 @@ import React, { useState, useContext, useEffect } from "react"; import axios from "axios"; -import { Input, Grow } from "@material-ui/core"; +import { Input } from "@material-ui/core"; import "./index.scss"; import ClickAwayListener from "@material-ui/core/ClickAwayListener"; import { LecturesContext } from "../../../businesslogic/LecturesProvider"; @@ -35,7 +35,7 @@ export const Results: React.FC = () => { useEffect(() => { const fetchData = async () => { - const results = await axios.get(`http://localhost:1285/getCourses?name=`); + const results = await axios.get(`http://localhost:1287/getCourses?name=`); const lecturesData = results.data.map( (result: { id: number; name: string }) => ({ id: result.id, @@ -61,7 +61,7 @@ export const Results: React.FC = () => { const getLecturesById = async (id: string) => { const { data } = await axios.get( - `http://localhost:1285/getClassesByCourseId?id=${id}` + `http://localhost:1287/getClassesByCourseId?id=${id}` ); return data; }; @@ -98,13 +98,13 @@ export const Results: React.FC = () => { result[i].lecturer.name + " " + result[i].lecturer.surname; - group.room = result[i].room; + group.room = result[i].room.trim(); lecture.groups.push(group); } console.log(result); console.log(result[0].course.name); - lecturesContext.updateLectures(lecture); + lecturesContext.addLecture(lecture); setOpen(false); };