From 8c6304fac7d90a112d60e3833c3a7aad85d5c842 Mon Sep 17 00:00:00 2001 From: Jonny Date: Wed, 12 Jun 2019 10:09:31 +0200 Subject: [PATCH 1/4] Actually send the playoff_teams_amount parameter --- pages/create.js | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/pages/create.js b/pages/create.js index 1e0eb3d..8fd4e3c 100644 --- a/pages/create.js +++ b/pages/create.js @@ -76,6 +76,7 @@ class CreateTournamentForm extends React.Component { this.handlePublicInput = this.handlePublicInput.bind(this); this.handleGroupSizeInput = this.handleGroupSizeInput.bind(this); this.handleGroupAdvanceInput = this.handleGroupAdvanceInput.bind(this); + this.generateTournamentCreationObject = this.generateTournamentCreationObject.bind(this); this.create = this.create.bind(this); } @@ -186,17 +187,27 @@ class CreateTournamentForm extends React.Component { } create() { - createTournament({ + createTournament(this.generateTournamentCreationObject(), () => { + notify.show('Das Turnier wurde erfolgreich erstellt.', 'success', 5000); + }, () => { + notify.show('Das Turnier konnte nicht erstellt werden.', 'warning', 5000); + }); + } + + generateTournamentCreationObject() { + let tournament = { 'name': this.state.name, 'description': this.state.description, 'public': this.state.public, 'group_stage': this.state.groupPhaseEnabled, 'teams': createTeamArray(this.state.groupPhaseEnabled, this.state.groups, this.state.teams) - }, () => { - notify.show('Das Turnier wurde erfolgreich erstellt.', 'success', 5000); - }, () => { - notify.show('Das Turnier konnte nicht erstellt werden.', 'warning', 5000); - }); + }; + + if (this.state.groupPhaseEnabled) { + tournament.playoff_teams_amount = this.state.groupAdvance; + } + + return tournament; } } From e58cfdc288fb897832795c1db3f241ed5b2cb1a6 Mon Sep 17 00:00:00 2001 From: Jonny Date: Wed, 12 Jun 2019 10:58:16 +0200 Subject: [PATCH 2/4] Add new input, which increases the group advance exponentially --- pages/create.js | 61 +++++++++++++++++++++++----------- static/icons/chevron-left.svg | 3 ++ static/icons/chevron-right.svg | 3 ++ 3 files changed, 47 insertions(+), 20 deletions(-) create mode 100644 static/icons/chevron-left.svg create mode 100644 static/icons/chevron-right.svg diff --git a/pages/create.js b/pages/create.js index 8fd4e3c..1ef0fd3 100644 --- a/pages/create.js +++ b/pages/create.js @@ -3,9 +3,8 @@ import React from 'react'; import {notify} from 'react-notify-toast'; import {connect} from 'react-redux'; import posed from 'react-pose'; - -import {Button, Card, CardBody, Container, CustomInput, Form, FormGroup, Input, Label} from 'reactstrap'; - +import {Button, Card, CardBody, Container, CustomInput, Form, FormGroup, + Input, InputGroup, InputGroupAddon, Label} from 'reactstrap'; import {TurniereNavigation} from '../js/components/Navigation'; import {Footer} from '../js/components/Footer'; import EditableStringList from '../js/components/EditableStringList'; @@ -75,7 +74,8 @@ class CreateTournamentForm extends React.Component { this.handleDescriptionInput = this.handleDescriptionInput.bind(this); this.handlePublicInput = this.handlePublicInput.bind(this); this.handleGroupSizeInput = this.handleGroupSizeInput.bind(this); - this.handleGroupAdvanceInput = this.handleGroupAdvanceInput.bind(this); + this.increaseGroupAdvance = this.increaseGroupAdvance.bind(this); + this.decreaseGroupAdvance = this.decreaseGroupAdvance.bind(this); this.generateTournamentCreationObject = this.generateTournamentCreationObject.bind(this); this.create = this.create.bind(this); @@ -113,8 +113,20 @@ class CreateTournamentForm extends React.Component { - + + + + + + + + + @@ -143,6 +155,26 @@ class CreateTournamentForm extends React.Component { this.setState({groups: list}); } + increaseGroupAdvance() { + const newGroupAdvance = this.state.groupAdvance * 2; + + if (newGroupAdvance <= this.state.groupSize) { + this.setState({ + groupAdvance: newGroupAdvance + }); + } + } + + decreaseGroupAdvance() { + const newGroupAdvance = Math.floor(this.state.groupAdvance / 2); + + if (newGroupAdvance >= 1) { + this.setState({ + groupAdvance: newGroupAdvance + }); + } + } + handleGroupSizeInput(input) { const newSize = input.target.value; @@ -150,26 +182,15 @@ class CreateTournamentForm extends React.Component { return; } - if (newSize <= this.state.groupAdvance) { + if (newSize < this.state.groupAdvance) { this.setState({ - groupSize: newSize, groupAdvance: newSize - 1 + groupSize: newSize, groupAdvance: Math.floor(this.state.groupAdvance / 2) }); } else { this.setState({groupSize: newSize}); } } - handleGroupAdvanceInput(input) { - const newAdvance = input.target.value; - - if (newAdvance === undefined || newAdvance <= 0 || - newAdvance >= this.state.groupSize) { - return; - } - - this.setState({groupAdvance: newAdvance}); - } - handleGroupPhaseEnabledInput(input) { this.setState({groupPhaseEnabled: input.target.checked}); } @@ -195,7 +216,7 @@ class CreateTournamentForm extends React.Component { } generateTournamentCreationObject() { - let tournament = { + const tournament = { 'name': this.state.name, 'description': this.state.description, 'public': this.state.public, diff --git a/static/icons/chevron-left.svg b/static/icons/chevron-left.svg new file mode 100644 index 0000000..256902c --- /dev/null +++ b/static/icons/chevron-left.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/static/icons/chevron-right.svg b/static/icons/chevron-right.svg new file mode 100644 index 0000000..2da0760 --- /dev/null +++ b/static/icons/chevron-right.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From e8c78539ae471279efaae7149be69d17496126a2 Mon Sep 17 00:00:00 2001 From: Jonny Date: Wed, 12 Jun 2019 11:39:51 +0200 Subject: [PATCH 3/4] Make consistent style with the second number selection --- pages/create.js | 53 +++++++++++++++++++++------------- static/css/create.css | 4 +++ static/icons/chevron-left.svg | 3 -- static/icons/chevron-right.svg | 3 -- 4 files changed, 37 insertions(+), 26 deletions(-) create mode 100644 static/css/create.css delete mode 100644 static/icons/chevron-left.svg delete mode 100644 static/icons/chevron-right.svg diff --git a/pages/create.js b/pages/create.js index 1ef0fd3..9eca46d 100644 --- a/pages/create.js +++ b/pages/create.js @@ -11,6 +11,7 @@ import EditableStringList from '../js/components/EditableStringList'; import {createTournament} from '../js/api'; import '../static/css/everypage.css'; +import '../static/css/create.css'; import RequireLogin from '../js/components/RequireLogin'; class CreatePage extends React.Component { @@ -73,9 +74,10 @@ class CreateTournamentForm extends React.Component { this.handleNameInput = this.handleNameInput.bind(this); this.handleDescriptionInput = this.handleDescriptionInput.bind(this); this.handlePublicInput = this.handlePublicInput.bind(this); - this.handleGroupSizeInput = this.handleGroupSizeInput.bind(this); this.increaseGroupAdvance = this.increaseGroupAdvance.bind(this); this.decreaseGroupAdvance = this.decreaseGroupAdvance.bind(this); + this.increaseGroupSize = this.increaseGroupSize.bind(this); + this.decreaseGroupSize = this.decreaseGroupSize.bind(this); this.generateTournamentCreationObject = this.generateTournamentCreationObject.bind(this); this.create = this.create.bind(this); @@ -107,24 +109,32 @@ class CreateTournamentForm extends React.Component { className="groupphasefader"> - + + + + + + + + + - + - + @@ -175,19 +185,22 @@ class CreateTournamentForm extends React.Component { } } - handleGroupSizeInput(input) { - const newSize = input.target.value; + increaseGroupSize() { + this.setState({groupSize: this.state.groupSize+1}); + } - if (newSize === undefined || newSize < 2) { - return; - } + decreaseGroupSize() { + const newGroupSize = this.state.groupSize - 1; - if (newSize < this.state.groupAdvance) { - this.setState({ - groupSize: newSize, groupAdvance: Math.floor(this.state.groupAdvance / 2) - }); - } else { - this.setState({groupSize: newSize}); + if (newGroupSize >= 3) { + if (newGroupSize >= this.state.groupAdvance) { + this.setState({groupSize: newGroupSize}); + } else { + this.setState({ + groupSize: newGroupSize, + groupAdvance: Math.floor(this.state.groupAdvance / 2) + }); + } } } diff --git a/static/css/create.css b/static/css/create.css new file mode 100644 index 0000000..0577cc2 --- /dev/null +++ b/static/css/create.css @@ -0,0 +1,4 @@ + +.btn-width { + width: 48px; +} \ No newline at end of file diff --git a/static/icons/chevron-left.svg b/static/icons/chevron-left.svg deleted file mode 100644 index 256902c..0000000 --- a/static/icons/chevron-left.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/static/icons/chevron-right.svg b/static/icons/chevron-right.svg deleted file mode 100644 index 2da0760..0000000 --- a/static/icons/chevron-right.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file From 71d66fdb74d3e2c3d7637bc4fec441654fa8f0d2 Mon Sep 17 00:00:00 2001 From: Jonny Date: Wed, 12 Jun 2019 14:49:44 +0200 Subject: [PATCH 4/4] Extract the numeric input as single component --- js/components/NumericInput.js | 48 +++++++++++++++++++++ pages/create.js | 41 ++++++------------ static/css/{create.css => numericinput.css} | 0 3 files changed, 61 insertions(+), 28 deletions(-) create mode 100644 js/components/NumericInput.js rename static/css/{create.css => numericinput.css} (100%) diff --git a/js/components/NumericInput.js b/js/components/NumericInput.js new file mode 100644 index 0000000..478f2cb --- /dev/null +++ b/js/components/NumericInput.js @@ -0,0 +1,48 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {Button, InputGroup, InputGroupAddon, Input} from 'reactstrap'; +import '../../static/css/numericinput.css'; + +export default class NumericInput extends React.Component { + render() { + return ( + + + + + + + + ); + } +} + +NumericInput.propTypes = { + decrementText: PropTypes.string.isRequired, + decrementCallback: PropTypes.func.isRequired, + decrementColor: PropTypes.oneOf([ + 'primary', 'secondary', 'success', 'info', 'warning', 'danger' + ]), + decrementOutline: PropTypes.bool, + + + incrementText: PropTypes.string.isRequired, + incrementCallback: PropTypes.func.isRequired, + incrementColor: PropTypes.oneOf([ + 'primary', 'secondary', 'success', 'info', 'warning', 'danger' + ]), + incrementOutline: PropTypes.bool, + + value: PropTypes.number.isRequired +}; + +NumericInput.defaultProps = { + decrementColor: 'primary', + decrementOutline: true, + + incrementColor: 'primary', + incrementOutline: true +}; diff --git a/pages/create.js b/pages/create.js index 9eca46d..9165c1b 100644 --- a/pages/create.js +++ b/pages/create.js @@ -3,16 +3,15 @@ import React from 'react'; import {notify} from 'react-notify-toast'; import {connect} from 'react-redux'; import posed from 'react-pose'; -import {Button, Card, CardBody, Container, CustomInput, Form, FormGroup, - Input, InputGroup, InputGroupAddon, Label} from 'reactstrap'; +import {Button, Card, CardBody, Col, Container, CustomInput, Form, FormGroup, Input, Label} from 'reactstrap'; import {TurniereNavigation} from '../js/components/Navigation'; import {Footer} from '../js/components/Footer'; import EditableStringList from '../js/components/EditableStringList'; import {createTournament} from '../js/api'; import '../static/css/everypage.css'; -import '../static/css/create.css'; import RequireLogin from '../js/components/RequireLogin'; +import NumericInput from '../js/components/NumericInput'; class CreatePage extends React.Component { render() { @@ -109,34 +108,20 @@ class CreateTournamentForm extends React.Component { className="groupphasefader"> - - - - - - - - - + + + - - - - - - - - - + weiterkommen? + + + diff --git a/static/css/create.css b/static/css/numericinput.css similarity index 100% rename from static/css/create.css rename to static/css/numericinput.css