y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge from plan-hisotry

Browse Source
This commit is contained in:
Marcin Woźniak 2021-01-14 15:22:23 +01:00
commit 7fbf7e3fad
Signed by: y0rune
GPG Key ID: F204C385F57EB348
19 changed files with 660 additions and 15987 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15849
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

118
package.json
View File

@ -1,61 +1,61 @@
{ {
"name": "plannaplan", "name": "plannaplan",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@material-ui/core": "^4.10.0", "@material-ui/core": "^4.10.0",
"@material-ui/icons": "^4.9.1", "@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56", "@material-ui/lab": "^4.0.0-alpha.56",
"axios": "^0.19.2", "axios": "^0.19.2",
"notistack": "^1.0.1", "notistack": "^1.0.1",
"react": "16.9.0", "react": "16.9.0",
"react-click-away-listener": "^1.4.3", "react-click-away-listener": "^1.4.3",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-loading-overlay": "^1.0.1", "react-loading-overlay": "^1.0.1",
"react-scripts": "3.4.1", "react-scripts": "3.4.1",
"react-spinners": "^0.9.0", "react-spinners": "^0.9.0",
"styled-components": "^5.1.1" "styled-components": "^5.1.1"
}, },
"devDependencies": { "devDependencies": {
"@testing-library/jest-dom": "^5.11.6", "@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2", "@testing-library/react": "^11.2.2",
"@types/jest": "^26.0.19", "@types/jest": "^26.0.19",
"@types/react": "^16.9.46", "@types/react": "^16.9.46",
"@types/react-dom": "^16.9.8", "@types/react-dom": "^16.9.8",
"@types/styled-components": "^5.1.2", "@types/styled-components": "^5.1.2",
"@typescript-eslint/eslint-plugin": "^4.8.1", "@typescript-eslint/eslint-plugin": "^4.8.1",
"@typescript-eslint/parser": "^4.8.1", "@typescript-eslint/parser": "^4.8.1",
"eslint-config-prettier": "^6.15.0", "eslint-config-prettier": "^6.15.0",
"eslint-config-react-app": "^6.0.0", "eslint-config-react-app": "^6.0.0",
"eslint-loader": "^4.0.2", "eslint-loader": "^4.0.2",
"eslint-plugin-prettier": "^3.1.4", "eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5", "eslint-plugin-react": "^7.21.5",
"prettier": "^2.2.0", "prettier": "^2.2.0",
"ts-jest": "^26.4.4", "ts-jest": "^26.4.4",
"typescript": "^3.9.7" "typescript": "^3.9.7"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
"react-app", "react-app",
"react-app/jest" "react-app/jest"
] ]
}, },
"browserslist": { "browserslist": {
"production": [ "production": [
">0.2%", ">0.2%",
"not dead", "not dead",
"not op_mini all" "not op_mini all"
], ],
"development": [ "development": [
"last 1 chrome version", "last 1 chrome version",
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
}
} }
}

43
src/assets/left-arrow.svg Normal file
View File

@ -0,0 +1,43 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve">
<g>
<g>
<path d="M198.608,246.104L382.664,62.04c5.068-5.056,7.856-11.816,7.856-19.024c0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12
C361.476,2.792,354.712,0,347.504,0s-13.964,2.792-19.028,7.864L109.328,227.008c-5.084,5.08-7.868,11.868-7.848,19.084
c-0.02,7.248,2.76,14.028,7.848,19.112l218.944,218.932c5.064,5.072,11.82,7.864,19.032,7.864c7.208,0,13.964-2.792,19.032-7.864
l16.124-16.12c10.492-10.492,10.492-27.572,0-38.06L198.608,246.104z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 964 B

43
src/assets/right-arrow.svg Normal file
View File

@ -0,0 +1,43 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004;" xml:space="preserve">
<g>
<g>
<path d="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12
c-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028
c0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265
c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 971 B

209
src/components/Administrator.tsx Normal file
View File

