|
|
|
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();
|
|
|
|
|
|
|
|
this.setState({ioState: {
|
|
|
|
dout: [false, true, false, false],
|
|
|
|
din: [false, false, true, false]
|
|
|
|
}});
|
|
|
|
}
|
|
|
|
|
|
|
|
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">Modem I/O Demo</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{this.state.ioState && <div className="column">
|
|
|
|
<div className="ui segment">
|
|
|
|
<div className="ui top attached label">Digital Out</div>
|
|
|
|
{this.state.ioState.dout.map((x, i) => (
|
|
|
|
<div className="ui two column middle aligned grid">
|
|
|
|
<div className="twelve wide column">
|
|
|
|
<div className="ui right pointing label">
|
|
|
|
DO{i+1}
|
|
|
|
</div>
|
|
|
|
<div className="ui buttons">
|
|
|
|
<button onClick={() => this.sendUpdate('dout', i, true)} className="ui red button">On</button>
|
|
|
|
<button onClick={() => this.sendUpdate('dout', i, false)} className="ui button">Off</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="four wide right aligned column">
|
|
|
|
{!x && <i className="bordered inverted disabled idea big icon"></i>}
|
|
|
|
{x && <i className="bordered inverted red idea big icon"></i>}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>}
|
|
|
|
{this.state.ioState && <div className="column">
|
|
|
|
<div className="ui segment">
|
|
|
|
<div className="ui top attached label">Digital In</div>
|
|
|
|
{this.state.ioState.din.map((x, i) => (
|
|
|
|
<div className="ui two column middle aligned grid">
|
|
|
|
<div className="four wide column">
|
|
|
|
<div className="ui right pointing label">
|
|
|
|
DI{i+1}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="twelve wide center aligned column">
|
|
|
|
{!x && <i className="bordered inverted disabled circle big icon"></i>}
|
|
|
|
{x && <i className="bordered inverted red circle thin big icon"></i>}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|