Merge pull request #34 from turniere/ticket/TURNIERE-224

Make backend calls for changing match scores (Ticket/turniere 224)

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();
 }

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 (<Table className='mb-0'>
+        <tbody>
+            <tr>
+                <td className='scoreInput border-top-0'>
+                    <ScoreInput score={props.match.team1.score} update={props.updateScoreTeam1}/>
+                </td>
+                <td className='align-middle border-top-0'>{props.match.team1.name}</td>
+            </tr>
+            <tr>
+                <td className='scoreInput'>
+                    <ScoreInput score={props.match.team2.score} update={props.updateScoreTeam2}/>
+                </td>
+                <td className='align-middle'>{props.match.team2.name}</td>
+            </tr>
+        </tbody>
+    </Table>);
+}
+
+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 (<InputGroup>
+            <InputGroupAddon addonType="prepend"><Button onClick={this.decreaseScore} color='danger'
+                outline={true}>-1</Button></InputGroupAddon>
+            <Input className='font-weight-bold' value={this.state.score} onChange={this.inputScore} type='number'
+                step='1' placeholder='0'/>
+            <InputGroupAddon addonType="append"><Button onClick={this.increaseScore}
+                color='success'>+1</Button></InputGroupAddon>
+        </InputGroup>);
+    }
+}

js/components/Match.js

@@ -1,19 +1,9 @@
-import {
+import {Card, CardBody} from 'reactstrap';
-    Button,
-    Card,
-    CardBody,
-    Input,
-    InputGroup,
-    InputGroupAddon,
-    Modal,
-    ModalBody,
-    ModalFooter,
-    ModalHeader,
-    Table
-} 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 {
             </Card>
             <small className='text-muted'>{smallMessage}</small>
             <MatchModal title='Match' isOpen={this.state.modal} toggle={this.toggleModal} match={this.state.match}
-                startMatch={this.startMatch} endMatch={this.endMatch}/>
+                startMatch={this.startMatch} endMatch={this.endMatch} changeScores={this.changeScores}/>
         </div>);
     }
 }
 
-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 = <Button color='primary' onClick={props.endMatch}>Spiel beenden</Button>;
-        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={props.startMatch}>Spiel starten</Button>;
-        break;
-    }
-    return (<Modal isOpen={props.isOpen} toggle={props.toggle}>
-        <ModalHeader toggle={props.toggle}>{title}</ModalHeader>
-        <ModalBody>
-            {props.match.state === 'in_progress' ? <EditableMatchTable match={props.match}/> :
-                <MatchTable match={props.match} matchStatus={props.match.state}/>}
-        </ModalBody>
-        <ModalFooter>
-            {actionButton}
-            <Button color='secondary' onClick={props.toggle}>Abbrechen</Button>
-        </ModalFooter>
-    </Modal>);
-}
-
-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 (<Table className='mb-0'>
-            <tbody>
-                <tr>
-                    <td className={'border-top-0 ' + team1Class}>{props.match.team1.name}</td>
-                </tr>
-                <tr>
-                    <td className={props.borderColor + ' ' + team2Class}>kein Gegner</td>
-                </tr>
-            </tbody>
-        </Table>);
-    } else {
-        return (<Table className='mb-0'>
-            <tbody>
-                <tr>
-                    <th className='stage border-top-0'>{props.match.team1.score}</th>
-                    <td className={'border-top-0 ' + team1Class}>{props.match.team1.name}</td>
-                </tr>
-                <tr>
-                    <th className={'stage ' + props.borderColor}>{props.match.team2.score}</th>
-                    <td className={props.borderColor + ' ' + team2Class}>{props.match.team2.name}</td>
-                </tr>
-            </tbody>
-        </Table>);
-    }
-}
-
-function EditableMatchTable(props) {
-    return (<Table className='mb-0'>
-        <tbody>
-            <tr>
-                <td className='scoreInput border-top-0'>
-                    <ScoreInput score={props.match.team1.score}/>
-                </td>
-                <td className='align-middle border-top-0'>{props.match.team1.name}</td>
-            </tr>
-            <tr>
-                <td className='scoreInput'>
-                    <ScoreInput score={props.match.team2.score}/>
-                </td>
-                <td className='align-middle'>{props.match.team2.name}</td>
-            </tr>
-        </tbody>
-    </Table>);
-}
-
-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 (<InputGroup>
-            <InputGroupAddon addonType="prepend"><Button onClick={this.decreaseScore} color='danger'
-                outline={true}>-1</Button></InputGroupAddon>
-            <Input className='font-weight-bold' value={this.state.score} onChange={this.updateScore} type='number'
-                step='1' placeholder='0'/>
-            <InputGroupAddon addonType="append"><Button onClick={this.increaseScore}
-                color='success'>+1</Button></InputGroupAddon>
-        </InputGroup>);
-    }
-}

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 = <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>);
+    }
+}

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 (<Table className='mb-0'>
+            <tbody>
+                <tr>
+                    <td className={'border-top-0 ' + team1Class}>{props.match.team1.name}</td>
+                </tr>
+                <tr>
+                    <td className={props.borderColor + ' ' + team2Class}>kein Gegner</td>
+                </tr>
+            </tbody>
+        </Table>);
+    } else {
+        return (<Table className='mb-0'>
+            <tbody>
+                <tr>
+                    <th className='stage border-top-0'>{props.match.team1.score}</th>
+                    <td className={'border-top-0 ' + team1Class}>{props.match.team1.name}</td>
+                </tr>
+                <tr>
+                    <th className={'stage ' + props.borderColor}>{props.match.team2.score}</th>
+                    <td className={props.borderColor + ' ' + team2Class}>{props.match.team2.name}</td>
+                </tr>
+            </tbody>
+        </Table>);
+    }
+}

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',

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',