Merge pull request 'logo' (#67) from statistics into master

Reviewed-on: http://git.plannaplan.pl/y0rune/frontend/pulls/67

src/assets/information.svg

@@ -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>

src/assets/tick.svg

@@ -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>

src/components/Administrator.tsx

@@ -7,6 +7,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import { SyncLoader } from 'react-spinners';
 import { CASContext } from '../contexts/CASProvider';
 import LogoutIcon from '../assets/logout.svg';
+import LogoPlanNaPlan from '../assets/logo.svg';
 
 const StyledCloseIcon = styled(CloseIcon)`
   color: #000000;
@@ -58,12 +59,12 @@ const Wrap = styled.div`
   flex: 1;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
+  align-items: center;  
+  margin:20px;
 `;
 
 const LogoWrapper = styled.div`
   display: flex;
-  flex: 1;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -74,6 +75,7 @@ const Text = styled.div`
   font-family: 'Roboto', sans-serif;
   font-size: 5rem;
   user-select: none;
+  margin-bottom:60px;
 `;
 
 const Logo = styled.img`
@@ -133,8 +135,6 @@ export const Administrator = () => {
 
     const {data} = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/commisions/export/csv`,{responseType:"blob"});
 
-    console.log("123",xd);
-
     const downloadUrl = window.URL.createObjectURL(new Blob([data]));
 
     const link = document.createElement('a');
