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

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,11 +87,11 @@ 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':
@ -99,21 +100,16 @@ class Match extends React.Component {
smallMessage = 'Spiel läuft'; smallMessage = 'Spiel läuft';
break; break;
case 'team1_won': case 'team1_won':
team1Class = 'font-weight-bold';
team2Class = 'lost-team';
cardClass = 'table-success'; cardClass = 'table-success';
borderClass = 'border-success'; borderClass = 'border-success';
smallMessage = 'Gewinner: ' + this.props.match.team1; smallMessage = 'Gewinner: ' + this.props.match.team1;
break; break;
case 'team2_won': case 'team2_won':
team1Class = 'lost-team';
team2Class = 'font-weight-bold';
cardClass = 'table-success'; cardClass = 'table-success';
borderClass = 'border-success'; borderClass = 'border-success';
smallMessage = 'Gewinner: ' + this.props.match.team2; smallMessage = 'Gewinner: ' + this.props.match.team2;
break; break;
case 'single_team': case 'single_team':
team2Class = 'text-muted';
cardClass = 'table-success'; cardClass = 'table-success';
borderClass = 'border-success'; borderClass = 'border-success';
smallMessage = 'kein Gegner, Team kommt weiter'; smallMessage = 'kein Gegner, Team kommt weiter';
@ -224,7 +220,7 @@ function MatchTable(props) {
</tr> </tr>
</tbody> </tbody>
</Table> </Table>
) );
} else { } else {
return ( return (
<Table className='mb-0'> <Table className='mb-0'>
@ -239,7 +235,7 @@ function MatchTable(props) {
</tr> </tr>
</tbody> </tbody>
</Table> </Table>
) );
} }
} }
@ -261,7 +257,7 @@ function EditableMatchTable(props) {
</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;