Merge pull request #31 from turniere/ticket/TURNIERE-207

Implement Starting and Ending a Match (Ticket/turniere 207)
2019-05-29 00:10:55 +02:00 · 2019-05-29 00:10:55 +02:00 · 0aa8f307ec
parent 54e4eb901e e402fab71b
commit 0aa8f307ec
4 changed files with 178 additions and 62 deletions
--- a/js/api.js
+++ b/js/api.js
@ -221,6 +221,32 @@ 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.END_MATCH:
+        patchRequest(action.state, '/matches/' + action.parameters.matchId, {
+            state: 'finished'
+        }).then(resp => {
+            storeOptionalToken(resp);
+            action.parameters.successCallback(resp.data.winner);
+        }).catch(error => {
+            if (error.response) {
+                storeOptionalToken(error.response);
+            }
+            action.parameters.errorCallback();
+        });
        return Object.assign({}, state, {});
    case actionTypesTournamentinfo.CLEAR:

@ -364,6 +390,30 @@ 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 endMatch(matchId, successCallback, errorCallback) {
+    __store.dispatch({
+        type: actionTypesTournamentinfo.END_MATCH,
+        parameters: {
+            matchId: matchId,
+            successCallback: successCallback,
+            errorCallback: errorCallback
+        },
+        state: __store.getState()
+    });
+}
+
 export function getState() {
    return __store.getState();
 }
--- a/js/components/Match.js
+++ b/js/components/Match.js
@ -12,15 +12,25 @@ import {
    Table
 } from 'reactstrap';
 import React from 'react';
+import {endMatch, 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,
+            match: this.props.match
        };
        this.toggleModal = this.toggleModal.bind(this);
+        this.startMatch = this.startMatch.bind(this);
+        this.onStartMatchSuccess = this.onStartMatchSuccess.bind(this);
+        this.onStartMatchError = this.onStartMatchError.bind(this);
+        this.endMatch = this.endMatch.bind(this);
+        this.onEndMatchSuccess = this.onEndMatchSuccess.bind(this);
+        this.onEndMatchError = this.onEndMatchError.bind(this);
+        this.getMatchFinishedMessage = this.getMatchFinishedMessage.bind(this);
    }

    toggleModal() {
@ -31,26 +41,68 @@ export class Match extends React.Component {
        }
    }

+    startMatch() {
+        startMatch(this.state.match.id, this.onStartMatchSuccess, this.onStartMatchError);
+    }
+
+    onStartMatchSuccess() {
+        const updatedMatch = this.state.match;
+        updatedMatch.state = 'in_progress';
+        this.setState({match: updatedMatch});
+        this.toggleModal();
+    }
+
+    onStartMatchError() {
+        this.toggleModal();
+        notify.show('Das Match konnte nicht gestartet werden.', 'error', 3000);
+    }
+
+    endMatch() {
+        endMatch(this.state.match.id, this.onEndMatchSuccess, this.onEndMatchError);
+    }
+
+    onEndMatchSuccess(winner) {
+        const updatedMatch = this.state.match;
+        updatedMatch.state = 'finished';
+        updatedMatch.winnerTeamId = winner === null ? null : winner.id;
+        this.setState({match: updatedMatch});
+        this.toggleModal();
+    }
+
+    onEndMatchError() {
+        this.toggleModal();
+        notify.show('Das Match konnte nicht beendet werden.', 'error', 3000);
+    }
+
+    getMatchFinishedMessage() {
+        const match = this.state.match;
+        if (match.winnerTeamId === null) {
+            return 'Spiel beendet, unentschieden';
+        }
+        if (match.winnerTeamId === match.team1.id) {
+            return 'Gewinner: ' + match.team1.name;
+        }
+        if (match.winnerTeamId === match.team2.id) {
+            return 'Gewinner: ' + match.team2.name;
+        }
+        return 'Spiel beendet';
+    }
+
    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) {
+        // possible states: single_team not_ready not_started in_progress finished
+        switch (this.state.match.state) {
        case 'in_progress':
            cardClass = 'table-warning';
            borderClass = 'border-warning';
            smallMessage = 'Spiel läuft';
            break;
-        case 'team1_won':
+        case 'finished':
            cardClass = 'table-success';
            borderClass = 'border-success';
-            smallMessage = 'Gewinner: ' + this.props.match.team1;
-            break;
-        case 'team2_won':
-            cardClass = 'table-success';
-            borderClass = 'border-success';
-            smallMessage = 'Gewinner: ' + this.props.match.team2;
+            smallMessage = this.getMatchFinishedMessage();
            break;
        case 'single_team':
            cardClass = 'table-success';
@ -63,20 +115,16 @@ export class Match extends React.Component {
        case 'not_started':
            smallMessage = 'Spiel kann gestartet werden';
            break;
-        case 'undecided':
-            cardClass = 'table-success';
-            borderClass = 'border-success';
-            smallMessage = 'Spiel beendet, unentschieden';
-            break;
        }
        return (<div className='mb-3'>
            <Card className='shadow-sm match' onClick={this.toggleModal}>
                <CardBody className={borderClass + ' border py-2 ' + cardClass}>
-                    <MatchTable match={this.props.match} borderColor={borderClass}/>
+                    <MatchTable match={this.state.match} borderColor={borderClass}/>
                </CardBody>
            </Card>
            <small className='text-muted'>{smallMessage}</small>
-            <MatchModal title='Match' isOpen={this.state.modal} toggle={this.toggleModal} match={this.props.match}/>
+            <MatchModal title='Match' isOpen={this.state.modal} toggle={this.toggleModal} match={this.state.match}
+                startMatch={this.startMatch} endMatch={this.endMatch}/>
        </div>);
    }
 }
