132 lines
4.5 KiB
JavaScript
132 lines
4.5 KiB
JavaScript
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 {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
modal: false,
|
|
match: this.props.match
|
|
};
|
|
this.toggleModal = this.toggleModal.bind(this);
|
|
this.startMatch = this.startMatch.bind(this);
|
|
this.onStartMatchSuccess = this.onStartMatchSuccess.bind(this);
|
|
this.onStartMatchError = this.onStartMatchError.bind(this);
|
|
this.endMatch = this.endMatch.bind(this);
|
|
this.onEndMatchSuccess = this.onEndMatchSuccess.bind(this);
|
|
this.onEndMatchError = this.onEndMatchError.bind(this);
|
|
this.getMatchFinishedMessage = this.getMatchFinishedMessage.bind(this);
|
|
this.changeScores = this.changeScores.bind(this);
|
|
}
|
|
|
|
toggleModal() {
|
|
const {isSignedIn, isOwner} = this.props;
|
|
|
|
if (isSignedIn && isOwner) {
|
|
this.setState({modal: !this.state.modal});
|
|
}
|
|
}
|
|
|
|
startMatch() {
|
|
startMatch(this.state.match.id, this.onStartMatchSuccess, this.onStartMatchError);
|
|
}
|
|
|
|
onStartMatchSuccess() {
|
|
const updatedMatch = this.state.match;
|
|
updatedMatch.state = 'in_progress';
|
|
this.setState({match: updatedMatch});
|
|
this.toggleModal();
|
|
}
|
|
|
|
onStartMatchError() {
|
|
this.toggleModal();
|
|
notify.show('Das Match konnte nicht gestartet werden.', 'error', 3000);
|
|
}
|
|
|
|
endMatch() {
|
|
endMatch(this.state.match.id, this.onEndMatchSuccess, this.onEndMatchError);
|
|
}
|
|
|
|
onEndMatchSuccess(winner) {
|
|
const updatedMatch = this.state.match;
|
|
updatedMatch.state = 'finished';
|
|
updatedMatch.winnerTeamId = winner === null ? null : winner.id;
|
|
this.setState({match: updatedMatch});
|
|
this.toggleModal();
|
|
this.props.onFinish !== undefined && this.props.onFinish();
|
|
}
|
|
|
|
onEndMatchError() {
|
|
this.toggleModal();
|
|
notify.show('Das Match konnte nicht beendet werden.', 'error', 3000);
|
|
}
|
|
|
|
changeScores(scoreTeam1, scoreTeam2) {
|
|
const updatedMatch = this.state.match;
|
|
updatedMatch.team1.score = scoreTeam1;
|
|
updatedMatch.team2.score = scoreTeam2;
|
|
this.setState({match: updatedMatch});
|
|
this.props.onChange !== undefined && this.props.onChange();
|
|
}
|
|
|
|
getMatchFinishedMessage() {
|
|
const match = this.state.match;
|
|
if (match.winnerTeamId === null) {
|
|
return 'Spiel beendet, unentschieden';
|
|
}
|
|
if (match.winnerTeamId === match.team1.id) {
|
|
return 'Gewinner: ' + match.team1.name;
|
|
}
|
|
if (match.winnerTeamId === match.team2.id) {
|
|
return 'Gewinner: ' + match.team2.name;
|
|
}
|
|
return 'Spiel beendet';
|
|
}
|
|
|
|
render() {
|
|
let cardClass;
|
|
let smallMessage;
|
|
let borderClass;
|
|
// possible states: single_team not_ready not_started in_progress finished
|
|
switch (this.state.match.state) {
|
|
case 'in_progress':
|
|
cardClass = 'table-warning';
|
|
borderClass = 'border-warning';
|
|
smallMessage = 'Spiel läuft';
|
|
break;
|
|
case 'finished':
|
|
cardClass = 'table-success';
|
|
borderClass = 'border-success';
|
|
smallMessage = this.getMatchFinishedMessage();
|
|
break;
|
|
case 'single_team':
|
|
cardClass = 'table-success';
|
|
borderClass = 'border-success';
|
|
smallMessage = 'kein Gegner, Team kommt weiter';
|
|
break;
|
|
case 'not_ready':
|
|
smallMessage = 'Spiel kann noch nicht gestartet werden';
|
|
break;
|
|
case 'not_started':
|
|
smallMessage = 'Spiel kann gestartet werden';
|
|
break;
|
|
}
|
|
return (<div className='mb-3'>
|
|
<Card className='shadow-sm match' onClick={this.toggleModal}>
|
|
<CardBody className={borderClass + ' border py-2 ' + cardClass}>
|
|
<MatchTable match={this.state.match} borderColor={borderClass}/>
|
|
</CardBody>
|
|
</Card>
|
|
<small className='text-muted'>{smallMessage}</small>
|
|
<MatchModal title='Match' isOpen={this.state.modal} toggle={this.toggleModal} match={this.state.match}
|
|
startMatch={this.startMatch} endMatch={this.endMatch} changeScores={this.changeScores}/>
|
|
</div>);
|
|
}
|
|
}
|
|
|