2016-11-01 07:46:13 -07:00
|
|
|
const React = require('react');
|
|
|
|
const {ListGroup} = require('react-bootstrap');
|
|
|
|
const TeamListItem = require('./TeamListItem.jsx');
|
2017-01-16 14:51:28 -08:00
|
|
|
const NewTeamModal = require('./NewTeamModal.jsx');
|
2017-01-24 04:06:07 -08:00
|
|
|
const RemoveServerModal = require('./RemoveServerModal.jsx');
|
2016-11-01 07:46:13 -07:00
|
|
|
|
|
|
|
const TeamList = React.createClass({
|
|
|
|
propTypes: {
|
|
|
|
onTeamsChange: React.PropTypes.func,
|
|
|
|
showAddTeamForm: React.PropTypes.bool,
|
2017-01-16 14:51:28 -08:00
|
|
|
teams: React.PropTypes.array,
|
2017-01-30 13:16:16 -08:00
|
|
|
addServer: React.PropTypes.func,
|
|
|
|
updateTeam: React.PropTypes.func,
|
|
|
|
toggleAddTeamForm: React.PropTypes.func
|
2016-11-01 07:46:13 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState() {
|
|
|
|
return {
|
2017-01-30 12:46:58 -08:00
|
|
|
showEditTeamForm: false,
|
2017-01-24 04:06:07 -08:00
|
|
|
indexToRemoveServer: -1,
|
2016-11-01 07:46:13 -07:00
|
|
|
team: {
|
|
|
|
url: '',
|
|
|
|
name: '',
|
|
|
|
index: false
|
|
|
|
}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
handleTeamRemove(index) {
|
|
|
|
console.log(index);
|
|
|
|
var teams = this.props.teams;
|
|
|
|
teams.splice(index, 1);
|
|
|
|
this.props.onTeamsChange(teams);
|
|
|
|
},
|
|
|
|
handleTeamAdd(team) {
|
|
|
|
var teams = this.props.teams;
|
|
|
|
|
|
|
|
// check if team already exists and then change existing team or add new one
|
|
|
|
if ((typeof team.index !== 'undefined') && teams[team.index]) {
|
|
|
|
teams[team.index].name = team.name;
|
|
|
|
teams[team.index].url = team.url;
|
|
|
|
} else {
|
|
|
|
teams.push(team);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({
|
2017-01-30 12:46:58 -08:00
|
|
|
showEditTeamForm: false,
|
2016-11-01 07:46:13 -07:00
|
|
|
team: {
|
|
|
|
url: '',
|
|
|
|
name: '',
|
|
|
|
index: false
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
this.props.onTeamsChange(teams);
|
|
|
|
},
|
|
|
|
handleTeamEditing(teamName, teamUrl, teamIndex) {
|
|
|
|
this.setState({
|
2017-01-30 12:46:58 -08:00
|
|
|
showEditTeamForm: true,
|
2016-11-01 07:46:13 -07:00
|
|
|
team: {
|
|
|
|
url: teamUrl,
|
|
|
|
name: teamName,
|
|
|
|
index: teamIndex
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
2017-01-24 04:06:07 -08:00
|
|
|
|
|
|
|
openServerRemoveModal(indexForServer) {
|
|
|
|
this.setState({indexToRemoveServer: indexForServer});
|
|
|
|
},
|
|
|
|
|
|
|
|
closeServerRemoveModal() {
|
|
|
|
this.setState({indexToRemoveServer: -1});
|
|
|
|
},
|
|
|
|
|
2016-11-01 07:46:13 -07:00
|
|
|
render() {
|
|
|
|
var self = this;
|
|
|
|
var teamNodes = this.props.teams.map((team, i) => {
|
|
|
|
function handleTeamRemove() {
|
2017-01-24 04:06:07 -08:00
|
|
|
self.openServerRemoveModal(i);
|
2016-11-01 07:46:13 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
function handleTeamEditing() {
|
|
|
|
self.handleTeamEditing(team.name, team.url, i);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<TeamListItem
|
|
|
|
index={i}
|
|
|
|
key={'teamListItem' + i}
|
|
|
|
name={team.name}
|
|
|
|
url={team.url}
|
|
|
|
onTeamRemove={handleTeamRemove}
|
|
|
|
onTeamEditing={handleTeamEditing}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2017-01-30 13:16:16 -08:00
|
|
|
var addServerForm;
|
2017-01-30 12:46:58 -08:00
|
|
|
if (this.props.showAddTeamForm || this.state.showEditTeamForm) {
|
2017-01-30 13:16:16 -08:00
|
|
|
addServerForm = (
|
2017-01-16 14:51:28 -08:00
|
|
|
<NewTeamModal
|
2017-01-30 12:46:58 -08:00
|
|
|
onClose={() => {
|
|
|
|
this.setState({
|
|
|
|
showNewTeamModal: false,
|
|
|
|
team: {
|
|
|
|
name: '',
|
|
|
|
url: '',
|
|
|
|
index: false
|
|
|
|
}
|
|
|
|
});
|
2017-01-30 13:16:16 -08:00
|
|
|
this.props.toggleAddTeamForm();
|
2017-01-30 12:46:58 -08:00
|
|
|
}}
|
2017-01-16 14:51:28 -08:00
|
|
|
onSave={(newTeam) => {
|
2017-01-30 13:28:46 -08:00
|
|
|
var teamData = {
|
|
|
|
name: newTeam.name,
|
|
|
|
url: newTeam.url
|
|
|
|
};
|
2017-01-30 12:46:58 -08:00
|
|
|
if (this.props.showAddTeamForm) {
|
2017-01-30 13:28:46 -08:00
|
|
|
this.props.addServer(teamData);
|
2017-01-30 12:46:58 -08:00
|
|
|
} else {
|
2017-01-30 13:28:46 -08:00
|
|
|
this.props.updateTeam(newTeam.index, teamData);
|
2017-01-30 12:46:58 -08:00
|
|
|
}
|
2017-01-16 14:51:28 -08:00
|
|
|
this.setState({
|
2017-01-30 12:46:58 -08:00
|
|
|
showNewTeamModal: false,
|
|
|
|
showEditTeamForm: false,
|
|
|
|
team: {
|
|
|
|
name: '',
|
|
|
|
url: '',
|
|
|
|
index: false
|
|
|
|
}
|
2017-01-16 14:51:28 -08:00
|
|
|
});
|
|
|
|
this.render();
|
|
|
|
|
|
|
|
this.props.onTeamsChange(this.props.teams);
|
|
|
|
}}
|
2017-01-30 12:46:58 -08:00
|
|
|
team={this.state.team}
|
2016-11-01 07:46:13 -07:00
|
|
|
/>);
|
|
|
|
} else {
|
2017-01-30 13:16:16 -08:00
|
|
|
addServerForm = '';
|
2016-11-01 07:46:13 -07:00
|
|
|
}
|
|
|
|
|
2017-01-24 04:06:07 -08:00
|
|
|
const removeServer = this.props.teams[this.state.indexToRemoveServer];
|
|
|
|
const removeServerModal = (
|
|
|
|
<RemoveServerModal
|
|
|
|
show={this.state.indexToRemoveServer !== -1}
|
|
|
|
serverName={removeServer ? removeServer.name : ''}
|
|
|
|
onHide={this.closeServerRemoveModal}
|
|
|
|
onCancel={this.closeServerRemoveModal}
|
|
|
|
onAccept={() => {
|
|
|
|
this.handleTeamRemove(this.state.indexToRemoveServer);
|
|
|
|
this.closeServerRemoveModal();
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
2016-11-01 07:46:13 -07:00
|
|
|
return (
|
2016-11-02 08:35:07 -07:00
|
|
|
<ListGroup className='teamList'>
|
2016-11-01 07:46:13 -07:00
|
|
|
{ teamNodes }
|
2017-01-30 13:16:16 -08:00
|
|
|
{ addServerForm }
|
2017-01-24 04:06:07 -08:00
|
|
|
{ removeServerModal}
|
2016-11-01 07:46:13 -07:00
|
|
|
</ListGroup>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
module.exports = TeamList;
|