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 ;
2016-01-14 05:50:12 -08:00
const Input = ReactBootstrap . Input ;
2015-12-21 07:58:41 -08:00
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 ( ) {
2016-01-14 06:27:37 -08:00
var config ;
try {
config = settings . readFileSync ( this . props . configFile ) ;
} catch ( e ) {
config = settings . loadDefault ( ) ;
}
2015-12-19 06:51:19 -08:00
return {
2016-01-14 05:50:12 -08:00
teams : config . teams ,
hideMenuBar : config . hideMenuBar
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 ,
2016-01-14 07:20:17 -08:00
hideMenuBar : this . state . hideMenuBar ,
2016-01-14 05:50:12 -08:00
version : settings . version
2015-12-19 06:51:19 -08:00
} ;
settings . writeFileSync ( this . props . configFile , config ) ;
2016-01-14 07:20:17 -08:00
if ( process . platform === 'win32' ) {
var currentWindow = remote . getCurrentWindow ( ) ;
currentWindow . setAutoHideMenuBar ( config . hideMenuBar ) ;
currentWindow . setMenuBarVisibility ( ! config . hideMenuBar ) ;
}
2015-12-19 06:51:19 -08:00
window . location = './index.html' ;
} ,
handleCancel : function ( ) {
window . location = './index.html' ;
} ,
2016-01-14 05:50:12 -08:00
handleChangeHideMenuBar : function ( ) {
this . setState ( {
hideMenuBar : this . refs . hideMenuBar . getChecked ( )
} ) ;
} ,
2015-12-19 06:51:19 -08:00
render : function ( ) {
2016-01-14 05:50:12 -08:00
var teams _row = (
< Row >
< Col md = { 12 } >
< h2 > Teams < / h2 >
< TeamList teams = { this . state . teams } onTeamsChange = { this . handleTeamsChange } / >
< / Col >
< / Row >
) ;
var options = [ ] ;
if ( process . platform === 'win32' ) {
options . push ( < Input ref = "hideMenuBar" type = "checkbox" label = "Hide menubar (Press Alt to show menubar)" checked = { this . state . hideMenuBar } onChange = { this . handleChangeHideMenuBar } / > ) ;
}
var options _row = ( options . length > 0 ) ? (
< Row >
< Col md = { 12 } >
< h2 > Options < / h2 >
{ options }
< / Col >
< / Row >
) : null ;
2015-12-19 06:51:19 -08:00
return (
2015-12-21 07:58:41 -08:00
< Grid className = "settingsPage" >
2016-01-14 05:50:12 -08:00
{ teams _row }
{ options _row }
2015-12-21 07:58:41 -08:00
< Row >
< Col md = { 12 } >
2015-12-26 23:11:44 -08:00
< Button id = "btnCancel" onClick = { this . handleCancel } > Cancel < / Button >
2015-12-21 07:58:41 -08:00
{ ' ' }
2016-01-14 06:27:37 -08:00
< Button id = "btnSave" bsStyle = "primary" onClick = { this . handleSave } disabled = { this . state . teams . length === 0 } > Save < / Button >
2015-12-21 07:58:41 -08:00
< / 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' ) ;
2015-12-23 00:55:39 -08:00
var contextMenu = require ( './menus/context' ) ;
var menu = contextMenu . createDefault ( ) ;
window . addEventListener ( 'contextmenu' , function ( e ) {
menu . popup ( remote . getCurrentWindow ( ) ) ;
} , false ) ;
2015-12-19 06:51:19 -08:00
ReactDOM . render (
2015-12-19 07:39:51 -08:00
< SettingsPage configFile = { configFile } / > ,
2015-12-19 06:51:19 -08:00
document . getElementById ( 'content' )
) ;