turniere-frontend/js/components/EditableStringList.js

import React from 'react';
import {
    Alert, Button, Card, CardBody, CardTitle, Input, InputGroup, InputGroupAddon
} from 'reactstrap';

import '../../static/css/editablestringlist.css';

export default class EditableStringList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            groupSize: props.groupSize, teams: props.teams, groups: props.groups
        };
        this.add = this.add.bind(this);
        this.remove = this.remove.bind(this);
        this.onGroupSwitch = this.onGroupSwitch.bind(this);
    }

    add(text) {
        if (text === '' || this.state.teams.includes(text)) {
            return false;
        }
        this.state.teams.push(text);

        let lastGroup = this.state.groups[this.state.groups.length - 1];
        if (lastGroup === undefined || lastGroup.length >= this.state.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;
    }

    remove(text) {
        if (this.removeTeamFromGroup(text) === false) {
            return false;
        }

        this.setState({
            teams: this.state.teams, groups: this.state.groups
        });

        this.props.onTeamsChange(this.state.teams);
        this.props.onGroupsChange(this.state.groups);
    }

    removeTeamFromGroup(text) {
        this.state.teams = this.state.teams.filter(item => item !== text);

        const teamIndex = this.findTeam(text);
        if (teamIndex === null) {
            return false;
        }

        // Move every first team to the next group
        this.state.groups[teamIndex.group].splice(teamIndex.team, 1);
        for (let group = teamIndex.group; group < this.state.groups.length - 1; group++) {
            const currentGroup = this.state.groups[group];
            currentGroup[currentGroup.length] = this.state.groups[group + 1].splice(0, 1)[0];
        }

        // delete the last group in case it is empty
        if (this.state.groups[this.state.groups.length - 1].length === 0) {
            this.state.groups.splice(this.state.groups.length - 1, 1);
        }

        return true;
    }

    findTeam(text) {
        for (let group = 0; group < this.state.groups.length; group++) {
            for (let team = 0; team < this.state.groups[group].length; team++) {
                if (this.state.groups[group][team] === text) {
                    return {
                        group: group, team: team
                    };
                }
            }
        }
        return null;
    }

    resizeGroups(newSize) {
        const oldGroups = this.state.groups;
        const rearrangedGroups = [];

        for (let oldGroupIndex = 0; oldGroupIndex < oldGroups.length; oldGroupIndex++) {
            for (let oldTeamIndex = 0; oldTeamIndex < oldGroups[oldGroupIndex].length; oldTeamIndex++) {
                const index = oldGroupIndex * this.state.groupSize + oldTeamIndex;

                const newGroupIndex = Math.floor(index / newSize);
                const newTeamIndex = index % newSize;

                if (newTeamIndex === 0) {
                    rearrangedGroups[newGroupIndex] = [];
                }

                rearrangedGroups[newGroupIndex][newTeamIndex] = oldGroups[oldGroupIndex][oldTeamIndex];
            }
        }

        this.setState({
            groupSize: newSize, groups: rearrangedGroups
        });
        this.props.onGroupsChange(this.state.groups);
    }

    onGroupSwitch(src, dest) {
        const groupCopy = this.state.groups.slice();

        const srcTeam = groupCopy[src.group][src.team];
        const destTeam = groupCopy[dest.group][dest.team];

        groupCopy[src.group].splice(src.team, 1, destTeam);
        groupCopy[dest.group].splice(dest.team, 1, srcTeam);

        this.setState({
            groups: groupCopy
        });
        this.props.onGroupsChange(this.state.groups);
    }

    render() {
        if (this.props.groupSize !== this.state.groupSize) {
            this.resizeGroups(this.props.groupSize);
        }

        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} removeTeam={this.remove}
                        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">
                    <StringInput submit={this.add} placeholder={this.props.inputPlaceholder}
                        addButtonText={this.props.addButtonText}/>
                    {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.teamPlaceholder}
                </div>);
            }
        }
    }
}

class GroupView extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (<div>
            {this.props.groups.map((group, groupindex) => (<Card className="group-card" key={groupindex}>
                <CardBody>
                    <CardTitle>Group {groupindex + 1}</CardTitle>
                    {group.map((team, teamindex) => (<div key={team} draggable droppable="droppable"
                        className="grouped-team-item"
                        onDragStart={e => this.onDragStart(e, groupindex, teamindex)}
                        onDragOver={e => this.onDragOver(e)}
                        onDrop={e => this.onDrop(e, groupindex, teamindex)}>

                        <Item text={team} removeItem={this.props.removeTeam}/>

                    </div>))}
                </CardBody>
            </Card>))}
        </div>);
    }

    onDragStart(e, group, team) {
        e.dataTransfer.setData('text/plain', JSON.stringify({
            group: group, team: team
        }));
    }

    onDragOver(e) {
        e.preventDefault();
    }

    onDrop(e, group, team) {
        e.preventDefault();

        const src = JSON.parse(e.dataTransfer.getData('text'));
        const dest = {
            group: group, team: team
        };

        this.props.onGroupSwitched(src, dest);
    }
}

class StringInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: ''};
        this.handleChange = this.handleChange.bind(this);
        this.submit = this.submit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
    }

    render() {
        return (<InputGroup className="mb-3">
            <Input placeholder={this.props.placeholder} type="text" size="255" value={this.state.value} required
                onChange={this.handleChange} onKeyPress={e => {
                    if (e.key === 'Enter') {
                        this.submit();
                        return false;
                    }
                }}/>
            <InputGroupAddon addonType="append">
                <Button color="success" outline={true}
                    onClick={() => this.submit()}>{this.props.addButtonText}</Button>
            </InputGroupAddon>
        </InputGroup>);
    }

    submit() {
        if (this.props.submit(this.state.value)) {
            this.setState({value: ''});
        }
    }
}

class Item extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: true
        };
        this.onDismiss = this.onDismiss.bind(this);
    }

    onDismiss() {
        this.setState({visible: false});
        this.props.removeItem(this.props.text);
    }

    render() {
        return (<Alert className="team-item m-2" color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
            {this.props.text}
        </Alert>);
    }
}