parallaxinc · monteslu · Mar 21, 2015 · Mar 20, 2015
diff --git a/index.html b/index.html
@@ -28,6 +28,14 @@
       .CodeMirror-scroll {
         flex: 1;
       }
+
+      .mfb-component__child-icon.ion-code-download {
+        font-size: 22px;
+      }
+
+      .Select {
+        flex: 1;
+      }
     </style>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "react": "^0.13.1",
     "react-material": "git://github.com/iceddev/react-material#fake-release-13",
     "react-mfb-iceddev": "^0.1.0",
+    "react-select": "^0.4.0",
     "react-style": "^0.4.0",
     "skrim": "0.0.1",
     "snacks": "^0.2.0"

diff --git a/plugins/sidebar/file-operations.js b/plugins/sidebar/file-operations.js
@@ -6,6 +6,7 @@ const { Menu, MainButton, ChildButton } = require('react-mfb-iceddev');
 require('react-mfb-iceddev/mfb.css');
 
 const NewFileOverlay = require('./overlays/new-file');
+const DownloadOverlay = require('./overlays/download');
 const DeleteFileOverlay = require('./overlays/delete-file');
 
 const FileOperations = React.createClass({
@@ -42,6 +43,29 @@ const FileOperations = React.createClass({
 
     space.deleteFile(space.filename, overlay.hide);
   },
+  download: function(devicePath){
+    const overlay = this.props.overlay;
+    const programmer = this.props.programmer;
+
+    if(!devicePath){
+      return;
+    }
+
+    programmer.getRevisions(function(error, revs){
+      programmer.compile({}, function(error, memory){
+        var options = {
+          path: devicePath,
+          board: revs.bs2,
+          memory: memory
+        };
+
+        programmer.bootload(options, function(error, result){
+          console.log(error, result);
+          overlay.hide();
+        });
+      });
+    });
+  },
   showCreateOverlay: function(evt){
     evt.preventDefault();
 
@@ -70,10 +94,27 @@ const FileOperations = React.createClass({
 
     overlay.show({ backdrop: true });
   },
+  showDownloadOverlay: function(evt){
+    evt.preventDefault();
+
+    const overlay = this.props.overlay;
+
+    overlay.content(
+      <DownloadOverlay
+        onAccept={this.download}
+        onCancel={overlay.hide} />
+    );
+
+    overlay.show({ backdrop: true });
+  },
   render: function(){
     return (
       <Menu effect="zoomin" method="click" position="bl">
         <MainButton iconResting="ion-plus-round" iconActive="ion-close-round" />
+        <ChildButton
+          onClick={this.showDownloadOverlay}
+          icon="ion-code-download"
+          label="Download" />
         <ChildButton
           onClick={this.showDeleteOverlay}
           icon="ion-backspace-outline"

diff --git a/plugins/sidebar/index.js b/plugins/sidebar/index.js
@@ -12,6 +12,7 @@ function sidebar(app, opts, done){
 
   const space = app.workspace;
   const overlay = app.overlay;
+  const programmer = app.bs2serial;
 
   app.view('sidebar', function(el, cb){
     console.log('sidebar render');
@@ -22,7 +23,7 @@ function sidebar(app, opts, done){
           <ListItem icon="folder" disableRipple>{space.cwd.deref()}</ListItem>
           {space.directory.map((filename) => <File key={filename} workspace={space} filename={filename} />).toJS()}
         </FileList>
-        <FileOperations workspace={space} overlay={overlay} />
+        <FileOperations workspace={space} overlay={overlay} programmer={programmer} />
       </Sidebar>
     );
 

diff --git a/plugins/sidebar/overlays/delete-file.js b/plugins/sidebar/overlays/delete-file.js
@@ -8,10 +8,6 @@ const styles = require('../styles');
 
 class DeleteFileOverlay extends React.Component {
   constructor(){
-    this.state = {
-      value: ''
-    };
-
     this.onAccept = this.onAccept.bind(this);
     this.onCancel = this.onCancel.bind(this);
   }

diff --git a/plugins/sidebar/overlays/download.js b/plugins/sidebar/overlays/download.js
@@ -0,0 +1,96 @@
+'use strict';
+
+const React = require('react');
+const Card = require('react-material/components/Card');
+const Button = require('react-material/components/Button');
+const Select = require('react-select');
+
+const Serialport = require('browser-serialport');
+
+require('react-select/dist/default.css');
+
+const styles = require('../styles');
+
+class DownloadOverlay extends React.Component {
+  constructor(){
+    this.state = {
+      devicePath: null,
+      options: []
+    };
+
+    this.onAccept = this.onAccept.bind(this);
+    this.onCancel = this.onCancel.bind(this);
+    this.reloadDevices = this.reloadDevices.bind(this);
+    this.updateSelected = this.updateSelected.bind(this);
+    this.getDevices = this.getDevices.bind(this);
+  }
+
+  componentDidMount(){
+    this.getDevices();
+  }
+
+  onAccept(evt){
+    if(typeof this.props.onAccept === 'function'){
+      this.props.onAccept(this.state.devicePath, evt);
+    }
+  }
+
+  onCancel(evt){
+    if(typeof this.props.onCancel === 'function'){
+      this.props.onCancel(evt);
+    }
+  }
+
+  updateSelected(devicePath){
+    this.setState({
+      devicePath: devicePath
+    });
+  }
+
+  reloadDevices(){
+    this.setState({ devicePath: null }, this.getDevices());
+  }
+
+  getDevices(){
+    Serialport.list((err, devices) => {
+      console.log('Error while fetching devices', err);
+
+      let options = devices.map(function(device){
+        return {
+          value: device.comName,
+          label: device.comName
+        };
+      });
+
+      this.setState({
+        options: options
+      });
+    });
+  }
+
+  render(){
+    return (
+      <Card styles={styles.overlay}>
+        <h3 style={styles.overlayTitle}>Please choose your connected device.</h3>
+        <div style={styles.overlaySelectContainer}>
+          <Select
+            ref={(ref) => this._select = ref}
+            name="device-select"
+            placeholder="Device..."
+            value={this.state.devicePath}
+            searchable={false}
+            clearable={false}
+            onChange={this.updateSelected}
+            options={this.state.options} />
+          <Button onClick={this.reloadDevices}>Reload Devices</Button>
+        </div>
+        <div style={styles.overlayButtonContainer}>
+          <Button onClick={this.onAccept}>Download</Button>
+          <Button onClick={this.onCancel}>Cancel</Button>
+        </div>
+      </Card>
+    );
+  }
+}
+
+module.exports = DownloadOverlay;
diff --git a/plugins/sidebar/styles.js b/plugins/sidebar/styles.js
@@ -27,6 +27,10 @@ const styles = {
   },
   overlayButtonContainer: {
     margin: 'auto 0 0 auto'
+  },
+  overlaySelectContainer: {
+    display: 'flex',
+    marginTop: 20
   }
 };