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

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

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/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;
@@ -46,13 +47,13 @@ const SaveButton = styled.div`
 `;
 
 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

@@ -204,6 +204,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
                         </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>
@@ -239,10 +240,10 @@ 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', color:"green"}}>
                       <b>{groups[index].isAccepted===true && "Przedmiot został zaakceptowany"}</b>

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

@@ -133,10 +133,6 @@ export const Statistics = () => {
     
   }, []);
 
-  useEffect(() => {
-    console.log(loaded);
-  }, [loaded]);
-
   return <StatisticsWrapper>{loaded === false ? <SyncLoader />:<><Row>
     <StatisticBox>
       <StatisticNumber>{createdGroupsNumber}</StatisticNumber>

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;
@@ -180,7 +181,7 @@ export default function ({ handleTransfer }: TopbarProps) {
   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>
@@ -214,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> */}
-        {userPrivilige==="STUDENT" && <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

@@ -39,7 +39,6 @@ const TransferStyled = styled.div`
   background: white;
   margin: 0 auto;
   border-radius: 5px;
-  letter-spacing: 0.1ch;
 `;
 
 const BinIcon = styled(DeleteIcon)`
@@ -166,21 +165,24 @@ const Exchange = styled.div`
   align-items: center;
   justify-content: center;
   padding: 0.5rem;
-  line-height: 0;
+  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();
 
@@ -195,7 +197,6 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
   const [groups, setGroups] = useState<any>([]);
   const [exchanges, setExchanges] = useState<any>(null);
   const [save, setSave] = useState(false);
-  const [tour, setTour] = useState<any>(null);
   // const allGroups
   const handleSelectedAssignmentsGroupChange = (event: React.ChangeEvent<{ value: unknown }>) => {
     setSelectedAssignmentsClasses(event.target.value as any);
@@ -243,7 +244,6 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
       }
     };
     getExchanges();
-    getCurrentTour();
     getAssignmentsGroups();
   }, [isTransferOpen, save]);
 
@@ -261,15 +261,6 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => {
     setSave(!save);
   };
 
-  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);
-    }
-  };
-
   const deleteExchange = async (id: number) => {
     try {
       const response = await axiosInstance.delete(`${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/${id}`);

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;
 }
@@ -21,11 +22,13 @@ export interface Group {
   capacity?: number;
   takenPlaces: number;
   isAccepted:boolean;
+  grNr: number;
 }
 
 export interface Course {
   id: number;
   name: string;
+  symbol:string;
   lectures?: Array<Group>;
   classes?: Array<Group>;
 }
@@ -55,6 +58,8 @@ export interface SchedulerEvent {
   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;