diff --git a/src/assets/left-arrow.svg b/src/assets/left-arrow.svg new file mode 100644 index 0000000..fc18597 --- /dev/null +++ b/src/assets/left-arrow.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/right-arrow.svg b/src/assets/right-arrow.svg new file mode 100644 index 0000000..0aea8cf --- /dev/null +++ b/src/assets/right-arrow.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Admin.tsx b/src/components/Admin.tsx index 7832a40..90fd1e7 100644 --- a/src/components/Admin.tsx +++ b/src/components/Admin.tsx @@ -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(1); + const { getNewestStudentTimetable,userID } = useContext(coursesContext)!; const handleClick = (e: MouseEvent) => { setCurrentTab(Number(e.currentTarget.id)); + getNewestStudentTimetable(userID); }; return ( diff --git a/src/components/SchedulerHistory.tsx b/src/components/SchedulerHistory.tsx index e882f84..2f9f8ae 100644 --- a/src/components/SchedulerHistory.tsx +++ b/src/components/SchedulerHistory.tsx @@ -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 ( - {timetableHistory.length > 1 && ( - + {timetableHistory.length > 0 && ( + )} diff --git a/src/components/SchedulerHistoryNavigation.tsx b/src/components/SchedulerHistoryNavigation.tsx index 8e0563b..49d2a29 100644 --- a/src/components/SchedulerHistoryNavigation.tsx +++ b/src/components/SchedulerHistoryNavigation.tsx @@ -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` - width: 100px; - height: 100px; - background-color: ${({ direction }) => (direction === 'left' ? 'red' : 'blue')}; +const StyledButton = styled.div` +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 ( { console.log('left clicked'); - changeCurrentTimetable(-1); + SubstractCurrentTimetable(-1); }} > - LEFT + - {commisionDate} + {commisionDate} { console.log('right clicked'); - changeCurrentTimetable(1); + AddCurrentTimetable(1); }} > - RIGHT + ); diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index c508d7e..1de7fd8 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -144,6 +144,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { action, }); } + getStudentTimetablesHistory(userID); }; const changeGroupInBasket = (choosenGroup: Group, courseId: number) => {