Add fields for additional tournament variables to change

js/api.js

@@ -211,7 +211,11 @@ const reducerTournamentinfo = (state = defaultStateTournamentinfo, action) => {
             ownerUsername: action.parameters.owner_username,
             isPublic: action.parameters.public,
             stages: action.parameters.stages,
-            teams: action.parameters.teams
+            teams: action.parameters.teams,
+
+            playoffTeamsAmount: action.parameters.playoff_teams_amount,
+            instantFinalistAmount: action.parameters.instant_finalists_amount,
+            intermediateRoundParticipants: action.parameters.intermediate_round_participants_amount
         });
     case actionTypesTournamentinfo.MODIFY_TOURNAMENT:
         patchRequest(action.state, '/teams/' + action.parameters.teamid, {

js/redux/tournamentInfo.js

@@ -24,6 +24,10 @@ export const defaultStateTournamentinfo = {
     ownerUsername: '',
     isPublic: '',
     stages: [],
-    teams: []
+    teams: [],
+
+    playoffTeamsAmount: 0,
+    instantFinalistAmount: 0,
+    intermediateRoundParticipants: 0
 };
 

pages/tournament-edit.js

@@ -3,7 +3,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 import {notify} from 'react-notify-toast';
 import {
-    Container, Button, Card, CardBody, Table
+    Col, Container, Button, Card, CardBody, Table, FormGroup, Label
 } from 'reactstrap';
 
 import {requestTournament} from '../js/api';
@@ -14,6 +14,8 @@ import {Footer} from '../js/components/Footer';
 import {Login} from '../js/components/Login';
 import {ErrorPageComponent} from '../js/components/ErrorComponents';
 import {updateTeamName} from '../js/api';
+import NumericInput from '../js/components/NumericInput';
+import {WarningPopup} from '../js/components/WarningPopup';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 
@@ -142,8 +144,20 @@ class EditTournamentForm extends React.Component {
         super(props);
 
         this.state = {
-            name: '', description: '', isPublic: false
+            name: '',
+            description: '',
+            isPublic: false,
+            playoffTeamsAmount: 0,
+            instantFinalistAmount: 0,
+            intermediateRoundParticipants: 0
         };
+
+        this.increasePlayoffTeamsAmount = this.increasePlayoffTeamsAmount.bind(this);
+        this.decreasePlayoffTeamsAmount = this.decreasePlayoffTeamsAmount.bind(this);
+        this.increaseInstantFinalistsAmount = this.increaseInstantFinalistsAmount.bind(this);
+        this.decreaseInstantFinalistsAmount = this.decreaseInstantFinalistsAmount.bind(this);
+        this.increaseIntermediateRoundParticipants = this.increaseIntermediateRoundParticipants.bind(this);
+        this.decreaseIntermediateRoundParticipants = this.decreaseIntermediateRoundParticipants.bind(this);
     }
 
     render() {
@@ -167,6 +181,38 @@ class EditTournamentForm extends React.Component {
                     onChange={this.handlePublicInput.bind(this)}/>
                 <label htmlFor="isPublic" className="custom-control-label">Das Turnier öffentlich anzeigen</label>
             </div>
+            <WarningPopup
+                text="Die Anzahl der Teams im Playoff muss der Anzahl an Teams, die direkt im Playoff sind
+                plus der Hälfte der Anzahl an Teams in der Zwischenrunde entsprechen."
+                shown={this.state.playoffTeamsAmount !== this.state.instantFinalistAmount +
+                (this.state.intermediateRoundParticipants / 2)}>
+                <FormGroup>
+                    <Label for="playoff-teams-amount">Anzahl Teams in der Playoff-Stage</Label>
+                    <Col xs="3" className="pl-0">
+                        <NumericInput value={this.state.playoffTeamsAmount}
+                            incrementText="&#215;2" incrementCallback={this.increasePlayoffTeamsAmount}
+                            decrementText="&#247;2" decrementCallback={this.decreasePlayoffTeamsAmount}/>
+                    </Col>
+                </FormGroup>
+                <FormGroup>
+                    <Label for="instant-finalists-amount">
+                        Anzahl Teams, die direkt in die Playoff-Stage weiter kommen</Label>
+                    <Col xs="3" className="pl-0">
+                        <NumericInput value={this.state.instantFinalistAmount}
+                            incrementText="+1" incrementCallback={this.increaseInstantFinalistsAmount}
+                            decrementText="-1" decrementCallback={this.decreaseInstantFinalistsAmount}/>
+                    </Col>
+                </FormGroup>
+                <FormGroup>
+                    <Label for="intermediate-round-participants">
+                        Anzahl Teams, die in einer Zwischenrunde um die Playoff-Stage spielen müssen</Label>
+                    <Col xs="3" className="pl-0">
+                        <NumericInput value={this.state.intermediateRoundParticipants}
+                            incrementText="+1" incrementCallback={this.increaseIntermediateRoundParticipants}
+                            decrementText="-1" decrementCallback={this.decreaseIntermediateRoundParticipants}/>
+                    </Col>
+                </FormGroup>
+            </WarningPopup>
             <div className="form-group">
                 <div className="input-group">
                     <Button color="success" className="px-5" id="edittournament-button"
@@ -177,9 +223,13 @@ class EditTournamentForm extends React.Component {
     }
 
     notifyOfContentUpdate() {
-        const {name, description, isPublic} = this.props;
+        const {name, description, isPublic, playoffTeamsAmount, instantFinalistAmount,
+            intermediateRoundParticipants} = this.props;
 
         this.setState({
+            playoffTeamsAmount: playoffTeamsAmount,
+            instantFinalistAmount: instantFinalistAmount,
+            intermediateRoundParticipants: intermediateRoundParticipants,
             name: name ? name : '', description: description ? description : '', isPublic: isPublic
         });
     }
@@ -199,11 +249,44 @@ class EditTournamentForm extends React.Component {
     handlePublicInput(input) {
         this.setState({public: input.target.value});
     }
+
+
+    increasePlayoffTeamsAmount() {
+        this.setState({playoffTeamsAmount: this.state.playoffTeamsAmount * 2});
+    }
+
+    decreasePlayoffTeamsAmount() {
+        if (this.state.playoffTeamsAmount > 1) {
+            this.setState({playoffTeamsAmount: Math.floor(this.state.playoffTeamsAmount / 2)});
+        }
+    }
+
+    increaseInstantFinalistsAmount() {
+        this.setState({instantFinalistAmount: this.state.instantFinalistAmount + 1});
+    }
+
+    decreaseInstantFinalistsAmount() {
+        if (this.state.instantFinalistAmount > 1) {
+            this.setState({instantFinalistAmount: this.state.instantFinalistAmount - 1});
+        }
+    }
+
+    increaseIntermediateRoundParticipants() {
+        this.setState({intermediateRoundParticipants: this.state.intermediateRoundParticipants + 1});
+    }
+
+    decreaseIntermediateRoundParticipants() {
+        if (this.state.intermediateRoundParticipants > 1) {
+            this.setState({intermediateRoundParticipants: this.state.intermediateRoundParticipants - 1});
+        }
+    }
 }
 
 function mapStateToTournamentFormProps(state) {
-    const {name, description, isPublic} = state.tournamentinfo;
+    const {name, description, isPublic, stages, playoffTeamsAmount, instantFinalistAmount,
-    return {name, description, isPublic};
+        intermediateRoundParticipants} = state.tournamentinfo;
+    return {name, description, isPublic, stages, playoffTeamsAmount, instantFinalistAmount,
+        intermediateRoundParticipants};
 }
 
 const VisibleEditTournamentForm = connect(mapStateToTournamentFormProps, null, null,