diff --git a/js/components/Match.js b/js/components/Match.js
index e9e01b8..bded548 100644
--- a/js/components/Match.js
+++ b/js/components/Match.js
@@ -58,6 +58,7 @@ export class Match extends React.Component {
updatedMatch.winnerTeamId = winner === null ? null : winner.id;
this.setState({match: updatedMatch});
this.toggleModal();
+ this.props.onFinish !== undefined && this.props.onFinish();
}
onEndMatchError() {
diff --git a/js/components/PlayoffStages.js b/js/components/PlayoffStages.js
index 5387bab..79fe6b6 100644
--- a/js/components/PlayoffStages.js
+++ b/js/components/PlayoffStages.js
@@ -1,11 +1,59 @@
import {Stage} from './Stage';
-import React from 'react';
+import React, {Component} from 'react';
+import {getStage} from '../redux/tournamentApi';
+import {notify} from 'react-notify-toast';
-export function PlayoffStages(props) {
- return (
- {props.playoffStages.map(stage => )}
-
);
+export class PlayoffStages extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {stages: this.props.playoffStages};
+
+ this.updateStage = this.updateStage.bind(this);
+ this.updateNextStage = this.updateNextStage.bind(this);
+ this.onUpdateStageSuccess = this.onUpdateStageSuccess.bind(this);
+ this.onUpdateStageError = this.onUpdateStageError.bind(this);
+ }
+
+ updateStage(id) {
+ getStage(id, this.onUpdateStageSuccess, this.onUpdateStageError);
+ }
+
+ updateNextStage(changedStageId) {
+ let found = false;
+ for (const stage of this.state.stages) {
+ if (found) {
+ this.updateStage(stage.id);
+ return;
+ }
+ if (stage.id === changedStageId) {
+ found = true;
+ }
+ }
+ }
+
+ onUpdateStageSuccess(status, updatedStage) {
+ const updatedStageIndex = this.state.stages.findIndex(stage => stage.id === updatedStage.id);
+ if (updatedStageIndex === -1) {
+ this.onUpdateStageError();
+ return;
+ }
+ const updatedStages = this.state.stages;
+ updatedStages[updatedStageIndex] = updatedStage;
+ this.setState({stages: updatedStages});
+ }
+
+ onUpdateStageError() {
+ notify.show('Die nachfolgende Stage konnte nicht aktualisiert werden.', 'error', 2500);
+ }
+
+ render() {
+ return (
+ {this.props.playoffStages.map(stage => this.updateNextStage(stage.id)}
+ level={getLevelName(stage.level)} matches={stage.matches}
+ key={stage.level}/>)}
+
);
+ }
}
function getLevelName(levelNumber) {
diff --git a/js/components/Stage.js b/js/components/Stage.js
index 32a128c..a91a328 100644
--- a/js/components/Stage.js
+++ b/js/components/Stage.js
@@ -3,7 +3,7 @@ import {Match} from './Match';
import React from 'react';
export function Stage(props) {
- const {isSignedIn, isOwner} = props;
+ const {isSignedIn, isOwner, updateNextStage} = props;
return (
@@ -11,7 +11,7 @@ export function Stage(props) {
{props.matches.map((match => (
)))}
+ isOwner={isOwner} onFinish={updateNextStage}/>)))}
);
diff --git a/js/redux/tournamentApi.js b/js/redux/tournamentApi.js
index 92e7d72..84e1085 100644
--- a/js/redux/tournamentApi.js
+++ b/js/redux/tournamentApi.js
@@ -17,18 +17,24 @@ export function getGroup(groupId, successCallback, errorCallback) {
.catch(errorCallback);
}
+export function getStage(stageId, successCallback, errorCallback) {
+ getRequest(getState(), '/stages/' + stageId)
+ .then(response => {
+ successCallback(response.status, convertPlayoffStage(response.data));
+ })
+ .catch(errorCallback);
+}
+
function convertTournament(apiTournament) {
let groupStage = null;
const playoffStages = [];
- for (const stage of apiTournament.stages) {
- if (stage.groups.length > 0) {
+ for (const apiStage of apiTournament.stages) {
+ if (apiStage.groups.length > 0) {
// group stage
- groupStage = {groups: stage.groups.map(group => convertGroup(group))};
+ groupStage = {groups: apiStage.groups.map(group => convertGroup(group))};
} else {
// playoff stage
- playoffStages.push({
- id: stage.id, level: stage.level, matches: stage.matches.map(match => convertMatch(match, false))
- });
+ playoffStages.push(convertPlayoffStage(apiStage));
}
}
return {
@@ -43,6 +49,12 @@ function convertTournament(apiTournament) {
};
}
+function convertPlayoffStage(apiStage) {
+ return {
+ id: apiStage.id, level: apiStage.level, matches: apiStage.matches.map(match => convertMatch(match, false))
+ };
+}
+
function convertGroup(apiGroup) {
return {
id: apiGroup.id,