From 62f9d3c5d9a85576994e43514064ee8b17372c9c Mon Sep 17 00:00:00 2001
From: Dorian Zedler <dorian@itsblue.de>
Date: Fri, 29 Jul 2022 13:31:00 +0200
Subject: [PATCH] Feat: Show startnumber and improove style

---
 src/models/Participant.tsx       |   3 +
 src/pages/SpeedFlowchartPage.tsx | 109 ++++++++++++++++++++++++-------
 2 files changed, 87 insertions(+), 25 deletions(-)

diff --git a/src/models/Participant.tsx b/src/models/Participant.tsx
index 9207f91..98b6c33 100644
--- a/src/models/Participant.tsx
+++ b/src/models/Participant.tsx
@@ -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),
   };
 }
diff --git a/src/pages/SpeedFlowchartPage.tsx b/src/pages/SpeedFlowchartPage.tsx
index 5dac39e..e61d6ea 100644
--- a/src/pages/SpeedFlowchartPage.tsx
+++ b/src/pages/SpeedFlowchartPage.tsx
@@ -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
-                        sx={{
-                          fontWeight: pair.winner === 'A' ? 'bold' : 'plain',
-                          color: pair.winner === 'A' ? '#4CAF50' : '',
-                        }}
-                      >
-                        A: {pair.laneA?.participant.firstName}{' '}
-                        {pair.laneA?.participant.lastName}:{' '}
-                        {pair.laneA?.result?.result}
-                      </Typography>
-                      <Typography
-                        sx={{
-                          fontWeight: pair.winner === 'B' ? 'bold' : 'plain',
-                          color: pair.winner === 'B' ? '#4CAF50' : '',
-                        }}
-                      >
-                        B: {pair.laneB?.participant.firstName}{' '}
-                        {pair.laneB?.participant.lastName}:{' '}
-                        {pair.laneB?.result?.result}
-                      </Typography>
+                    <CardContent
+                      sx={{
+                        padding: '10px !important',
+                      }}
+                    >
+                      <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={{
+                                    ...textStyle,
+                                    overflow: 'clip',
+                                    whiteSpace: 'nowrap',
+                                    maxWidth: '80%',
+                                    textOverflow: 'ellipsis',
+                                  }}
+                                >
+                                  {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>