turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add fields for additional tournament variables to change

This commit is contained in:
Jonny 2019-06-17 12:40:14 +02:00
parent 4f9942e242
commit 9ac64db196
3 changed files with 98 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/api.js
View File

@ -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, {

6
js/redux/tournamentInfo.js
View File

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

93
pages/tournament-edit.js
View File

@ -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;
return {name, description, isPublic};
const {name, description, isPublic, stages, playoffTeamsAmount, instantFinalistAmount,
intermediateRoundParticipants} = state.tournamentinfo;
return {name, description, isPublic, stages, playoffTeamsAmount, instantFinalistAmount,
intermediateRoundParticipants};
}
const VisibleEditTournamentForm = connect(mapStateToTournamentFormProps, null, null,