frontend/src/components/DeaneryPanel.tsx

152 lines
3.8 KiB
TypeScript
Raw Normal View History

import React, { useState, MouseEvent,useContext } from 'react';
2020-11-20 16:55:37 +01:00
import styled from 'styled-components/macro';
import Plan from '../assets/plan.svg';
import History from '../assets/history.svg';
2021-01-17 19:03:54 +01:00
import StatisticsIcon from '../assets/statistics.svg';
import { Statistics } from './Statistics';
2020-11-20 20:39:36 +01:00
import { Scheduler } from './Scheduler';
import { Rightbar } from './Rightbar';
2021-01-05 23:46:51 +01:00
import { SchedulerHistory } from './SchedulerHistory';
import { coursesContext } from '../contexts/CoursesProvider';
2021-01-12 22:59:12 +01:00
import { SchedulerEvent } from '../types';
2020-11-20 16:55:37 +01:00
const LeftSide = styled.div`
height: 100%;
display: flex;
2020-11-24 19:01:20 +01:00
flex: 1;
2020-11-20 16:55:37 +01:00
flex-direction: column;
background-color: white;
2020-12-12 20:32:09 +01:00
text-align: center;
2021-01-05 23:46:51 +01:00
border-radius: 5px;
2020-11-20 16:55:37 +01:00
`;
2020-11-20 20:39:36 +01:00
const Wrap = styled.div`
display: flex;
2020-11-22 17:22:13 +01:00
height: calc(100vh - 120px);
2020-11-24 19:01:20 +01:00
background-color: #eceef4;
width: 100%;
2020-11-20 20:39:36 +01:00
`;
const Wrapper = styled.div`
2020-11-24 19:01:20 +01:00
flex: 12;
2020-11-20 20:39:36 +01:00
display: flex;
2020-11-22 17:22:13 +01:00
height: calc(100vh - 120px);
2020-11-24 19:01:20 +01:00
background-color: #eceef4;
2020-11-20 20:39:36 +01:00
`;
2020-11-24 19:01:20 +01:00
interface LeftPanelElement {
isCurrentTab: boolean;
2020-11-20 16:55:37 +01:00
}
const LeftPanelElement = styled.div<LeftPanelElement>`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
2020-11-20 20:39:36 +01:00
//box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
2020-11-20 16:55:37 +01:00
padding: 20px;
cursor: pointer;
2020-12-14 15:52:32 +01:00
box-shadow: ${({ isCurrentTab }) => (isCurrentTab === true ? `inset 0px 0px 11px 0px rgba(0,0,0,0.30)` : '')};
2020-11-24 19:01:20 +01:00
border-bottom: 1px solid #979797;
2021-01-05 23:46:51 +01:00
:first-child {
border-radius: 0px 5px 0px 0px;
2020-12-14 15:52:32 +01:00
}
2021-01-05 23:46:51 +01:00
:last-child {
border-radius: 0px 0px 5px 0px;
2020-12-14 15:52:32 +01:00
}
2020-11-20 16:55:37 +01:00
`;
2020-11-29 23:42:36 +01:00
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;
`;
2020-11-20 16:55:37 +01:00
const Icon = styled.img`
width: 40px;
margin: 5px;
`;
2021-01-12 22:59:12 +01:00
interface Deanery {
schedulerEvents: Array<SchedulerEvent>;
}
export const Deanery = ({ schedulerEvents }: Deanery) => {
2020-12-12 20:32:09 +01:00
const [currentTab, setCurrentTab] = useState<null | number>(1);
const { getNewestStudentTimetable,userID } = useContext(coursesContext)!;
2021-01-12 22:59:12 +01:00
const { selectHistorySchedulerEvents } = useContext(coursesContext)!;
const schedulerHistoryEvents = selectHistorySchedulerEvents();
2020-11-20 16:55:37 +01:00
2020-11-24 19:01:20 +01:00
const handleClick = (e: MouseEvent<HTMLDivElement>) => {
setCurrentTab(Number(e.currentTarget.id));
getNewestStudentTimetable(userID);
2020-11-24 19:01:20 +01:00
};
2020-11-20 16:55:37 +01:00
return (
2020-11-20 20:39:36 +01:00
<Wrap>
2020-11-24 19:01:20 +01:00
<LeftSide>
<LeftPanelElement id={'1'} isCurrentTab={currentTab === 1} onClick={handleClick}>
<Icon alt="profile" src={Plan} />
Pokaż plan
</LeftPanelElement>
<LeftPanelElement id={'2'} isCurrentTab={currentTab === 2} onClick={handleClick}>
<Icon alt="history" src={History} />
Historia Zmian
</LeftPanelElement>
<LeftPanelElement id={'3'} isCurrentTab={currentTab === 3} onClick={handleClick}>
2021-01-17 19:03:54 +01:00
<Icon alt="statistics" src={StatisticsIcon} />
2020-11-24 19:01:20 +01:00
Statystyki
</LeftPanelElement>
</LeftSide>
<Wrapper>
2020-11-29 23:42:36 +01:00
{currentTab === 1 ? (
<>
2021-01-12 22:59:12 +01:00
<Scheduler schedulerEvents={schedulerEvents}/>
2020-11-29 23:42:36 +01:00
<Rightbar />
</>
) : currentTab === 2 ? (
2021-01-12 22:59:12 +01:00
<SchedulerHistory schedulerHistoryEvents={schedulerHistoryEvents}/>
2020-11-29 23:42:36 +01:00
) : currentTab === 3 ? (
2021-01-17 19:03:54 +01:00
<StatsDiv><Statistics/></StatsDiv>
2020-11-29 23:42:36 +01:00
) : (
<LogoWrapper>
<Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
<Text> plan na plan </Text>
</LogoWrapper>
)}
2020-11-24 19:01:20 +01:00
</Wrapper>
2020-11-20 20:39:36 +01:00
</Wrap>
2020-11-20 16:55:37 +01:00
);
};