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

Minor design tweak for matches

This commit is contained in:
Felix Hamme 2018-12-11 22:04:36 +01:00
parent 0eb4df58cf
commit 21d43ab641
1 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
pages/tournament.js
View File

@ -26,7 +26,7 @@ import {getRequest} from '../js/api';
function Tournament(props) { function Tournament(props) {
return ( return (
<div> <div className='pb-5'>
<Container> <Container>
<a href='edit' className='btn btn-outline-secondary'>Turnier bearbeiten</a> <a href='edit' className='btn btn-outline-secondary'>Turnier bearbeiten</a>
<p>{props.tournament.description}</p> <p>{props.tournament.description}</p>
@ -90,28 +90,32 @@ class Match extends React.Component {
} }
render() { render() {
let cardClass, team1Class, team2Class, smallMessage; let cardClass, team1Class, team2Class, 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 border-warning'; cardClass = 'table-warning';
borderClass = 'border-warning';
smallMessage = 'Spiel läuft'; smallMessage = 'Spiel läuft';
break; break;
case 'team1_won': case 'team1_won':
team1Class = 'font-weight-bold'; team1Class = 'font-weight-bold';
team2Class = 'lost-team'; team2Class = 'lost-team';
cardClass = 'table-success border-success'; cardClass = 'table-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'; team1Class = 'lost-team';
team2Class = 'font-weight-bold'; team2Class = 'font-weight-bold';
cardClass = 'table-success border-success'; cardClass = 'table-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'; team2Class = 'text-muted';
cardClass = 'table-success border-success'; cardClass = 'table-success';
borderClass = 'border-success';
smallMessage = 'kein Gegner, Team kommt weiter'; smallMessage = 'kein Gegner, Team kommt weiter';
break; break;
case 'not_ready': case 'not_ready':
@ -121,15 +125,16 @@ class Match extends React.Component {
smallMessage = 'Spiel kann gestartet werden'; smallMessage = 'Spiel kann gestartet werden';
break; break;
case 'undecided': case 'undecided':
cardClass = 'table-success border-success'; cardClass = 'table-success';
borderClass = 'border-success';
smallMessage = 'Spiel beendet, unentschieden'; smallMessage = 'Spiel beendet, unentschieden';
break; break;
} }
return ( return (
<div className='mb-3'> <div className='mb-3'>
<Card className='shadow-sm match' onClick={this.toggleModal}> <Card className='shadow-sm match' onClick={this.toggleModal}>
<CardBody className={'border py-2 ' + cardClass}> <CardBody className={borderClass + ' border py-2 ' + cardClass}>
<MatchTable match={this.props.match}/> <MatchTable match={this.props.match} borderColor={borderClass}/>
</CardBody> </CardBody>
</Card> </Card>
<small className='text-muted'>{smallMessage}</small> <small className='text-muted'>{smallMessage}</small>
@ -215,7 +220,7 @@ function MatchTable(props) {
<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={team2Class}>kein Gegner</td> <td className={props.borderColor + ' ' + team2Class}>kein Gegner</td>
</tr> </tr>
</tbody> </tbody>
</Table> </Table>
@ -229,8 +234,8 @@ function MatchTable(props) {
<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.match.scoreTeam2}</th> <th className={'stage ' + props.borderColor}>{props.match.scoreTeam2}</th>
<td className={team2Class}>{props.match.team2}</td> <td className={props.borderColor + ' ' + team2Class}>{props.match.team2}</td>
</tr> </tr>
</tbody> </tbody>
</Table> </Table>