Skip to content

Commit 650af69

Browse files
monteslumonteslu
committed
Merge pull request #42 from parallaxinc/download-overlay
add download overlay with select box for devices
2 parents db32c69 + 008a811 commit 650af69

File tree

7 files changed

+152
-5
lines changed

7 files changed

+152
-5
lines changed

‎index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,14 @@
2828
.CodeMirror-scroll {
2929
flex: 1;
3030
}
31+
32+
.mfb-component__child-icon.ion-code-download {
33+
font-size: 22px;
34+
}
35+
36+
.Select {
37+
flex: 1;
38+
}
3139
</style>
3240
</head>
3341
<body>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"react": "^0.13.1",
1616
"react-material": "git://github.com/iceddev/react-material#fake-release-13",
1717
"react-mfb-iceddev": "^0.1.0",
18+
"react-select": "^0.4.0",
1819
"react-style": "^0.4.0",
1920
"skrim": "0.0.1",
2021
"snacks": "^0.2.0"

‎plugins/sidebar/file-operations.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const { Menu, MainButton, ChildButton } = require('react-mfb-iceddev');
66
require('react-mfb-iceddev/mfb.css');
77

88
const NewFileOverlay = require('./overlays/new-file');
9+
const DownloadOverlay = require('./overlays/download');
910
const DeleteFileOverlay = require('./overlays/delete-file');
1011

1112
const FileOperations = React.createClass({
@@ -42,6 +43,29 @@ const FileOperations = React.createClass({
4243

4344
space.deleteFile(space.filename, overlay.hide);
4445
},
46+
download: function(devicePath){
47+
const overlay = this.props.overlay;
48+
const programmer = this.props.programmer;
49+
50+
if(!devicePath){
51+
return;
52+
}
53+
54+
programmer.getRevisions(function(error, revs){
55+
programmer.compile({}, function(error, memory){
56+
var options = {
57+
path: devicePath,
58+
board: revs.bs2,
59+
memory: memory
60+
};
61+
62+
programmer.bootload(options, function(error, result){
63+
console.log(error, result);
64+
overlay.hide();
65+
});
66+
});
67+
});
68+
},
4569
showCreateOverlay: function(evt){
4670
evt.preventDefault();
4771

@@ -70,10 +94,27 @@ const FileOperations = React.createClass({
7094

7195
overlay.show({ backdrop: true });
7296
},
97+
showDownloadOverlay: function(evt){
98+
evt.preventDefault();
99+
100+
const overlay = this.props.overlay;
101+
102+
overlay.content(
103+
<DownloadOverlay
104+
onAccept={this.download}
105+
onCancel={overlay.hide} />
106+
);
107+
108+
overlay.show({ backdrop: true });
109+
},
73110
render: function(){
74111
return (
75112
<Menu effect="zoomin" method="click" position="bl">
76113
<MainButton iconResting="ion-plus-round" iconActive="ion-close-round" />
114+
<ChildButton
115+
onClick={this.showDownloadOverlay}
116+
icon="ion-code-download"
117+
label="Download" />
77118
<ChildButton
78119
onClick={this.showDeleteOverlay}
79120
icon="ion-backspace-outline"

‎plugins/sidebar/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ function sidebar(app, opts, done){
1212

1313
const space = app.workspace;
1414
const overlay = app.overlay;
15+
const programmer = app.bs2serial;
1516

1617
app.view('sidebar', function(el, cb){
1718
console.log('sidebar render');
@@ -22,7 +23,7 @@ function sidebar(app, opts, done){
2223
<ListItem icon="folder" disableRipple>{space.cwd.deref()}</ListItem>
2324
{space.directory.map((filename) => <File key={filename} workspace={space} filename={filename} />).toJS()}
2425
</FileList>
25-
<FileOperations workspace={space} overlay={overlay} />
26+
<FileOperations workspace={space} overlay={overlay} programmer={programmer} />
2627
</Sidebar>
2728
);
2829

‎plugins/sidebar/overlays/delete-file.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@ const styles = require('../styles');
88

99
class DeleteFileOverlay extends React.Component {
1010
constructor(){
11-
this.state = {
12-
value: ''
13-
};
14-
1511
this.onAccept = this.onAccept.bind(this);
1612
this.onCancel = this.onCancel.bind(this);
1713
}

‎plugins/sidebar/overlays/download.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
'use strict';
2+
3+
const React = require('react');
4+
const Card = require('react-material/components/Card');
5+
const Button = require('react-material/components/Button');
6+
const Select = require('react-select');
7+
8+
const Serialport = require('browser-serialport');
9+
10+
require('react-select/dist/default.css');
11+
12+
const styles = require('../styles');
13+
14+
class DownloadOverlay extends React.Component {
15+
constructor(){
16+
this.state = {
17+
devicePath: null,
18+
options: []
19+
};
20+
21+
this.onAccept = this.onAccept.bind(this);
22+
this.onCancel = this.onCancel.bind(this);
23+
this.reloadDevices = this.reloadDevices.bind(this);
24+
this.updateSelected = this.updateSelected.bind(this);
25+
this.getDevices = this.getDevices.bind(this);
26+
}
27+
28+
componentDidMount(){
29+
this.getDevices();
30+
}
31+
32+
onAccept(evt){
33+
if(typeof this.props.onAccept === 'function'){
34+
this.props.onAccept(this.state.devicePath, evt);
35+
}
36+
}
37+
38+
onCancel(evt){
39+
if(typeof this.props.onCancel === 'function'){
40+
this.props.onCancel(evt);
41+
}
42+
}
43+
44+
updateSelected(devicePath){
45+
this.setState({
46+
devicePath: devicePath
47+
});
48+
}
49+
50+
reloadDevices(){
51+
this.setState({ devicePath: null }, this.getDevices());
52+
}
53+
54+
getDevices(){
55+
Serialport.list((err, devices) => {
56+
console.log('Error while fetching devices', err);
57+
58+
let options = devices.map(function(device){
59+
return {
60+
value: device.comName,
61+
label: device.comName
62+
};
63+
});
64+
65+
this.setState({
66+
options: options
67+
});
68+
});
69+
}
70+
71+
render(){
72+
return (
73+
<Card styles={styles.overlay}>
74+
<h3 style={styles.overlayTitle}>Please choose your connected device.</h3>
75+
<div style={styles.overlaySelectContainer}>
76+
<Select
77+
ref={(ref) => this._select = ref}
78+
name="device-select"
79+
placeholder="Device..."
80+
value={this.state.devicePath}
81+
searchable={false}
82+
clearable={false}
83+
onChange={this.updateSelected}
84+
options={this.state.options} />
85+
<Button onClick={this.reloadDevices}>Reload Devices</Button>
86+
</div>
87+
<div style={styles.overlayButtonContainer}>
88+
<Button onClick={this.onAccept}>Download</Button>
89+
<Button onClick={this.onCancel}>Cancel</Button>
90+
</div>
91+
</Card>
92+
);
93+
}
94+
}
95+
96+
module.exports = DownloadOverlay;

‎plugins/sidebar/styles.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ const styles = {
2727
},
2828
overlayButtonContainer: {
2929
margin: 'auto 0 0 auto'
30+
},
31+
overlaySelectContainer: {
32+
display: 'flex',
33+
marginTop: 20
3034
}
3135
};
3236

0 commit comments

Comments
 (0)