diff --git a/js/api.js b/js/api.js
index 3510c72..8c83999 100644
--- a/js/api.js
+++ b/js/api.js
@@ -221,6 +221,19 @@ const reducerTournamentinfo = (state = defaultStateTournamentinfo, action) => {
return Object.assign({}, state, {});
case actionTypesTournamentinfo.REHYDRATE:
+ return Object.assign({}, state, {});
+ case actionTypesTournamentinfo.START_MATCH:
+ patchRequest(action.state, '/matches/' + action.parameters.matchId, {
+ state: 'in_progress'
+ }).then(resp => {
+ storeOptionalToken(resp);
+ action.parameters.successCallback();
+ }).catch(error => {
+ if (error.response) {
+ storeOptionalToken(error.response);
+ }
+ action.parameters.errorCallback();
+ });
return Object.assign({}, state, {});
case actionTypesTournamentinfo.CLEAR:
@@ -364,6 +377,18 @@ export function updateTeamName(team, successCB, errorCB) {
});
}
+export function startMatch(matchId, successCallback, errorCallback) {
+ __store.dispatch({
+ type: actionTypesTournamentinfo.START_MATCH,
+ parameters: {
+ matchId: matchId,
+ successCallback: successCallback,
+ errorCallback: errorCallback
+ },
+ state: __store.getState()
+ });
+}
+
export function getState() {
return __store.getState();
}
diff --git a/js/components/Match.js b/js/components/Match.js
index eb99e63..4b083fa 100644
--- a/js/components/Match.js
+++ b/js/components/Match.js
@@ -12,15 +12,21 @@ import {
Table
} from 'reactstrap';
import React from 'react';
+import {startMatch} from '../api';
+import {notify} from 'react-notify-toast';
export class Match extends React.Component {
constructor(props) {
super(props);
this.state = {
- modal: false
+ modal: false,
+ matchState: this.props.match.state
};
this.toggleModal = this.toggleModal.bind(this);
+ this.startMatch = this.startMatch.bind(this);
+ this.onStartMatchSuccess = this.onStartMatchSuccess.bind(this);
+ this.onStartMatchError = this.onStartMatchError.bind(this);
}
toggleModal() {
@@ -31,12 +37,26 @@ export class Match extends React.Component {
}
}
+ startMatch() {
+ startMatch(this.props.match.id, this.onStartMatchSuccess, this.onStartMatchError);
+ }
+
+ onStartMatchSuccess() {
+ this.setState({matchState: 'in_progress'});
+ this.toggleModal();
+ }
+
+ onStartMatchError() {
+ this.toggleModal();
+ notify.show('Das Match konnte nicht gestartet werden.', 'error', 3000);
+ }
+
render() {
let cardClass;
let smallMessage;
let borderClass;
// possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
- switch (this.props.match.state) {
+ switch (this.state.matchState) {
case 'in_progress':
cardClass = 'table-warning';
borderClass = 'border-warning';
@@ -76,7 +96,8 @@ export class Match extends React.Component {
{smallMessage}
-
+
);
}
}
@@ -104,7 +125,7 @@ function MatchModal(props) {
break;
case 'not_started':
title = 'Spiel kann gestartet werden';
- actionButton = ;
+ actionButton = ;
break;
case 'undecided':
title = 'Spiel beendet';
diff --git a/js/redux/tournamentInfo.js b/js/redux/tournamentInfo.js
index 3322f04..8a1f1df 100644
--- a/js/redux/tournamentInfo.js
+++ b/js/redux/tournamentInfo.js
@@ -8,6 +8,8 @@ export const actionTypesTournamentinfo = {
'MODIFY_TOURNAMENT_SUCCESS': 'MODIFY_TOURNAMENT_SUCCESS',
'MODIFY_TOURNAMENT_ERROR': 'MODIFY_TOURNAMENT_ERROR',
+ 'START_MATCH': 'START_MATCH',
+
'REHYDRATE': 'TOURNAMENTINFO_REHYDRATE',
'CLEAR': 'TOURNAMENTINFO_CLEAR'
};