tanner/critical-leddemo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Send state updates through socket, finish app

Browse Source
This commit is contained in:
Tanner Collin
2017-06-19 23:17:33 +00:00
parent 58de4bb47d
commit 13079ef54a
2 changed files with 35 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/app.js
View File

@@ -6,9 +6,7 @@ export default class App extends React.Component {
super(props);
this.state = {
ioState: {
dout: [false],
},
ioState: null,
socket: io.connect()
}
}
@@ -28,8 +26,9 @@ export default class App extends React.Component {
console.log('connected');
});
socket.on('message', (data) => {
socket.on('ioState', (data) => {
console.log(data);
this.setState({ioState: data});
});
}
@@ -42,6 +41,14 @@ export default class App extends React.Component {
});
}
sendUpdate(type, pin, value) {
this.state.socket.emit('update', {
type: type,
pin: pin,
value: value,
});
}
render() {
return (
<div className="ui text container">
@@ -54,7 +61,7 @@ export default class App extends React.Component {
</div>
</div>
</div>
<div className="column">
{this.state.ioState && <div className="column">
<div className="ui segment">
<div className="ui top attached label">Digital Out</div>
<div className="ui two column middle aligned grid">
@@ -63,8 +70,8 @@ export default class App extends React.Component {
DO1
</div>
<div className="ui buttons">
<button onClick={() => this.doutSet(0, true)} className="ui red button">On</button>
<button onClick={() => this.doutSet(0, false)} className="ui button">Off</button>
<button onClick={() => this.sendUpdate('dout', 0, true)} className="ui red button">On</button>
<button onClick={() => this.sendUpdate('dout', 0, false)} className="ui button">Off</button>
</div>
</div>
<div className="four wide right aligned column">
@@ -73,7 +80,7 @@ export default class App extends React.Component {
</div>
</div>
</div>
</div>
</div>}
</div>
</div>
);