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
2016-01-30 07:50:43 -08:00
const React = require ( 'react' ) ;
const ReactDOM = require ( 'react-dom' ) ;
const ReactBootstrap = require ( 'react-bootstrap' ) ;
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 ;
2016-02-11 08:12:28 -08:00
function backToIndex ( ) {
2016-04-13 05:45:51 -07:00
remote . getCurrentWindow ( ) . loadURL ( 'file://' + _ _dirname + '/index.html' ) ;
2016-01-30 07:50:43 -08:00
}
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 ( ) ;
}
2016-04-17 07:07:17 -07:00
return config ;
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-04-11 05:51:24 -07:00
showTrayIcon : this . state . showTrayIcon ,
2016-05-07 16:01:56 -07:00
trayIconTheme : this . state . trayIconTheme ,
2016-04-17 07:07:17 -07:00
disablewebsecurity : this . state . disablewebsecurity ,
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-23 04:33:50 -08:00
if ( process . platform === 'win32' || process . platform === 'linux' ) {
2016-01-14 07:20:17 -08:00
var currentWindow = remote . getCurrentWindow ( ) ;
currentWindow . setAutoHideMenuBar ( config . hideMenuBar ) ;
currentWindow . setMenuBarVisibility ( ! config . hideMenuBar ) ;
}
2016-01-30 07:50:43 -08:00
backToIndex ( ) ;
2015-12-19 06:51:19 -08:00
} ,
handleCancel : function ( ) {
2016-01-30 07:50:43 -08:00
backToIndex ( ) ;
2015-12-19 06:51:19 -08:00
} ,
2016-04-17 07:07:17 -07:00
handleChangeDisableWebSecurity : function ( ) {
this . setState ( {
disablewebsecurity : this . refs . disablewebsecurity . getChecked ( )
} ) ;
} ,
2016-01-14 05:50:12 -08:00
handleChangeHideMenuBar : function ( ) {
this . setState ( {
hideMenuBar : this . refs . hideMenuBar . getChecked ( )
} ) ;
} ,
2016-04-11 05:51:24 -07:00
handleChangeShowTrayIcon : function ( ) {
this . setState ( {
showTrayIcon : this . refs . showTrayIcon . getChecked ( )
} ) ;
} ,
2016-05-07 16:01:56 -07:00
handleChangeTrayIconTheme : function ( ) {
this . setState ( {
trayIconTheme : this . refs . trayIconTheme . getValue ( )
} ) ;
} ,
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 } >
2016-02-11 08:12:28 -08:00
< h2 > Teams < / h2 >
< TeamList teams = { this . state . teams } onTeamsChange = { this . handleTeamsChange } / >
2016-01-14 05:50:12 -08:00
< / Col >
< / Row >
) ;
var options = [ ] ;
2016-01-23 04:33:50 -08:00
if ( process . platform === 'win32' || process . platform === 'linux' ) {
2016-05-02 08:42:13 -07:00
options . push ( < Input key = "inputHideMenuBar" id = "inputHideMenuBar" ref = "hideMenuBar" type = "checkbox" label = "Hide Menu Bar (Press Alt to show Menu Bar)" checked = { this . state . hideMenuBar }
onChange = { this . handleChangeHideMenuBar } / > ) ;
2016-01-14 05:50:12 -08:00
}
2016-05-07 16:01:56 -07:00
if ( process . platform === 'darwin' || process . platform === 'linux' ) {
2016-05-02 04:21:51 -07:00
options . push ( < Input key = "inputShowTrayIcon" ref = "showTrayIcon" type = "checkbox" label = "Show Icon on Menu Bar (Need to restart the application)" checked = { this . state . showTrayIcon } onChange = { this . handleChangeShowTrayIcon }
2016-04-11 05:51:24 -07:00
/ > ) ;
}
2016-05-07 16:01:56 -07:00
if ( process . platform === 'linux' ) {
options . push ( < Input key = "inputTrayIconTheme" ref = "trayIconTheme" type = "select" label = "Icon theme (Need to restart the application)" value = { this . state . trayIconTheme } onChange = { this . handleChangeTrayIconTheme } >
< option value = "light" > Light < / option >
< option value = "dark" > Dark < / option >
< / Input > ) ;
}
2016-05-13 06:09:36 -07:00
options . push ( < Input key = "inputDisableWebSecurity" ref = "disablewebsecurity" type = "checkbox" label = "Allow mixed content (Enabling allows both secure and insecure content, images and scripts to render and execute. Disabling allows only secure content.)"
2016-05-02 04:21:51 -07:00
checked = { this . state . disablewebsecurity } onChange = { this . handleChangeDisableWebSecurity } / > ) ;
2016-01-14 05:50:12 -08:00
var options _row = ( options . length > 0 ) ? (
< Row >
< Col md = { 12 } >
2016-02-11 08:12:28 -08:00
< h2 > Options < / h2 >
{ options }
2016-01-14 05:50:12 -08:00
< / 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 } >
2016-02-11 08:12:28 -08:00
< Button id = "btnCancel" onClick = { this . handleCancel } > Cancel < / Button >
{ ' ' }
< 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 (
2016-05-02 04:21:51 -07:00
< TeamListItem index = { i } key = { "teamListItem" + 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 ( {
2016-03-10 06:25:35 -08:00
name : this . state . name . trim ( ) ,
url : this . state . url . trim ( )
2015-12-19 07:39:51 -08:00
} ) ;
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
} ,
2016-03-10 06:25:35 -08:00
shouldEnableAddButton : function ( ) {
return ( this . state . name . trim ( ) !== '' ) && ( this . state . url . trim ( ) !== '' ) ;
} ,
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 >
{ ' ' }
2016-03-13 08:52:41 -07:00
< input type = "url" className = "form-control" id = "inputTeamURL" placeholder = "https://example.com/team" value = { this . state . url } onChange = { this . handleURLChange } / >
2015-12-21 07:58:41 -08:00
< / div >
{ ' ' }
2016-03-10 06:25:35 -08:00
< Button type = "submit" disabled = { ! this . shouldEnableAddButton ( ) } > Add < / Button >
2015-12-21 07:58:41 -08:00
< / 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' )
) ;