In tournament view: Iterate over stages and write method for level name
This commit is contained in:
parent
8cc2647258
commit
a9f38ce6f6
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue