From 62f50cc9a680884bdd873672be2dc80d8e536b55 Mon Sep 17 00:00:00 2001 From: wrzesinski-hubert Date: Fri, 22 Jan 2021 19:52:31 +0100 Subject: [PATCH 1/4] tours and css changes --- src/assets/information.svg | 44 +++++ src/assets/tick.svg | 38 +++++ src/components/CourseCard.tsx | 2 +- src/components/Rightbar.tsx | 4 +- src/components/SchedulerRow.tsx | 25 ++- src/components/Statistics.tsx | 99 +++++++++-- src/components/Topbar.tsx | 4 +- src/components/Transfer.tsx | 278 +++++++++++++++++-------------- src/contexts/CoursesProvider.tsx | 1 + src/types/index.ts | 2 + 10 files changed, 347 insertions(+), 150 deletions(-) create mode 100644 src/assets/information.svg create mode 100644 src/assets/tick.svg diff --git a/src/assets/information.svg b/src/assets/information.svg new file mode 100644 index 0000000..c040bab --- /dev/null +++ b/src/assets/information.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/tick.svg b/src/assets/tick.svg new file mode 100644 index 0000000..5b3290e --- /dev/null +++ b/src/assets/tick.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index 8404274..3aed643 100644 --- a/src/components/CourseCard.tsx +++ b/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` diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx index eb82fe1..518eb1a 100644 --- a/src/components/Rightbar.tsx +++ b/src/components/Rightbar.tsx @@ -37,14 +37,12 @@ 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 = () => { diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index e5aaf58..a95dcf2 100644 --- a/src/components/SchedulerRow.tsx +++ b/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` 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` css` transition: background-color ease-in 0.4s; `} - transition: background-color ease-out 0.4s; - box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75); + transition: background-color ease-out 0.4s; + 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) => { const groupsPerDay: any = { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0 }; for (const group of groups) { @@ -185,10 +195,12 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight } = 3}>{groups[index].name} {groupsPerDay[group.day] < 3 ? ( + {groups[index].isAccepted===true && }
{`${groups[index].time}-${groups[index].endTime}`}
{groups[index].takenPlaces}/{groups[index].capacity}
+ ) : ( @@ -232,9 +244,10 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }

Kod grupy: FVJ753

-

- Punkty ECTS: 2 -

+

+ {String(groups[index].isAccepted)==="false"?"":"Przedmiot został zaakceptowany"} +

+ diff --git a/src/components/Statistics.tsx b/src/components/Statistics.tsx index ff4901a..5cac9da 100644 --- a/src/components/Statistics.tsx +++ b/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,7 @@ 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'; const StatisticsWrapper = styled.div` display: flex; @@ -25,7 +26,7 @@ const Row = styled.div` `; const StatisticBox = styled.div` -background-color:white; + background-color: white; width: 200px; height: 200px; margin: 10px; @@ -36,57 +37,127 @@ background-color:white; justify-content: space-around; align-items: center; font-size: 22px; - padding:2px; + padding: 2px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75); `; 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; - align-items:center; - justify-content:center; + text-align: center; + align-items: center; + justify-content: center; `; 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 ( - 65 + {createdGroupsNumber} Utworzonych grup {' '} - 280 + {registeredStudentsNumber} Zapisanych studentów do grup {' '} - 24 + {notRegisteredStudentsNumber} Studentów niezapisanych do żadnej grupy {' '} - 150 + {acceptedStudentsNumber} Studentów z zaakceptowanym planem {' '} - 130 + {partlyAcceptedStudentsNumber} Studentów bez zaakceptowanego pełengo planu {' '} - 0 - Zamkniętych grup + {fullGroupsNumber} + Grup z zajętymi wszystkimi miejscami diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx index 38c2bd9..1bf1a7b 100644 --- a/src/components/Topbar.tsx +++ b/src/components/Topbar.tsx @@ -175,6 +175,8 @@ export default function ({ handleTransfer }: TopbarProps) { } }, [clearInput, handleClearInput]); + const userPrivilige = localStorage.getItem('userPrivilige'); + return ( @@ -215,7 +217,7 @@ export default function ({ handleTransfer }: TopbarProps) { {selectedStudent?.email.replace(/@st.amu.edu.pl/, '')} {/* Maciej Głowacki */} - + {userPrivilige==="STUDENT" && } {/* */} {/* */} diff --git a/src/components/Transfer.tsx b/src/components/Transfer.tsx index 7b8da55..a1193ca 100644 --- a/src/components/Transfer.tsx +++ b/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) => void; @@ -35,12 +36,10 @@ 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; + letter-spacing: 0.1ch; `; const BinIcon = styled(DeleteIcon)` @@ -56,6 +55,7 @@ const InputWrapper = styled.div` display: flex; flex-direction: row; flex: 1; + margin-top:40px; `; const TransferGiveStyled = styled.div` @@ -112,7 +112,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 +119,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 +137,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,20 +149,35 @@ 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: 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) => { const { basket, selectBasketCourses } = useContext(coursesContext)!; @@ -181,6 +195,7 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => { const [groups, setGroups] = useState([]); const [exchanges, setExchanges] = useState(null); const [save, setSave] = useState(false); + const [tour, setTour] = useState(null); // const allGroups const handleSelectedAssignmentsGroupChange = (event: React.ChangeEvent<{ value: unknown }>) => { setSelectedAssignmentsClasses(event.target.value as any); @@ -228,6 +243,7 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => { } }; getExchanges(); + getCurrentTour(); getAssignmentsGroups(); }, [isTransferOpen, save]); @@ -245,16 +261,13 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => { setSave(!save); }; - const getExchange = async (event: MouseEvent) => { - const target = event.currentTarget; + const getCurrentTour = async () => { try { - const response = await axiosInstance.post( - `${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/${target.id}`, - ); + 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) => { @@ -276,117 +289,132 @@ export const Transfer = ({ handleClose, isTransferOpen }: TransferProps) => { aria-describedby="simple-modal-description" > - - - - Oddam - - - - - - - - {' '} - { - createExchange([selectedAssignmentsClasses.id, selectedGroup.id]); - }} - > - Zaproponuj wymianę - - - - Przyjmę - - - - - - - - - - {exchanges ? ( - exchanges.map((name: any, index: number) => ( - - {' '} - - {name.ownedAssignment.lecturer}

{dayMapping[name.ownedAssignment.day]}

{' '} - {name.ownedAssignment.time} - {name.ownedAssignment.endTime} - - - - {name.desiredGroup.lecturer}

{dayMapping[name.desiredGroup.day]}

{' '} - {name.desiredGroup.time} - {name.desiredGroup.endTime} - {' '} - { - e.stopPropagation(); - const id = Number(e.currentTarget.id); - deleteExchange(id); - }} - id={name.id} - > - - )) - ) : ( -
- )} - - + {tour === 'FIRST_TOUR' ? ( + + +

Wymiana przedmiotami jest dostępna dopiero podczas drugiej tury

+

Wymianie podlegają tylko zaakceptowane grupy przedmiotów

+

Wymiana grupami odbywa się tylko w obrębie danego przedmiotu

 + ) : ( + + + + Oddam + + + + + + + + {' '} + { + createExchange([selectedAssignmentsClasses.id, selectedGroup.id]); + }} + > + Zaproponuj wymianę + + + + Przyjmę + + + + + + + + + {exchanges ? ( + exchanges.map((name: any, index: number) => ( + + {' '} + + {name.courseName} + {name.ownedAssignment.lecturer} + {dayMapping[name.ownedAssignment.day]} + + {name.ownedAssignment.time} - {name.ownedAssignment.endTime} + + + + + {name.courseName} + {name.desiredGroup.lecturer} + {dayMapping[name.desiredGroup.day]} + + {name.desiredGroup.time} - {name.desiredGroup.endTime} + + {' '} + { + e.stopPropagation(); + const id = Number(e.currentTarget.id); + deleteExchange(id); + }} + id={name.id} + > + + )) + ) : ( +
+ )} + + + )} diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index d926594..09b6e12 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -205,6 +205,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { ); const basket = data === '' ? [] : data; setBasket(basket); + console.log("basket:",basket); } catch (e) { console.log(e); } diff --git a/src/types/index.ts b/src/types/index.ts index 9fcf290..7b823f1 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -20,6 +20,7 @@ export interface Group { type: GroupType; capacity?: number; takenPlaces: number; + isAccepted:boolean; } export interface Course { @@ -53,6 +54,7 @@ export interface SchedulerEvent { capacity?: number; takenPlaces: number; name: string; + isAccepted:boolean; } export interface TimetableHistory { From e16caff82f3739c738f0b173474c151c9da1295a Mon Sep 17 00:00:00 2001 From: wrzesinski-hubert Date: Fri, 22 Jan 2021 21:28:17 +0100 Subject: [PATCH 2/4] stats --- src/components/Statistics.tsx | 115 ++++++++++++++++++---------------- 1 file changed, 62 insertions(+), 53 deletions(-) diff --git a/src/components/Statistics.tsx b/src/components/Statistics.tsx index 5cac9da..26a8c87 100644 --- a/src/components/Statistics.tsx +++ b/src/components/Statistics.tsx @@ -9,6 +9,7 @@ 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; @@ -26,19 +27,21 @@ 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; - padding: 2px; - box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75); + z-index: 20000; + font-size: 0.65vw; + 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` @@ -61,6 +64,7 @@ export const Statistics = () => { const [notRegisteredStudentsNumber, setNotRegisteredStudentsNumber] = useState(''); const [acceptedStudentsNumber, setAcceptedStudentsNumber] = useState(''); const [partlyAcceptedStudentsNumber, setPartlyAcceptedStudentsNumber] = useState(''); + const [loaded, setLoaded] = useState(false); const getCreatedGroupsNumber = async () => { try { @@ -117,49 +121,54 @@ export const Statistics = () => { }; useEffect(() => { - getCreatedGroupsNumber() - getFullGroupsNumber() - getRegisteredStudentsNumber() - getNotRegisteredStudentsNumber() - getAcceptedStudentsNumber() - getPartlyAcceptedStudentsNumber() + Promise.all([ + getCreatedGroupsNumber(), + getFullGroupsNumber(), + getRegisteredStudentsNumber(), + getNotRegisteredStudentsNumber(), + getAcceptedStudentsNumber(), + getPartlyAcceptedStudentsNumber(), + ]).then(()=>{setLoaded(true);}); + + }, []); - return ( - - - - {createdGroupsNumber} - Utworzonych grup - - - {' '} - {registeredStudentsNumber} - Zapisanych studentów do grup - - - {' '} - {notRegisteredStudentsNumber} - Studentów niezapisanych do żadnej grupy - - - - - {' '} - {acceptedStudentsNumber} - Studentów z zaakceptowanym planem - - - {' '} - {partlyAcceptedStudentsNumber} - Studentów bez zaakceptowanego pełengo planu - - - {' '} - {fullGroupsNumber} - Grup z zajętymi wszystkimi miejscami - - - - ); + useEffect(() => { + console.log(loaded); + }, [loaded]); + + return {loaded === false ? :<> + + {createdGroupsNumber} + Utworzonych grup + + + {' '} + {registeredStudentsNumber} + Zapisanych studentów do grup + + + {' '} + {notRegisteredStudentsNumber} + Studentów niezapisanych do żadnej grupy + + + + + {' '} + {acceptedStudentsNumber} + Studentów z zaakceptowanym planem + + + {' '} + {partlyAcceptedStudentsNumber} + Studentów bez zaakceptowanego pełengo planu + + + {' '} + {fullGroupsNumber} + Grup z zajętymi wszystkimi miejscami + + } + ; }; From ec1012b3a0452c1e259abd3ce242fb9abaf2ec33 Mon Sep 17 00:00:00 2001 From: wrzesinski-hubert Date: Fri, 22 Jan 2021 22:31:52 +0100 Subject: [PATCH 3/4] fix something --- src/components/SchedulerRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index a95dcf2..8de8b40 100644 --- a/src/components/SchedulerRow.tsx +++ b/src/components/SchedulerRow.tsx @@ -245,7 +245,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight } Kod grupy: FVJ753

- {String(groups[index].isAccepted)==="false"?"":"Przedmiot został zaakceptowany"} + {groups[index].isAccepted===true && "Przedmiot został zaakceptowany"}

From 4d5c2f8d28d96e55a8f9fdac7a9d645286f7cfa1 Mon Sep 17 00:00:00 2001 From: Maciej Date: Sat, 23 Jan 2021 15:14:01 +0100 Subject: [PATCH 4/4] Update 'src/contexts/CoursesProvider.tsx' --- src/contexts/CoursesProvider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index 09b6e12..d926594 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -205,7 +205,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { ); const basket = data === '' ? [] : data; setBasket(basket); - console.log("basket:",basket); } catch (e) { console.log(e); }