89 lines
3.6 KiB
JavaScript
89 lines
3.6 KiB
JavaScript
import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from 'reactstrap';
|
|
import React, {Component} from 'react';
|
|
import {EditableMatchTable} from './EditableMatchTable';
|
|
import {MatchTable} from './MatchTable';
|
|
import {submitMatchScores} from '../api';
|
|
import {notify} from 'react-notify-toast';
|
|
|
|
export class MatchModal extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {scoreTeam1: this.props.match.team1.score, scoreTeam2: this.props.match.team2.score};
|
|
this.updateScoreTeam1 = this.updateScoreTeam1.bind(this);
|
|
this.updateScoreTeam2 = this.updateScoreTeam2.bind(this);
|
|
this.submitScores = this.submitScores.bind(this);
|
|
this.onSubmitScoresError = this.onSubmitScoresError.bind(this);
|
|
this.onSubmitScoresSuccess = this.onSubmitScoresSuccess.bind(this);
|
|
}
|
|
|
|
updateScoreTeam1(newScore) {
|
|
this.setState({scoreTeam1: newScore});
|
|
}
|
|
|
|
updateScoreTeam2(newScore) {
|
|
this.setState({scoreTeam2: newScore});
|
|
}
|
|
|
|
submitScores() {
|
|
const match = this.props.match;
|
|
submitMatchScores(this.state.scoreTeam1, match.team1.scoreId, this.state.scoreTeam2, match.team2.scoreId,
|
|
this.onSubmitScoresSuccess, this.onSubmitScoresError);
|
|
}
|
|
|
|
onSubmitScoresError() {
|
|
this.props.toggle();
|
|
notify.show('Der Spielstand konnte nicht geändert werden.', 'error', 2500);
|
|
}
|
|
|
|
onSubmitScoresSuccess() {
|
|
this.props.toggle();
|
|
this.props.changeScores(this.state.scoreTeam1, this.state.scoreTeam2);
|
|
notify.show('Der Spielstand wurde geändert.', 'success', 2000);
|
|
}
|
|
|
|
render() {
|
|
let title;
|
|
let actionButton = '';
|
|
let submitScoresButton = '';
|
|
let matchTable = <MatchTable match={this.props.match} matchStatus={this.props.match.state}/>;
|
|
// possible states: single_team not_ready not_started in_progress finished
|
|
switch (this.props.match.state) {
|
|
case 'in_progress':
|
|
title = 'Spiel läuft';
|
|
submitScoresButton = <Button color='primary' onClick={this.submitScores}>Spielstand ändern</Button>;
|
|
if (!this.props.match.allowUndecided && this.props.match.team1.score === this.props.match.team2.score) {
|
|
actionButton = <Button color='primary' disabled>Spiel beenden</Button>;
|
|
} else {
|
|
actionButton = <Button color='primary' onClick={this.props.endMatch}>Spiel beenden</Button>;
|
|
}
|
|
matchTable = <EditableMatchTable match={this.props.match} updateScoreTeam1={this.updateScoreTeam1}
|
|
updateScoreTeam2={this.updateScoreTeam2}/>;
|
|
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={this.props.startMatch}>Spiel starten</Button>;
|
|
break;
|
|
}
|
|
return (<Modal isOpen={this.props.isOpen} toggle={this.props.toggle}>
|
|
<ModalHeader toggle={this.props.toggle}>{title}</ModalHeader>
|
|
<ModalBody>
|
|
{matchTable}
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
{submitScoresButton}
|
|
{actionButton}
|
|
<Button color='secondary' onClick={this.props.toggle}>Abbrechen</Button>
|
|
</ModalFooter>
|
|
</Modal>);
|
|
}
|
|
}
|