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' };