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) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
entries: props.entries teams: props.teams,
groups: props.groups
}; };
this.add = this.add.bind(this); this.add = this.add.bind(this);
this.remove = this.remove.bind(this); this.remove = this.remove.bind(this);
} }
add(text) { add(text) {
if (text === '' || this.state.entries.includes(text)) { if (text === '' || this.props.teams.includes(text)) {
return false; return false;
} }
this.state.entries.push(text); this.props.teams.push(text);
this.setState({entries: this.state.entries}); this.setState({teams: this.state.teams});
this.props.onChange(this.state.entries); this.props.onTeamsChange(this.state.teams);
return true; return true;
} }
remove(text) { remove(text) {
let tmp = this.state.entries.filter(item => item !== text); let tmp = this.state.teams.filter(item => item !== text);
this.setState({entries: tmp}); this.setState({teams: tmp});
this.props.onChange(tmp); this.props.onTeamsChange(tmp);
} }
render() { render() {
if ((typeof this.state.entries !== 'undefined') && this.state.entries.length > 0) { if ((typeof this.state.teams !== 'undefined') && this.state.teams.length > 0) {
return ( return (
<div className="bg-light p-3 text-secondary font-italic"> <div className="bg-light p-3 text-secondary font-italic">
<StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/> <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> </div>
); );
} else { } else {
return ( return (
<div className="bg-light p-3 text-secondary text-center font-italic"> <div className="bg-light p-3 text-secondary text-center font-italic">
<StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/> <StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/>
{this.props.placeholder} {this.props.teamPlaceholder}
</div> </div>
); );
} }

20
pages/create.js
View File

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