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 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 (
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -144,6 +144,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
||||
action,
|
||||
});
|
||||
}
|
||||
getStudentTimetablesHistory(userID);
|
||||
};
|
||||
|
||||
const changeGroupInBasket = (choosenGroup: Group, courseId: number) => {
|
||||
|
Loading…
Reference in New Issue
Block a user