@ -0,0 +1,209 @@
import { format } from 'date-fns';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components/macro';
import { axiosInstance } from '../utils/axiosInstance';
import { useSnackbar } from 'notistack';
import CloseIcon from '@material-ui/icons/Close';
import { SyncLoader } from 'react-spinners';
const StyledCloseIcon = styled(CloseIcon)`
color: #000000;
&:hover {
color: white;
cursor: pointer;
}
`;
const SaveButton = styled.button`
display: flex;
justify-content: center;
align-items: center;
user-select: none;
background-color: #c7a424;
border: none;
font-weight: bold;
cursor: pointer;
height: 40px;
&:hover {
color: #ffffff;
box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24);
}
width: 150px;
`;
const AdministratorWrapper = styled.div`
display: flex;
flex-direction: column;
margin: 0 auto;
height: 100vh;
`;
const Wrap = styled.div`
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const LogoWrapper = styled.div`
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const Text = styled.div`
font-family: 'Roboto', sans-serif;
font-size: 5rem;
user-select: none;
`;
const Logo = styled.img`
width: 400px;
height: 400px;
`;
const Form = styled.form`
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
input {
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
width: 210px;
}
`;
export const Administrator = () => {
const { enqueueSnackbar } = useSnackbar();
const { closeSnackbar } = useSnackbar();
const today = new Date();
const dd = String(today.getDate()).padStart(2, '0');
const mm = String(today.getMonth() + 1).padStart(2, '0');
const yyyy = today.getFullYear();
const date = yyyy + '-' + mm + '-' + dd;
const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [startFirstDate, setStartFirstDate] = useState<Date | null>(null);
const [endFirstDate, setEndFirstDate] = useState<Date | null>(null);
const [startSecondDate, setStartSecondDate] = useState<Date | null>(null);
const [endSecondDate, setEndSecondDate] = useState<Date | null>(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
if (startFirstDate !== null) {
console.log(format(startFirstDate, 'dd.MM.yyyy'));
}
}, [startFirstDate]);
const uploadFile = async (event: React.FormEvent<HTMLFormElement>) => {
const action = (key: any) => (
<>
<StyledCloseIcon
onClick={() => {
closeSnackbar(key);
}}
></StyledCloseIcon>
</>
);
event.preventDefault();
const formData = new FormData();
formData.append('file', selectedFile as Blob);
if (startFirstDate !== null) {
formData.append('firstTourBegin', format(startFirstDate, 'dd.MM.yyyy'));
}
if (endFirstDate !== null) {
formData.append('firstTourEnd', format(endFirstDate, 'dd.MM.yyyy'));
}
if (startSecondDate !== null) {
formData.append('secondTourBegin', format(startSecondDate, 'dd.MM.yyyy'));
}
if (endSecondDate !== null) {
formData.append('secondTourEnd', format(endSecondDate, 'dd.MM.yyyy'));
}
const config = {
headers: {
'content-type': 'multipart/form-data',
},
};
try {
setLoading(true);
const response = await axiosInstance.post(
`${process.env.REACT_APP_API_URL}/api/v1/configurator/config/`,
formData,
config,
);
enqueueSnackbar('Plan został zapisany', {
variant: 'success',
action,
});
console.log(response);
} catch (e) {
enqueueSnackbar('Zapisywanie planu nie powiodło się', {
variant: 'error',
action,
});
console.log(e);
}
setLoading(false);
};
return (
<AdministratorWrapper>
<Wrap>
<LogoWrapper>
<Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
<Text> plan na plan </Text>
</LogoWrapper>
<Form onSubmit={uploadFile}>
<div>
<div>Start pierwszej tury:</div>{' '}
<div>
<input type="date" min={date} onChange={(e) => setStartFirstDate(e.target.valueAsDate)} />
</div>
<div>Koniec pierwszej tury:</div>{' '}
<div>
<input type="date" min={date} onChange={(e) => setEndFirstDate(e.target.valueAsDate)} />
</div>
</div>
<div>
<div>Start drugiej tury:</div>{' '}
<div>
<input type="date" min={date} onChange={(e) => setStartSecondDate(e.target.valueAsDate)} />
</div>
</div>
<div>
<div>Koniec drugiej tury:</div>{' '}
<div>
<input type="date" min={date} onChange={(e) => setEndSecondDate(e.target.valueAsDate)} />
</div>
</div>
<div>
<input
type="file"
onChange={(e) => {
if (e.target.files && e.target.files[0]) {
const file = e.target.files[0];
setSelectedFile(file);
}
}}
/>
</div>
<div>
<SaveButton type="submit">{loading === false ? 'Zapisz' : <SyncLoader />} </SaveButton>
</div>
</Form>
</Wrap>
</AdministratorWrapper>
);
};

