Compare commits

..

2 commits

Author SHA1 Message Date
b831ab4079
Feat: responsive layout
All checks were successful
continuous-integration/drone/push Build is passing
2022-07-29 00:04:46 +02:00
b690ace6b5
Feat: busy indicator for speed flowchart 2022-07-28 23:55:18 +02:00
3 changed files with 35 additions and 7 deletions

View file

@ -1,4 +1,10 @@
import { AppBar, Toolbar, Container, Typography } from '@mui/material';
import {
AppBar,
Toolbar,
Container,
Typography,
Skeleton,
} from '@mui/material';
import { useContext } from 'react';
import { Link } from 'react-router-dom';
@ -19,6 +25,7 @@ export default function Header() {
<img src='/logo192.png' className='header-icon'></img>
</Link>
<Typography variant='h6'>{title}</Typography>
{title === '' && <Skeleton height={20} width={200}></Skeleton>}
</Toolbar>
</Container>
</AppBar>

View file

@ -5,7 +5,7 @@ import {
convertResultsToSpeedFlowchartResult,
SpeedFlowchartResult,
} from '../data/SpeedFlowchart';
import { Card, CardContent, Grid, Typography } from '@mui/material';
import { Card, CardContent, Grid, Skeleton, Typography } from '@mui/material';
/**
*
@ -15,6 +15,7 @@ export default function SpeedFlowchartPage() {
const { competitionId, categoryId } = useParams();
const { api, setTitle } = useContext(Context);
const [loading, setLoading] = useState(true);
const [flowchartResult, setFlowchartResult] =
useState<SpeedFlowchartResult>();
@ -22,14 +23,18 @@ export default function SpeedFlowchartPage() {
if (competitionId === undefined || categoryId === undefined) {
return;
}
setTitle('');
api.getCompetitionResults(competitionId, categoryId).then(r => {
setTitle(
`${r.comp_name} - ${
r.categorys.filter(cat => cat.GrpId === categoryId)[0].name
r.categorys.filter(cat => cat.GrpId === categoryId)[0]?.name ?? ''
}`,
);
setLoading(false);
console.log('loading false');
const flowchartResult = convertResultsToSpeedFlowchartResult(r);
console.log(flowchartResult);
setFlowchartResult(flowchartResult);
@ -38,9 +43,18 @@ export default function SpeedFlowchartPage() {
return (
<>
<Grid container spacing={2}>
<Grid
container
spacing={2}
direction={{ xs: 'column-reverse', md: 'row' }}
>
{flowchartResult?.rounds.map((round, roundKey) => (
<Grid key={`flowchart-column-${roundKey}`} item xs={12 / 5}>
<Grid
key={`flowchart-column-${roundKey}`}
item
xs={12}
md={12 / flowchartResult.rounds.length}
>
<h3>{round.roundName}</h3>
<Grid container spacing={2}>
{round.pairs.map((pair, pairKey) => (
@ -77,11 +91,18 @@ export default function SpeedFlowchartPage() {
</Grid>
))}
{flowchartResult === undefined && (
{flowchartResult === undefined && !loading && (
<Grid item xs={12} className={'center-children'}>
This competition or category does not have a speed tree!
</Grid>
)}
{loading &&
new Array(5).fill(0).map((_, i) => (
<Grid key={`flowchart-column-skeleton-${i}`} item xs={12 / 5}>
<Skeleton height={50}></Skeleton>
</Grid>
))}
</Grid>
</>
);

View file

@ -12,7 +12,7 @@ export default function PageTemplate(props: { children: JSX.Element }) {
return (
<LocalizationProviderWrapper>
<Container
sx={{ marginTop: '16px' }}
sx={{ marginTop: '16px', marginBottom: '16px' }}
className='root-container'
maxWidth='lg'
>