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

Create / Rename properties needed for the group view

This commit is contained in:
Jonny 2019-04-16 09:47:20 +02:00
parent f0aa1af2a1
commit 0bd92b2ada
2 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
js/components/EditableStringList.js
View File

@ -11,41 +11,42 @@ export default class EditableStringList extends React.Component {
constructor(props) {
super(props);
this.state = {
entries: props.entries
teams: props.teams,
groups: props.groups
};
this.add = this.add.bind(this);
this.remove = this.remove.bind(this);
}
add(text) {
if (text === '' || this.state.entries.includes(text)) {
if (text === '' || this.props.teams.includes(text)) {
return false;
}
this.state.entries.push(text);
this.setState({entries: this.state.entries});
this.props.onChange(this.state.entries);
this.props.teams.push(text);
this.setState({teams: this.state.teams});
this.props.onTeamsChange(this.state.teams);
return true;
}
remove(text) {
let tmp = this.state.entries.filter(item => item !== text);
this.setState({entries: tmp});
this.props.onChange(tmp);
let tmp = this.state.teams.filter(item => item !== text);
this.setState({teams: tmp});
this.props.onTeamsChange(tmp);
}
render() {
if ((typeof this.state.entries !== 'undefined') && this.state.entries.length > 0) {
if ((typeof this.state.teams !== 'undefined') && this.state.teams.length > 0) {
return (
<div className="bg-light p-3 text-secondary font-italic">
<StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/>
{this.state.entries.map((text) => <Item text={text} key={text} removeItem={this.remove}/>)}
{this.state.teams.map((text) => <Item text={text} key={text} removeItem={this.remove}/>)}
</div>
);
} else {
return (
<div className="bg-light p-3 text-secondary text-center font-italic">
<StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/>
{this.props.placeholder}
{this.props.teamPlaceholder}
</div>
);
}

20
pages/create.js
View File

@ -109,7 +109,8 @@ class CreateTournamentForm extends React.Component {
groupSize: 4,
groupAdvance: 1,
teams: []
teams: [],
groups: []
};
this.handleGroupPhaseEnabledInput = this.handleGroupPhaseEnabledInput.bind(this);
this.teamListUpdate = this.teamListUpdate.bind(this);
@ -152,8 +153,17 @@ class CreateTournamentForm extends React.Component {
</GroupphaseFader>
</Form>
<h3 className="custom-font mt-4">Teams</h3>
<EditableStringList addButtonText="hinzufügen" placeholder="Keine Teams hinzugefügt!" entries={[]}
onChange={this.teamListUpdate} inputPlaceholder="Teamname"/>
<EditableStringList
addButtonText="hinzufügen"
teamPlaceholder="Keine Teams hinzugefügt!"
groupPlaceHolder="Keine Gruppen verfügbar!"
teams={[]}
groups={[]}
groupPhaseEnabled={this.state.groupPhaseEnabled}
groupSize={this.state.groupSize}
onTeamsChange={this.teamListUpdate}
onGroupsChange={this.groupListUpdate}
inputPlaceholder="Teamname"/>
<Button color="success" size="lg" className="w-100 shadow-sm mt-4">Turnier erstellen</Button>
</div>
);
@ -163,6 +173,10 @@ class CreateTournamentForm extends React.Component {
this.setState({teams: list});
}
groupListUpdate(list) {
this.setState({groups: list});
}
handleGroupSizeInput(input) {
let newSize = input.target.value;
if(newSize <= this.state.groupAdvance) {