diff --git a/js/api.js b/js/api.js
index d90ea5d..281ee0d 100644
--- a/js/api.js
+++ b/js/api.js
@@ -235,6 +235,31 @@ const reducerTournamentinfo = (state = defaultStateTournamentinfo, action) => {
action.parameters.errorCallback();
});
return Object.assign({}, state, {});
+ case actionTypesTournamentinfo.SUBMIT_MATCH_SCORES:
+ patchRequest(action.state, '/match_scores/' + action.parameters.scoreIdTeam1, {
+ points: action.parameters.scoreTeam1
+ }).then(resp => {
+ storeOptionalToken(resp);
+
+ patchRequest(action.state, '/match_scores/' + action.parameters.scoreIdTeam2, {
+ points: action.parameters.scoreTeam2
+ }).then(resp => {
+ storeOptionalToken(resp);
+
+ action.parameters.successCallback();
+ }).catch(error => {
+ if (error.response) {
+ storeOptionalToken(error.response);
+ }
+ action.parameters.errorCallback();
+ });
+ }).catch(error => {
+ if (error.response) {
+ storeOptionalToken(error.response);
+ }
+ action.parameters.errorCallback();
+ });
+ return Object.assign({}, state, {});
case actionTypesTournamentinfo.END_MATCH:
patchRequest(action.state, '/matches/' + action.parameters.matchId, {
state: 'finished'
@@ -414,6 +439,21 @@ export function endMatch(matchId, successCallback, errorCallback) {
});
}
+export function submitMatchScores(scoreTeam1, scoreIdTeam1, scoreTeam2, scoreIdTeam2, successCallback, errorCallback) {
+ __store.dispatch({
+ type: actionTypesTournamentinfo.SUBMIT_MATCH_SCORES,
+ parameters: {
+ scoreTeam1: scoreTeam1,
+ scoreIdTeam1: scoreIdTeam1,
+ scoreTeam2: scoreTeam2,
+ scoreIdTeam2: scoreIdTeam2,
+ successCallback: successCallback,
+ errorCallback: errorCallback
+ },
+ state: __store.getState()
+ });
+}
+
export function getState() {
return __store.getState();
}
diff --git a/js/components/EditableMatchTable.js b/js/components/EditableMatchTable.js
new file mode 100644
index 0000000..2589354
--- /dev/null
+++ b/js/components/EditableMatchTable.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import {Button, Input, InputGroup, InputGroupAddon, Table} from 'reactstrap';
+
+export function EditableMatchTable(props) {
+ return (
+
+
+ |
+
+ |
+ {props.match.team1.name} |
+
+
+ |
+
+ |
+ {props.match.team2.name} |
+
+
+
);
+}
+
+class ScoreInput extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {score: this.props.score};
+ this.inputScore = this.inputScore.bind(this);
+ this.increaseScore = this.increaseScore.bind(this);
+ this.decreaseScore = this.decreaseScore.bind(this);
+ }
+
+ inputScore(event) {
+ const newScore = event.target.value;
+ this.setState({score: newScore});
+ this.props.update(newScore);
+ }
+
+ increaseScore() {
+ const newScore = Number(this.state.score) + 1;
+ this.setState({score: newScore});
+ this.props.update(newScore);
+ }
+
+ decreaseScore() {
+ const newScore = Number(this.state.score) - 1;
+ this.setState({score: newScore});
+ this.props.update(newScore);
+ }
+
+ render() {
+ return (
+
+
+
+ );
+ }
+}
diff --git a/js/components/Match.js b/js/components/Match.js
index 55a4e9a..95293d8 100644
--- a/js/components/Match.js
+++ b/js/components/Match.js
@@ -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 {
@@ -31,6 +21,7 @@ export class Match extends React.Component {
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() {
@@ -74,6 +65,13 @@ export class Match extends React.Component {
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});
+ }
+
getMatchFinishedMessage() {
const match = this.state.match;
if (match.winnerTeamId === null) {
@@ -124,150 +122,8 @@ export class Match extends React.Component {
{smallMessage}
+ startMatch={this.startMatch} endMatch={this.endMatch} changeScores={this.changeScores}/>
);
}
}
-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 = ;
- 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 = ;
- break;
- }
- return (
- {title}
-
- {props.match.state === 'in_progress' ? :
- }
-
-
- {actionButton}
-
-
- );
-}
-
-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 (
-
-
- | {props.match.team1.name} |
-
-
- | kein Gegner |
-
-
-
);
- } else {
- return (
-
-
- | {props.match.team1.score} |
- {props.match.team1.name} |
-
-
- | {props.match.team2.score} |
- {props.match.team2.name} |
-
-
-
);
- }
-}
-
-function EditableMatchTable(props) {
- return (
-
-
- |
-
- |
- {props.match.team1.name} |
-
-
- |
-
- |
- {props.match.team2.name} |
-
-
-
);
-}
-
-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 (
-
-
-
- );
- }
-}
diff --git a/js/components/MatchModal.js b/js/components/MatchModal.js
new file mode 100644
index 0000000..824a8fe
--- /dev/null
+++ b/js/components/MatchModal.js
@@ -0,0 +1,88 @@
+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 = ;
+ // possible states: single_team not_ready not_started in_progress finished
+ switch (this.props.match.state) {
+ case 'in_progress':
+ title = 'Spiel läuft';
+ submitScoresButton = ;
+ if (!this.props.match.allowUndecided && this.props.match.team1.score === this.props.match.team2.score) {
+ actionButton = ;
+ } else {
+ actionButton = ;
+ }
+ matchTable = ;
+ 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 = ;
+ break;
+ }
+ return (
+ {title}
+
+ {matchTable}
+
+
+ {submitScoresButton}
+ {actionButton}
+
+
+ );
+ }
+}
diff --git a/js/components/MatchTable.js b/js/components/MatchTable.js
new file mode 100644
index 0000000..fda69d9
--- /dev/null
+++ b/js/components/MatchTable.js
@@ -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 (
+
+
+ | {props.match.team1.name} |
+
+
+ | kein Gegner |
+
+
+
);
+ } else {
+ return (
+
+
+ | {props.match.team1.score} |
+ {props.match.team1.name} |
+
+
+ | {props.match.team2.score} |
+ {props.match.team2.name} |
+
+
+
);
+ }
+}
diff --git a/js/redux/tournamentInfo.js b/js/redux/tournamentInfo.js
index f5aedbe..b93f325 100644
--- a/js/redux/tournamentInfo.js
+++ b/js/redux/tournamentInfo.js
@@ -9,6 +9,7 @@ export const actionTypesTournamentinfo = {
'MODIFY_TOURNAMENT_ERROR': 'MODIFY_TOURNAMENT_ERROR',
'START_MATCH': 'START_MATCH',
+ 'SUBMIT_MATCH_SCORES': 'SUBMIT_MATCH_SCORES',
'END_MATCH': 'END_MATCH',
'REHYDRATE': 'TOURNAMENTINFO_REHYDRATE',
diff --git a/pages/tournament.js b/pages/tournament.js
index a7bc42e..bd0de1b 100644
--- a/pages/tournament.js
+++ b/pages/tournament.js
@@ -94,7 +94,7 @@ function convertTournament(apiTournament) {
} else {
// playoff stage
playoffStages.push({
- id: stage.id, level: stage.level, matches: stage.matches.map(match => convertMatch(match))
+ id: stage.id, level: stage.level, matches: stage.matches.map(match => convertMatch(match, false))
});
}
}
@@ -115,31 +115,35 @@ function convertGroup(apiGroup) {
id: apiGroup.id,
number: apiGroup.number,
scores: apiGroup.group_scores,
- matches: apiGroup.matches.map(match => convertMatch(match))
+ matches: apiGroup.matches.map(match => convertMatch(match, true))
};
}
-function convertMatch(apiMatch) {
+function convertMatch(apiMatch, allowUndecided) {
const result = {
- id: apiMatch.id, state: apiMatch.state, winnerTeamId: apiMatch.winner === null ? null : apiMatch.winner.id
+ id: apiMatch.id, state: apiMatch.state, allowUndecided: allowUndecided,
+ winnerTeamId: apiMatch.winner === null ? null : apiMatch.winner.id
};
if (apiMatch.match_scores.length === 2) {
result.team1 = {
name: apiMatch.match_scores[0].team.name,
id: apiMatch.match_scores[0].team.id,
- score: apiMatch.match_scores[0].points
+ score: apiMatch.match_scores[0].points,
+ scoreId: apiMatch.match_scores[0].id
};
result.team2 = {
name: apiMatch.match_scores[1].team.name,
id: apiMatch.match_scores[1].team.id,
- score: apiMatch.match_scores[1].points
+ score: apiMatch.match_scores[1].points,
+ scoreId: apiMatch.match_scores[1].id
};
} else if (apiMatch.match_scores.length === 1) {
result.team1 = {
name: apiMatch.match_scores[0].team.name,
id: apiMatch.match_scores[0].team.id,
- score: apiMatch.match_scores[0].points
+ score: apiMatch.match_scores[0].points,
+ scoreId: apiMatch.match_scores[0].id
};
result.team2 = {
name: 'TBD',