2015-12-19 06:51:19 -08:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
const remote = require('electron').remote;
|
2015-12-22 06:35:22 -08:00
|
|
|
const settings = require('../common/settings');
|
2015-12-19 06:51:19 -08:00
|
|
|
|
2015-12-21 07:58:41 -08:00
|
|
|
const Grid = ReactBootstrap.Grid;
|
|
|
|
const Row = ReactBootstrap.Row;
|
|
|
|
const Col = ReactBootstrap.Col;
|
|
|
|
const Button = ReactBootstrap.Button;
|
|
|
|
const ListGroup = ReactBootstrap.ListGroup;
|
|
|
|
const ListGroupItem = ReactBootstrap.ListGroupItem;
|
|
|
|
const Glyphicon = ReactBootstrap.Glyphicon;
|
|
|
|
|
2015-12-19 06:51:19 -08:00
|
|
|
var SettingsPage = React.createClass({
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
teams: []
|
|
|
|
};
|
|
|
|
},
|
|
|
|
componentDidMount: function() {
|
|
|
|
var config = settings.readFileSync(this.props.configFile);
|
2015-12-19 07:39:51 -08:00
|
|
|
this.setState({
|
|
|
|
teams: config.teams
|
|
|
|
})
|
2015-12-19 06:51:19 -08:00
|
|
|
},
|
|
|
|
handleTeamsChange: function(teams) {
|
2015-12-19 07:39:51 -08:00
|
|
|
this.setState({
|
|
|
|
teams: teams
|
|
|
|
});
|
2015-12-19 06:51:19 -08:00
|
|
|
},
|
2015-12-21 07:58:41 -08:00
|
|
|
handleSave: function() {
|
2015-12-19 06:51:19 -08:00
|
|
|
var config = {
|
|
|
|
teams: this.state.teams,
|
|
|
|
version: 1
|
|
|
|
};
|
|
|
|
settings.writeFileSync(this.props.configFile, config);
|
|
|
|
window.location = './index.html';
|
|
|
|
},
|
|
|
|
handleCancel: function() {
|
|
|
|
window.location = './index.html';
|
|
|
|
},
|
|
|
|
render: function() {
|
|
|
|
return (
|
2015-12-21 07:58:41 -08:00
|
|
|
<Grid className="settingsPage">
|
|
|
|
<Row>
|
|
|
|
<Col md={ 12 }>
|
|
|
|
<h2>Teams</h2>
|
|
|
|
<TeamList teams={ this.state.teams } onTeamsChange={ this.handleTeamsChange } />
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
<Row>
|
|
|
|
<Col md={ 12 }>
|
|
|
|
<Button onClick={ this.handleCancel }>Cancel</Button>
|
|
|
|
{ ' ' }
|
|
|
|
<Button bsStyle="primary" onClick={ this.handleSave }>Save</Button>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Grid>
|
2015-12-19 07:39:51 -08:00
|
|
|
);
|
2015-12-19 06:51:19 -08:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
var TeamList = React.createClass({
|
2015-12-21 07:58:41 -08:00
|
|
|
handleTeamRemove: function(index) {
|
|
|
|
console.log(index);
|
2015-12-19 06:51:19 -08:00
|
|
|
var teams = this.props.teams;
|
2015-12-21 07:58:41 -08:00
|
|
|
teams.splice(index, 1);
|
2015-12-19 06:51:19 -08:00
|
|
|
this.props.onTeamsChange(teams);
|
|
|
|
},
|
2015-12-21 07:58:41 -08:00
|
|
|
handleTeamAdd: function(team) {
|
2015-12-19 06:51:19 -08:00
|
|
|
var teams = this.props.teams;
|
|
|
|
teams.push(team);
|
|
|
|
this.props.onTeamsChange(teams);
|
|
|
|
},
|
|
|
|
render: function() {
|
|
|
|
var thisObj = this;
|
2015-12-19 07:39:51 -08:00
|
|
|
var teamNodes = this.props.teams.map(function(team, i) {
|
2015-12-21 07:58:41 -08:00
|
|
|
var handleTeamRemove = function() {
|
|
|
|
thisObj.handleTeamRemove(i);
|
2015-12-19 06:51:19 -08:00
|
|
|
};
|
|
|
|
return (
|
2015-12-21 07:58:41 -08:00
|
|
|
<TeamListItem index={ i } name={ team.name } url={ team.url } onTeamRemove={ handleTeamRemove } />
|
2015-12-19 07:39:51 -08:00
|
|
|
);
|
2015-12-19 06:51:19 -08:00
|
|
|
});
|
|
|
|
return (
|
2015-12-21 07:58:41 -08:00
|
|
|
<ListGroup class="teamList">
|
|
|
|
{ teamNodes }
|
|
|
|
<TeamListItemNew onTeamAdd={ this.handleTeamAdd } />
|
|
|
|
</ListGroup>
|
2015-12-19 07:39:51 -08:00
|
|
|
);
|
2015-12-19 06:51:19 -08:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-12-21 07:58:41 -08:00
|
|
|
var TeamListItem = React.createClass({
|
|
|
|
handleTeamRemove: function() {
|
|
|
|
this.props.onTeamRemove();
|
2015-12-19 06:51:19 -08:00
|
|
|
},
|
|
|
|
render: function() {
|
2015-12-21 07:58:41 -08:00
|
|
|
var style = {
|
|
|
|
left: {
|
|
|
|
"display": 'inline-block'
|
|
|
|
}
|
|
|
|
};
|
2015-12-19 06:51:19 -08:00
|
|
|
return (
|
2015-12-21 07:58:41 -08:00
|
|
|
<div className="teamListItem list-group-item">
|
|
|
|
<div style={ style.left }>
|
|
|
|
<h4 className="list-group-item-heading">{ this.props.name }</h4>
|
|
|
|
<p className="list-group-item-text">
|
|
|
|
{ this.props.url }
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div className="pull-right">
|
|
|
|
<Button bsSize="xsmall" onClick={ this.handleTeamRemove }>
|
|
|
|
<Glyphicon glyph="remove" />
|
|
|
|
</Button>
|
|
|
|
</div>
|
2015-12-19 06:51:19 -08:00
|
|
|
</div>
|
2015-12-19 07:39:51 -08:00
|
|
|
);
|
2015-12-19 06:51:19 -08:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-12-21 07:58:41 -08:00
|
|
|
var TeamListItemNew = React.createClass({
|
2015-12-19 07:39:51 -08:00
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
name: '',
|
|
|
|
url: ''
|
|
|
|
};
|
2015-12-19 06:51:19 -08:00
|
|
|
},
|
2015-12-21 07:58:41 -08:00
|
|
|
handleSubmit: function(e) {
|
|
|
|
console.log('submit');
|
|
|
|
e.preventDefault();
|
|
|
|
this.props.onTeamAdd({
|
2015-12-19 07:39:51 -08:00
|
|
|
name: this.state.name,
|
|
|
|
url: this.state.url
|
|
|
|
});
|
2015-12-19 06:51:19 -08:00
|
|
|
this.setState(this.getInitialState());
|
|
|
|
},
|
2015-12-19 07:39:51 -08:00
|
|
|
handleNameChange: function(e) {
|
2015-12-21 07:58:41 -08:00
|
|
|
console.log('name');
|
2015-12-19 07:39:51 -08:00
|
|
|
this.setState({
|
|
|
|
name: e.target.value
|
|
|
|
});
|
2015-12-19 06:51:19 -08:00
|
|
|
},
|
2015-12-19 07:39:51 -08:00
|
|
|
handleURLChange: function(e) {
|
2015-12-21 07:58:41 -08:00
|
|
|
console.log('url');
|
2015-12-19 07:39:51 -08:00
|
|
|
this.setState({
|
|
|
|
url: e.target.value
|
|
|
|
});
|
2015-12-19 06:51:19 -08:00
|
|
|
},
|
|
|
|
render: function() {
|
|
|
|
return (
|
2015-12-21 07:58:41 -08:00
|
|
|
<ListGroupItem>
|
|
|
|
<form className="form-inline" onSubmit={ this.handleSubmit }>
|
|
|
|
<div className="form-group">
|
|
|
|
<label for="inputTeamName">Name</label>
|
|
|
|
{ ' ' }
|
|
|
|
<input type="text" className="form-control" id="inputTeamName" placeholder="Example team" value={ this.state.name } onChange={ this.handleNameChange } />
|
|
|
|
</div>
|
|
|
|
{ ' ' }
|
|
|
|
<div className="form-group">
|
|
|
|
<label for="inputTeamURL">URL</label>
|
|
|
|
{ ' ' }
|
|
|
|
<input type="url" className="form-control" id="inputTeamURL" placeholder="http://example.com/team" value={ this.state.url } onChange={ this.handleURLChange } />
|
|
|
|
</div>
|
|
|
|
{ ' ' }
|
|
|
|
<Button type="submit">Add</Button>
|
|
|
|
</form>
|
|
|
|
</ListGroupItem>
|
2015-12-19 07:39:51 -08:00
|
|
|
);
|
2015-12-19 06:51:19 -08:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
var configFile = remote.getGlobal('config-file');
|
|
|
|
|
|
|
|
ReactDOM.render(
|
2015-12-19 07:39:51 -08:00
|
|
|
<SettingsPage configFile={ configFile } />,
|
2015-12-19 06:51:19 -08:00
|
|
|
document.getElementById('content')
|
|
|
|
);
|