Groups are added to state
This commit is contained in:
parent
bef314120a
commit
376aca837c
@ -45,7 +45,6 @@ function App() {
|
|||||||
lectures={lectures}
|
lectures={lectures}
|
||||||
onGroupMouseOver={(id, name) => {
|
onGroupMouseOver={(id, name) => {
|
||||||
}}
|
}}
|
||||||
onGroupClick={(id, name) => {}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,26 +1,34 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { lectures } from "./mockData/lectures";
|
import { lectures } from "./mockData/lectures";
|
||||||
import { Lecture } from "./types/lecture";
|
import { Lecture } from "./types/lecture";
|
||||||
|
import { Group } from "./types/group";
|
||||||
interface ILectureContext {
|
interface ILectureContext {
|
||||||
lectures: Array<Lecture>;
|
lectures: Array<Lecture>;
|
||||||
updateLectures: (lectures: Lecture) => void;
|
updateLectures: (lectures: Lecture) => void;
|
||||||
}
|
}
|
||||||
export const LecturesContext = React.createContext({
|
export const LecturesContext = React.createContext({
|
||||||
lectures: Array<Lecture>(),
|
lectures: Array<Lecture>(),
|
||||||
updateLectures: (lectures: Lecture) => {},
|
choosenGroups: Array<Group>(),
|
||||||
|
updateLectures: (lecture: Lecture) => {},
|
||||||
|
updateGroups: (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 updateLectures = (lecture: Lecture) => {
|
const updateLectures = (lecture: Lecture) => {
|
||||||
setLectures([...lectures, lecture]);
|
setLectures([...lectures, lecture]);
|
||||||
};
|
};
|
||||||
|
const updateGroups = (group : Group) => {
|
||||||
|
setChoosenGroups([...choosenGroups, group]);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(()=>{console.log(`Groups have changed: ${JSON.stringify(choosenGroups)}`)},[choosenGroups]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<LecturesContext.Provider
|
<LecturesContext.Provider
|
||||||
value={{ lectures: lectures, updateLectures: updateLectures }}
|
value={{ lectures, choosenGroups, updateLectures, updateGroups }}
|
||||||
>
|
>
|
||||||
{props.children}
|
{props.children}
|
||||||
</LecturesContext.Provider>
|
</LecturesContext.Provider>
|
||||||
|
@ -1,12 +1,13 @@
|
|||||||
import React from "react";
|
import React, {useContext} from "react";
|
||||||
import "./index.scss";
|
import "./index.scss";
|
||||||
import Collapse from "@material-ui/core/Collapse";
|
import Collapse from "@material-ui/core/Collapse";
|
||||||
import ExpandIcon from "./expand.png";
|
import ExpandIcon from "./expand.png";
|
||||||
import { Lecture } from "../../../businesslogic/types/lecture";
|
import { Lecture } from "../../../businesslogic/types/lecture";
|
||||||
|
import { Group } from "../../../businesslogic/types/group";
|
||||||
|
import { LecturesContext } from "../../../businesslogic/LecturesProvider";
|
||||||
|
|
||||||
interface LectureCardProps {
|
interface LectureCardProps {
|
||||||
onGroupMouseOver: (id: string, name: string) => void;
|
onGroupMouseOver: (id: string, name: string) => void;
|
||||||
onGroupClick: (id: string, name: string) => void;
|
|
||||||
onCardClick: (e: React.MouseEvent) => void;
|
onCardClick: (e: React.MouseEvent) => void;
|
||||||
lecture: Lecture;
|
lecture: Lecture;
|
||||||
id: string;
|
id: string;
|
||||||
@ -15,12 +16,21 @@ interface LectureCardProps {
|
|||||||
|
|
||||||
export default function LectureCard({
|
export default function LectureCard({
|
||||||
onGroupMouseOver,
|
onGroupMouseOver,
|
||||||
onGroupClick,
|
|
||||||
onCardClick,
|
onCardClick,
|
||||||
lecture,
|
lecture,
|
||||||
id,
|
id,
|
||||||
isSelected,
|
isSelected,
|
||||||
}: LectureCardProps) {
|
}: LectureCardProps) {
|
||||||
|
|
||||||
|
const {updateGroups} = useContext(LecturesContext);
|
||||||
|
|
||||||
|
|
||||||
|
function onGroupClick(group : Group){
|
||||||
|
console.log(`group is: ${JSON.stringify(group)}`)
|
||||||
|
updateGroups(group);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="class" onClick={onCardClick} id={id}>
|
<div className="class" onClick={onCardClick} id={id}>
|
||||||
<div className="class__name">{lecture.name}</div>
|
<div className="class__name">{lecture.name}</div>
|
||||||
@ -35,7 +45,7 @@ export default function LectureCard({
|
|||||||
className="class__group"
|
className="class__group"
|
||||||
key={index}
|
key={index}
|
||||||
onMouseOver={() => onGroupMouseOver(group.id, lecture.name)}
|
onMouseOver={() => onGroupMouseOver(group.id, lecture.name)}
|
||||||
onClick={() => onGroupClick(group.id, lecture.name)}
|
onClick={() => onGroupClick(group)}
|
||||||
>
|
>
|
||||||
<p>
|
<p>
|
||||||
{group.time} {group.room} <br></br> {group.lecturer}
|
{group.time} {group.room} <br></br> {group.lecturer}
|
||||||
|
@ -6,14 +6,12 @@ import { LecturesContext } from "../../businesslogic/LecturesProvider";
|
|||||||
|
|
||||||
interface RightBarProps {
|
interface RightBarProps {
|
||||||
onGroupMouseOver: (id: string, name: string) => void;
|
onGroupMouseOver: (id: string, name: string) => void;
|
||||||
onGroupClick: (id: string, name: string) => void;
|
|
||||||
lectures: Array<Lecture>;
|
lectures: Array<Lecture>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function RightBar({
|
export default function RightBar({
|
||||||
lectures,
|
lectures,
|
||||||
onGroupMouseOver,
|
onGroupMouseOver,
|
||||||
onGroupClick,
|
|
||||||
}: RightBarProps) {
|
}: RightBarProps) {
|
||||||
const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
|
const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
|
||||||
|
|
||||||
@ -28,9 +26,6 @@ export default function RightBar({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="right-bar">
|
<div className="right-bar">
|
||||||
{/* <BusinessLogicContext.Consumer>
|
|
||||||
{(context) => <p>{JSON.stringify((context as BuisnessProvided).states.user?.ticket)}</p>}
|
|
||||||
</BusinessLogicContext.Consumer> */}
|
|
||||||
<div className="right-bar__text">
|
<div className="right-bar__text">
|
||||||
Hubert Wrzesiński<br></br>
|
Hubert Wrzesiński<br></br>
|
||||||
Semestr zimowy 2020/2021
|
Semestr zimowy 2020/2021
|
||||||
@ -41,7 +36,6 @@ export default function RightBar({
|
|||||||
key={index}
|
key={index}
|
||||||
id={index.toString()}
|
id={index.toString()}
|
||||||
onGroupMouseOver={onGroupMouseOver}
|
onGroupMouseOver={onGroupMouseOver}
|
||||||
onGroupClick={onGroupClick}
|
|
||||||
onCardClick={onCardClick}
|
onCardClick={onCardClick}
|
||||||
isSelected={selectedCardId === index.toString()}
|
isSelected={selectedCardId === index.toString()}
|
||||||
/>
|
/>
|
||||||
|
@ -13,17 +13,16 @@ export const SchedulerEvent = ({ events, colIndex }: SchedulerEventProps) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{events.map((event, index) => (
|
{events.map((_, index) => (
|
||||||
<div
|
<div
|
||||||
id={`eventCol${colIndex}eventRow${index}`}
|
id={`eventCol${colIndex}eventRow${index}`}
|
||||||
style={{
|
style={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: 80 * index + 5,
|
top: 80 * index + 10,
|
||||||
left:5,
|
left: 5,
|
||||||
backgroundColor: "#839FE6",
|
backgroundColor: "#839FE6",
|
||||||
color: "white",
|
color: "white",
|
||||||
borderRadius: 5,
|
borderRadius: 5,
|
||||||
padding:5,
|
|
||||||
width: "80%",
|
width: "80%",
|
||||||
height: 60,
|
height: 60,
|
||||||
display: "none",
|
display: "none",
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
import React, { useEffect } from "react";
|
import React, { useEffect, useContext } from "react";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import "./index.scss";
|
import "./index.scss";
|
||||||
import { SchedulerEvent } from "./SchedulerEvent";
|
import { SchedulerEvent } from "./SchedulerEvent";
|
||||||
import { Column } from "./Column";
|
import { Column } from "./Column";
|
||||||
|
import { LecturesContext } from "../../businesslogic/LecturesProvider";
|
||||||
const days = ["", "poniedziałek", "wtorek", "środa", "czwartek", "piątek"];
|
const days = ["", "poniedziałek", "wtorek", "środa", "czwartek", "piątek"];
|
||||||
|
|
||||||
const hours = [
|
const hours = [
|
||||||
@ -31,11 +32,16 @@ let terms = ["Zawsze", "jest pora", "na kurde", "lody", "koral"];
|
|||||||
|
|
||||||
export const Scheduler = () => {
|
export const Scheduler = () => {
|
||||||
const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
|
const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
|
||||||
|
|
||||||
|
const { choosenGroups } = useContext(LecturesContext);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const displayEvents = () => {
|
const displayEvents = () => {
|
||||||
currentEventsIds.map((eventId: string) => {
|
currentEventsIds.map((eventId: string) => {
|
||||||
const event = document.getElementById(eventId);
|
const event = document.getElementById(eventId);
|
||||||
event!.style.display = "block";
|
if (event) {
|
||||||
|
event.style.display = "block";
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
displayEvents();
|
displayEvents();
|
||||||
@ -52,7 +58,7 @@ export const Scheduler = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="scheduler">
|
<div className="scheduler" >
|
||||||
<div className="thead">
|
<div className="thead">
|
||||||
{days.map((day, index) => (
|
{days.map((day, index) => (
|
||||||
<div className="th" key={index}>
|
<div className="th" key={index}>
|
||||||
@ -61,15 +67,18 @@ export const Scheduler = () => {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="tbody">
|
<div className="tbody">
|
||||||
<Column hours={hours} isEventable={false}/>
|
<Column hours={hours} isEventable={false} />
|
||||||
{terms.map((_, colIndex) => (
|
{terms.map((_, colIndex) => (
|
||||||
<Column hours={hours} handleClick={handleClick} colIndex={colIndex} isEventable={true} >
|
<Column
|
||||||
|
hours={hours}
|
||||||
|
handleClick={handleClick}
|
||||||
|
colIndex={colIndex}
|
||||||
|
isEventable={true}
|
||||||
|
>
|
||||||
<SchedulerEvent events={events} colIndex={colIndex} />
|
<SchedulerEvent events={events} colIndex={colIndex} />
|
||||||
</Column>
|
</Column>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -35,7 +35,7 @@ export const Results: React.FC = () => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
const results = await axios.get(`http://localhost:1287/getCourses?name=`);
|
const results = await axios.get(`http://localhost:1285/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,
|
||||||
@ -49,18 +49,19 @@ export const Results: React.FC = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
const names = lecturesContext.lectures.map((lecture) => lecture.name);
|
||||||
const filterLectures = (value: string) => {
|
const filterLectures = (value: string) => {
|
||||||
const filteredLectures = lecturesData.filter((lecture) =>
|
let filteredLectures = lecturesData.filter((lecture) =>
|
||||||
lecture.name.toLowerCase().includes(value.toLowerCase())
|
lecture.name.toLowerCase().includes(value.toLowerCase()) && !names.includes(lecture.name)
|
||||||
);
|
);
|
||||||
setFilteredLecturesData(filteredLectures);
|
setFilteredLecturesData(filteredLectures);
|
||||||
};
|
};
|
||||||
filterLectures(input);
|
filterLectures(input);
|
||||||
}, [input]);
|
}, [input, open]);
|
||||||
|
|
||||||
const getLecturesById = async (id: string) => {
|
const getLecturesById = async (id: string) => {
|
||||||
const { data } = await axios.get(
|
const { data } = await axios.get(
|
||||||
`http://localhost:1287/getClassesByCourseId?id=${id}`
|
`http://localhost:1285/getClassesByCourseId?id=${id}`
|
||||||
);
|
);
|
||||||
return data;
|
return data;
|
||||||
};
|
};
|
||||||
@ -81,6 +82,7 @@ export const Results: React.FC = () => {
|
|||||||
const target = e.currentTarget as HTMLElement;
|
const target = e.currentTarget as HTMLElement;
|
||||||
const id = target.id;
|
const id = target.id;
|
||||||
const result = await getLecturesById(id);
|
const result = await getLecturesById(id);
|
||||||
|
|
||||||
let groups: Array<Group> = [];
|
let groups: Array<Group> = [];
|
||||||
let lecture = { groups: groups } as Lecture;
|
let lecture = { groups: groups } as Lecture;
|
||||||
lecture.id = result[0].course.id;
|
lecture.id = result[0].course.id;
|
||||||
|
Loading…
Reference in New Issue
Block a user