42
src/components/App.tsx
View File

@ -1,14 +1,15 @@
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 { Deanery } from './DeaneryPanel';
import { Scheduler } from './Scheduler'; import { Scheduler } from './Scheduler';
import { Rightbar } from './Rightbar'; import { Rightbar } from './Rightbar';
import { Administrator } from './Administrator';
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';
import { coursesContext } from '../contexts/CoursesProvider';
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex; display: flex;
height: calc(100vh - 80px); height: calc(100vh - 80px);
@ -19,33 +20,38 @@ 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 { selectSchedulerEvents } = useContext(coursesContext)!;
const schedulerEvents = selectSchedulerEvents();
const handleTransfer = () => { const handleTransfer = () => {
setOpenTransfer(!isOpenTransfer); setOpenTransfer(!isOpenTransfer);
}; };
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 />}>
<Topbar handleTransfer={handleTransfer} /> {userPrivilige !== 'ADMIN' && (
<Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
<Wrapper>
{userPrivilige === 'STUDENT' && (
<> <>
<Scheduler /> <Topbar handleTransfer={handleTransfer} />
<Rightbar /> <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
<Wrapper>
{userPrivilige === 'STUDENT' && (
<>
<Scheduler schedulerEvents={schedulerEvents} />
<Rightbar />
</>
)}
{userPrivilige === 'DEANERY' && <Deanery schedulerEvents={schedulerEvents} />}
</Wrapper>
</> </>
)}{' '} )}
{userPrivilige === 'DEANERY' && <Admin />} {userPrivilige === 'ADMIN' && (
</Wrapper> <Administrator></Administrator>
)}
</LoadingOverlay> </LoadingOverlay>
</> </>
); );

16
src/components/CourseCard.tsx
View File