@@ -211,7 +211,7 @@ export const Administrator = () => {
                   <Icon alt="logout" src={LogoutIcon} onClick={logout}/>
       <Wrap>
         <LogoWrapper>
-          <Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
+          <Logo alt="logo" src={LogoPlanNaPlan} />
           <Text> plan na plan </Text>
         </LogoWrapper>
         {xd === true ? (

src/components/CourseCard.tsx

@@ -21,7 +21,7 @@ const CourseCardWrapper = styled.div`
   border-radius: 10px;
   cursor: pointer;
   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`

src/components/Dropdown.tsx

@@ -105,7 +105,8 @@ export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: D
             input
               .toLowerCase()
               .normalize('NFD')
-              .replace(/[\u0300-\u036f]/g, ''),
+              .replace(/[\u0300-\u036f]/g, '')
+              .replace(/\s/g, ''),
           ),
       );
       setFilteredStudents(filteredUsers);
@@ -119,9 +120,10 @@ export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: D
         <>
           {selectedOption === 'studenci' ? (
             <div>
-              {filteredStudents.map(({ email, id }, index) => (
+              {filteredStudents.map(({ surname, name, email, id }, index) => (
                 <CourseContainer key={index} id={id.toString()} onClick={onUserClick}>
-                  <p>{email}</p>
+                  {name=== ''? <p>{email}</p> :<p>{name} {surname}</p>}
+                  
                 </CourseContainer>
               ))}
             </div>

src/components/Rightbar.tsx

@@ -3,6 +3,7 @@ import { CourseCard } from './CourseCard';
 import { coursesContext } from '../contexts/CoursesProvider';
 import styled from 'styled-components';
 import { debounce } from '../utils/index';
+import { SyncLoader } from 'react-spinners';
 
 const RightbarWrapper = styled.div`
   padding: 15px;
@@ -37,24 +38,22 @@ const SaveButton = styled.div`
   margin-bottom: 10px;
   &:hover {
     color: #ffffff;
-    box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24);
   }
-
   &:active {
     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 = () => {
-  const { selectBasketCourses, saveBasket, userID } = useContext(coursesContext)!;
+  const { selectBasketCourses, saveBasket, userID, isSavingLoading } = useContext(coursesContext)!;
 
   const basketCourses = selectBasketCourses();
   const handleSave = debounce(() => saveBasket(userID), 500);
   return (
     <RightbarWrapper>
-      <SaveButton onClick={handleSave}>ZAPISZ</SaveButton>
+      <SaveButton onClick={()=> {!isSavingLoading && handleSave() }}> {isSavingLoading ? <SyncLoader size={9}/> : "ZAPISZ"}</SaveButton>
       {basketCourses.map((course) => (
         <CourseCard course={course} key={course.id} />
       ))}

src/components/Scheduler.tsx

@@ -1,9 +1,11 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useContext, useLayoutEffect, useRef } from 'react';
 import { useState } from 'react';
 import { SchedulerEvents } from './SchedulerEvents';
 import { days, hours } from '../constants/index';
 import styled from 'styled-components/macro';
 import { SchedulerEvent } from '../types';
+import { coursesContext } from '../contexts/CoursesProvider';
+import Tooltip from '@material-ui/core/Tooltip';
 
 const SchedulerWrapper = styled.div`
   border-collapse: collapse;
@@ -17,6 +19,7 @@ const SchedulerWrapper = styled.div`
   justify-content: center;
   align-items: center;
   box-shadow: 3px 3px 3px -2px rgba(0, 0, 0, 0.59);
+  position:relative;
 `;
 
 const TableBody = styled.div`
@@ -62,6 +65,27 @@ const TableCell = styled.div<TableCellProps>`
   font-weight: bold;
 `;
 
+const TourWrapper = styled.div`
+  display: flex;
+  justify-content:center;
+  align-items:center;
+  position:absolute;
+  top:8px;
+  right:8px;
+  min-width: 10px;
+  padding: 3px 7px;
+  font-size: 12px;
+  font-weight: 700;
+  color: black;
+  line-height: 1;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-align: center;
+  background-color: #FFDC61;
+  border-radius: 10px;
+  font-size:18px;
+`;
+
 interface SchedulerProps {
   schedulerEvents: Array<SchedulerEvent>;
 }
@@ -70,7 +94,8 @@ export const Scheduler = ({ schedulerEvents }: SchedulerProps) => {
   const cellRef = useRef<HTMLDivElement>(null);
   const [cellWidth, setCellWidth] = useState(0);
   const [cellHeight, setCellHeight] = useState(0);
-
+  const { tour } = useContext(coursesContext)!;
+  
   useLayoutEffect(() => {
     const handleResize = () => {
       if (cellRef.current) {
@@ -130,6 +155,19 @@ export const Scheduler = ({ schedulerEvents }: SchedulerProps) => {
         ))}
         <SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} schedulerEvents={schedulerEvents} />
       </TableBody>
+      <TourWrapper>
+      <Tooltip title="Pierwsza Tura Zapisów">
+        <div style={{cursor: 'help'}}>{tour === 'FIRST_TOUR' && '1'}</div>
+      </Tooltip>
+      <Tooltip title="Druga Tura Zapisów">
+        <div style={{cursor: 'help'}}>{tour === 'SECOND_TOUR' && '2'}</div>
+      </Tooltip>
+      <Tooltip title="Zapisywanie wyłączone">
+        <div style={{cursor: 'help'}}>{tour === 'NO_TOUR' && 'X'}</div>
+      </Tooltip>    
+          
+          
+        </TourWrapper>
     </SchedulerWrapper>
   );
 };

src/components/SchedulerRow.tsx

@@ -5,6 +5,7 @@ import Popover from '@material-ui/core/Popover';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 import { MONDAY_TO_FRIDAY } from '../constants';
 import { coursesContext } from '../contexts/CoursesProvider';
+import TickIcon from '../assets/tick.svg';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -57,7 +58,7 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
   z-index: 20000;
   font-size: 0.65vw;
   line-height: normal;
-  border-radius: 10px;
+  border-radius: 2px;
   height: ${({ cellHeight }) => cellHeight * 3}px;
   width: ${({ cellWidth }) => (cellWidth * 3) / 4}px;
   margin-right: 5px;
@@ -75,8 +76,10 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
     css`
       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;
 `;
 
@@ -125,6 +128,13 @@ interface SchedulerRowProps {
   cellHeight: number;
 }
 
+const Icon = styled.img`
+  width: 15px;
+  position:absolute;
+  top:5px;
+  left:15px;
+`;
+
 const getGroupsPerDay = (groups: Array<SchedulerEvent>) => {
   const groupsPerDay: any = { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0 };
   for (const group of groups) {
@@ -185,13 +195,16 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
                       <BoldParagraph isThree={groupsPerDay[group.day] >= 3}>{groups[index].name}</BoldParagraph>
                       {groupsPerDay[group.day] < 3 ? (
                         <TextWrapper>
+                          {groups[index].isAccepted===true && <Icon alt="transfer" src={TickIcon} />}
                           <div>{`${groups[index].time}-${groups[index].endTime}`}</div>
                           <div>
                             {groups[index].takenPlaces}/{groups[index].capacity}
                           </div>
+                          
                         </TextWrapper>
                       ) : (
                         <TextWrapper style={{ flexDirection: 'column' }}>
+                          {groups[index].isAccepted===true && <Icon alt="transfer" src={TickIcon} />}
                           <div style={{ alignSelf: 'flex-end' }}>
                             {groups[index].takenPlaces}/{groups[index].capacity}
                           </div>
@@ -227,14 +240,15 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
                         <PopoverSpan>Sala zajęć</PopoverSpan>: {groups[index].room}
                       </p>
                       <p style={{ margin: '2px 0 2px 0' }}>
-                        <PopoverSpan>Kod przedmiotu: </PopoverSpan>ACB129
+                        <PopoverSpan>Kod przedmiotu: </PopoverSpan> {groups[index].symbol}
                       </p>
                       <p style={{ margin: '2px 0 2px 0' }}>
-                        <PopoverSpan>Kod grupy: </PopoverSpan>FVJ753
+                        <PopoverSpan>Numer grupy: </PopoverSpan> {groups[index].grNr}
-                      </p>
-                      <p style={{ margin: '2px 0 2px 0' }}>
-                        <PopoverSpan>Punkty ECTS:</PopoverSpan> 2
                       </p>
+                      <p style={{ margin: '2px 0 2px 0', color:"green"}}>
+                      <b>{groups[index].isAccepted===true && "Przedmiot został zaakceptowany"}</b>
+                      </p>                      
+                      
                     </div>
                   </Popover>
                 </Fragment>

src/components/SelectMenu.tsx

@@ -24,6 +24,7 @@ const Wrapper = styled.div`
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
   user-select: none;
+  z-index:100;
 `;
 const Header = styled.div`
   display: flex;

src/components/Statistics.tsx

@@ -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 { ReactComponent as Expand } from '../assets/expand.svg';
 import { Course, Group, GroupType } from '../types/index';
@@ -8,6 +8,8 @@ import { makeStyles } from '@material-ui/core/styles';
 import DeleteIcon from '@material-ui/icons/Delete';
 import { useMemo } from 'react';
 import { dayMapping } from '../constants';
+import { axiosInstance } from '../utils/axiosInstance';
+import { SyncLoader } from 'react-spinners';
 
 const StatisticsWrapper = styled.div`
   display: flex;
@@ -25,70 +27,144 @@ const Row = styled.div`
 `;
 
 const StatisticBox = styled.div`
-background-color:white;
-  width: 200px;
-  height: 200px;
-  margin: 10px;
-  border: 1px solid #000000;
-  border-radius: 38px;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: center;
   align-items: center;
-  font-size: 22px;
+  z-index: 20000;
-  padding:2px;
+  font-size: 0.65vw;
-  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
+  line-height: normal;
+  border-radius: 2px;
+  width: 200px;
+  height: 200px;
+  margin: 5px;
+  padding: 5px 5px 0 5px;
+  text-align: center;
+  background-color: #ffe485;
+  box-shadow: 3px 3px 5px 0px rgba(189, 189, 189, 1);
 `;
 
 const StatisticNumber = styled.p`
   font-size: 52px;
   margin-top: 40px;
-  margin-bottom:0px;
+  margin-bottom: 0px;
 `;
 
 const StatisticText = styled.p`
   font-size: 18px;
-  text-align:center;
+  text-align: center;
-  align-items:center;
+  align-items: center;
-  justify-content:center;
+  justify-content: center;
 `;
 
 export const Statistics = () => {
-  return (
+  const [createdGroupsNumber, setCreatedGroupsNumber] = useState('');
-    <StatisticsWrapper>
+  const [fullGroupsNumber, setFullGroupsNumber] = useState('');
-      <Row>
+  const [registeredStudentsNumber, setRegisteredStudentsNumber] = useState('');
-        <StatisticBox>
+  const [notRegisteredStudentsNumber, setNotRegisteredStudentsNumber] = useState('');
-          <StatisticNumber>65</StatisticNumber>
+  const [acceptedStudentsNumber, setAcceptedStudentsNumber] = useState('');
-          <StatisticText>Utworzonych grup</StatisticText>
+  const [partlyAcceptedStudentsNumber, setPartlyAcceptedStudentsNumber] = useState('');
-        </StatisticBox>
+  const [loaded, setLoaded] = useState(false);
-        <StatisticBox>
+
-          {' '}
+  const getCreatedGroupsNumber = async () => {
-          <StatisticNumber>280</StatisticNumber>
+    try {
-          <StatisticText>Zapisanych studentów do grup</StatisticText>
+      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/statistics/groups/created`);
-        </StatisticBox>
+      setCreatedGroupsNumber(data.ammount);
-        <StatisticBox>
+    } catch (e) {
-          {' '}
+      console.log(e);
-          <StatisticNumber>24</StatisticNumber>
+    }
-          <StatisticText>Studentów niezapisanych do żadnej grupy</StatisticText>
+  };
-        </StatisticBox>
+
-      </Row>
+  const getFullGroupsNumber = async () => {
-      <Row>
+    try {
-        <StatisticBox>
+      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/statistics/groups/full`);
-          {' '}
+      setFullGroupsNumber(data.ammount);
-          <StatisticNumber>150</StatisticNumber>
+    } catch (e) {
-          <StatisticText>Studentów z zaakceptowanym planem</StatisticText>
+      console.log(e);
-        </StatisticBox>
+    }
-        <StatisticBox>
+  };
-          {' '}
+
-          <StatisticNumber>130</StatisticNumber>
+  const getRegisteredStudentsNumber = async () => {
-          <StatisticText>Studentów bez zaakceptowanego pełengo planu</StatisticText>
+    try {
-        </StatisticBox>
+      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/statistics/groups/full`);
-        <StatisticBox>
+      setRegisteredStudentsNumber(data.ammount);
-          {' '}
+    } catch (e) {
-          <StatisticNumber>0</StatisticNumber>
+      console.log(e);
-          <StatisticText>Zamkniętych grup</StatisticText>
+    }
-        </StatisticBox>
+  };
-      </Row>
+
-    </StatisticsWrapper>
+  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(() => {
+    Promise.all([
+      getCreatedGroupsNumber(),
+      getFullGroupsNumber(),
+      getRegisteredStudentsNumber(),
+      getNotRegisteredStudentsNumber(),
+      getAcceptedStudentsNumber(),
+      getPartlyAcceptedStudentsNumber(),
+    ]).then(()=>{setLoaded(true);});
+
+    
+  }, []);
+
+  return <StatisticsWrapper>{loaded === false ? <SyncLoader />:<><Row>
+    <StatisticBox>
+      <StatisticNumber>{createdGroupsNumber}</StatisticNumber>
+      <StatisticText>Utworzonych grup</StatisticText>
+    </StatisticBox>
+    <StatisticBox>
+      {' '}
+      <StatisticNumber>{registeredStudentsNumber}</StatisticNumber>
+      <StatisticText>Zapisanych studentów do grup</StatisticText>
+    </StatisticBox>
+    <StatisticBox>
+      {' '}
+      <StatisticNumber>{notRegisteredStudentsNumber}</StatisticNumber>
+      <StatisticText>Studentów niezapisanych do żadnej grupy</StatisticText>
+    </StatisticBox>
+  </Row>
+    <Row>
+      <StatisticBox>
+        {' '}
+        <StatisticNumber>{acceptedStudentsNumber}</StatisticNumber>
+        <StatisticText>Studentów z zaakceptowanym planem</StatisticText>
+      </StatisticBox>
+      <StatisticBox>
+        {' '}
+        <StatisticNumber>{partlyAcceptedStudentsNumber}</StatisticNumber>
+        <StatisticText>Studentów bez zaakceptowanego pełengo planu</StatisticText>
+      </StatisticBox>
+      <StatisticBox>
+        {' '}
+        <StatisticNumber>{fullGroupsNumber}</StatisticNumber>
+        <StatisticText>Grup z zajętymi wszystkimi miejscami</StatisticText>
+      </StatisticBox>
+    </Row></>}
+  </StatisticsWrapper>;
 };

src/components/Topbar.tsx

@@ -9,7 +9,8 @@ import ClickAwayListener from 'react-click-away-listener';
 import { SelectMenu } from './SelectMenu';
 import { studentsContext } from '../contexts/StudentsProvider';
 import { CASContext } from '../contexts/CASProvider';
-import { render } from 'react-dom';
+import Tooltip from '@material-ui/core/Tooltip';
+import LogoPlanNaPlan from '../assets/logo.svg';
 
 const Topbar = styled.div`
   background-color: #e3e5ed;
@@ -175,10 +176,12 @@ export default function ({ handleTransfer }: TopbarProps) {
     }
   }, [clearInput, handleClearInput]);
 
+  const userPrivilige = localStorage.getItem('userPrivilige');
+
   return (
     <Topbar>
       <LogoWrapper>
-        <Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
+        <Logo alt="logo" src={LogoPlanNaPlan} />
         <Text> plan na plan </Text>
       </LogoWrapper>
       <FlexboxColumn>
@@ -212,12 +215,18 @@ export default function ({ handleTransfer }: TopbarProps) {
         </ClickAwayListener>
       </FlexboxColumn>
       <IconWrapper>
-        <SelectedStudent>{selectedStudent?.email.replace(/@st.amu.edu.pl/, '')}</SelectedStudent>
+        <SelectedStudent>{selectedStudent?.surname === '' ? selectedStudent?.email.replace(/@st.amu.edu.pl/, '') : selectedStudent?.surname}</SelectedStudent>
-
         {/* <Text>Maciej Głowacki</Text> */}
-        <Icon alt="transfer" src={TransferIcon} onClick={handleTransfer} />
+        {userPrivilige === 'STUDENT' && (
+          <Tooltip title="Wymiana grupami">
+            <Icon alt="transfer" src={TransferIcon} onClick={handleTransfer} />
+          </Tooltip>
+        )}
         {/* <Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} /> */}
-        <Icon alt="logout" src={LogoutIcon} onClick={logout} />
+        <Tooltip title="Wyloguj">
+          <Icon alt="logout" src={LogoutIcon} onClick={logout} />
+        </Tooltip>
+
         {/* <Profile anchorEl={anchorEl} handleClose={handleCloseProfile} /> */}
       </IconWrapper>
     </Topbar>

src/components/Transfer.tsx

@@ -12,6 +12,7 @@ import { DropdownModal } from './DropdownModal';
 import { dayMapping } from '../constants';
 import TransferIcon from '../assets/switch.svg';
 import DeleteIcon from '@material-ui/icons/Delete';
+import InformationIcon from '../assets/information.svg';
 
 interface TransferProps {
   handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -35,12 +36,9 @@ const TransferStyled = styled.div`
   outline: none;
   min-width: 35%;
   height: 70%;
-  padding-top: 40px;
   background: white;
-  box-shadow: 0px 0px 0px 4px #006b96;
   margin: 0 auto;
   border-radius: 5px;
-  letter-spacing: 0.2ch;
 `;
 
 const BinIcon = styled(DeleteIcon)`
@@ -56,6 +54,7 @@ const InputWrapper = styled.div`
   display: flex;
   flex-direction: row;
   flex: 1;
+  margin-top:40px;
 `;
 
 const TransferGiveStyled = styled.div`
@@ -112,7 +111,6 @@ const SaveButton = styled.div`
   line-height: normal;
   &:hover {
     color: #ffffff;
-    box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24);
   }
 
   &:active {
@@ -120,7 +118,7 @@ const SaveButton = styled.div`
   }
 
   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`
@@ -138,7 +136,7 @@ const ExchangesWrapper = styled.div`
     border-radius: 10px;
     background-color: #4b4b4b;
   }
-  border-top: 1px solid;
+  border-top: 1px solid #b8b8b8;
 `;
 
 const ExchangesRow = styled.div`
@@ -150,23 +148,41 @@ const ExchangesRow = styled.div`
 
 const Icon = styled.img`
   width: 20px;
-  cursor: pointer;
+`;
+
+const Information = styled.img`
+  width: 35px;
 `;
 
 const Exchange = styled.div`
+  display: flex;
+  flex-direction: column;
   background-color: #b5d2e0;
-  border-radius: 10px;
+  border-radius: 2px;
   width: 280px;
   margin: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 0.5rem;
+  line-height:2;
 `;
 
+const ExchangeTitle = styled.p`
+  font-size: 16px;
+  font-weight: bold;
+  
+  margin:0;
+`;
 
+const ExchangeParagraph = styled.p`
+  font-size: 13px;
+  color: #1a1a1a;
+  margin:0;
+`;
 
 export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
-  const { basket, selectBasketCourses } = useContext(coursesContext)!;
+  const { basket, tour, selectBasketCourses } = useContext(coursesContext)!;
   // const basketCourseGroups = useMemo(() => selectBasketCourseGroups(course.name), []);
   const basketCourses = selectBasketCourses();
 
@@ -245,18 +261,6 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
     setSave(!save);
   };
 
-  const getExchange = async (event: MouseEvent) => {
-    const target = event.currentTarget;
-    try {
-      const response = await axiosInstance.post(
-        `${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/${target.id}`,
-      );
-    } catch (e) {
-      console.log(e);
-    }
-
-  };
-
   const deleteExchange = async (id: number) => {
     try {
       const response = await axiosInstance.delete(`${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/${id}`);
@@ -276,117 +280,132 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
         aria-describedby="simple-modal-description"
       >
         <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>
       </Modal>
     </div>

src/contexts/CASProvider.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, createContext, ReactNode } from 'react';
 import { LoggedUser } from '../types';
-import { axiosInstance } from '../utils/axiosInstance';
+import { axiosInstance, getNewTokens } from '../utils/axiosInstance';
+
 
 export interface CASContext {
   user: LoggedUser | undefined;
@@ -42,6 +43,9 @@ export const CASProvider = ({ children }: CASProviderProps) => {
           localStorage.setItem('refreshToken', user.refreshToken);
           setIsFetchingToken(false);
         }
+        else{
+          getNewTokens();
+        }
         const token = localStorage.getItem('userToken');
         const refreshToken = localStorage.getItem('refreshToken');
         const role = localStorage.getItem('userPrivilige');

src/contexts/CoursesProvider.tsx

@@ -21,6 +21,9 @@ interface CourseContext {
   userID: string;
   isDataLoading: boolean;
   historyBasket: Array<Basket>;
+  tour: string;
+  isSavingLoading: boolean;
+  getCurrentTour: () => void;
   addCourseToBasket: (courses: Course) => void;
   changeHoveredGroup: (group: Group | null) => void;
   changeGroupInBasket: (group: any, courseId: number) => void;
@@ -57,6 +60,8 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   const [userID, setUserID] = useState('');
   const [hoveredGroup, setHoveredGroup] = useState<Group | undefined | null>(null);
   const [isDataLoading, setIsDataLoading] = useState(false);
+  const [tour, setTour] = useState('');
+  const [isSavingLoading, setIsSavingLoading] = useState(false);
 
   const selectBasketIds = () => {
     const classesIds = basket.map((course) => course?.classes?.id).filter((course) => course !== undefined);
@@ -76,12 +81,12 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
 
   const selectSchedulerEvents = () => {
     return basket.reduce((res, el) => {
-      const { name } = el;
+      const { name, symbol } = el;
       if (el.classes) {
-        res.push({ ...el.classes, name });
+        res.push({ ...el.classes, name, symbol});
       }
       if (el.lecture) {
-        res.push({ ...el.lecture, name });
+        res.push({ ...el.lecture, name, symbol });
       }
       return res;
     }, [] as Array<SchedulerEvent>);
@@ -122,6 +127,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
     const courseToBasket: Basket = {
       name: course.name,
       id: course.id,
+      symbol: course.symbol,
       classes: course.classes !== undefined ? course.classes[0] : undefined,
       lecture: course.lectures !== undefined ? course.lectures[0] : undefined,
     };
@@ -139,6 +145,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   };
 
   const saveBasket = async (userID: string) => {
+    setIsSavingLoading(true);
     const basketIds = selectBasketIds();
     const action = (key: any) => (
       <>
@@ -161,12 +168,13 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
       });
     } catch (e) {
       console.log('error: ', e);
-      enqueueSnackbar('Zapisywanie planu nie powiodło się', {
+      enqueueSnackbar('Zapisywanie niemożliwe w czasie bezturowym', {
         variant: 'error',
         action,
       });
     }
     getStudentTimetablesHistory(userID);
+    setIsSavingLoading(false);
   };
 
   const changeGroupInBasket = (choosenGroup: any, courseId: number) => {
@@ -274,9 +282,19 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
     setHistoryBasket(basket);
   };
 
+  const getCurrentTour = async () => {
+    try {
+      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/configurator/config/tour`);
+      setTour(data.currentTour);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   useEffect(() => {
     setIsDataLoading(true);
     setTimeout(() => {
+      getCurrentTour();
       fetchCourses();
       getNewestTimetable();
       setIsDataLoading(false);
@@ -293,6 +311,9 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
         timetableHistory,
         isDataLoading,
         historyBasket,
+        tour,
+        isSavingLoading,
+        getCurrentTour,
         addCourseToBasket,
         changeHoveredGroup,
         changeGroupInBasket,

src/types/index.ts

@@ -6,6 +6,7 @@ export enum GroupType {
 export interface Basket {
   id: number;
   name: string;
+  symbol?:string;
   lecture?: Group;
   classes?: Group;
 }
@@ -20,11 +21,14 @@ export interface Group {
   type: GroupType;
   capacity?: number;
   takenPlaces: number;
+  isAccepted:boolean;
+  grNr: number;
 }
 
 export interface Course {
   id: number;
   name: string;
+  symbol:string;
   lectures?: Array<Group>;
   classes?: Array<Group>;
 }
@@ -53,6 +57,9 @@ export interface SchedulerEvent {
   capacity?: number;
   takenPlaces: number;
   name: string;
+  isAccepted:boolean;
+  grNr?: number;
+  symbol?:string;
 }
 
 export interface TimetableHistory {

src/utils/axiosInstance.ts

@@ -3,12 +3,13 @@ import axios from 'axios';
 export const axiosInstance = axios.create();
 
 //getting new tokens
-const getNewTokens = async () => {
+export const getNewTokens = async () => {
   try {
     const refreshToken = localStorage.getItem('refreshToken');
     const { data } = await axiosInstance.get(
       `${process.env.REACT_APP_API_URL}/token/refresh?refreshToken=${refreshToken}`,
     );
+    localStorage.setItem('userPrivilige',data.authorityRole);
     localStorage.setItem('userToken', data.token);
     localStorage.setItem('refreshToken', data.refreshToken);
     return data.token;