plan history is working correctly (i think)
This commit is contained in:
parent
0b10ed05d6
commit
d4f7ad341a
43
src/assets/left-arrow.svg
Normal file
43
src/assets/left-arrow.svg
Normal 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>
|
After Width: | Height: | Size: 964 B |
43
src/assets/right-arrow.svg
Normal file
43
src/assets/right-arrow.svg
Normal 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>
|
After Width: | Height: | Size: 971 B |
@ -1,4 +1,4 @@
|
|||||||
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';
|
||||||
@ -6,6 +6,7 @@ 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 { SchedulerHistory } from './SchedulerHistory';
|
||||||
|
import { coursesContext } from '../contexts/CoursesProvider';
|
||||||
|
|
||||||
const LeftSide = styled.div`
|
const LeftSide = styled.div`
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -97,9 +98,11 @@ const Icon = styled.img`
|
|||||||
|
|
||||||
export const Admin = () => {
|
export const Admin = () => {
|
||||||
const [currentTab, setCurrentTab] = useState<null | number>(1);
|
const [currentTab, setCurrentTab] = useState<null | number>(1);
|
||||||
|
const { getNewestStudentTimetable,userID } = useContext(coursesContext)!;
|
||||||
|
|
||||||
const handleClick = (e: MouseEvent<HTMLDivElement>) => {
|
const handleClick = (e: MouseEvent<HTMLDivElement>) => {
|
||||||
setCurrentTab(Number(e.currentTarget.id));
|
setCurrentTab(Number(e.currentTarget.id));
|
||||||
|
getNewestStudentTimetable(userID);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -12,29 +12,35 @@ const Wrapper = styled.div`
|
|||||||
|
|
||||||
export const SchedulerHistory = () => {
|
export const SchedulerHistory = () => {
|
||||||
const { timetableHistory, setBasketFromHistoryGroups } = useContext(coursesContext)!;
|
const { timetableHistory, setBasketFromHistoryGroups } = useContext(coursesContext)!;
|
||||||
const [currentTimetable, setCurrentTimetable] = useState(timetableHistory === [] ? 0 : timetableHistory.length - 1);
|
const [currentTimetable, setCurrentTimetable] = useState(timetableHistory.length===0 ? 0 : timetableHistory.length - 1);
|
||||||
let commisionDate = undefined;
|
let commisionDate = timetableHistory[currentTimetable]?.commisionDate;
|
||||||
if (currentTimetable) {
|
|
||||||
commisionDate = timetableHistory[currentTimetable]?.commisionDate;
|
|
||||||
}
|
|
||||||
|
|
||||||
const changeCurrentTimetable = (value: number) => {
|
const SubstractCurrentTimetable = (value: number) => {
|
||||||
setCurrentTimetable((currentTimetable) => currentTimetable + value);
|
if (currentTimetable > 0) {
|
||||||
|
setCurrentTimetable((currentTimetable) => currentTimetable + value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const AddCurrentTimetable = (value: number) => {
|
||||||
|
if (currentTimetable < timetableHistory.length - 1) {
|
||||||
|
setCurrentTimetable((currentTimetable) => currentTimetable + value);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('current timetable is: ', currentTimetable);
|
console.log('current timetable is: ', currentTimetable);
|
||||||
|
console.log('23113knkalsdnkasdlk', timetableHistory);
|
||||||
const timetable = timetableHistory[currentTimetable];
|
const timetable = timetableHistory[currentTimetable];
|
||||||
if (timetable) {
|
if (timetable) {
|
||||||
const { groups } = timetable;
|
const { groups } = timetable;
|
||||||
setBasketFromHistoryGroups(groups);
|
setBasketFromHistoryGroups(groups);
|
||||||
}
|
}
|
||||||
}, [currentTimetable]);
|
}, [currentTimetable,timetableHistory]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
{timetableHistory.length > 1 && (
|
{timetableHistory.length > 0 && (
|
||||||
<SchedulerHistoryNavigation commisionDate={commisionDate} changeCurrentTimetable={changeCurrentTimetable} />
|
<SchedulerHistoryNavigation commisionDate={commisionDate} SubstractCurrentTimetable={SubstractCurrentTimetable} AddCurrentTimetable={AddCurrentTimetable} />
|
||||||
)}
|
)}
|
||||||
<Scheduler />
|
<Scheduler />
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
import React, { useContext } from 'react';
|
import React, { useContext } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { coursesContext } from '../contexts/CoursesProvider';
|
import { coursesContext } from '../contexts/CoursesProvider';
|
||||||
|
import RightArrow from '../assets/right-arrow.svg';
|
||||||
|
import LeftArrow from '../assets/left-arrow.svg';
|
||||||
|
|
||||||
type ButtonProps = {
|
type ButtonProps = {
|
||||||
direction: 'left' | 'right';
|
direction: 'left' | 'right';
|
||||||
@ -8,44 +10,83 @@ type ButtonProps = {
|
|||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top:-15px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledButton = styled.button<ButtonProps>`
|
const StyledButton = styled.div<ButtonProps>`
|
||||||
width: 100px;
|
cursor:pointer;
|
||||||
height: 100px;
|
user-select: none;
|
||||||
background-color: ${({ direction }) => (direction === 'left' ? 'red' : 'blue')};
|
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 = {
|
type SchedulerHistoryNavigationProps = {
|
||||||
commisionDate?: Date;
|
commisionDate?: Date;
|
||||||
changeCurrentTimetable: (value: number) => void;
|
SubstractCurrentTimetable: (value: number) => void;
|
||||||
|
AddCurrentTimetable: (value: number) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const SchedulerHistoryNavigation = ({
|
export const SchedulerHistoryNavigation = ({
|
||||||
commisionDate,
|
commisionDate,
|
||||||
changeCurrentTimetable,
|
SubstractCurrentTimetable,
|
||||||
|
AddCurrentTimetable,
|
||||||
}: SchedulerHistoryNavigationProps) => {
|
}: SchedulerHistoryNavigationProps) => {
|
||||||
|
|
||||||
|
console.log("231213231231",commisionDate)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<StyledButton
|
<StyledButton
|
||||||
direction="left"
|
direction="left"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
console.log('left clicked');
|
console.log('left clicked');
|
||||||
changeCurrentTimetable(-1);
|
SubstractCurrentTimetable(-1);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
LEFT
|
<StyledArrow src={LeftArrow}></StyledArrow>
|
||||||
</StyledButton>
|
</StyledButton>
|
||||||
{commisionDate}
|
<StyledDate>{commisionDate}</StyledDate>
|
||||||
<StyledButton
|
<StyledButton
|
||||||
direction="right"
|
direction="right"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
console.log('right clicked');
|
console.log('right clicked');
|
||||||
changeCurrentTimetable(1);
|
AddCurrentTimetable(1);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
RIGHT
|
<StyledArrow src={RightArrow}></StyledArrow>
|
||||||
</StyledButton>
|
</StyledButton>
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
);
|
);
|
||||||
|
@ -144,6 +144,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
|||||||
action,
|
action,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
getStudentTimetablesHistory(userID);
|
||||||
};
|
};
|
||||||
|
|
||||||
const changeGroupInBasket = (choosenGroup: Group, courseId: number) => {
|
const changeGroupInBasket = (choosenGroup: Group, courseId: number) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user