Make groups visible and add the teams to the groups

js/components/EditableStringList.js

@@ -19,12 +19,26 @@ export default class EditableStringList extends React.Component {
     }
 
     add(text) {
-        if (text === '' || this.props.teams.includes(text)) {
+        if (text === '' || this.state.teams.includes(text)) {
             return false;
         }
-        this.props.teams.push(text);
+        this.state.teams.push(text);
-        this.setState({teams: this.state.teams});
+        
+        var lastGroup = this.state.groups[this.state.groups.length - 1];
+        if(lastGroup === undefined || lastGroup.length === this.props.groupSize) {
+            this.state.groups[this.state.groups.length] = [];
+        }
+        lastGroup = this.state.groups[this.state.groups.length - 1];
+        lastGroup[lastGroup.length] = text;
+
+        this.setState({
+            teams: this.state.teams,
+            groups: this.state.groups
+        });
+
         this.props.onTeamsChange(this.state.teams);
+        this.props.onGroupsChange(this.state.groups);
+
         return true;
     }
 
@@ -35,6 +49,23 @@ export default class EditableStringList extends React.Component {
     }
 
     render() {
+        if(this.props.groupPhaseEnabled) {
+            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}/>
+                        <GroupView groups={this.state.groups} onGroupSwitched={this.onGroupSwitch}/>
+                    </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.groupPlaceHolder}
+                    </div>
+                );
+            }
+        } else {
             if ((typeof this.state.teams !== 'undefined') && this.state.teams.length > 0) {
                 return (
                     <div className="bg-light p-3 text-secondary font-italic">
@@ -51,6 +82,29 @@ export default class EditableStringList extends React.Component {
                 );
             }
         }
+    }
+}
+
+class GroupView extends React.Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div>
+                {this.props.groups.map((group, groupindex) => (
+                    <div className="group-container" key={groupindex}>
+                        Group {groupindex + 1}
+                        {group.map((team, teamindex) => (
+                            <div className="team" key={teamindex}>{team}</div>
+                        ))}
+                    </div>
+                ))}
+            </div>
+        );
+    }
 }
 
 class StringInput extends React.Component {

pages/create.js

@@ -114,6 +114,7 @@ class CreateTournamentForm extends React.Component {
         };
         this.handleGroupPhaseEnabledInput = this.handleGroupPhaseEnabledInput.bind(this);
         this.teamListUpdate = this.teamListUpdate.bind(this);
+        this.groupListUpdate = this.groupListUpdate.bind(this);
 
         this.handleGroupSizeInput = this.handleGroupSizeInput.bind(this);
         this.handleGroupAdvanceInput = this.handleGroupAdvanceInput.bind(this);