2015-12-19 06:51:19 -08:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
const remote = require('electron').remote;
|
|
|
|
const settings = require('./common/settings');
|
|
|
|
|
|
|
|
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
|
|
|
},
|
|
|
|
handleOK: function() {
|
|
|
|
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 (
|
|
|
|
<div className="settingsPage">
|
2015-12-19 07:39:51 -08:00
|
|
|
<TeamList teams={ this.state.teams } onTeamsChange={ this.handleTeamsChange } />
|
|
|
|
<input type="button" value="OK" onClick={ this.handleOK } />
|
|
|
|
<input type="button" value="Cancel" onClick={ this.handleCancel } />
|
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
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
var TeamList = React.createClass({
|
2015-12-19 07:39:51 -08:00
|
|
|
handleTeamChange: function(index, team) {
|
2015-12-19 06:51:19 -08:00
|
|
|
var teams = this.props.teams;
|
|
|
|
teams[index] = team;
|
|
|
|
this.props.onTeamsChange(teams);
|
|
|
|
},
|
2015-12-19 07:39:51 -08:00
|
|
|
handleNewTeamAdd: 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) {
|
|
|
|
var handleTeamChange = function(team) {
|
2015-12-19 06:51:19 -08:00
|
|
|
thisObj.handleTeamChange(i, team);
|
|
|
|
};
|
|
|
|
return (
|
2015-12-19 07:39:51 -08:00
|
|
|
<li>
|
|
|
|
<TeamItem index={ i } name={ team.name } url={ team.url } onTeamChange={ handleTeamChange } onName />
|
|
|
|
</li>
|
|
|
|
);
|
2015-12-19 06:51:19 -08:00
|
|
|
});
|
|
|
|
return (
|
|
|
|
<div className="teamList">
|
|
|
|
<ol>
|
2015-12-19 07:39:51 -08:00
|
|
|
{ teamNodes }
|
|
|
|
<li>
|
|
|
|
<NewTeamItem onNewTeamAdd={ this.handleNewTeamAdd } />
|
|
|
|
</li>
|
2015-12-19 06:51:19 -08:00
|
|
|
</ol>
|
|
|
|
</div>
|
2015-12-19 07:39:51 -08:00
|
|
|
);
|
2015-12-19 06:51:19 -08:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
var TeamItem = React.createClass({
|
2015-12-19 07:39:51 -08:00
|
|
|
handleNameChange: function(e) {
|
|
|
|
this.props.onTeamChange({
|
|
|
|
name: e.target.value,
|
|
|
|
url: this.props.url
|
|
|
|
});
|
2015-12-19 06:51:19 -08:00
|
|
|
},
|
2015-12-19 07:39:51 -08:00
|
|
|
handleURLChange: function(e) {
|
|
|
|
this.props.onTeamChange({
|
|
|
|
name: this.props.name,
|
|
|
|
url: e.target.value
|
|
|
|
});
|
2015-12-19 06:51:19 -08:00
|
|
|
},
|
|
|
|
render: function() {
|
|
|
|
return (
|
|
|
|
<div className="teamItem">
|
2015-12-19 07:39:51 -08:00
|
|
|
<input type="text" placeholder="Team name" value={ this.props.name } onChange={ this.handleNameChange }></input>
|
|
|
|
<input type="text" placeholder="Team URL (http://example.com/team)" value={ this.props.url } onChange={ this.handleURLChange }></input>
|
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
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
var NewTeamItem = 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-19 07:39:51 -08:00
|
|
|
handleNewTeamAdd: function() {
|
|
|
|
this.props.onNewTeamAdd({
|
|
|
|
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) {
|
|
|
|
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) {
|
|
|
|
this.setState({
|
|
|
|
url: e.target.value
|
|
|
|
});
|
2015-12-19 06:51:19 -08:00
|
|
|
},
|
|
|
|
render: function() {
|
|
|
|
return (
|
|
|
|
<div className="newTeamItem">
|
2015-12-19 07:39:51 -08:00
|
|
|
<input type="text" placeholder="Team name" value={ this.state.name } onChange={ this.handleNameChange } />
|
|
|
|
<input type="text" placeholder="Team URL (http://example.com/team)" value={ this.state.url } onChange={ this.handleURLChange } />
|
|
|
|
<input type="button" value="Add" onClick={ this.handleNewTeamAdd } />
|
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
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
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')
|
|
|
|
);
|