In tournament view: Iterate over stages and write method for level name

This commit is contained in:
Felix Hamme 2018-12-11 13:52:39 +01:00
parent 8cc2647258
commit a9f38ce6f6
1 changed files with 20 additions and 11 deletions

View File

@ -22,14 +22,15 @@ import '../static/css/tournament.css'
import {getRequest} from '../js/api'; import {getRequest} from '../js/api';
function Tournament(props) { function Tournament(props) {
let matches = [ let demoMatches = [
{scoreTeam1: 1, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'in_progress'}, {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'in_progress', id: 0},
{scoreTeam1: 3, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'team1_won'}, {scoreTeam1: 3, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'team1_won', id: 1},
{scoreTeam1: 1, team1: 'Eins', scoreTeam2: 3, team2: 'Zwei', state: 'team2_won'}, {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 3, team2: 'Zwei', state: 'team2_won', id: 2},
{scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'single_team'}, {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'single_team', id: 3},
{scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'not_ready'}, {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'not_ready', id: 4},
{scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'not_started'}, {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'not_started', id: 5},
{scoreTeam1: 2, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'undecided'}]; {scoreTeam1: 2, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'undecided', id: 6}];
let stages = [{level: 0, matches: demoMatches}, {level: 1, matches: demoMatches}];
return ( return (
<div> <div>
<Container> <Container>
@ -43,13 +44,21 @@ function Tournament(props) {
</ListGroup> </ListGroup>
</Container> </Container>
<div className='stages pt-5'> <div className='stages pt-5'>
<Stage level={'Viertelfinale'} matches={matches}/> {stages.map(stage => <Stage level={getLevelName(stage.level)} matches={stage.matches} key={stage.level}/>)}
<Stage level={'Achtelfinale'} matches={matches}/>
</div> </div>
</div> </div>
); );
} }
function getLevelName(levelNumber) {
const names = ['Finale', 'Halbfinale', 'Viertelfinale', 'Achtelfinale'];
if(levelNumber < names.length){
return names[levelNumber]
}else {
return Math.pow(2, levelNumber) + 'tel-Finale'
}
}
function TournamentContainer(props) { function TournamentContainer(props) {
if (props.data === null) { if (props.data === null) {
return <Container>null</Container> return <Container>null</Container>
@ -64,7 +73,7 @@ function Stage(props) {
<h1 className='custom-font'>{props.level}</h1> <h1 className='custom-font'>{props.level}</h1>
<Row> <Row>
{props.matches.map((match => ( {props.matches.map((match => (
<Col className='minw-25'><Match match={match}/></Col> <Col className='minw-25' key={match.id}><Match match={match}/></Col>
)))} )))}
</Row> </Row>
</Container> </Container>