y0rune
/
frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

stats

This commit is contained in:
wrzesinski-hubert 2021-01-22 21:28:17 +01:00
parent 62f50cc9a6
commit e16caff82f
1 changed files with 62 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
src/components/Statistics.tsx
View File

@ -9,6 +9,7 @@ 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'; import { axiosInstance } from '../utils/axiosInstance';
import { SyncLoader } from 'react-spinners';
const StatisticsWrapper = styled.div` const StatisticsWrapper = styled.div`
display: flex; display: flex;
@ -26,19 +27,21 @@ const Row = styled.div`
`; `;
const StatisticBox = styled.div` const StatisticBox = styled.div`
background-color: white;
width: 200px;
height: 200px;
margin: 10px;
border: 1px solid #000000;
border-radius: 38px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: center;
align-items: 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` const StatisticNumber = styled.p`
@ -61,6 +64,7 @@ export const Statistics = () => {
const [notRegisteredStudentsNumber, setNotRegisteredStudentsNumber] = useState(''); const [notRegisteredStudentsNumber, setNotRegisteredStudentsNumber] = useState('');
const [acceptedStudentsNumber, setAcceptedStudentsNumber] = useState(''); const [acceptedStudentsNumber, setAcceptedStudentsNumber] = useState('');
const [partlyAcceptedStudentsNumber, setPartlyAcceptedStudentsNumber] = useState(''); const [partlyAcceptedStudentsNumber, setPartlyAcceptedStudentsNumber] = useState('');
const [loaded, setLoaded] = useState(false);
const getCreatedGroupsNumber = async () => { const getCreatedGroupsNumber = async () => {
try { try {
@ -117,49 +121,54 @@ export const Statistics = () => {
}; };
useEffect(() => { useEffect(() => {
getCreatedGroupsNumber() Promise.all([
getFullGroupsNumber() getCreatedGroupsNumber(),
getRegisteredStudentsNumber() getFullGroupsNumber(),
getNotRegisteredStudentsNumber() getRegisteredStudentsNumber(),
getAcceptedStudentsNumber() getNotRegisteredStudentsNumber(),
getPartlyAcceptedStudentsNumber() getAcceptedStudentsNumber(),
getPartlyAcceptedStudentsNumber(),
]).then(()=>{setLoaded(true);});
}, []); }, []);
return ( useEffect(() => {
<StatisticsWrapper> console.log(loaded);
<Row> }, [loaded]);
<StatisticBox>
<StatisticNumber>{createdGroupsNumber}</StatisticNumber> return <StatisticsWrapper>{loaded === false ? <SyncLoader />:<><Row>
<StatisticText>Utworzonych grup</StatisticText> <StatisticBox>
</StatisticBox> <StatisticNumber>{createdGroupsNumber}</StatisticNumber>
<StatisticBox> <StatisticText>Utworzonych grup</StatisticText>
{' '} </StatisticBox>
<StatisticNumber>{registeredStudentsNumber}</StatisticNumber> <StatisticBox>
<StatisticText>Zapisanych studentów do grup</StatisticText> {' '}
</StatisticBox> <StatisticNumber>{registeredStudentsNumber}</StatisticNumber>
<StatisticBox> <StatisticText>Zapisanych studentów do grup</StatisticText>
{' '} </StatisticBox>
<StatisticNumber>{notRegisteredStudentsNumber}</StatisticNumber> <StatisticBox>
<StatisticText>Studentów niezapisanych do żadnej grupy</StatisticText> {' '}
</StatisticBox> <StatisticNumber>{notRegisteredStudentsNumber}</StatisticNumber>
</Row> <StatisticText>Studentów niezapisanych do żadnej grupy</StatisticText>
<Row> </StatisticBox>
<StatisticBox> </Row>
{' '} <Row>
<StatisticNumber>{acceptedStudentsNumber}</StatisticNumber> <StatisticBox>
<StatisticText>Studentów z zaakceptowanym planem</StatisticText> {' '}
</StatisticBox> <StatisticNumber>{acceptedStudentsNumber}</StatisticNumber>
<StatisticBox> <StatisticText>Studentów z zaakceptowanym planem</StatisticText>
{' '} </StatisticBox>
<StatisticNumber>{partlyAcceptedStudentsNumber}</StatisticNumber> <StatisticBox>
<StatisticText>Studentów bez zaakceptowanego pełengo planu</StatisticText> {' '}
</StatisticBox> <StatisticNumber>{partlyAcceptedStudentsNumber}</StatisticNumber>
<StatisticBox> <StatisticText>Studentów bez zaakceptowanego pełengo planu</StatisticText>
{' '} </StatisticBox>
<StatisticNumber>{fullGroupsNumber}</StatisticNumber> <StatisticBox>
<StatisticText>Grup z zajętymi wszystkimi miejscami</StatisticText> {' '}
</StatisticBox> <StatisticNumber>{fullGroupsNumber}</StatisticNumber>
</Row> <StatisticText>Grup z zajętymi wszystkimi miejscami</StatisticText>
</StatisticsWrapper> </StatisticBox>
); </Row></>}
</StatisticsWrapper>;
}; };