bluerock/speed-flowchart-web
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Feat: Show startnumber and improove style
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
Dorian Zedler 2022-07-29 13:31:00 +02:00
parent db4365351a
commit 62f9d3c5d9
Signed by: dorian
GPG key ID: 989DE36109AFA354
2 changed files with 87 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/models/Participant.tsx
View file

@ -5,6 +5,7 @@ export interface ParticipantFromApi {
PerId: string;
firstname: string;
lastname: string;
start_number: string;
result_rank?: number;
['result_rank0']?: string;
['result_rank1']?: string;
@ -21,6 +22,7 @@ export interface Participant {
lastName: string;
results: Result[];
overallRank?: number;
startNumber: number;
}
export interface Result {
@ -73,5 +75,6 @@ export function participantFromApiParticipant(
lastName: fromApi.lastname,
results: results,
overallRank: fromApi.result_rank,
startNumber: parseInt(fromApi.start_number),
};
}

91
src/pages/SpeedFlowchartPage.tsx
View file

@ -4,14 +4,19 @@ import { useParams } from 'react-router-dom';
import {
convertResultsToSpeedFlowchartResult,
SpeedFlowchartResult,
SpeedLane,
SpeedRoundPair,
} from '../data/SpeedFlowchart';
import { Card, CardContent, Grid, Skeleton, Typography } from '@mui/material';
import {
Card,
CardContent,
Chip,
Grid,
Skeleton,
Typography,
} from '@mui/material';
import { theme } from '../utils/Theme';
import { QRCode } from 'react-qrcode-logo';
import { bgcolor } from '@mui/system';
import '../css/SpeedFlowchartPage.css';
interface SpeedRoundPairDummy extends SpeedRoundPair {
dummy: boolean;
}
@ -137,27 +142,81 @@ export default function SpeedFlowchartPage() {
: undefined,
}}
>
<CardContent>
<Typography
<CardContent
sx={{
fontWeight: pair.winner === 'A' ? 'bold' : 'plain',
color: pair.winner === 'A' ? '#4CAF50' : '',
padding: '10px !important',
}}
>
A: {pair.laneA?.participant.firstName}{' '}
{pair.laneA?.participant.lastName}:{' '}
{pair.laneA?.result?.result}
<Grid container spacing={2}>
{[
['A', pair.laneA],
['B', pair.laneB],
].map(([letter, lane]) => {
lane = lane as SpeedLane;
const textStyle = {
fontWeight:
pair.winner === letter ? 'bold' : 'plain',
color: pair.winner === letter ? '#4CAF50' : '',
fontSize: '25px',
};
const gridItemStyle = {
paddingTop:
letter === 'B' ? '0 !important' : undefined,
};
return (
<>
<Grid sx={gridItemStyle} xs={1} item>
<Typography sx={textStyle}>
{lane?.participant.results[0].rank}{' '}
</Typography>
</Grid>
<Grid
sx={{ ...gridItemStyle, display: 'flex' }}
xs={8.5}
item
>
<Typography
sx={{
fontWeight: pair.winner === 'B' ? 'bold' : 'plain',
color: pair.winner === 'B' ? '#4CAF50' : '',
...textStyle,
overflow: 'clip',
whiteSpace: 'nowrap',
maxWidth: '80%',
textOverflow: 'ellipsis',
}}
>
B: {pair.laneB?.participant.firstName}{' '}
{pair.laneB?.participant.lastName}:{' '}
{pair.laneB?.result?.result}
{lane?.participant.firstName}{' '}
{lane?.participant.lastName}
</Typography>
<Chip
label={lane?.participant.startNumber}
sx={{
height: '26px',
marginLeft: '10px',
}}
variant='outlined'
/>
</Grid>
<Grid sx={gridItemStyle} xs={2} item>
<Typography sx={textStyle}>
{' '}
{lane?.result?.result}
</Typography>
</Grid>
{letter === 'A' && (
<Grid
xs={12}
item
sx={{ height: 0, paddingTop: '0 !important' }}
></Grid>
)}
</>
);
})}
</Grid>
</CardContent>
</Card>
</Grid>