You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.9 KiB
79 lines
2.9 KiB
import React from 'react'; |
|
import io from 'socket.io-client'; |
|
|
|
export default class App extends React.Component { |
|
constructor(props) { |
|
super(props); |
|
|
|
this.state = { |
|
ioState: null, |
|
socket: io.connect() |
|
} |
|
} |
|
|
|
componentDidMount() { |
|
this.connect(); |
|
} |
|
|
|
componentWillUnmount() { |
|
this.setState({socket: this.state.socket.removeAllListeners()}); |
|
} |
|
|
|
connect() { |
|
let socket = this.state.socket; |
|
|
|
socket.on('connect', () => { |
|
console.log('connected'); |
|
}); |
|
|
|
socket.on('ioState', (data) => { |
|
console.log(data); |
|
this.setState({ioState: data}); |
|
}); |
|
} |
|
|
|
sendUpdate(type, pin, value) { |
|
this.state.socket.emit('update', { |
|
type: type, |
|
pin: pin, |
|
value: value, |
|
}); |
|
} |
|
|
|
render() { |
|
return ( |
|
<div className="ui text container"> |
|
<div className="ui stackable two column grid"> |
|
<div className="one column row"> |
|
<div className="center aligned column"> |
|
<div className="ui basic segment"> |
|
<img className="ui left floated small image" src="http://criticalcontrol.com/wp-content/themes/cces/images/logo.png" /> |
|
<span className="ui medium header">LED Toggle Demo</span> |
|
</div> |
|
</div> |
|
</div> |
|
{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"> |
|
<div className="twelve wide column"> |
|
<div className="ui right pointing label"> |
|
DO1 |
|
</div> |
|
<div className="ui buttons"> |
|
<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"> |
|
{!this.state.ioState.dout[0] && <i className="bordered inverted disabled idea big icon"></i>} |
|
{this.state.ioState.dout[0] && <i className="bordered inverted red idea big icon"></i>} |
|
</div> |
|
</div> |
|
</div> |
|
</div>} |
|
</div> |
|
</div> |
|
); |
|
} |
|
}
|
|
|