Split up Match into more files
This commit is contained in:
Felix Hamme
parent
4d1e9682ae
commit
5826a06ab6
|
|
@ -0,0 +1,54 @@
|
|||
import React from 'react';
|
||||
import {Button, Input, InputGroup, InputGroupAddon, Table} from 'reactstrap';
|
||||
|
||||
export function EditableMatchTable(props) {
|
||||
return (<Table className='mb-0'>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className='scoreInput border-top-0'>
|
||||
<ScoreInput score={props.match.team1.score}/>
|
||||
</td>
|
||||
<td className='align-middle border-top-0'>{props.match.team1.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='scoreInput'>
|
||||
<ScoreInput score={props.match.team2.score}/>
|
||||
</td>
|
||||
<td className='align-middle'>{props.match.team2.name}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>);
|
||||
}
|
||||
|
||||
class ScoreInput extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {score: this.props.score};
|
||||
this.updateScore = this.updateScore.bind(this);
|
||||
this.increaseScore = this.increaseScore.bind(this);
|
||||
this.decreaseScore = this.decreaseScore.bind(this);
|
||||
}
|
||||
|
||||
updateScore(event) {
|
||||
this.setState({score: event.target.value});
|
||||
}
|
||||
|
||||
increaseScore() {
|
||||
this.setState({score: Number(this.state.score) + 1});
|
||||
}
|
||||
|
||||
decreaseScore() {
|
||||
this.setState({score: Number(this.state.score) - 1});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (<InputGroup>
|
||||
<InputGroupAddon addonType="prepend"><Button onClick={this.decreaseScore} color='danger'
|
||||
outline={true}>-1</Button></InputGroupAddon>
|
||||
<Input className='font-weight-bold' value={this.state.score} onChange={this.updateScore} type='number'
|
||||
step='1' placeholder='0'/>
|
||||
<InputGroupAddon addonType="append"><Button onClick={this.increaseScore}
|
||||
color='success'>+1</Button></InputGroupAddon>
|
||||
</InputGroup>);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +1,9 @@
|
|||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardBody,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
Table
|
||||
} from 'reactstrap';
|
||||
import {Card, CardBody} from 'reactstrap';
|
||||
import React from 'react';
|
||||
import {endMatch, startMatch} from '../api';
|
||||
import {notify} from 'react-notify-toast';
|
||||
import {MatchModal} from './MatchModal';
|
||||
import {MatchTable} from './MatchTable';
|
||||
|
||||
|
||||
export class Match extends React.Component {
|
||||
|
|
@ -129,145 +119,3 @@ export class Match extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
function MatchModal(props) {
|
||||
let title;
|
||||
let actionButton = '';
|
||||
// possible states: single_team not_ready not_started in_progress finished
|
||||
switch (props.match.state) {
|
||||
case 'in_progress':
|
||||
title = 'Spiel läuft';
|
||||
actionButton = <Button color='primary' onClick={props.endMatch}>Spiel beenden</Button>;
|
||||
break;
|
||||
case 'finished':
|
||||
title = 'Spiel beendet';
|
||||
break;
|
||||
case 'single_team':
|
||||
title = 'kein Gegner, Team kommt weiter';
|
||||
break;
|
||||
case 'not_ready':
|
||||
title = 'Spiel kann noch nicht gestartet werden';
|
||||
break;
|
||||
case 'not_started':
|
||||
title = 'Spiel kann gestartet werden';
|
||||
actionButton = <Button color='primary' onClick={props.startMatch}>Spiel starten</Button>;
|
||||
break;
|
||||
}
|
||||
return (<Modal isOpen={props.isOpen} toggle={props.toggle}>
|
||||
<ModalHeader toggle={props.toggle}>{title}</ModalHeader>
|
||||
<ModalBody>
|
||||
{props.match.state === 'in_progress' ? <EditableMatchTable match={props.match}/> :
|
||||
<MatchTable match={props.match} matchStatus={props.match.state}/>}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
{actionButton}
|
||||
<Button color='secondary' onClick={props.toggle}>Abbrechen</Button>
|
||||
</ModalFooter>
|
||||
</Modal>);
|
||||
}
|
||||
|
||||
function MatchTable(props) {
|
||||
let team1Class;
|
||||
let team2Class;
|
||||
// possible states: single_team not_ready not_started in_progress finished
|
||||
switch (props.matchState) {
|
||||
case 'in_progress':
|
||||
break;
|
||||
case 'finished':
|
||||
if (props.match.winnerTeamId === undefined) {
|
||||
break;
|
||||
}
|
||||
if (props.winnerTeamId === props.match.team1.id) {
|
||||
team1Class = 'font-weight-bold';
|
||||
team2Class = 'lost-team';
|
||||
}
|
||||
if (props.winnerTeamId === props.match.team2.id) {
|
||||
team1Class = 'lost-team';
|
||||
team2Class = 'font-weight-bold';
|
||||
}
|
||||
break;
|
||||
case 'single_team':
|
||||
team2Class = 'text-muted';
|
||||
break;
|
||||
case 'not_ready':
|
||||
break;
|
||||
case 'not_started':
|
||||
break;
|
||||
}
|
||||
if (props.match.state === 'single_team') {
|
||||
return (<Table className='mb-0'>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className={'border-top-0 ' + team1Class}>{props.match.team1.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className={props.borderColor + ' ' + team2Class}>kein Gegner</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>);
|
||||
} else {
|
||||
return (<Table className='mb-0'>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th className='stage border-top-0'>{props.match.team1.score}</th>
|
||||
<td className={'border-top-0 ' + team1Class}>{props.match.team1.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className={'stage ' + props.borderColor}>{props.match.team2.score}</th>
|
||||
<td className={props.borderColor + ' ' + team2Class}>{props.match.team2.name}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>);
|
||||
}
|
||||
}
|
||||
|
||||
function EditableMatchTable(props) {
|
||||
return (<Table className='mb-0'>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className='scoreInput border-top-0'>
|
||||
<ScoreInput score={props.match.team1.score}/>
|
||||
</td>
|
||||
<td className='align-middle border-top-0'>{props.match.team1.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='scoreInput'>
|
||||
<ScoreInput score={props.match.team2.score}/>
|
||||
</td>
|
||||
<td className='align-middle'>{props.match.team2.name}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>);
|
||||
}
|
||||
|
||||
class ScoreInput extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {score: this.props.score};
|
||||
this.updateScore = this.updateScore.bind(this);
|
||||
this.increaseScore = this.increaseScore.bind(this);
|
||||
this.decreaseScore = this.decreaseScore.bind(this);
|
||||
}
|
||||
|
||||
updateScore(event) {
|
||||
this.setState({score: event.target.value});
|
||||
}
|
||||
|
||||
increaseScore() {
|
||||
this.setState({score: Number(this.state.score) + 1});
|
||||
}
|
||||
|
||||
decreaseScore() {
|
||||
this.setState({score: Number(this.state.score) - 1});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (<InputGroup>
|
||||
<InputGroupAddon addonType="prepend"><Button onClick={this.decreaseScore} color='danger'
|
||||
outline={true}>-1</Button></InputGroupAddon>
|
||||
<Input className='font-weight-bold' value={this.state.score} onChange={this.updateScore} type='number'
|
||||
step='1' placeholder='0'/>
|
||||
<InputGroupAddon addonType="append"><Button onClick={this.increaseScore}
|
||||
color='success'>+1</Button></InputGroupAddon>
|
||||
</InputGroup>);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from 'reactstrap';
|
||||
import React from 'react';
|
||||
import {EditableMatchTable} from './EditableMatchTable';
|
||||
import {MatchTable} from './MatchTable';
|
||||
|
||||
export function MatchModal(props) {
|
||||
let title;
|
||||
let actionButton = '';
|
||||
// possible states: single_team not_ready not_started in_progress finished
|
||||
switch (props.match.state) {
|
||||
case 'in_progress':
|
||||
title = 'Spiel läuft';
|
||||
actionButton = <Button color='primary' onClick={props.endMatch}>Spiel beenden</Button>;
|
||||
break;
|
||||
case 'finished':
|
||||
title = 'Spiel beendet';
|
||||
break;
|
||||
case 'single_team':
|
||||
title = 'kein Gegner, Team kommt weiter';
|
||||
break;
|
||||
case 'not_ready':
|
||||
title = 'Spiel kann noch nicht gestartet werden';
|
||||
break;
|
||||
case 'not_started':
|
||||
title = 'Spiel kann gestartet werden';
|
||||
actionButton = <Button color='primary' onClick={props.startMatch}>Spiel starten</Button>;
|
||||
break;
|
||||
}
|
||||
return (<Modal isOpen={props.isOpen} toggle={props.toggle}>
|
||||
<ModalHeader toggle={props.toggle}>{title}</ModalHeader>
|
||||
<ModalBody>
|
||||
{props.match.state === 'in_progress' ? <EditableMatchTable match={props.match}/> :
|
||||
<MatchTable match={props.match} matchStatus={props.match.state}/>}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
{actionButton}
|
||||
<Button color='secondary' onClick={props.toggle}>Abbrechen</Button>
|
||||
</ModalFooter>
|
||||
</Modal>);
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import {Table} from 'reactstrap';
|
||||
import React from 'react';
|
||||
|
||||
export function MatchTable(props) {
|
||||
let team1Class;
|
||||
let team2Class;
|
||||
// possible states: single_team not_ready not_started in_progress finished
|
||||
switch (props.matchState) {
|
||||
case 'in_progress':
|
||||
break;
|
||||
case 'finished':
|
||||
if (props.match.winnerTeamId === undefined) {
|
||||
break;
|
||||
}
|
||||
if (props.winnerTeamId === props.match.team1.id) {
|
||||
team1Class = 'font-weight-bold';
|
||||
team2Class = 'lost-team';
|
||||
}
|
||||
if (props.winnerTeamId === props.match.team2.id) {
|
||||
team1Class = 'lost-team';
|
||||
team2Class = 'font-weight-bold';
|
||||
}
|
||||
break;
|
||||
case 'single_team':
|
||||
team2Class = 'text-muted';
|
||||
break;
|
||||
case 'not_ready':
|
||||
break;
|
||||
case 'not_started':
|
||||
break;
|
||||
}
|
||||
if (props.match.state === 'single_team') {
|
||||
return (<Table className='mb-0'>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className={'border-top-0 ' + team1Class}>{props.match.team1.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className={props.borderColor + ' ' + team2Class}>kein Gegner</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>);
|
||||
} else {
|
||||
return (<Table className='mb-0'>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th className='stage border-top-0'>{props.match.team1.score}</th>
|
||||
<td className={'border-top-0 ' + team1Class}>{props.match.team1.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className={'stage ' + props.borderColor}>{props.match.team2.score}</th>
|
||||
<td className={props.borderColor + ' ' + team2Class}>{props.match.team2.name}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue