@@ -73,11 +73,13 @@ class App extends React.Component {
7373 uploadError : '' ,
7474 downloadStatus : '' ,
7575 downloadError : '' ,
76+ serialInput : '' ,
7677 supportedBoards : [ ]
7778 } ;
7879 this . handleOpen = this . handleOpen . bind ( this ) ;
7980 this . handleClose = this . handleClose . bind ( this ) ;
8081 this . handleSend = this . handleSend . bind ( this ) ;
82+ this . handleChangeSerial = this . handleChangeSerial . bind ( this ) ;
8183 this . showError = this . showError . bind ( this ) ;
8284 this . clearError = this . clearError . bind ( this ) ;
8385 }
@@ -148,36 +150,37 @@ class App extends React.Component {
148150 this . setState ( { serialPortOpen : null } ) ;
149151 }
150152
153+ handleChangeSerial ( e ) {
154+ this . setState ( { serialInput : e . target . value } ) ;
155+ }
156+
151157 handleSend ( e ) {
152158 e . preventDefault ( ) ;
153159 const serialInput = document . getElementById ( 'serial-input' ) ;
154- const sendData = `${ serialInput . value } \n` ;
160+ const sendData = `${ this . state . serialInput } \n` ;
155161 daemon . writeSerial ( this . state . serialPortOpen , sendData ) ;
156162 serialInput . focus ( ) ;
157- serialInput . value = '' ;
163+ this . setState ( { serialInput : '' } ) ;
158164 }
159165
160166 render ( ) {
161- const listSerialDevices = this . state . serialDevices . map ( ( device , i ) =>
162- < li key = { i } >
163- { device . Name } - IsOpen: < span className = { device . IsOpen ? 'open' : 'closed' } >
164- { device . IsOpen ? 'true' : 'false' }
165- </ span > - < a href = "#" onClick = { ( e ) => this . handleOpen ( e , device . Name ) } >
167+ const listSerialDevices = this . state . serialDevices . map ( ( device , i ) => < li key = { i } >
168+ { device . Name } - IsOpen: < span className = { device . IsOpen ? 'open' : 'closed' } >
169+ { device . IsOpen ? 'true' : 'false' }
170+ </ span > - < a href = "#" onClick = { ( e ) => this . handleOpen ( e , device . Name ) } >
166171 open
167- </ a > - < a href = "#" onClick = { ( e ) => this . handleClose ( e , device . Name ) } >
172+ </ a > - < a href = "#" onClick = { ( e ) => this . handleClose ( e , device . Name ) } >
168173 close
169- </ a >
170- </ li > ) ;
174+ </ a >
175+ </ li > ) ;
171176
172- const listNetworkDevices = this . state . networkDevices . map ( ( device , i ) =>
173- < li key = { i } >
174- { device . Name }
175- </ li > ) ;
177+ const listNetworkDevices = this . state . networkDevices . map ( ( device , i ) => < li key = { i } >
178+ { device . Name }
179+ </ li > ) ;
176180
177- const supportedBoards = this . state . supportedBoards . map ( ( board , i ) =>
178- < li key = { i } >
179- { board }
180- </ li > ) ;
181+ const supportedBoards = this . state . supportedBoards . map ( ( board , i ) => < li key = { i } >
182+ { board }
183+ </ li > ) ;
181184
182185 let uploadClass ;
183186 if ( this . state . uploadStatus === daemon . UPLOAD_DONE ) {
@@ -241,8 +244,8 @@ class App extends React.Component {
241244 </ div >
242245
243246 {
244- this . state . supportedBoards . length ?
245- < div className = "section" >
247+ this . state . supportedBoards . length
248+ ? < div className = "section" >
246249 < h2 > Supported boards</ h2 >
247250
248251 < ul >
@@ -256,11 +259,11 @@ class App extends React.Component {
256259 < h2 > Serial Monitor</ h2 >
257260
258261 < form onSubmit = { this . handleSend } >
259- < input id = "serial-input" />
262+ < input id = "serial-input" value = { this . state . serialInput } onChange = { this . handleChangeSerial } />
260263 < input type = "submit" value = "Send" />
261264 </ form >
262265
263- < textarea id = "serial-textarea" value = { this . state . serialMonitorContent } />
266+ < textarea id = "serial-textarea" value = { this . state . serialMonitorContent } readOnly />
264267 </ div >
265268
266269 < div className = "section" >
0 commit comments