history first draft

This commit is contained in:
Maciek Głowacki 2021-01-05 23:46:51 +01:00
parent 782dbf7218
commit 0b10ed05d6
11 changed files with 178 additions and 34 deletions

View File

@ -5,6 +5,7 @@ import History from '../assets/history.svg';
import Statistics from '../assets/statistics.svg'; import Statistics from '../assets/statistics.svg';
import { Scheduler } from './Scheduler'; import { Scheduler } from './Scheduler';
import { Rightbar } from './Rightbar'; import { Rightbar } from './Rightbar';
import { SchedulerHistory } from './SchedulerHistory';
const LeftSide = styled.div` const LeftSide = styled.div`
height: 100%; height: 100%;
@ -13,7 +14,7 @@ const LeftSide = styled.div`
flex-direction: column; flex-direction: column;
background-color: white; background-color: white;
text-align: center; text-align: center;
border-radius:5px; border-radius: 5px;
`; `;
const Wrap = styled.div` const Wrap = styled.div`
@ -45,11 +46,11 @@ const LeftPanelElement = styled.div<LeftPanelElement>`
cursor: pointer; cursor: pointer;
box-shadow: ${({ isCurrentTab }) => (isCurrentTab === true ? `inset 0px 0px 11px 0px rgba(0,0,0,0.30)` : '')}; box-shadow: ${({ isCurrentTab }) => (isCurrentTab === true ? `inset 0px 0px 11px 0px rgba(0,0,0,0.30)` : '')};
border-bottom: 1px solid #979797; border-bottom: 1px solid #979797;
:first-child{ :first-child {
border-radius:0px 5px 0px 0px; border-radius: 0px 5px 0px 0px;
} }
:last-child{ :last-child {
border-radius:0px 0px 5px 0px; border-radius: 0px 0px 5px 0px;
} }
`; `;
@ -124,7 +125,7 @@ export const Admin = () => {
<Rightbar /> <Rightbar />
</> </>
) : currentTab === 2 ? ( ) : currentTab === 2 ? (
<HistoryDiv /> <SchedulerHistory />
) : currentTab === 3 ? ( ) : currentTab === 3 ? (
<StatsDiv /> <StatsDiv />
) : ( ) : (

View File

@ -1,11 +1,10 @@
import React, { ElementType, useContext, useEffect, useState } from 'react'; import React, { useContext, useState } from 'react';
import Topbar from './Topbar'; import Topbar from './Topbar';
import { Transfer } from './Transfer'; import { Transfer } from './Transfer';
import { Admin } from './Admin'; import { Admin } from './Admin';
import { Scheduler } from './Scheduler'; import { Scheduler } from './Scheduler';
import { Rightbar } from './Rightbar'; import { Rightbar } from './Rightbar';
import styled from 'styled-components'; import styled from 'styled-components';
import { coursesContext } from '../contexts/CoursesProvider';
import LoadingOverlay from 'react-loading-overlay'; import LoadingOverlay from 'react-loading-overlay';
import { SyncLoader } from 'react-spinners'; import { SyncLoader } from 'react-spinners';
import { CASContext } from '../contexts/CASProvider'; import { CASContext } from '../contexts/CASProvider';
@ -19,8 +18,7 @@ const Wrapper = styled.div`
`; `;
export const App = () => { export const App = () => {
const { isDataLoading } = useContext(coursesContext)!; const { role } = useContext(CASContext)!;
const { isFetchingToken, user, role } = useContext(CASContext)!;
const [isOpenTransfer, setOpenTransfer] = useState(false); const [isOpenTransfer, setOpenTransfer] = useState(false);
const handleTransfer = () => { const handleTransfer = () => {
@ -28,10 +26,6 @@ export const App = () => {
}; };
const userPrivilige = localStorage.getItem('userPrivilige'); const userPrivilige = localStorage.getItem('userPrivilige');
console.log('role of that user is: ', role);
useEffect(() => {
console.log('is fetching token: ', isFetchingToken);
}, [isFetchingToken]);
return ( return (
<> <>
<LoadingOverlay active={role === undefined} spinner={<SyncLoader />}> <LoadingOverlay active={role === undefined} spinner={<SyncLoader />}>
@ -43,7 +37,7 @@ export const App = () => {
<Scheduler /> <Scheduler />
<Rightbar /> <Rightbar />
</> </>
)}{' '} )}
{userPrivilige === 'DEANERY' && <Admin />} {userPrivilige === 'DEANERY' && <Admin />}
</Wrapper> </Wrapper>
</LoadingOverlay> </LoadingOverlay>

View File

@ -161,7 +161,6 @@ export const CourseCard = ({ course }: CourseCardProps) => {
const basketCourseGroups = useMemo(() => selectBasketCourseGroups(course.id), []); const basketCourseGroups = useMemo(() => selectBasketCourseGroups(course.id), []);
const [previous, setPrevious] = useState(basketCourseGroups); const [previous, setPrevious] = useState(basketCourseGroups);
console.log('course is: ', course);
const onGroupClick = (group: Group, courseId: number) => { const onGroupClick = (group: Group, courseId: number) => {
setPrevious((prev) => (group.type === GroupType.CLASS ? { ...prev, classes: group } : { ...prev, lecture: group })); setPrevious((prev) => (group.type === GroupType.CLASS ? { ...prev, classes: group } : { ...prev, lecture: group }));
changeGroupInBasket(group, courseId); changeGroupInBasket(group, courseId);

View File

@ -50,7 +50,7 @@ interface DropdownProps {
} }
export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: DropdownProps) => { export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: DropdownProps) => {
const { courses, selectBasketNames, addCourseToBasket, changeStudent } = useContext(coursesContext)!; const { courses, selectBasketNames, addCourseToBasket, changeStudent, getStudentTimetablesHistory } = useContext(coursesContext)!;
const { students, changeSelectedStudent } = useContext(studentsContext)!; const { students, changeSelectedStudent } = useContext(studentsContext)!;
const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]); const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]);
const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]); const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
@ -71,6 +71,7 @@ export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: D
//to be moved to students provider //to be moved to students provider
changeStudent(target.id); changeStudent(target.id);
changeSelectedStudent(Number(target.id)); changeSelectedStudent(Number(target.id));
handleCloseDropdown(); handleCloseDropdown();
}; };

View File

@ -1,4 +1,4 @@
import React, { useEffect, useLayoutEffect, useRef } from 'react'; import React, { useLayoutEffect, useRef } from 'react';
import { useState } from 'react'; import { useState } from 'react';
import { SchedulerEvents } from './SchedulerEvents'; import { SchedulerEvents } from './SchedulerEvents';
import { days, hours } from '../constants/index'; import { days, hours } from '../constants/index';

View File

@ -0,0 +1,42 @@
import React, { useContext, useEffect, useState } from 'react';
import styled from 'styled-components';
import { coursesContext } from '../contexts/CoursesProvider';
import { Scheduler } from './Scheduler';
import { SchedulerHistoryNavigation } from './SchedulerHistoryNavigation';
const Wrapper = styled.div`
display: flex;
flex-direction: column;
width: 100%;
`;
export const SchedulerHistory = () => {
const { timetableHistory, setBasketFromHistoryGroups } = useContext(coursesContext)!;
const [currentTimetable, setCurrentTimetable] = useState(timetableHistory === [] ? 0 : timetableHistory.length - 1);
let commisionDate = undefined;
if (currentTimetable) {
commisionDate = timetableHistory[currentTimetable]?.commisionDate;
}
const changeCurrentTimetable = (value: number) => {
setCurrentTimetable((currentTimetable) => currentTimetable + value);
};
useEffect(() => {
console.log('current timetable is: ', currentTimetable);
const timetable = timetableHistory[currentTimetable];
if (timetable) {
const { groups } = timetable;
setBasketFromHistoryGroups(groups);
}
}, [currentTimetable]);
return (
<Wrapper>
{timetableHistory.length > 1 && (
<SchedulerHistoryNavigation commisionDate={commisionDate} changeCurrentTimetable={changeCurrentTimetable} />
)}
<Scheduler />
</Wrapper>
);
};

View File

@ -0,0 +1,52 @@
import React, { useContext } from 'react';
import styled from 'styled-components';
import { coursesContext } from '../contexts/CoursesProvider';
type ButtonProps = {
direction: 'left' | 'right';
};
const Wrapper = styled.div`
display: flex;
justify-content: space-around;
`;
const StyledButton = styled.button<ButtonProps>`
width: 100px;
height: 100px;
background-color: ${({ direction }) => (direction === 'left' ? 'red' : 'blue')};
`;
type SchedulerHistoryNavigationProps = {
commisionDate?: Date;
changeCurrentTimetable: (value: number) => void;
};
export const SchedulerHistoryNavigation = ({
commisionDate,
changeCurrentTimetable,
}: SchedulerHistoryNavigationProps) => {
return (
<Wrapper>
<StyledButton
direction="left"
onClick={() => {
console.log('left clicked');
changeCurrentTimetable(-1);
}}
>
LEFT
</StyledButton>
{commisionDate}
<StyledButton
direction="right"
onClick={() => {
console.log('right clicked');
changeCurrentTimetable(1);
}}
>
RIGHT
</StyledButton>
</Wrapper>
);
};

View File

@ -146,14 +146,10 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
}; };
const handlePopoverClose = (e: MouseEvent<any>) => { const handlePopoverClose = (e: MouseEvent<any>) => {
console.log('current target:', e.currentTarget);
console.log(' target:', e.target);
setPopoverId(null); setPopoverId(null);
setAnchorEl(null); setAnchorEl(null);
console.log('click awayyy');
}; };
useEffect(() => { useEffect(() => {
console.log('anchorEl: ', anchorEl);
}, [anchorEl]); }, [anchorEl]);
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
const id = open ? 'simple-popover' : undefined; const id = open ? 'simple-popover' : undefined;

View File

@ -1,5 +1,5 @@
import React, { useState, createContext, useEffect, ReactNode } from 'react'; import React, { useState, createContext, useEffect, ReactNode } from 'react';
import { Course, Group, Basket, GroupType, SchedulerEvent } from '../types'; import { Course, Group, Basket, GroupType, SchedulerEvent, TimetableHistory } from '../types';
import { useSnackbar } from 'notistack'; import { useSnackbar } from 'notistack';
import { axiosInstance } from '../utils/axiosInstance'; import { axiosInstance } from '../utils/axiosInstance';
import CloseIcon from '@material-ui/icons/Close'; import CloseIcon from '@material-ui/icons/Close';
@ -16,6 +16,7 @@ const StyledCloseIcon = styled(CloseIcon)`
interface CourseContext { interface CourseContext {
courses: Array<Course>; courses: Array<Course>;
basket: Array<Basket>; basket: Array<Basket>;
timetableHistory: Array<TimetableHistory>;
hoveredGroup: Group | undefined | null; hoveredGroup: Group | undefined | null;
userID: string; userID: string;
isDataLoading: boolean; isDataLoading: boolean;
@ -31,7 +32,9 @@ interface CourseContext {
selectBasketCourses: () => Array<Course>; selectBasketCourses: () => Array<Course>;
selectBasketCourseGroups: (courseId: number) => { lecture: Group | undefined; classes: Group | undefined }; selectBasketCourseGroups: (courseId: number) => { lecture: Group | undefined; classes: Group | undefined };
getNewestStudentTimetable: (studentId: string) => void; getNewestStudentTimetable: (studentId: string) => void;
getStudentTimetablesHistory: (studentId: string) => void;
changeDataLoading: (isLoading: boolean) => void; changeDataLoading: (isLoading: boolean) => void;
setBasketFromHistoryGroups: (groupsIds: Array<number>) => void;
} }
export const coursesContext = createContext<CourseContext | undefined>(undefined); export const coursesContext = createContext<CourseContext | undefined>(undefined);
@ -46,6 +49,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
//fetch courses with groups //fetch courses with groups
const [courses, setCourses] = useState<Array<Course>>([]); const [courses, setCourses] = useState<Array<Course>>([]);
const [basket, setBasket] = useState<Array<Basket>>([]); const [basket, setBasket] = useState<Array<Basket>>([]);
const [timetableHistory, setTimetableHistory] = useState<Array<TimetableHistory>>([]);
const [userID, setUserID] = useState(''); const [userID, setUserID] = useState('');
const [hoveredGroup, setHoveredGroup] = useState<Group | undefined | null>(null); const [hoveredGroup, setHoveredGroup] = useState<Group | undefined | null>(null);
const [isDataLoading, setIsDataLoading] = useState(false); const [isDataLoading, setIsDataLoading] = useState(false);
@ -70,12 +74,9 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
return basket.reduce((res, el) => { return basket.reduce((res, el) => {
const { name } = el; const { name } = el;
if (el.classes) { if (el.classes) {
console.log('element kurwa is: ', el);
res.push({ ...el.classes, name }); res.push({ ...el.classes, name });
} }
if (el.lecture) { if (el.lecture) {
console.log('element kurwa is: ', el);
res.push({ ...el.lecture, name }); res.push({ ...el.lecture, name });
} }
return res; return res;
@ -111,6 +112,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
setUserID(studentId); setUserID(studentId);
setTimeout(() => { setTimeout(() => {
getNewestStudentTimetable(studentId); getNewestStudentTimetable(studentId);
getStudentTimetablesHistory(studentId);
}, 100); }, 100);
}; };
@ -179,8 +181,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/schedule`, `${process.env.REACT_APP_API_URL}/api/v1/commisions/user/schedule`,
); );
const basket = data === '' ? [] : data; const basket = data === '' ? [] : data;
console.log('basket is: ', basket);
console.log('mordo weź');
setBasket(basket); setBasket(basket);
} catch (e) { } catch (e) {
console.log(e); console.log(e);
@ -200,19 +200,59 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
} }
}; };
const getStudentTimetablesHistory = async (studentId: string) => {
try {
const { data } = await axiosInstance.get<Array<TimetableHistory> | []>(
`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/${studentId}?groups=true`,
);
console.log('data is mordo: ', data);
setTimetableHistory(data);
} catch (e) {
console.log(e);
}
};
const fetchCourses = async () => { const fetchCourses = async () => {
try { try {
const { data: courses } = await axiosInstance.get<Array<Course>>( const { data: courses } = await axiosInstance.get<Array<Course>>(
`${process.env.REACT_APP_API_URL}/api/v1/courses/all?groups=true&takenPlaces=true`, `${process.env.REACT_APP_API_URL}/api/v1/courses/all?groups=true&takenPlaces=true`,
); );
const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1)); const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
console.log('sortedCourses: ', sortedCourses);
setCourses(sortedCourses); setCourses(sortedCourses);
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
}; };
const setBasketFromHistoryGroups = (groupsIds: Array<number>) => {
const basket: Array<Basket> = [];
for (const groupId of groupsIds) {
for (const course of courses) {
const { lectures, classes, name, id } = course;
let basketElement: Basket = { name: name, id: id };
if (lectures) {
for (const lecture of lectures) {
if (groupId === lecture.id) {
basketElement = { ...basketElement, lecture: lecture };
}
}
}
if (classes) {
for (const singleClass of classes) {
if (groupId === singleClass.id) {
basketElement = { ...basketElement, classes: singleClass };
}
}
}
if (basketElement.classes !== undefined || basketElement.lecture !== undefined) {
basket.push(basketElement);
}
}
}
console.log('baskeeeeeet: ', basket);
setBasket(basket);
};
useEffect(() => { useEffect(() => {
setIsDataLoading(true); setIsDataLoading(true);
setTimeout(() => { setTimeout(() => {
@ -229,6 +269,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
courses, courses,
basket, basket,
hoveredGroup, hoveredGroup,
timetableHistory,
isDataLoading, isDataLoading,
addCourseToBasket, addCourseToBasket,
changeHoveredGroup, changeHoveredGroup,
@ -242,6 +283,8 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
selectBasketCourseGroups, selectBasketCourseGroups,
getNewestStudentTimetable, getNewestStudentTimetable,
changeStudent, changeStudent,
getStudentTimetablesHistory,
setBasketFromHistoryGroups,
changeDataLoading, changeDataLoading,
}} }}
> >

View File

@ -1,7 +1,6 @@
import React, { useState, createContext, useEffect, ReactNode, useRef, useContext } from 'react'; import React, { useState, createContext, useEffect, ReactNode, useRef, useContext } from 'react';
import { Student } from '../types'; import { Student } from '../types';
import { axiosInstance } from '../utils/axiosInstance'; import { axiosInstance } from '../utils/axiosInstance';
import { CASContext } from './CASProvider';
interface StudentContext { interface StudentContext {
students: Array<Student>; students: Array<Student>;
@ -19,7 +18,9 @@ export const StudentsProvider = ({ children }: StudentsProviderProps) => {
const [students, setStudents] = useState<Array<Student>>([]); const [students, setStudents] = useState<Array<Student>>([]);
const [selectedStudent, setSelectedStudent] = useState<Student | null>(null); const [selectedStudent, setSelectedStudent] = useState<Student | null>(null);
//not working currently useEffect(() => {
console.log('selected student: ', selectedStudent);
}, [selectedStudent]);
const getStudents = async () => { const getStudents = async () => {
try { try {
@ -27,7 +28,6 @@ export const StudentsProvider = ({ children }: StudentsProviderProps) => {
`${process.env.REACT_APP_API_URL}/api/v1/users/students`, `${process.env.REACT_APP_API_URL}/api/v1/users/students`,
); );
setStudents(data); setStudents(data);
console.log(data);
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
@ -40,7 +40,6 @@ export const StudentsProvider = ({ children }: StudentsProviderProps) => {
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
const userPrivilige = localStorage.getItem('userPrivilige'); const userPrivilige = localStorage.getItem('userPrivilige');
console.log('mordo privilidż: ', userPrivilige);
userPrivilige === 'DEANERY' && getStudents(); userPrivilige === 'DEANERY' && getStudents();
}, 500); }, 500);
}, []); }, []);

View File

@ -54,3 +54,20 @@ export interface SchedulerEvent {
takenPlaces: number; takenPlaces: number;
name: string; name: string;
} }
export interface TimetableHistory {
commisionDate: Date;
commiter: {
id: number;
name: string;
surname: string;
email: string;
};
groups: Array<number>;
owner: {
id: number;
name: string;
surname: string;
email: string;
};
}