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'; import StatisticsIcon from '../assets/statistics.svg'; import { Statistics } from './Statistics'; import { Scheduler } from './Scheduler'; import { Rightbar } from './Rightbar'; import { SchedulerHistory } from './SchedulerHistory'; import { coursesContext } from '../contexts/CoursesProvider'; import { SchedulerEvent } from '../types'; const LeftSide = styled.div` height: 100%; display: flex; flex: 1; flex-direction: column; background-color: white; text-align: center; border-radius: 5px; `; const Wrap = styled.div` display: flex; height: calc(100vh - 120px); background-color: #eceef4; width: 100%; `; const Wrapper = styled.div` flex: 12; display: flex; height: calc(100vh - 120px); background-color: #eceef4; `; interface LeftPanelElement { isCurrentTab: boolean; } const LeftPanelElement = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1; //box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75); padding: 20px; cursor: pointer; box-shadow: ${({ isCurrentTab }) => (isCurrentTab === true ? `inset 0px 0px 11px 0px rgba(0,0,0,0.30)` : '')}; border-bottom: 1px solid #979797; :first-child { border-radius: 0px 5px 0px 0px; } :last-child { border-radius: 0px 0px 5px 0px; } `; const HistoryDiv = styled.div` flex: 1; display: flex; margin-left: 20px; border-radius: 5px; height: calc(100vh - 120px); `; const StatsDiv = styled.div` flex: 1; display: flex; margin-left: 20px; border-radius: 5px; height: calc(100vh - 120px); `; const LogoWrapper = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 2; margin-left: 10px; `; const Text = styled.div` font-family: 'Roboto', sans-serif; font-size: 5rem; user-select: none; `; const Logo = styled.img` width: 500px; height: 500px; `; const Icon = styled.img` width: 40px; margin: 5px; `; interface Deanery { schedulerEvents: Array; } export const Deanery = ({ schedulerEvents }: Deanery) => { const [currentTab, setCurrentTab] = useState(1); const { getNewestStudentTimetable,userID } = useContext(coursesContext)!; const { selectHistorySchedulerEvents } = useContext(coursesContext)!; const schedulerHistoryEvents = selectHistorySchedulerEvents(); const handleClick = (e: MouseEvent) => { setCurrentTab(Number(e.currentTarget.id)); getNewestStudentTimetable(userID); }; return ( Pokaż plan Historia Zmian Statystyki {currentTab === 1 ? ( <> ) : currentTab === 2 ? ( ) : currentTab === 3 ? ( ) : ( plan na plan )} ); };