close serial onenter and onexit

Author: Alberto Iannaccone

src/daemon.js

@@ -13,9 +13,17 @@ export default class Daemon {
       network: []
     });
     this.socketMessages
-      .subscribe(this.handleSocketMesage.bind(this));
+      .subscribe(this.handleSocketMessage.bind(this));
     this.openingSerial = null;
     this.closingSerial = null;
+
+    const devicesListSubscription = this.devicesList.subscribe((devices) => {
+      if (devices.serial && devices.serial.length > 0) {
+        this.closeAllPorts();
+        devicesListSubscription.unsubscribe();
+      }
+    });
+    window.addEventListener('beforeunload', this.closeAllPorts);
   }
 
   initSocket() {
@@ -38,24 +46,24 @@ export default class Daemon {
    * @param {Array<device>} a the first list
    * @param {Array<device>} b the second list
    */
-  static devicesListAreEquals(a, b) {
+  devicesListAreEquals(a, b) {
     if (!a || !b || a.length !== b.length) {
       return false;
     }
-    return a.every((item, index) => b[index].Name === item.Name);
+    return a.every((item, index) => (b[index].Name === item.Name && b[index].IsOpen === item.IsOpen));
   }
 
-  handleSocketMesage(message) {
+  handleSocketMessage(message) {
     // Result of a list command
     if (message.Ports) {
       const lastDevices = this.devicesList.getValue();
-      if (message.Network && !Daemon.devicesListAreEquals(lastDevices.network, message.Ports)) {
+      if (message.Network && !this.devicesListAreEquals(lastDevices.network, message.Ports)) {
         this.devicesList.next({
           serial: lastDevices.serial,
           network: message.Ports
         });
       }
-      else if (!message.Network && !Daemon.devicesListAreEquals(lastDevices.serial, message.Ports)) {
+      else if (!message.Network && !this.devicesListAreEquals(lastDevices.serial, message.Ports)) {
         this.devicesList.next({
           serial: message.Ports,
           network: lastDevices.network
@@ -68,6 +76,10 @@ export default class Daemon {
     }
   }
 
+  writeSerial(port, data) {
+    this.socket.emit('command', `send ${port} ${data}`);
+  }
+
   openSerialMonitor(port) {
     if (this.serialMonitorOpened.getValue()) {
       return;
@@ -109,4 +121,15 @@ export default class Daemon {
       });
     this.socket.emit('command', `close ${port}`);
   }
+
+  closeAllPorts(e) {
+    if (e) {
+      e.preventDefault();
+    }
+    const devices = this.devicesList.getValue().serial;
+    devices.forEach(device => {
+      this.socket.emit('command', `close ${device.Name}`);
+    });
+    return;
+  }
 }

test/app.jsx

@@ -17,10 +17,14 @@ class App extends React.Component {
       serialDevices: [],
       networkDevices: [],
       agentInfo: '',
-      serialMonitorContent: ''
+      serialMonitorContent: '',
+      serialPortOpen: ''
     };
     this.handleOpen = this.handleOpen.bind(this);
     this.handleClose = this.handleClose.bind(this);
+    this.handleSend = this.handleSend.bind(this);
+    this.showError = this.showError.bind(this);
+    this.clearError = this.clearError.bind(this);
     this.daemon = Daemon;
   }
 
@@ -65,15 +69,26 @@ class App extends React.Component {
     this.setState({ serialMonitorContent: '' });
     e.preventDefault();
     this.daemon.openSerialMonitor(port);
+    this.setState({ serialPortOpen: port });
   }
 
   handleClose(e, port) {
     e.preventDefault();
     this.daemon.closeSerialMonitor(port);
+    this.setState({ serialPortOpen: null });
+  }
+
+  handleSend(e) {
+    e.preventDefault();
+    const serialInput = document.getElementById('serial-input');
+    const sendData = `${serialInput.value}\n`;
+    this.daemon.writeSerial(this.state.serialPortOpen, sendData);
+    serialInput.focus();
+    serialInput.value = '';
   }
 
   render() {
-    const listSerialDevices = this.state.serialDevices.map((device, i) => (<li key={i}>{device.Name} - IsOpen: {device.IsOpen ? 'true' : 'false'} - <a href="#" onClick={(e) => this.handleOpen(e, device.Name)}>open</a> - <a href="#" onClick={(e) => this.handleClose(e, device.Name)}>close</a></li>));
+    const listSerialDevices = this.state.serialDevices.map((device, i) => (<li key={i}>{device.Name} - IsOpen: <span className={device.IsOpen ? 'open' : 'closed'}>{device.IsOpen ? 'true' : 'false'}</span> - <a href="#" onClick={(e) => this.handleOpen(e, device.Name)}>open</a> - <a href="#" onClick={(e) => this.handleClose(e, device.Name)}>close</a></li>));
     const listNetworkDevices = this.state.networkDevices.map((device, i) => <li key={i}>{device.Name}</li>);
 
     return (
@@ -102,6 +117,10 @@ class App extends React.Component {
         </div>
         <div className="serial-monitor">
           <h2>Serial Monitor</h2>
+          <form onSubmit={this.handleSend}>
+            <input id="serial-input" />
+            <input type="submit" value="Send" />
+          </form>
           <textarea id="serial-textarea" value={ this.state.serialMonitorContent }/>
         </div>
       </div>

test/index.html

@@ -5,18 +5,14 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Test Daemon</title>
   <style>
-  #error {
+  #error, .not-found, .closed {
     color: red
   }
 
-  .found {
+  .found, .open {
     color: green;
   }
 
-  .not-found {
-    color: red;
-  }
-
   pre {
     background: #f9f9f9;
   }