Scheduler c.d

This commit is contained in:
wrzesinski-hubert 2020-08-09 20:44:35 +02:00
parent 7aec9ff943
commit aa38625207
9 changed files with 162 additions and 131 deletions

View File

@ -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<Lecture>;
updateLectures: (lectures: Lecture) => void;
addLecture: (lectures: Lecture) => void;
}
export const LecturesContext = React.createContext({
lectures: Array<Lecture>(),
choosenGroups: Array<Group>(),
updateLectures: (lecture: Lecture) => {},
updateGroups: (group : Group) => {}
addLecture: (lecture: Lecture) => {},
addGroup: (group : Group) => {}
});
export const LecturesProvider: React.FC = (props) => {
const [lectures, setLectures] = useState<Array<Lecture>>([]);
const [choosenGroups, setChoosenGroups] = useState<Array<Group>>([]);
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 (
<LecturesContext.Provider
value={{ lectures, choosenGroups, updateLectures, updateGroups }}
value={{ lectures, choosenGroups, addLecture, addGroup }}
>
{props.children}
</LecturesContext.Provider>

View File

@ -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);
}

View File

@ -1,37 +0,0 @@
import React from "react";
interface SchedulerEventProps {
events: Array<number>;
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) => (
<div
id={`eventCol${colIndex}eventRow${index}`}
style={{
position: "absolute",
top: 80 * index + 10,
left: 5,
backgroundColor: "#839FE6",
color: "white",
borderRadius: 5,
width: "80%",
height: 60,
display: "none",
}}
onClick={handleEventClick}
>
:)
</div>
))}
</>
);
};

View File

@ -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 (
<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}
/>
</div>
);
};

View File

@ -0,0 +1,48 @@
import React from "react";
import { Group } from "../../../businesslogic/types/group";
interface SchedulerRowProps {
groups: Array<Group>;
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 (
<div>
{[...Array(5)].map((value, index) => (
<div
key = {`eventRow${indexRow}eventCol${index}`}
id={`eventRow${indexRow}eventCol${index}`}
style={{
position: "absolute",
top: cellTop,
left: cellWidth + 5 + cellWidth * index,
width: (cellWidth * 2) / 3,
height: 60,
backgroundColor: "lightblue",
zIndex: 2,
}}
>
{groups.map((value, index) => (
<div key={index}>{groups[index]?.lecturer}</div>
))}
</div>
))}
</div>
);
};

View File

@ -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<Array<string>>([]);
const cellRef = useRef<HTMLDivElement>(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 (
<>
<div className="scheduler" >
<div className="scheduler">
<div style={theadStyles}>
{days.map((day, index) => (
<div className="th" key={index}>
@ -118,52 +108,18 @@ export const Scheduler = () => {
</div>
<div style={tbodyStyles}>
{hours.map((hour, indexRow) => (
<div style={rowStyles}>{
[hour, "", "", "", "", ""].map((value, indexCell) =>
indexRow === 0 && indexCell === 1 ? (<div ref={cellRef} style={cellStyles}></div>) : (<div style={cellStyles}>{value}</div>)
)}</div>
))}
</div>
<div>
{[...Array(5)].map((value, index) => (
<div style={{ position: "absolute", top: cellTop + 10, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
<div key={indexRow} style={rowStyles}>
{[hour, "", "", "", "", ""].map((value, indexCell) =>
indexRow === 0 && indexCell === 1 ? (
<div key={`${indexRow}${indexCell}`} ref={cellRef} style={cellStyles}></div>
) : (
<div key={`${indexRow}${indexCell}`} style={cellStyles}>{value}</div>
)
)}
</div>
))}
</div>
<div>
{[...Array(5)].map((value, index) => (
<div style={{ position: "absolute", top: cellTop + 80, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
</div>
))}
</div> <div>
{[...Array(5)].map((value, index) => (
<div style={{ position: "absolute", top: cellTop + 150, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
</div>
))}
</div> <div>
{[...Array(5)].map((value, index) => (
<div style={{ position: "absolute", top: cellTop + 230, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
</div>
))}
</div> <div>
{[...Array(5)].map((value, index) => (
<div style={{ position: "absolute", top: cellTop + 300, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
</div>
))}
</div> <div>
{[...Array(5)].map((value, index) => (
<div style={{ position: "absolute", top: cellTop + 370, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
</div>
))}
</div>
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} />
</div>
</>
);

View File

@ -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);
};