tours and css changes
This commit is contained in:
wrzesinski-hubert
parent
1235484538
commit
62f50cc9a6
|
|
@ -0,0 +1,44 @@
|
||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 330 330" style="enable-background:new 0 0 330 330;" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path d="M165,0C74.019,0,0,74.02,0,165.001C0,255.982,74.019,330,165,330s165-74.018,165-164.999C330,74.02,255.981,0,165,0z
|
||||||
|
M165,300c-74.44,0-135-60.56-135-134.999C30,90.562,90.56,30,165,30s135,60.562,135,135.001C300,239.44,239.439,300,165,300z"/>
|
||||||
|
<path d="M164.998,70c-11.026,0-19.996,8.976-19.996,20.009c0,11.023,8.97,19.991,19.996,19.991
|
||||||
|
c11.026,0,19.996-8.968,19.996-19.991C184.994,78.976,176.024,70,164.998,70z"/>
|
||||||
|
<path d="M165,140c-8.284,0-15,6.716-15,15v90c0,8.284,6.716,15,15,15c8.284,0,15-6.716,15-15v-90C180,146.716,173.284,140,165,140z
|
||||||
|
"/>
|
||||||
|
</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: 1.1 KiB |
|
|
@ -0,0 +1,38 @@
|
||||||
|
<?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="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 468.293 468.293" style="enable-background:new 0 0 468.293 468.293;" xml:space="preserve">
|
||||||
|
<circle style="fill:#44C4A1;" cx="234.146" cy="234.146" r="234.146"/>
|
||||||
|
<polygon style="fill:#EBF0F3;" points="357.52,110.145 191.995,275.67 110.773,194.451 69.534,235.684 191.995,358.148
|
||||||
|
398.759,151.378 "/>
|
||||||
|
<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: 719 B |
|
|
@ -21,7 +21,7 @@ const CourseCardWrapper = styled.div`
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
|
box-shadow: 3px 3px 5px 0px rgba(189,189,189,1);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const TitleWrapper = styled.div`
|
const TitleWrapper = styled.div`
|
||||||
|
|
|
||||||
|
|
@ -37,14 +37,12 @@ const SaveButton = styled.div`
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: #54c457;
|
background-color: #54c457;
|
||||||
}
|
}
|
||||||
|
|
||||||
box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
|
box-shadow: 3px 3px 5px 0px rgba(189,189,189,1);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const Rightbar = () => {
|
export const Rightbar = () => {
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import Popover from '@material-ui/core/Popover';
|
||||||
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
|
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
|
||||||
import { MONDAY_TO_FRIDAY } from '../constants';
|
import { MONDAY_TO_FRIDAY } from '../constants';
|
||||||
import { coursesContext } from '../contexts/CoursesProvider';
|
import { coursesContext } from '../contexts/CoursesProvider';
|
||||||
|
import TickIcon from '../assets/tick.svg';
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles((theme: Theme) =>
|
||||||
createStyles({
|
createStyles({
|
||||||
|
|
@ -57,7 +58,7 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
|
||||||
z-index: 20000;
|
z-index: 20000;
|
||||||
font-size: 0.65vw;
|
font-size: 0.65vw;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
border-radius: 10px;
|
border-radius: 2px;
|
||||||
height: ${({ cellHeight }) => cellHeight * 3}px;
|
height: ${({ cellHeight }) => cellHeight * 3}px;
|
||||||
width: ${({ cellWidth }) => (cellWidth * 3) / 4}px;
|
width: ${({ cellWidth }) => (cellWidth * 3) / 4}px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
|
@ -75,8 +76,10 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
|
||||||
css`
|
css`
|
||||||
transition: background-color ease-in 0.4s;
|
transition: background-color ease-in 0.4s;
|
||||||
`}
|
`}
|
||||||
transition: background-color ease-out 0.4s;
|
transition: background-color ease-out 0.4s;
|
||||||
box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
|
box-shadow: 3px 3px 5px 0px rgba(189,189,189,1);
|
||||||
|
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
@ -125,6 +128,13 @@ interface SchedulerRowProps {
|
||||||
cellHeight: number;
|
cellHeight: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const Icon = styled.img`
|
||||||
|
width: 15px;
|
||||||
|
position:absolute;
|
||||||
|
top:5px;
|
||||||
|
left:15px;
|
||||||
|
`;
|
||||||
|
|
||||||
const getGroupsPerDay = (groups: Array<SchedulerEvent>) => {
|
const getGroupsPerDay = (groups: Array<SchedulerEvent>) => {
|
||||||
const groupsPerDay: any = { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0 };
|
const groupsPerDay: any = { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0 };
|
||||||
for (const group of groups) {
|
for (const group of groups) {
|
||||||
|
|
@ -185,10 +195,12 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
|
||||||
<BoldParagraph isThree={groupsPerDay[group.day] >= 3}>{groups[index].name}</BoldParagraph>
|
<BoldParagraph isThree={groupsPerDay[group.day] >= 3}>{groups[index].name}</BoldParagraph>
|
||||||
{groupsPerDay[group.day] < 3 ? (
|
{groupsPerDay[group.day] < 3 ? (
|
||||||
<TextWrapper>
|
<TextWrapper>
|
||||||
|
{groups[index].isAccepted===true && <Icon alt="transfer" src={TickIcon} />}
|
||||||
<div>{`${groups[index].time}-${groups[index].endTime}`}</div>
|
<div>{`${groups[index].time}-${groups[index].endTime}`}</div>
|
||||||
<div>
|
<div>
|
||||||
{groups[index].takenPlaces}/{groups[index].capacity}
|
{groups[index].takenPlaces}/{groups[index].capacity}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</TextWrapper>
|
</TextWrapper>
|
||||||
) : (
|
) : (
|
||||||
<TextWrapper style={{ flexDirection: 'column' }}>
|
<TextWrapper style={{ flexDirection: 'column' }}>
|
||||||
|
|
@ -232,9 +244,10 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
|
||||||
<p style={{ margin: '2px 0 2px 0' }}>
|
<p style={{ margin: '2px 0 2px 0' }}>
|
||||||
<PopoverSpan>Kod grupy: </PopoverSpan>FVJ753
|
<PopoverSpan>Kod grupy: </PopoverSpan>FVJ753
|
||||||
</p>
|
</p>
|
||||||
<p style={{ margin: '2px 0 2px 0' }}>
|
<p style={{ margin: '2px 0 2px 0', color:"green"}}>
|
||||||
<PopoverSpan>Punkty ECTS:</PopoverSpan> 2
|
<b>{String(groups[index].isAccepted)==="false"?"":"Przedmiot został zaakceptowany"}</b>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</Popover>
|
</Popover>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState, useContext } from 'react';
|
import React, { useState, useContext, useEffect } from 'react';
|
||||||
import Collapse from '@material-ui/core/Collapse';
|
import Collapse from '@material-ui/core/Collapse';
|
||||||
import { ReactComponent as Expand } from '../assets/expand.svg';
|
import { ReactComponent as Expand } from '../assets/expand.svg';
|
||||||
import { Course, Group, GroupType } from '../types/index';
|
import { Course, Group, GroupType } from '../types/index';
|
||||||
|
|
@ -8,6 +8,7 @@ import { makeStyles } from '@material-ui/core/styles';
|
||||||
import DeleteIcon from '@material-ui/icons/Delete';
|
import DeleteIcon from '@material-ui/icons/Delete';
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
import { dayMapping } from '../constants';
|
import { dayMapping } from '../constants';
|
||||||
|
import { axiosInstance } from '../utils/axiosInstance';
|
||||||
|
|
||||||
const StatisticsWrapper = styled.div`
|
const StatisticsWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -25,7 +26,7 @@ const Row = styled.div`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StatisticBox = styled.div`
|
const StatisticBox = styled.div`
|
||||||
background-color:white;
|
background-color: white;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
|
|
@ -36,57 +37,127 @@ background-color:white;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
padding:2px;
|
padding: 2px;
|
||||||
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
|
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StatisticNumber = styled.p`
|
const StatisticNumber = styled.p`
|
||||||
font-size: 52px;
|
font-size: 52px;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
margin-bottom:0px;
|
margin-bottom: 0px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StatisticText = styled.p`
|
const StatisticText = styled.p`
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
text-align:center;
|
text-align: center;
|
||||||
align-items:center;
|
align-items: center;
|
||||||
justify-content:center;
|
justify-content: center;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const Statistics = () => {
|
export const Statistics = () => {
|
||||||
|
const [createdGroupsNumber, setCreatedGroupsNumber] = useState('');
|
||||||
|
const [fullGroupsNumber, setFullGroupsNumber] = useState('');
|
||||||
|
const [registeredStudentsNumber, setRegisteredStudentsNumber] = useState('');
|
||||||
|
const [notRegisteredStudentsNumber, setNotRegisteredStudentsNumber] = useState('');
|
||||||
|
const [acceptedStudentsNumber, setAcceptedStudentsNumber] = useState('');
|
||||||
|
const [partlyAcceptedStudentsNumber, setPartlyAcceptedStudentsNumber] = useState('');
|
||||||
|
|
||||||
|
const getCreatedGroupsNumber = async () => {
|
||||||
|
try {
|
||||||
|
const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/statistics/groups/created`);
|
||||||
|
setCreatedGroupsNumber(data.ammount);
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getFullGroupsNumber = async () => {
|
||||||
|
try {
|
||||||
|
const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/statistics/groups/full`);
|
||||||
|
setFullGroupsNumber(data.ammount);
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getRegisteredStudentsNumber = async () => {
|
||||||
|
try {
|
||||||
|
const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/statistics/groups/full`);
|
||||||
|
setRegisteredStudentsNumber(data.ammount);
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNotRegisteredStudentsNumber = async () => {
|
||||||
|
try {
|
||||||
|
const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/statistics/groups/full`);
|
||||||
|
setNotRegisteredStudentsNumber(data.ammount);
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getAcceptedStudentsNumber = async () => {
|
||||||
|
try {
|
||||||
|
const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/statistics/groups/full`);
|
||||||
|
setAcceptedStudentsNumber(data.ammount);
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPartlyAcceptedStudentsNumber = async () => {
|
||||||
|
try {
|
||||||
|
const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/statistics/groups/full`);
|
||||||
|
setPartlyAcceptedStudentsNumber(data.ammount);
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getCreatedGroupsNumber()
|
||||||
|
getFullGroupsNumber()
|
||||||
|
getRegisteredStudentsNumber()
|
||||||
|
getNotRegisteredStudentsNumber()
|
||||||
|
getAcceptedStudentsNumber()
|
||||||
|
getPartlyAcceptedStudentsNumber()
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StatisticsWrapper>
|
<StatisticsWrapper>
|
||||||
<Row>
|
<Row>
|
||||||
<StatisticBox>
|
<StatisticBox>
|
||||||
<StatisticNumber>65</StatisticNumber>
|
<StatisticNumber>{createdGroupsNumber}</StatisticNumber>
|
||||||
<StatisticText>Utworzonych grup</StatisticText>
|
<StatisticText>Utworzonych grup</StatisticText>
|
||||||
</StatisticBox>
|
</StatisticBox>
|
||||||
<StatisticBox>
|
<StatisticBox>
|
||||||
{' '}
|
{' '}
|
||||||
<StatisticNumber>280</StatisticNumber>
|
<StatisticNumber>{registeredStudentsNumber}</StatisticNumber>
|
||||||
<StatisticText>Zapisanych studentów do grup</StatisticText>
|
<StatisticText>Zapisanych studentów do grup</StatisticText>
|
||||||
</StatisticBox>
|
</StatisticBox>
|
||||||
<StatisticBox>
|
<StatisticBox>
|
||||||
{' '}
|
{' '}
|
||||||
<StatisticNumber>24</StatisticNumber>
|
<StatisticNumber>{notRegisteredStudentsNumber}</StatisticNumber>
|
||||||
<StatisticText>Studentów niezapisanych do żadnej grupy</StatisticText>
|
<StatisticText>Studentów niezapisanych do żadnej grupy</StatisticText>
|
||||||
</StatisticBox>
|
</StatisticBox>
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
<StatisticBox>
|
<StatisticBox>
|
||||||
{' '}
|
{' '}
|
||||||
<StatisticNumber>150</StatisticNumber>
|
<StatisticNumber>{acceptedStudentsNumber}</StatisticNumber>
|
||||||
<StatisticText>Studentów z zaakceptowanym planem</StatisticText>
|
<StatisticText>Studentów z zaakceptowanym planem</StatisticText>
|
||||||
</StatisticBox>
|
</StatisticBox>
|
||||||
<StatisticBox>
|
<StatisticBox>
|
||||||
{' '}
|
{' '}
|
||||||
<StatisticNumber>130</StatisticNumber>
|
<StatisticNumber>{partlyAcceptedStudentsNumber}</StatisticNumber>
|
||||||
<StatisticText>Studentów bez zaakceptowanego pełengo planu</StatisticText>
|
<StatisticText>Studentów bez zaakceptowanego pełengo planu</StatisticText>
|
||||||
</StatisticBox>
|
</StatisticBox>
|
||||||
<StatisticBox>
|
<StatisticBox>
|
||||||
{' '}
|
{' '}
|
||||||
<StatisticNumber>0</StatisticNumber>
|
<StatisticNumber>{fullGroupsNumber}</StatisticNumber>
|
||||||
<StatisticText>Zamkniętych grup</StatisticText>
|
<StatisticText>Grup z zajętymi wszystkimi miejscami</StatisticText>
|
||||||
</StatisticBox>
|
</StatisticBox>
|
||||||
</Row>
|
</Row>
|
||||||
</StatisticsWrapper>
|
</StatisticsWrapper>
|
||||||
|
|
|
||||||
|
|
@ -175,6 +175,8 @@ export default function ({ handleTransfer }: TopbarProps) {
|
||||||
}
|
}
|
||||||
}, [clearInput, handleClearInput]);
|
}, [clearInput, handleClearInput]);
|
||||||
|
|
||||||
|
const userPrivilige = localStorage.getItem('userPrivilige');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Topbar>
|
<Topbar>
|
||||||
<LogoWrapper>
|
<LogoWrapper>
|
||||||
|
|
@ -215,7 +217,7 @@ export default function ({ handleTransfer }: TopbarProps) {
|
||||||
<SelectedStudent>{selectedStudent?.email.replace(/@st.amu.edu.pl/, '')}</SelectedStudent>
|
<SelectedStudent>{selectedStudent?.email.replace(/@st.amu.edu.pl/, '')}</SelectedStudent>
|
||||||
|
|
||||||
{/* <Text>Maciej Głowacki</Text> */}
|
{/* <Text>Maciej Głowacki</Text> */}
|
||||||
<Icon alt="transfer" src={TransferIcon} onClick={handleTransfer} />
|
{userPrivilige==="STUDENT" && <Icon alt="transfer" src={TransferIcon} onClick={handleTransfer} />}
|
||||||
{/* <Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} /> */}
|
{/* <Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} /> */}
|
||||||
<Icon alt="logout" src={LogoutIcon} onClick={logout} />
|
<Icon alt="logout" src={LogoutIcon} onClick={logout} />
|
||||||
{/* <Profile anchorEl={anchorEl} handleClose={handleCloseProfile} /> */}
|
{/* <Profile anchorEl={anchorEl} handleClose={handleCloseProfile} /> */}
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ import { DropdownModal } from './DropdownModal';
|
||||||
import { dayMapping } from '../constants';
|
import { dayMapping } from '../constants';
|
||||||
import TransferIcon from '../assets/switch.svg';
|
import TransferIcon from '../assets/switch.svg';
|
||||||
import DeleteIcon from '@material-ui/icons/Delete';
|
import DeleteIcon from '@material-ui/icons/Delete';
|
||||||
|
import InformationIcon from '../assets/information.svg';
|
||||||
|
|
||||||
interface TransferProps {
|
interface TransferProps {
|
||||||
handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
||||||
|
|
@ -35,12 +36,10 @@ const TransferStyled = styled.div`
|
||||||
outline: none;
|
outline: none;
|
||||||
min-width: 35%;
|
min-width: 35%;
|
||||||
height: 70%;
|
height: 70%;
|
||||||
padding-top: 40px;
|
|
||||||
background: white;
|
background: white;
|
||||||
box-shadow: 0px 0px 0px 4px #006b96;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
letter-spacing: 0.2ch;
|
letter-spacing: 0.1ch;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const BinIcon = styled(DeleteIcon)`
|
const BinIcon = styled(DeleteIcon)`
|
||||||
|
|
@ -56,6 +55,7 @@ const InputWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
margin-top:40px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const TransferGiveStyled = styled.div`
|
const TransferGiveStyled = styled.div`
|
||||||
|
|
@ -112,7 +112,6 @@ const SaveButton = styled.div`
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
|
|
@ -120,7 +119,7 @@ const SaveButton = styled.div`
|
||||||
}
|
}
|
||||||
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
|
box-shadow: 3px 3px 5px 0px rgba(189,189,189,1);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ExchangesWrapper = styled.div`
|
const ExchangesWrapper = styled.div`
|
||||||
|
|
@ -138,7 +137,7 @@ const ExchangesWrapper = styled.div`
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: #4b4b4b;
|
background-color: #4b4b4b;
|
||||||
}
|
}
|
||||||
border-top: 1px solid;
|
border-top: 1px solid #b8b8b8;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ExchangesRow = styled.div`
|
const ExchangesRow = styled.div`
|
||||||
|
|
@ -150,20 +149,35 @@ const ExchangesRow = styled.div`
|
||||||
|
|
||||||
const Icon = styled.img`
|
const Icon = styled.img`
|
||||||
width: 20px;
|
width: 20px;
|
||||||
cursor: pointer;
|
`;
|
||||||
|
|
||||||
|
const Information = styled.img`
|
||||||
|
width: 35px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Exchange = styled.div`
|
const Exchange = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
background-color: #b5d2e0;
|
background-color: #b5d2e0;
|
||||||
border-radius: 10px;
|
border-radius: 2px;
|
||||||
width: 280px;
|
width: 280px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
padding: 0.5rem;
|
||||||
|
line-height: 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const ExchangeTitle = styled.p`
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ExchangeParagraph = styled.p`
|
||||||
|
font-size: 13px;
|
||||||
|
color: #1a1a1a;
|
||||||
|
`;
|
||||||
|
|
||||||
export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
|
export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
|
||||||
const { basket, selectBasketCourses } = useContext(coursesContext)!;
|
const { basket, selectBasketCourses } = useContext(coursesContext)!;
|
||||||
|
|
@ -181,6 +195,7 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
|
||||||
const [groups, setGroups] = useState<any>([]);
|
const [groups, setGroups] = useState<any>([]);
|
||||||
const [exchanges, setExchanges] = useState<any>(null);
|
const [exchanges, setExchanges] = useState<any>(null);
|
||||||
const [save, setSave] = useState(false);
|
const [save, setSave] = useState(false);
|
||||||
|
const [tour, setTour] = useState<any>(null);
|
||||||
// const allGroups
|
// const allGroups
|
||||||
const handleSelectedAssignmentsGroupChange = (event: React.ChangeEvent<{ value: unknown }>) => {
|
const handleSelectedAssignmentsGroupChange = (event: React.ChangeEvent<{ value: unknown }>) => {
|
||||||
setSelectedAssignmentsClasses(event.target.value as any);
|
setSelectedAssignmentsClasses(event.target.value as any);
|
||||||
|
|
@ -228,6 +243,7 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
getExchanges();
|
getExchanges();
|
||||||
|
getCurrentTour();
|
||||||
getAssignmentsGroups();
|
getAssignmentsGroups();
|
||||||
}, [isTransferOpen, save]);
|
}, [isTransferOpen, save]);
|
||||||
|
|
||||||
|
|
@ -245,16 +261,13 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
|
||||||
setSave(!save);
|
setSave(!save);
|
||||||
};
|
};
|
||||||
|
|
||||||
const getExchange = async (event: MouseEvent) => {
|
const getCurrentTour = async () => {
|
||||||
const target = event.currentTarget;
|
|
||||||
try {
|
try {
|
||||||
const response = await axiosInstance.post(
|
const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/configurator/config/tour`);
|
||||||
`${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/${target.id}`,
|
setTour(data.currentTour);
|
||||||
);
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const deleteExchange = async (id: number) => {
|
const deleteExchange = async (id: number) => {
|
||||||
|
|
@ -276,117 +289,132 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
|
||||||
aria-describedby="simple-modal-description"
|
aria-describedby="simple-modal-description"
|
||||||
>
|
>
|
||||||
<Fade in={isTransferOpen}>
|
<Fade in={isTransferOpen}>
|
||||||
<TransferStyled>
|
{tour === 'FIRST_TOUR' ? (
|
||||||
<InputWrapper>
|
<TransferStyled>
|
||||||
<TransferGiveStyled>
|
<Information src={InformationIcon}></Information>
|
||||||
<TransferTextStyled>Oddam</TransferTextStyled>
|
<p>Wymiana przedmiotami jest dostępna dopiero podczas drugiej tury</p>
|
||||||
<TransferInputStyled>
|
<p>Wymianie podlegają tylko zaakceptowane grupy przedmiotów</p>
|
||||||
<FormControl>
|
<p>Wymiana grupami odbywa się tylko w obrębie danego przedmiotu</p></TransferStyled>
|
||||||
<Select
|
) : (
|
||||||
labelId="demo-simple-select-label"
|
<TransferStyled>
|
||||||
id="assignments-groups"
|
<InputWrapper>
|
||||||
value={selectedAssignmentsClasses}
|
<TransferGiveStyled>
|
||||||
onChange={handleSelectedAssignmentsGroupChange}
|
<TransferTextStyled>Oddam</TransferTextStyled>
|
||||||
placeholder="Wyszukaj..."
|
<TransferInputStyled>
|
||||||
style={{ width: '200px' }}
|
<FormControl>
|
||||||
>
|
<Select
|
||||||
{assignmentsClasses.map((el: any, index: number) => {
|
labelId="demo-simple-select-label"
|
||||||
return (
|
id="assignments-groups"
|
||||||
<MenuItem
|
value={selectedAssignmentsClasses}
|
||||||
key={index}
|
onChange={handleSelectedAssignmentsGroupChange}
|
||||||
value={el}
|
placeholder="Wyszukaj..."
|
||||||
style={{
|
style={{ width: '200px' }}
|
||||||
display: 'flex',
|
>
|
||||||
alignItems: 'center',
|
{assignmentsClasses.map((el: any, index: number) => {
|
||||||
justifyContent: 'center',
|
return (
|
||||||
textAlign: 'center',
|
<MenuItem
|
||||||
}}
|
key={index}
|
||||||
>
|
value={el}
|
||||||
{`${el.name} `}
|
style={{
|
||||||
<br></br>
|
display: 'flex',
|
||||||
{`(${dayMapping[el.day]} ${el.time} - ${el.endTime})`}
|
alignItems: 'center',
|
||||||
</MenuItem>
|
justifyContent: 'center',
|
||||||
);
|
textAlign: 'center',
|
||||||
})}
|
}}
|
||||||
</Select>
|
>
|
||||||
</FormControl>
|
{`${el.name} `}
|
||||||
</TransferInputStyled>
|
<br></br>
|
||||||
</TransferGiveStyled>
|
{`(${dayMapping[el.day]} ${el.time} - ${el.endTime})`}
|
||||||
<SaveWrapper>
|
</MenuItem>
|
||||||
{' '}
|
);
|
||||||
<SaveButton
|
})}
|
||||||
onClick={() => {
|
</Select>
|
||||||
createExchange([selectedAssignmentsClasses.id, selectedGroup.id]);
|
</FormControl>
|
||||||
}}
|
</TransferInputStyled>
|
||||||
>
|
</TransferGiveStyled>
|
||||||
Zaproponuj wymianę
|
<SaveWrapper>
|
||||||
</SaveButton>
|
{' '}
|
||||||
</SaveWrapper>
|
<SaveButton
|
||||||
<TransferReceiveStyled>
|
onClick={() => {
|
||||||
<TransferTextStyled>Przyjmę</TransferTextStyled>
|
createExchange([selectedAssignmentsClasses.id, selectedGroup.id]);
|
||||||
<TransferInputStyled>
|
}}
|
||||||
<FormControl disabled={selectedAssignmentsClasses ? false : true}>
|
>
|
||||||
<Select
|
Zaproponuj wymianę
|
||||||
labelId="demo-simple-select-label"
|
</SaveButton>
|
||||||
id="assignments-groups"
|
</SaveWrapper>
|
||||||
value={selectedGroup}
|
<TransferReceiveStyled>
|
||||||
onChange={handleGroupsChange}
|
<TransferTextStyled>Przyjmę</TransferTextStyled>
|
||||||
placeholder="Wyszukaj..."
|
<TransferInputStyled>
|
||||||
style={{ width: '200px' }}
|
<FormControl disabled={selectedAssignmentsClasses ? false : true}>
|
||||||
>
|
<Select
|
||||||
{groups.map((el: any, index: number) => {
|
labelId="demo-simple-select-label"
|
||||||
return (
|
id="assignments-groups"
|
||||||
<MenuItem
|
value={selectedGroup}
|
||||||
key={index}
|
onChange={handleGroupsChange}
|
||||||
value={el}
|
placeholder="Wyszukaj..."
|
||||||
style={{
|
style={{ width: '200px' }}
|
||||||
display: 'flex',
|
>
|
||||||
alignItems: 'center',
|
{groups.map((el: any, index: number) => {
|
||||||
justifyContent: 'center',
|
return (
|
||||||
textAlign: 'center',
|
<MenuItem
|
||||||
}}
|
key={index}
|
||||||
>
|
value={el}
|
||||||
{`${selectedAssignmentsClasses.name} `}
|
style={{
|
||||||
<br></br>
|
display: 'flex',
|
||||||
{`(${dayMapping[el.day]} ${el.time} - ${el.endTime})`}
|
alignItems: 'center',
|
||||||
</MenuItem>
|
justifyContent: 'center',
|
||||||
);
|
textAlign: 'center',
|
||||||
})}
|
}}
|
||||||
</Select>
|
>
|
||||||
</FormControl>
|
{`${selectedAssignmentsClasses.name} `}
|
||||||
</TransferInputStyled>
|
<br></br>
|
||||||
</TransferReceiveStyled>
|
{`(${dayMapping[el.day]} ${el.time} - ${el.endTime})`}
|
||||||
</InputWrapper>
|
</MenuItem>
|
||||||
|
);
|
||||||
<ExchangesWrapper>
|
})}
|
||||||
{exchanges ? (
|
</Select>
|
||||||
exchanges.map((name: any, index: number) => (
|
</FormControl>
|
||||||
<ExchangesRow key={index}>
|
</TransferInputStyled>
|
||||||
{' '}
|
</TransferReceiveStyled>
|
||||||
<Exchange>
|
</InputWrapper>
|
||||||
{name.ownedAssignment.lecturer} <br></br> {dayMapping[name.ownedAssignment.day]} <br></br>{' '}
|
<ExchangesWrapper>
|
||||||
{name.ownedAssignment.time} - {name.ownedAssignment.endTime}
|
{exchanges ? (
|
||||||
</Exchange>
|
exchanges.map((name: any, index: number) => (
|
||||||
<Icon alt="transfer" src={TransferIcon} onClick={getExchange} />
|
<ExchangesRow key={index}>
|
||||||
<Exchange>
|
{' '}
|
||||||
{name.desiredGroup.lecturer} <br></br> {dayMapping[name.desiredGroup.day]} <br></br>{' '}
|
<Exchange>
|
||||||
{name.desiredGroup.time} - {name.desiredGroup.endTime}
|
<ExchangeTitle>{name.courseName}</ExchangeTitle>
|
||||||
</Exchange>{' '}
|
<ExchangeParagraph>{name.ownedAssignment.lecturer} </ExchangeParagraph>
|
||||||
<BinIcon
|
<ExchangeParagraph> {dayMapping[name.ownedAssignment.day]} </ExchangeParagraph>
|
||||||
onClick={(e) => {
|
<ExchangeParagraph>
|
||||||
e.stopPropagation();
|
{name.ownedAssignment.time} - {name.ownedAssignment.endTime}
|
||||||
const id = Number(e.currentTarget.id);
|
</ExchangeParagraph>
|
||||||
deleteExchange(id);
|
</Exchange>
|
||||||
}}
|
<Icon alt="transfer" src={TransferIcon} />
|
||||||
id={name.id}
|
<Exchange>
|
||||||
></BinIcon>
|
<ExchangeTitle>{name.courseName}</ExchangeTitle>
|
||||||
</ExchangesRow>
|
<ExchangeParagraph>{name.desiredGroup.lecturer} </ExchangeParagraph>
|
||||||
))
|
<ExchangeParagraph> {dayMapping[name.desiredGroup.day]} </ExchangeParagraph>
|
||||||
) : (
|
<ExchangeParagraph>
|
||||||
<div></div>
|
{name.desiredGroup.time} - {name.desiredGroup.endTime}
|
||||||
)}
|
</ExchangeParagraph>
|
||||||
</ExchangesWrapper>
|
</Exchange>{' '}
|
||||||
</TransferStyled>
|
<BinIcon
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
const id = Number(e.currentTarget.id);
|
||||||
|
deleteExchange(id);
|
||||||
|
}}
|
||||||
|
id={name.id}
|
||||||
|
></BinIcon>
|
||||||
|
</ExchangesRow>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div></div>
|
||||||
|
)}
|
||||||
|
</ExchangesWrapper>
|
||||||
|
</TransferStyled>
|
||||||
|
)}
|
||||||
</Fade>
|
</Fade>
|
||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -205,6 +205,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
||||||
);
|
);
|
||||||
const basket = data === '' ? [] : data;
|
const basket = data === '' ? [] : data;
|
||||||
setBasket(basket);
|
setBasket(basket);
|
||||||
|
console.log("basket:",basket);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,7 @@ export interface Group {
|
||||||
type: GroupType;
|
type: GroupType;
|
||||||
capacity?: number;
|
capacity?: number;
|
||||||
takenPlaces: number;
|
takenPlaces: number;
|
||||||
|
isAccepted:boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Course {
|
export interface Course {
|
||||||
|
|
@ -53,6 +54,7 @@ export interface SchedulerEvent {
|
||||||
capacity?: number;
|
capacity?: number;
|
||||||
takenPlaces: number;
|
takenPlaces: number;
|
||||||
name: string;
|
name: string;
|
||||||
|
isAccepted:boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface TimetableHistory {
|
export interface TimetableHistory {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue