turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Resolve conflicts and fix style issues

This commit is contained in:
JP1998 2018-12-12 21:54:07 +01:00
parent e77e3f6dc8
commit 498e0353c1
1 changed files with 123 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

250
pages/tournament.js
View File

@ -1,5 +1,5 @@
import Head from 'next/head' import Head from 'next/head';
import React from 'react' import React from 'react';
import { import {
Button, Button,
Card, Card,
@ -19,16 +19,17 @@ import {
Table Table
} from 'reactstrap'; } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js' import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js';
import '../static/everypage.css' import '../static/everypage.css';
import '../static/css/tournament.css' import '../static/css/tournament.css';
import {getRequest} from '../js/api'; import { getRequest, getState } from '../js/api';
function Tournament(props) { function Tournament(props) {
// TODO: Change href-prop of the anchor tag to contain the tournament code
return ( return (
<div className='pb-5'> <div className='pb-5'>
<Container> <Container>
<a href='edit' className='btn btn-outline-secondary'>Turnier bearbeiten</a> <a href={'/t/' + props.tournament.id + '/edit'} className='btn btn-outline-secondary'>Turnier bearbeiten</a>
<p>{props.tournament.description}</p> <p>{props.tournament.description}</p>
<ListGroup> <ListGroup>
<ListGroupItem> <ListGroupItem>
@ -49,17 +50,17 @@ function Tournament(props) {
function getLevelName(levelNumber) { function getLevelName(levelNumber) {
const names = ['Finale', 'Halbfinale', 'Viertelfinale', 'Achtelfinale']; const names = ['Finale', 'Halbfinale', 'Viertelfinale', 'Achtelfinale'];
if(levelNumber < names.length){ if(levelNumber < names.length){
return names[levelNumber] return names[levelNumber];
}else { }else {
return Math.pow(2, levelNumber) + 'tel-Finale' 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>;
} else { } else {
return <Tournament tournament={props.data.tournament}/> return <Tournament tournament={props.data.tournament}/>;
} }
} }
@ -86,49 +87,44 @@ class Match extends React.Component {
} }
toggleModal() { toggleModal() {
this.setState({modal: !this.state.modal}) this.setState({modal: !this.state.modal});
} }
render() { render() {
let cardClass, team1Class, team2Class, smallMessage, borderClass; let cardClass, smallMessage, borderClass;
//possible states: single_team not_ready not_started in_progress team1_won team2_won undecided //possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
switch (this.props.match.state) { switch (this.props.match.state) {
case 'in_progress': case 'in_progress':
cardClass = 'table-warning'; cardClass = 'table-warning';
borderClass = 'border-warning'; borderClass = 'border-warning';
smallMessage = 'Spiel läuft'; smallMessage = 'Spiel läuft';
break; break;
case 'team1_won': case 'team1_won':
team1Class = 'font-weight-bold'; cardClass = 'table-success';
team2Class = 'lost-team'; borderClass = 'border-success';
cardClass = 'table-success'; smallMessage = 'Gewinner: ' + this.props.match.team1;
borderClass = 'border-success'; break;
smallMessage = 'Gewinner: ' + this.props.match.team1; case 'team2_won':
break; cardClass = 'table-success';
case 'team2_won': borderClass = 'border-success';
team1Class = 'lost-team'; smallMessage = 'Gewinner: ' + this.props.match.team2;
team2Class = 'font-weight-bold'; break;
cardClass = 'table-success'; case 'single_team':
borderClass = 'border-success'; cardClass = 'table-success';
smallMessage = 'Gewinner: ' + this.props.match.team2; borderClass = 'border-success';
break; smallMessage = 'kein Gegner, Team kommt weiter';
case 'single_team': break;
team2Class = 'text-muted'; case 'not_ready':
cardClass = 'table-success'; smallMessage = 'Spiel kann noch nicht gestartet werden';
borderClass = 'border-success'; break;
smallMessage = 'kein Gegner, Team kommt weiter'; case 'not_started':
break; smallMessage = 'Spiel kann gestartet werden';
case 'not_ready': break;
smallMessage = 'Spiel kann noch nicht gestartet werden'; case 'undecided':
break; cardClass = 'table-success';
case 'not_started': borderClass = 'border-success';
smallMessage = 'Spiel kann gestartet werden'; smallMessage = 'Spiel beendet, unentschieden';
break; break;
case 'undecided':
cardClass = 'table-success';
borderClass = 'border-success';
smallMessage = 'Spiel beendet, unentschieden';
break;
} }
return ( return (
<div className='mb-3'> <div className='mb-3'>
@ -149,29 +145,29 @@ function MatchModal(props) {
let actionButton = ''; let actionButton = '';
//possible states: single_team not_ready not_started in_progress team1_won team2_won undecided //possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
switch (props.match.state) { switch (props.match.state) {
case 'in_progress': case 'in_progress':
title = 'Spiel läuft'; title = 'Spiel läuft';
actionButton = <Button color='primary' onClick={props.toggle}>Spiel beenden</Button>; actionButton = <Button color='primary' onClick={props.toggle}>Spiel beenden</Button>;
break; break;
case 'team1_won': case 'team1_won':
title = 'Spiel beendet'; title = 'Spiel beendet';
break; break;
case 'team2_won': case 'team2_won':
title = 'Spiel beendet'; title = 'Spiel beendet';
break; break;
case 'single_team': case 'single_team':
title = 'kein Gegner, Team kommt weiter'; title = 'kein Gegner, Team kommt weiter';
break; break;
case 'not_ready': case 'not_ready':
title = 'Spiel kann noch nicht gestartet werden'; title = 'Spiel kann noch nicht gestartet werden';
break; break;
case 'not_started': case 'not_started':
title = 'Spiel kann gestartet werden'; title = 'Spiel kann gestartet werden';
actionButton = <Button color='primary' onClick={props.toggle}>Spiel starten</Button>; actionButton = <Button color='primary' onClick={props.toggle}>Spiel starten</Button>;
break; break;
case 'undecided': case 'undecided':
title = 'Spiel beendet'; title = 'Spiel beendet';
break; break;
} }
return ( return (
<Modal isOpen={props.isOpen} toggle={props.toggle}> <Modal isOpen={props.isOpen} toggle={props.toggle}>
@ -192,54 +188,54 @@ function MatchTable(props) {
let team1Class, team2Class; let team1Class, team2Class;
//possible states: single_team not_ready not_started in_progress team1_won team2_won undecided //possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
switch (props.match.state) { switch (props.match.state) {
case 'in_progress': case 'in_progress':
break; break;
case 'team1_won': case 'team1_won':
team1Class = 'font-weight-bold'; team1Class = 'font-weight-bold';
team2Class = 'lost-team'; team2Class = 'lost-team';
break; break;
case 'team2_won': case 'team2_won':
team1Class = 'lost-team'; team1Class = 'lost-team';
team2Class = 'font-weight-bold'; team2Class = 'font-weight-bold';
break; break;
case 'single_team': case 'single_team':
team2Class = 'text-muted'; team2Class = 'text-muted';
break; break;
case 'not_ready': case 'not_ready':
break; break;
case 'not_started': case 'not_started':
break; break;
case 'undecided': case 'undecided':
break; break;
} }
if(props.match.state === 'single_team'){ if(props.match.state === 'single_team'){
return ( return (
<Table className='mb-0'> <Table className='mb-0'>
<tbody> <tbody>
<tr> <tr>
<td className={'border-top-0 ' + team1Class}>{props.match.team1}</td> <td className={'border-top-0 ' + team1Class}>{props.match.team1}</td>
</tr> </tr>
<tr> <tr>
<td className={props.borderColor + ' ' + team2Class}>kein Gegner</td> <td className={props.borderColor + ' ' + team2Class}>kein Gegner</td>
</tr> </tr>
</tbody> </tbody>
</Table> </Table>
) );
}else{ } else {
return ( return (
<Table className='mb-0'> <Table className='mb-0'>
<tbody> <tbody>
<tr> <tr>
<th className='stage border-top-0'>{props.match.scoreTeam1}</th> <th className='stage border-top-0'>{props.match.scoreTeam1}</th>
<td className={'border-top-0 ' + team1Class}>{props.match.team1}</td> <td className={'border-top-0 ' + team1Class}>{props.match.team1}</td>
</tr> </tr>
<tr> <tr>
<th className={'stage ' + props.borderColor}>{props.match.scoreTeam2}</th> <th className={'stage ' + props.borderColor}>{props.match.scoreTeam2}</th>
<td className={props.borderColor + ' ' + team2Class}>{props.match.team2}</td> <td className={props.borderColor + ' ' + team2Class}>{props.match.team2}</td>
</tr> </tr>
</tbody> </tbody>
</Table> </Table>
) );
} }
} }
@ -247,21 +243,21 @@ function EditableMatchTable(props) {
return ( return (
<Table className='mb-0'> <Table className='mb-0'>
<tbody> <tbody>
<tr> <tr>
<td className='scoreInput border-top-0'> <td className='scoreInput border-top-0'>
<ScoreInput score={props.match.scoreTeam1}/> <ScoreInput score={props.match.scoreTeam1}/>
</td> </td>
<td className='align-middle border-top-0'>{props.match.team1}</td> <td className='align-middle border-top-0'>{props.match.team1}</td>
</tr> </tr>
<tr> <tr>
<td className='scoreInput'> <td className='scoreInput'>
<ScoreInput score={props.match.scoreTeam2}/> <ScoreInput score={props.match.scoreTeam2}/>
</td> </td>
<td className='align-middle'>{props.match.team2}</td> <td className='align-middle'>{props.match.team2}</td>
</tr> </tr>
</tbody> </tbody>
</Table> </Table>
) );
} }
class ScoreInput extends React.Component { class ScoreInput extends React.Component {
@ -307,7 +303,7 @@ function convertTournament(apiTournament) {
id: stage.id, id: stage.id,
level: stage.level, level: stage.level,
matches: stage.matches.map(match => convertMatch(match)) matches: stage.matches.map(match => convertMatch(match))
}) });
} }
} }
return { return {
@ -328,7 +324,7 @@ function convertGroup(apiGroup) {
number: apiGroup.number, number: apiGroup.number,
scores: apiGroup.group_scores, scores: apiGroup.group_scores,
matches: apiGroup.matches.map(match => convertMatch(match)) matches: apiGroup.matches.map(match => convertMatch(match))
} };
} }
function convertMatch(apiMatch) { function convertMatch(apiMatch) {
@ -339,18 +335,18 @@ function convertMatch(apiMatch) {
team2: apiMatch.match_scores[1].team.name, team2: apiMatch.match_scores[1].team.name,
scoreTeam1: apiMatch.match_scores[0].points, scoreTeam1: apiMatch.match_scores[0].points,
scoreTeam2: apiMatch.match_scores[1].points scoreTeam2: apiMatch.match_scores[1].points
} };
} }
class Main extends React.Component { class Main extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const code = this.props.query.code; const code = this.props.query.code;
getRequest('/tournaments/' + code, {}) getRequest(getState(), '/tournaments/' + code)
.then(response => { .then(response => {
this.setState({tournament: convertTournament(response.data)}); this.setState({tournament: convertTournament(response.data)});
}) })
.catch(error => console.log(error)); .catch(() => { /* TODO: Show some kind of error or smth */ });
} }
static async getInitialProps({query}) { static async getInitialProps({query}) {
@ -373,4 +369,4 @@ class Main extends React.Component {
} }
} }
export default Main export default Main;