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

plan history is working correctly (i think)

This commit is contained in:
wrzesinski-hubert 2021-01-07 19:57:06 +01:00
parent 0b10ed05d6
commit d4f7ad341a
6 changed files with 160 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

5
src/components/Admin.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, MouseEvent } from 'react';
import React, { useState, MouseEvent,useContext } from 'react';
import styled from 'styled-components/macro';
import Plan from '../assets/plan.svg';
import History from '../assets/history.svg';
@ -6,6 +6,7 @@ import Statistics from '../assets/statistics.svg';
import { Scheduler } from './Scheduler';
import { Rightbar } from './Rightbar';
import { SchedulerHistory } from './SchedulerHistory';
import { coursesContext } from '../contexts/CoursesProvider';
const LeftSide = styled.div`
height: 100%;
@ -97,9 +98,11 @@ const Icon = styled.img`
export const Admin = () => {
const [currentTab, setCurrentTab] = useState<null | number>(1);
const { getNewestStudentTimetable,userID } = useContext(coursesContext)!;
const handleClick = (e: MouseEvent<HTMLDivElement>) => {
setCurrentTab(Number(e.currentTarget.id));
getNewestStudentTimetable(userID);
};
return (

26
src/components/SchedulerHistory.tsx
View File

@ -12,29 +12,35 @@ const Wrapper = styled.div`
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 [currentTimetable, setCurrentTimetable] = useState(timetableHistory.length===0 ? 0 : timetableHistory.length - 1);
let commisionDate = timetableHistory[currentTimetable]?.commisionDate;
const changeCurrentTimetable = (value: number) => {
setCurrentTimetable((currentTimetable) => currentTimetable + value);
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(() => {
console.log('current timetable is: ', currentTimetable);
console.log('23113knkalsdnkasdlk', timetableHistory);
const timetable = timetableHistory[currentTimetable];
if (timetable) {
const { groups } = timetable;
setBasketFromHistoryGroups(groups);
}
}, [currentTimetable]);
}, [currentTimetable,timetableHistory]);
return (
<Wrapper>
{timetableHistory.length > 1 && (
<SchedulerHistoryNavigation commisionDate={commisionDate} changeCurrentTimetable={changeCurrentTimetable} />
{timetableHistory.length > 0 && (
<SchedulerHistoryNavigation commisionDate={commisionDate} SubstractCurrentTimetable={SubstractCurrentTimetable} AddCurrentTimetable={AddCurrentTimetable} />
)}
<Scheduler />
</Wrapper>

65
src/components/SchedulerHistoryNavigation.tsx
View File

@ -1,6 +1,8 @@
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';
@ -8,44 +10,83 @@ type ButtonProps = {
const Wrapper = styled.div`
display: flex;
justify-content: space-around;
justify-content: center;
align-items: center;
margin-top:-15px;
`;
const StyledButton = styled.button<ButtonProps>`
width: 100px;
height: 100px;
background-color: ${({ direction }) => (direction === 'left' ? 'red' : 'blue')};
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;
changeCurrentTimetable: (value: number) => void;
SubstractCurrentTimetable: (value: number) => void;
AddCurrentTimetable: (value: number) => void;
};
export const SchedulerHistoryNavigation = ({
commisionDate,
changeCurrentTimetable,
SubstractCurrentTimetable,
AddCurrentTimetable,
}: SchedulerHistoryNavigationProps) => {
console.log("231213231231",commisionDate)
return (
<Wrapper>
<StyledButton
direction="left"
onClick={() => {
console.log('left clicked');
changeCurrentTimetable(-1);
SubstractCurrentTimetable(-1);
}}
>
LEFT
<StyledArrow src={LeftArrow}></StyledArrow>
</StyledButton>
{commisionDate}
<StyledDate>{commisionDate}</StyledDate>
<StyledButton
direction="right"
onClick={() => {
console.log('right clicked');
changeCurrentTimetable(1);
AddCurrentTimetable(1);
}}
>
RIGHT
<StyledArrow src={RightArrow}></StyledArrow>
</StyledButton>
</Wrapper>
);

1
src/contexts/CoursesProvider.tsx
View File

@ -144,6 +144,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
action,
});
}
getStudentTimetablesHistory(userID);
};
const changeGroupInBasket = (choosenGroup: Group, courseId: number) => {