@ -161,9 +161,8 @@ 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:"classes" } : { ...prev, lecture: group,prev:"lecture" }));
changeGroupInBasket(group, courseId); changeGroupInBasket(group, courseId);
}; };
@ -188,22 +187,17 @@ export const CourseCard = ({ course }: CourseCardProps) => {
onClick={() => onGroupClick(group, course.id)} onClick={() => onGroupClick(group, course.id)}
onMouseEnter={() => { onMouseEnter={() => {
if (group.type === GroupType.CLASS) { if (group.type === GroupType.CLASS) {
changeGroupInBasket(group, course.id); changeGroupInBasket({classes: group,lecture:previous.lecture}, course.id);
} }
if (group.type === GroupType.LECTURE) { if (group.type === GroupType.LECTURE) {
changeGroupInBasket(group, course.id); changeGroupInBasket({lecture: group,classes:previous.classes}, course.id);
} }
}} }}
onMouseLeave={() => { onMouseLeave={() => {
if (hoveredGroup) { if (hoveredGroup) {
if (hoveredGroup.type === GroupType.CLASS && previous.classes !== undefined) { changeGroupInBasket(previous, course.id);
changeGroupInBasket(previous.classes, course.id);
}
if (hoveredGroup.type === GroupType.LECTURE && previous.lecture !== undefined) {
changeGroupInBasket(previous.lecture, course.id);
}
changeHoveredGroup(null);
} }
changeHoveredGroup(null);
}} }}
> >
<StyledGroupType groupType={group.type}>{group.type === 'CLASS' ? 'ĆW' : 'WYK'}</StyledGroupType> <StyledGroupType groupType={group.type}>{group.type === 'CLASS' ? 'ĆW' : 'WYK'}</StyledGroupType>

29
src/components/Admin.tsx → src/components/DeaneryPanel.tsx
View File

@ -1,10 +1,13 @@
import React, { useState, MouseEvent } from 'react'; import React, { useState, MouseEvent,useContext } from 'react';
import styled from 'styled-components/macro'; import styled from 'styled-components/macro';
import Plan from '../assets/plan.svg'; import Plan from '../assets/plan.svg';
import History from '../assets/history.svg'; 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';
import { coursesContext } from '../contexts/CoursesProvider';
import { SchedulerEvent } from '../types';
const LeftSide = styled.div` const LeftSide = styled.div`
height: 100%; height: 100%;
@ -13,7 +16,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 +48,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;
} }
`; `;
@ -94,11 +97,19 @@ const Icon = styled.img`
margin: 5px; margin: 5px;
`; `;
export const Admin = () => { interface Deanery {
schedulerEvents: Array<SchedulerEvent>;
}
export const Deanery = ({ schedulerEvents }: Deanery) => {
const [currentTab, setCurrentTab] = useState<null | number>(1); const [currentTab, setCurrentTab] = useState<null | number>(1);
const { getNewestStudentTimetable,userID } = useContext(coursesContext)!;
const { selectHistorySchedulerEvents } = useContext(coursesContext)!;
const schedulerHistoryEvents = selectHistorySchedulerEvents();
const handleClick = (e: MouseEvent<HTMLDivElement>) => { const handleClick = (e: MouseEvent<HTMLDivElement>) => {
setCurrentTab(Number(e.currentTarget.id)); setCurrentTab(Number(e.currentTarget.id));
getNewestStudentTimetable(userID);
}; };
return ( return (
@ -120,11 +131,11 @@ export const Admin = () => {
<Wrapper> <Wrapper>
{currentTab === 1 ? ( {currentTab === 1 ? (
<> <>
<Scheduler /> <Scheduler schedulerEvents={schedulerEvents}/>
<Rightbar /> <Rightbar />
</> </>
) : currentTab === 2 ? ( ) : currentTab === 2 ? (
<HistoryDiv /> <SchedulerHistory schedulerHistoryEvents={schedulerHistoryEvents}/>
) : currentTab === 3 ? ( ) : currentTab === 3 ? (
<StatsDiv /> <StatsDiv />
) : ( ) : (

4
src/components/Dropdown.tsx
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>>([]);
@ -67,10 +67,10 @@ export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: D
const onUserClick = (event: MouseEvent) => { const onUserClick = (event: MouseEvent) => {
const target = event.currentTarget; const target = event.currentTarget;
console.log('target: ', target);
//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();
}; };

11
src/components/Scheduler.tsx
View File

@ -1,8 +1,9 @@
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';
import styled from 'styled-components/macro'; import styled from 'styled-components/macro';
import { SchedulerEvent } from '../types';
const SchedulerWrapper = styled.div` const SchedulerWrapper = styled.div`
border-collapse: collapse; border-collapse: collapse;
@ -61,7 +62,11 @@ const TableCell = styled.div<TableCellProps>`
font-weight: bold; font-weight: bold;
`; `;
export const Scheduler = () => { interface SchedulerProps {
schedulerEvents: Array<SchedulerEvent>;
}
export const Scheduler = ({ schedulerEvents }: SchedulerProps) => {
const cellRef = useRef<HTMLDivElement>(null); const cellRef = useRef<HTMLDivElement>(null);
const [cellWidth, setCellWidth] = useState(0); const [cellWidth, setCellWidth] = useState(0);
const [cellHeight, setCellHeight] = useState(0); const [cellHeight, setCellHeight] = useState(0);
@ -123,7 +128,7 @@ export const Scheduler = () => {
)} )}
</TableRow> </TableRow>
))} ))}
<SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} /> <SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} schedulerEvents={schedulerEvents} />
</TableBody> </TableBody>
</SchedulerWrapper> </SchedulerWrapper>
); );

8
src/components/SchedulerEvents.tsx
View File