@ -84,16 +132,13 @@ export class Match extends React.Component {
 function MatchModal(props) {
    let title;
    let actionButton = '';
-    // possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
+    // 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.toggle}>Spiel beenden</Button>;
+        actionButton = <Button color='primary' onClick={props.endMatch}>Spiel beenden</Button>;
        break;
-    case 'team1_won':
-        title = 'Spiel beendet';
-        break;
-    case 'team2_won':
+    case 'finished':
        title = 'Spiel beendet';
        break;
    case 'single_team':
@ -104,17 +149,14 @@ function MatchModal(props) {
        break;
    case 'not_started':
        title = 'Spiel kann gestartet werden';
-        actionButton = <Button color='primary' onClick={props.toggle}>Spiel starten</Button>;
-        break;
-    case 'undecided':
-        title = 'Spiel beendet';
+        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}/>}
+            {props.matchState === 'in_progress' ? <EditableMatchTable match={props.match}/> :
+                <MatchTable match={props.match} matchStatus={props.matchState}/>}
        </ModalBody>
        <ModalFooter>
            {actionButton}
@ -126,17 +168,22 @@ function MatchModal(props) {
 function MatchTable(props) {
    let team1Class;
    let team2Class;
-    // possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
-    switch (props.match.state) {
+    // possible states: single_team not_ready not_started in_progress finished
+    switch (props.matchState) {
    case 'in_progress':
        break;
-    case 'team1_won':
-        team1Class = 'font-weight-bold';
-        team2Class = 'lost-team';
-        break;
-    case 'team2_won':
-        team1Class = 'lost-team';
-        team2Class = 'font-weight-bold';
+    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';
@ -145,14 +192,12 @@ function MatchTable(props) {
        break;
    case 'not_started':
        break;
-    case 'undecided':
-        break;
    }
    if (props.match.state === 'single_team') {
        return (<Table className='mb-0'>
            <tbody>
                <tr>
-                    <td className={'border-top-0 ' + team1Class}>{props.match.team1}</td>
+                    <td className={'border-top-0 ' + team1Class}>{props.match.team1.name}</td>
                </tr>
                <tr>
                    <td className={props.borderColor + ' ' + team2Class}>kein Gegner</td>
@ -163,12 +208,12 @@ function MatchTable(props) {
        return (<Table className='mb-0'>
            <tbody>
                <tr>
-                    <th className='stage border-top-0'>{props.match.scoreTeam1}</th>
-                    <td className={'border-top-0 ' + team1Class}>{props.match.team1}</td>
+                    <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.scoreTeam2}</th>
-                    <td className={props.borderColor + ' ' + team2Class}>{props.match.team2}</td>
+                    <th className={'stage ' + props.borderColor}>{props.match.team2.score}</th>
+                    <td className={props.borderColor + ' ' + team2Class}>{props.match.team2.name}</td>
                </tr>
            </tbody>
        </Table>);
@ -180,15 +225,15 @@ function EditableMatchTable(props) {
        <tbody>
            <tr>
                <td className='scoreInput border-top-0'>
-                    <ScoreInput score={props.match.scoreTeam1}/>
+                    <ScoreInput score={props.match.team1.score}/>
                </td>
-                <td className='align-middle border-top-0'>{props.match.team1}</td>
+                <td className='align-middle border-top-0'>{props.match.team1.name}</td>
            </tr>
            <tr>
                <td className='scoreInput'>
-                    <ScoreInput score={props.match.scoreTeam2}/>
+                    <ScoreInput score={props.match.team2.score}/>
                </td>
-                <td className='align-middle'>{props.match.team2}</td>
+                <td className='align-middle'>{props.match.team2.name}</td>
            </tr>
        </tbody>
    </Table>);
--- a/js/redux/tournamentInfo.js
+++ b/js/redux/tournamentInfo.js
@ -8,6 +8,9 @@ export const actionTypesTournamentinfo = {
    'MODIFY_TOURNAMENT_SUCCESS': 'MODIFY_TOURNAMENT_SUCCESS',
    'MODIFY_TOURNAMENT_ERROR': 'MODIFY_TOURNAMENT_ERROR',

+    'START_MATCH': 'START_MATCH',
+    'END_MATCH': 'END_MATCH',
+
    'REHYDRATE': 'TOURNAMENTINFO_REHYDRATE',
    'CLEAR': 'TOURNAMENTINFO_CLEAR'
 };
--- a/pages/tournament.js
+++ b/pages/tournament.js
@ -121,24 +121,42 @@ function convertGroup(apiGroup) {

 function convertMatch(apiMatch) {
    const result = {
-        id: apiMatch.id, state: apiMatch.state
+        id: apiMatch.id, state: apiMatch.state, winnerTeamId: apiMatch.winner === null ? null : apiMatch.winner.id
    };

    if (apiMatch.match_scores.length === 2) {
-        result.team1 = apiMatch.match_scores[0].team.name;
-        result.scoreTeam1 = apiMatch.match_scores[0].points;
-        result.team2 = apiMatch.match_scores[1].team.name;
-        result.scoreTeam2 = apiMatch.match_scores[1].points;
+        result.team1 = {
+            name: apiMatch.match_scores[0].team.name,
+            id: apiMatch.match_scores[0].team.id,
+            score: apiMatch.match_scores[0].points
+        };
+        result.team2 = {
+            name: apiMatch.match_scores[1].team.name,
+            id: apiMatch.match_scores[1].team.id,
+            score: apiMatch.match_scores[1].points
+        };
    } else if (apiMatch.match_scores.length === 1) {
-        result.team1 = apiMatch.match_scores[0].team.name;
-        result.scoreTeam1 = apiMatch.match_scores[0].points;
-        result.team2 = 'TBD';
-        result.scoreTeam2 = 0;
+        result.team1 = {
+            name: apiMatch.match_scores[0].team.name,
+            id: apiMatch.match_scores[0].team.id,
+            score: apiMatch.match_scores[0].points
+        };
+        result.team2 = {
+            name: 'TBD',
+            id: null,
+            score: 0
+        };
    } else {
-        result.team1 = 'TBD';
-        result.scoreTeam1 = 0;
-        result.team2 = 'TBD';
-        result.scoreTeam2 = 0;
+        result.team1 = {
+            name: 'TBD',
+            id: null,
+            score: 0
+        };
+        result.team2 = {
+            name: 'TBD',
+            id: null,
+            score: 0
+        };
    }

    return result;