Scheduler c.d
This commit is contained in:
parent
7aec9ff943
commit
aa38625207
@ -1,34 +1,31 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState } from "react";
|
||||||
import { lectures } from "./mockData/lectures";
|
|
||||||
import { Lecture } from "./types/lecture";
|
import { Lecture } from "./types/lecture";
|
||||||
import { Group } from "./types/group";
|
import { Group } from "./types/group";
|
||||||
interface ILectureContext {
|
interface ILectureContext {
|
||||||
lectures: Array<Lecture>;
|
lectures: Array<Lecture>;
|
||||||
updateLectures: (lectures: Lecture) => void;
|
addLecture: (lectures: Lecture) => void;
|
||||||
}
|
}
|
||||||
export const LecturesContext = React.createContext({
|
export const LecturesContext = React.createContext({
|
||||||
lectures: Array<Lecture>(),
|
lectures: Array<Lecture>(),
|
||||||
choosenGroups: Array<Group>(),
|
choosenGroups: Array<Group>(),
|
||||||
updateLectures: (lecture: Lecture) => {},
|
addLecture: (lecture: Lecture) => {},
|
||||||
updateGroups: (group : Group) => {}
|
addGroup: (group : Group) => {}
|
||||||
});
|
});
|
||||||
|
|
||||||
export const LecturesProvider: React.FC = (props) => {
|
export const LecturesProvider: React.FC = (props) => {
|
||||||
const [lectures, setLectures] = useState<Array<Lecture>>([]);
|
const [lectures, setLectures] = useState<Array<Lecture>>([]);
|
||||||
const [choosenGroups, setChoosenGroups] = useState<Array<Group>>([]);
|
const [choosenGroups, setChoosenGroups] = useState<Array<Group>>([]);
|
||||||
const updateLectures = (lecture: Lecture) => {
|
const addLecture = (lecture: Lecture) => {
|
||||||
setLectures([...lectures, lecture]);
|
setLectures([...lectures, lecture]);
|
||||||
};
|
};
|
||||||
const updateGroups = (group : Group) => {
|
const addGroup = (group : Group) => {
|
||||||
setChoosenGroups([...choosenGroups, group]);
|
setChoosenGroups([...choosenGroups, group]);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
useEffect(()=>{console.log(`Groups have changed: ${JSON.stringify(choosenGroups)}`)},[choosenGroups]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<LecturesContext.Provider
|
<LecturesContext.Provider
|
||||||
value={{ lectures, choosenGroups, updateLectures, updateGroups }}
|
value={{ lectures, choosenGroups, addLecture, addGroup }}
|
||||||
>
|
>
|
||||||
{props.children}
|
{props.children}
|
||||||
</LecturesContext.Provider>
|
</LecturesContext.Provider>
|
||||||
|
@ -22,12 +22,11 @@ export default function LectureCard({
|
|||||||
isSelected,
|
isSelected,
|
||||||
}: LectureCardProps) {
|
}: LectureCardProps) {
|
||||||
|
|
||||||
const {updateGroups} = useContext(LecturesContext);
|
const {addGroup} = useContext(LecturesContext);
|
||||||
|
|
||||||
|
|
||||||
function onGroupClick(group : Group){
|
function onGroupClick(group : Group){
|
||||||
console.log(`group is: ${JSON.stringify(group)}`)
|
addGroup(group);
|
||||||
updateGroups(group);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -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>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
68
src/components/Scheduler/SchedulerEvents/index.tsx
Normal file
68
src/components/Scheduler/SchedulerEvents/index.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
};
|
48
src/components/Scheduler/SchedulerRow/index.tsx
Normal file
48
src/components/Scheduler/SchedulerRow/index.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
};
|
@ -1,7 +1,7 @@
|
|||||||
import React, { useEffect, useContext, useRef } from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import "./index.scss";
|
import "./index.scss";
|
||||||
import { LecturesContext } from "../../businesslogic/LecturesProvider";
|
import { SchedulerEvents } from "./SchedulerEvents";
|
||||||
const days = ["", "poniedziałek", "wtorek", "środa", "czwartek", "piątek"];
|
const days = ["", "poniedziałek", "wtorek", "środa", "czwartek", "piątek"];
|
||||||
|
|
||||||
const hours = [
|
const hours = [
|
||||||
@ -27,64 +27,54 @@ for (let i = 0; i < hours.length / 2; i++) {
|
|||||||
let center: "center" = "center";
|
let center: "center" = "center";
|
||||||
let row: "row" = "row";
|
let row: "row" = "row";
|
||||||
let column: "column" = "column";
|
let column: "column" = "column";
|
||||||
const collapse: "collapse" = "collapse";
|
// const collapse: "collapse" = "collapse";
|
||||||
const tbodyStyles = {
|
const tbodyStyles = {
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: column,
|
flexDirection: column,
|
||||||
}
|
};
|
||||||
|
|
||||||
const rowStyles = {
|
const rowStyles = {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: row,
|
flexDirection: row,
|
||||||
}
|
};
|
||||||
|
|
||||||
const cellStyles = {
|
const cellStyles = {
|
||||||
border: "1px solid #ddd",
|
border: "1px solid #ddd",
|
||||||
padding: "10px",
|
padding: "10px",
|
||||||
textAlign: center,
|
textAlign: center,
|
||||||
flex: 1,
|
flex: 1,
|
||||||
}
|
};
|
||||||
|
|
||||||
const theadStyles = {
|
const theadStyles = {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
width: "100%"
|
width: "100%",
|
||||||
}
|
};
|
||||||
|
|
||||||
const scheduler = {
|
|
||||||
marginTop: "20px",
|
|
||||||
borderCollapse: collapse
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// const scheduler = {
|
||||||
|
// marginTop: "20px",
|
||||||
|
// borderCollapse: collapse,
|
||||||
|
// };
|
||||||
|
|
||||||
export const Scheduler = () => {
|
export const Scheduler = () => {
|
||||||
const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
|
const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
|
||||||
const cellRef = useRef<HTMLDivElement>(null);
|
const cellRef = useRef<HTMLDivElement>(null);
|
||||||
const [cellWidth, setCellWidth] = useState(0);
|
const [cellWidth, setCellWidth] = useState(0);
|
||||||
const [cellTop, setCellTop] = useState(0);
|
const [cellTop, setCellTop] = useState(0);
|
||||||
const { choosenGroups } = useContext(LecturesContext);
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleResize = () => {
|
const handleResize = () => {
|
||||||
console.log(`cellref is:`);
|
|
||||||
console.log(cellRef);
|
|
||||||
if (cellRef.current) {
|
if (cellRef.current) {
|
||||||
setCellWidth(cellRef.current.getBoundingClientRect().width);
|
setCellWidth(cellRef.current.getBoundingClientRect().width);
|
||||||
setCellTop(cellRef.current.getBoundingClientRect().top);
|
setCellTop(cellRef.current.getBoundingClientRect().top);
|
||||||
console.log(`cellwidth: ${cellWidth}`);
|
|
||||||
console.log("cell ref:");
|
|
||||||
console.log(cellRef.current.getBoundingClientRect());
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
handleResize();
|
handleResize();
|
||||||
window.addEventListener('resize', handleResize);
|
window.addEventListener("resize", handleResize);
|
||||||
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const displayEvents = () => {
|
const displayEvents = () => {
|
||||||
currentEventsIds.map((eventId: string) => {
|
currentEventsIds.map((eventId: string) => {
|
||||||
@ -97,14 +87,14 @@ export const Scheduler = () => {
|
|||||||
displayEvents();
|
displayEvents();
|
||||||
}, [currentEventsIds]);
|
}, [currentEventsIds]);
|
||||||
|
|
||||||
const handleClick = (e: React.MouseEvent) => {
|
// const handleClick = (e: React.MouseEvent) => {
|
||||||
const cellId = e.currentTarget.id;
|
// const cellId = e.currentTarget.id;
|
||||||
const column = cellId.slice(0, 1);
|
// const column = cellId.slice(0, 1);
|
||||||
const row = cellId.slice(1);
|
// const row = cellId.slice(1);
|
||||||
const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
|
// const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
|
||||||
|
|
||||||
setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, eventId]);
|
// setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, eventId]);
|
||||||
};
|
// };
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -118,52 +108,18 @@ export const Scheduler = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div style={tbodyStyles}>
|
<div style={tbodyStyles}>
|
||||||
{hours.map((hour, indexRow) => (
|
{hours.map((hour, indexRow) => (
|
||||||
<div style={rowStyles}>{
|
<div key={indexRow} style={rowStyles}>
|
||||||
[hour, "", "", "", "", ""].map((value, indexCell) =>
|
{[hour, "", "", "", "", ""].map((value, indexCell) =>
|
||||||
indexRow === 0 && indexCell === 1 ? (<div ref={cellRef} style={cellStyles}></div>) : (<div style={cellStyles}>{value}</div>)
|
indexRow === 0 && indexCell === 1 ? (
|
||||||
|
<div key={`${indexRow}${indexCell}`} ref={cellRef} style={cellStyles}></div>
|
||||||
)}</div>
|
) : (
|
||||||
))}
|
<div key={`${indexRow}${indexCell}`} style={cellStyles}>{value}</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>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} />
|
||||||
{[...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>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React, { useState, useContext, useEffect } from "react";
|
import React, { useState, useContext, useEffect } from "react";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { Input, Grow } from "@material-ui/core";
|
import { Input } from "@material-ui/core";
|
||||||
import "./index.scss";
|
import "./index.scss";
|
||||||
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
|
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
|
||||||
import { LecturesContext } from "../../../businesslogic/LecturesProvider";
|
import { LecturesContext } from "../../../businesslogic/LecturesProvider";
|
||||||
@ -35,7 +35,7 @@ export const Results: React.FC = () => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchData = async () => {
|
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(
|
const lecturesData = results.data.map(
|
||||||
(result: { id: number; name: string }) => ({
|
(result: { id: number; name: string }) => ({
|
||||||
id: result.id,
|
id: result.id,
|
||||||
@ -61,7 +61,7 @@ export const Results: React.FC = () => {
|
|||||||
|
|
||||||
const getLecturesById = async (id: string) => {
|
const getLecturesById = async (id: string) => {
|
||||||
const { data } = await axios.get(
|
const { data } = await axios.get(
|
||||||
`http://localhost:1285/getClassesByCourseId?id=${id}`
|
`http://localhost:1287/getClassesByCourseId?id=${id}`
|
||||||
);
|
);
|
||||||
return data;
|
return data;
|
||||||
};
|
};
|
||||||
@ -98,13 +98,13 @@ export const Results: React.FC = () => {
|
|||||||
result[i].lecturer.name +
|
result[i].lecturer.name +
|
||||||
" " +
|
" " +
|
||||||
result[i].lecturer.surname;
|
result[i].lecturer.surname;
|
||||||
group.room = result[i].room;
|
group.room = result[i].room.trim();
|
||||||
lecture.groups.push(group);
|
lecture.groups.push(group);
|
||||||
}
|
}
|
||||||
console.log(result);
|
console.log(result);
|
||||||
console.log(result[0].course.name);
|
console.log(result[0].course.name);
|
||||||
|
|
||||||
lecturesContext.updateLectures(lecture);
|
lecturesContext.addLecture(lecture);
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user