@ -3,15 +3,15 @@ import { SchedulerRow } from './SchedulerRow';
import { coursesContext } from '../contexts/CoursesProvider'; import { coursesContext } from '../contexts/CoursesProvider';
import { selectGroupsToShow } from '../utils/index'; import { selectGroupsToShow } from '../utils/index';
import { ROWS_COUNT } from '../constants'; import { ROWS_COUNT } from '../constants';
import { SchedulerEvent } from '../types';
interface SchedulerEventsProps { interface SchedulerEventsProps {
cellWidth: number; cellWidth: number;
cellHeight: number; cellHeight: number;
schedulerEvents: Array<SchedulerEvent>;
} }
export const SchedulerEvents = ({ cellWidth, cellHeight }: SchedulerEventsProps) => { export const SchedulerEvents = ({ cellWidth, cellHeight,schedulerEvents }: SchedulerEventsProps) => {
const { selectSchedulerEvents } = useContext(coursesContext)!;
const schedulerEvents = selectSchedulerEvents();
return ( return (
<div> <div>

54
src/components/SchedulerHistory.tsx Normal file
View File

@ -0,0 +1,54 @@
import React, { useContext, useEffect, useState } from 'react';
import styled from 'styled-components';
import { coursesContext } from '../contexts/CoursesProvider';
import { SchedulerEvent } from '../types';
import { Scheduler } from './Scheduler';
import { SchedulerHistoryNavigation } from './SchedulerHistoryNavigation';
const Wrapper = styled.div`
display: flex;
flex-direction: column;
width: 100%;
`;
interface SchedulerHistoryProps {
schedulerHistoryEvents: Array<SchedulerEvent>;
}
export const SchedulerHistory = ({schedulerHistoryEvents}:SchedulerHistoryProps) => {
const { timetableHistory, setHistoryBasketFromHistoryGroups } = useContext(coursesContext)!;
const [currentTimetable, setCurrentTimetable] = useState(timetableHistory.length===0 ? 0 : timetableHistory.length - 1);
let commisionDate = timetableHistory[currentTimetable]?.commisionDate;
const SubstractCurrentTimetable = (value: number) => {
if (currentTimetable > 0) {
setCurrentTimetable((currentTimetable) => currentTimetable + value);
}
};
const AddCurrentTimetable = (value: number) => {
if (currentTimetable < timetableHistory.length - 1) {
setCurrentTimetable((currentTimetable) => currentTimetable + value);
}
};
useEffect(() => {
const timetable = timetableHistory[currentTimetable];
if (timetable) {
const { groups } = timetable;
setHistoryBasketFromHistoryGroups(groups);
}
else{
setHistoryBasketFromHistoryGroups([]);
}
}, [currentTimetable,timetableHistory]);
return (
<Wrapper>
{timetableHistory.length > 0 && (
<SchedulerHistoryNavigation commisionDate={commisionDate} SubstractCurrentTimetable={SubstractCurrentTimetable} AddCurrentTimetable={AddCurrentTimetable} />
)}
<Scheduler schedulerEvents={schedulerHistoryEvents}/>
</Wrapper>
);
};

91
src/components/SchedulerHistoryNavigation.tsx Normal file
View File

@ -0,0 +1,91 @@
import React, { useContext } from 'react';
import styled from 'styled-components';
import { coursesContext } from '../contexts/CoursesProvider';
import RightArrow from '../assets/right-arrow.svg';
import LeftArrow from '../assets/left-arrow.svg';
type ButtonProps = {
direction: 'left' | 'right';
};
const Wrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
margin-top:-15px;
`;
const StyledButton = styled.div<ButtonProps>`
cursor:pointer;
user-select: none;
margin:10px;
border-radius:5px;
border-radius: 15px;
background-color: #9ed3ff;
border: 2px solid white;
min-width: 45px;
color: black;
display:flex;
align-items:center;
justify-content:center;
padding: 12px;
:hover{
background-color:#85c8ff;
}
transition: color 0.3s, background-color 0.3s;
`;
const StyledArrow = styled.img`
width:20px;
`;
const StyledDate = styled.div`
user-select: none;
margin:10px;
border-radius:5px;
border-radius: 15px;
background-color: #FFDC61;
border: 2px solid white;
min-width: 45px;
text-align:center;
color: black;
padding: 10px;
`;
type SchedulerHistoryNavigationProps = {
commisionDate?: Date;
SubstractCurrentTimetable: (value: number) => void;
AddCurrentTimetable: (value: number) => void;
};
export const SchedulerHistoryNavigation = ({
commisionDate,
SubstractCurrentTimetable,
AddCurrentTimetable,
}: SchedulerHistoryNavigationProps) => {
return (
<Wrapper>
<StyledButton
direction="left"
onClick={() => {
console.log('left clicked');
SubstractCurrentTimetable(-1);
}}
>
<StyledArrow src={LeftArrow}></StyledArrow>
</StyledButton>
<StyledDate>{commisionDate}</StyledDate>
<StyledButton
direction="right"
onClick={() => {
console.log('right clicked');
AddCurrentTimetable(1);
}}
>
<StyledArrow src={RightArrow}></StyledArrow>
</StyledButton>
</Wrapper>
);
};

4
src/components/SchedulerRow.tsx
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;

1
src/contexts/CASProvider.tsx
View File

@ -36,7 +36,6 @@ export const CASProvider = ({ children }: CASProviderProps) => {
const { data: user } = await axiosInstance.get<LoggedUser & { token: string; refreshToken: string }>( const { data: user } = await axiosInstance.get<LoggedUser & { token: string; refreshToken: string }>(
`${process.env.REACT_APP_API_URL}/token?ticket=${ticket}`, `${process.env.REACT_APP_API_URL}/token?ticket=${ticket}`,
); );
console.log('token response: ', user);
setUser({ authorityRole: user.authorityRole, email: user.email, id: user.id }); setUser({ authorityRole: user.authorityRole, email: user.email, id: user.id });
localStorage.setItem('userToken', user.token); localStorage.setItem('userToken', user.token);
localStorage.setItem('userPrivilige', user.authorityRole); localStorage.setItem('userPrivilige', user.authorityRole);

98
src/contexts/CoursesProvider.tsx
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,22 +16,27 @@ 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;
historyBasket: Array<Basket>;
addCourseToBasket: (courses: Course) => void; addCourseToBasket: (courses: Course) => void;
changeHoveredGroup: (group: Group | null) => void; changeHoveredGroup: (group: Group | null) => void;
changeGroupInBasket: (group: Group, courseId: number) => void; changeGroupInBasket: (group: any, courseId: number) => void;
restoreGroupInBasket: (restoreGroup: Group, courseId: number) => void; restoreGroupInBasket: (restoreGroup: Group, courseId: number) => void;
deleteFromBasket: (id: number) => void; deleteFromBasket: (id: number) => void;
saveBasket: (userID: string) => Promise<void>; saveBasket: (userID: string) => Promise<void>;
changeStudent: (studentId: string) => void; changeStudent: (studentId: string) => void;
selectSchedulerEvents: () => Array<SchedulerEvent>; selectSchedulerEvents: () => Array<SchedulerEvent>;
selectHistorySchedulerEvents: () => Array<SchedulerEvent>;
selectBasketNames: () => Array<string>; selectBasketNames: () => Array<string>;
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;
setHistoryBasketFromHistoryGroups: (groupsIds: Array<number>) => void;
} }
export const coursesContext = createContext<CourseContext | undefined>(undefined); export const coursesContext = createContext<CourseContext | undefined>(undefined);
@ -46,6 +51,8 @@ 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 [historyBasket, setHistoryBasket] = 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,18 +77,29 @@ 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;
}, [] as Array<SchedulerEvent>); }, [] as Array<SchedulerEvent>);
}; };
const selectHistorySchedulerEvents = () => {
return historyBasket.reduce((res, el) => {
const { name } = el;
if (el.classes) {
res.push({ ...el.classes, name });
}
if (el.lecture) {
res.push({ ...el.lecture, name });
}
return res;
}, [] as Array<SchedulerEvent>);
};
const selectBasketCourseGroups = (courseId: number) => { const selectBasketCourseGroups = (courseId: number) => {
const course = basket.find(({ id }) => id === courseId); const course = basket.find(({ id }) => id === courseId);
if (course !== undefined) { if (course !== undefined) {
@ -111,6 +129,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
setUserID(studentId); setUserID(studentId);
setTimeout(() => { setTimeout(() => {
getNewestStudentTimetable(studentId); getNewestStudentTimetable(studentId);
getStudentTimetablesHistory(studentId);
}, 100); }, 100);
}; };
@ -131,32 +150,30 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/${userID}`, `${process.env.REACT_APP_API_URL}/api/v1/commisions/user/${userID}`,
JSON.stringify(basketIds), JSON.stringify(basketIds),
); );
enqueueSnackbar('Plan został zapisany', { enqueueSnackbar('Ustawienia zostały zapisane', {
variant: 'success', variant: 'success',
action, action,
}); });
} catch (e) { } catch (e) {
console.log('error: ', e); console.log('error: ', e);
enqueueSnackbar('Zapisywanie planu nie powiodło się', { enqueueSnackbar('Ustawienia nie zostały zapisane', {
variant: 'error', variant: 'error',
action, action,
}); });
} }
getStudentTimetablesHistory(userID);
}; };
const changeGroupInBasket = (choosenGroup: Group, courseId: number) => { const changeGroupInBasket = (choosenGroup: any, courseId: number) => {
const basketCourse = basket.filter((course) => course.id === courseId)[0]; const basketCourse = basket.filter((course) => course.id === courseId)[0];
const { type } = choosenGroup; if (choosenGroup.lecture && choosenGroup.classes)
if (type === GroupType.CLASS) { {
const prev = choosenGroup.prev==="lecture"?choosenGroup.lecture : choosenGroup.classes
setBasket( setBasket(
basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, classes: choosenGroup } : basket)), basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, lecture: choosenGroup.lecture, classes:choosenGroup.classes } : basket)),
);
} else if (type === GroupType.LECTURE) {
setBasket(
basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, lecture: choosenGroup } : basket)),
); );
changeHoveredGroup(prev);
} }
changeHoveredGroup(choosenGroup);
}; };
const restoreGroupInBasket = (restoreGroup: Group, courseId: number) => { const restoreGroupInBasket = (restoreGroup: Group, courseId: number) => {
@ -179,8 +196,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 +215,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 setHistoryBasketFromHistoryGroups = (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);
setHistoryBasket(basket);
};
useEffect(() => { useEffect(() => {
setIsDataLoading(true); setIsDataLoading(true);
setTimeout(() => { setTimeout(() => {
@ -231,7 +286,9 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
courses, courses,
basket, basket,
hoveredGroup, hoveredGroup,
timetableHistory,
isDataLoading, isDataLoading,
historyBasket,
addCourseToBasket, addCourseToBasket,
changeHoveredGroup, changeHoveredGroup,
changeGroupInBasket, changeGroupInBasket,
@ -239,11 +296,14 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
restoreGroupInBasket, restoreGroupInBasket,
saveBasket, saveBasket,
selectSchedulerEvents, selectSchedulerEvents,
selectHistorySchedulerEvents,
selectBasketNames, selectBasketNames,
selectBasketCourses, selectBasketCourses,
selectBasketCourseGroups, selectBasketCourseGroups,
getNewestStudentTimetable, getNewestStudentTimetable,
changeStudent, changeStudent,
getStudentTimetablesHistory,
setHistoryBasketFromHistoryGroups,
changeDataLoading, changeDataLoading,
}} }}
> >

5
src/contexts/StudentsProvider.tsx
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,15 +18,12 @@ 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
const getStudents = async () => { const getStudents = async () => {
try { try {
const { data } = await axiosInstance.get<Array<Student>>( const { data } = await axiosInstance.get<Array<Student>>(
`${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 +36,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);
}, []); }, []);

17
src/types/index.ts
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;
};
}

1
src/utils/axiosInstance.ts
View File

@ -37,7 +37,6 @@ axiosInstance.interceptors.response.use(
}, },
async (error) => { async (error) => {
const originalRequest = error.config; const originalRequest = error.config;
console.log("original request is: ", originalRequest)
if (error.response.status === 403 && !originalRequest._retry) { if (error.response.status === 403 && !originalRequest._retry) {
originalRequest._retry = true; originalRequest._retry = true;
const access_token = await getNewTokens(); const access_token = await getNewTokens();