|
<html> |
|
<head> |
|
<title>Test</title> |
|
<script src="https://code.jquery.com/jquery-1.9.1.js"></script> |
|
|
|
<script src="/socket.io/socket.io.js"></script> |
|
<script src="reporter.js"></script> |
|
|
|
<!--<script src="https://fb.me/react-0.14.3.min.js"></script>--> |
|
<!--<script src="https://fb.me/react-dom-0.14.3.min.js"></script>--> |
|
|
|
<script src="https://fb.me/react-0.14.3.js"></script> |
|
<script src="https://fb.me/react-dom-0.14.3.js"></script> |
|
|
|
<script src="https://fb.me/JSXTransformer-0.12.2.js"></script> |
|
</head> |
|
<body> |
|
|
|
|
|
<div id="soln1">solution 1</div> |
|
<div id="soln2">solution 2</div> |
|
<div id="soln3">solution 3</div> |
|
<hr/> |
|
<div id="x-ase-panel-zulu"> |
|
<div id="col2">col2</div> |
|
<div id="col-global"></div> |
|
<div id="col-local"></div> |
|
<div id="col-business"></div> |
|
<textarea rows="6" cols="80" id="tLastUpDate"></textarea> |
|
</div> |
|
<script type="text/jsx" id="jsx-main"> |
|
/** @jsx React.DOM */ |
|
|
|
|
|
var socket; |
|
$(document).ready(function () { |
|
|
|
socket = io.connect('http://metaloi.wolfspool.chickenkiller.com/'); |
|
|
|
// |
|
reporter = Reporter.Reporter({socket: socket}); |
|
|
|
Reporter.status($('#col2'), 'ready'); |
|
var doLastUpDate = function (date) { |
|
try { |
|
$("#tLastUpDate").text(JSON.stringify(date)); |
|
} catch (ex) { |
|
$("#tLastUpDate").text(date); |
|
} |
|
|
|
}; |
|
socket.on("connect", function () { |
|
socket.on('data', function (data) { |
|
doLastUpDate(data); |
|
|
|
Reporter.log(data); |
|
data.localtype = 'business'; |
|
Reporter.status($('#col-business'), JSON.stringify(data)); |
|
}); |
|
socket.on('tick', function (data) { |
|
doLastUpDate(data); |
|
|
|
Reporter.log(data); |
|
|
|
data.localtype = 'local'; |
|
Reporter.status($("#col-local"), data); |
|
}); |
|
}); |
|
|
|
var TestApp = React.createClass({ |
|
getComponent: function (index) { |
|
$(this.getDOMNode()).find('li:nth-child(' + index + ')').css({'background-color': '#ccc'}); |
|
}, |
|
render: function () { |
|
return ( |
|
<div> |
|
<h5>TestApp</h5> |
|
<ul> |
|
<li onClick={this.getComponent.bind(this, 1)}>Component 1</li> |
|
<li onClick={this.getComponent.bind(this, 2)}>Component 2</li> |
|
<li onClick={this.getComponent.bind(this, 3)}>Component 3</li> |
|
</ul> |
|
</div> |
|
); |
|
} |
|
}); |
|
ReactDOM.render(<TestApp />, document.getElementById('soln1')); |
|
|
|
var Switch1 = React.createClass({ |
|
selections: [], |
|
getInitialState: function () { |
|
|
|
(function (sw) { |
|
socket.on("data", function (data) { |
|
data.client_now = Date(); |
|
sw.setState({message: "data: " + JSON.stringify(data)}); |
|
}); |
|
})(this); |
|
|
|
return { |
|
content: this.props.content, |
|
isSelected: this.props.checked, |
|
socket: this.props.socket, |
|
message: "initial message", |
|
checked: "nothing yet" |
|
}; |
|
}, |
|
handleClick: function (ev1, ev2) { |
|
|
|
var ev = [ev1, ev2]; // for debugging purposes |
|
|
|
console.log('click Switch ' + ev1.currentTarget.value); |
|
console.log(ev1.currentTarget.name); |
|
|
|
this.selections[parseInt(ev1.currentTarget.value)] = { |
|
name: ev1.currentTarget.name, |
|
value: ev1.currentTarget.value, |
|
checked: ev1.currentTarget.checked |
|
}; |
|
|
|
this.setState({checked: JSON.stringify(this.selections)}); |
|
Reporter.emit_and_log({ |
|
data: { |
|
op: 'handleClick' |
|
, dataFormat: ['as-timeline'] |
|
, isSelected: [this.state.isSelected] |
|
, selections: [this.selections] |
|
// , message: [this.state.message] |
|
, socket_connected: [this.state.socket.connected] |
|
} |
|
}); |
|
console.log(this); |
|
|
|
}, |
|
render: function () { |
|
return ( |
|
<div> |
|
<h5>{ this.state.content} </h5> |
|
<div> |
|
<p> |
|
{this.state.checked} |
|
</p> |
|
<p> |
|
message: {this.state.message} |
|
</p> |
|
</div> |
|
|
|
<div> |
|
<input name='vehicle-blue' type="checkbox" onChange={this.handleClick } value="0"> |
|
<div> |
|
<h6>vehicle-blue</h6> |
|
</div> |
|
</input > |
|
<input name='vehicle-fast' type="checkbox" onChange={this.handleClick } value="1"> |
|
<div> |
|
<h6>vehicle-fast</h6> |
|
</div> |
|
</input > |
|
</div> |
|
</div> |
|
); |
|
} |
|
}); |
|
|
|
|
|
// render: function () { |
|
// console.log('render Switch1'); |
|
// var style = {'background-color': ''}; |
|
// if (this.state.isSelected) { |
|
// style = {'background-color': '#ccc'}; |
|
// } |
|
// |
|
// return ( |
|
// <checkbox onClick={this.handleClick} style={style}>{this.state.content}</checkbox> |
|
// ); |
|
// } |
|
// }); |
|
|
|
var ListItem = React.createClass({ |
|
counter: 0, |
|
getInitialState: function () { |
|
console.log('getInitialState'); |
|
if (undefined != this.props.counter) |
|
// this.setInitialCounter(parseInt(this.props.counter)); |
|
this.setInitialCounter(this.props.counter); |
|
|
|
var content = this.props.content + ` .. Component :: counter set to ${this.counter}`; |
|
|
|
this.run(); |
|
|
|
return {isSelected: false, x_ase_type: this.props.content, counter: this.counter, content: content}; |
|
}, |
|
setInitialCounter: function (i) { |
|
try { |
|
this.counter = parseInt(i); |
|
|
|
} |
|
catch (ex) { |
|
this.state.content = ex.message; |
|
this.counter = -99; |
|
} |
|
}, |
|
handleClick: function () { |
|
Reporter.emit_and_log({ |
|
data: { |
|
date: Date(), |
|
message: "handleClick", |
|
step: 0, |
|
counter: this.state.counter, |
|
isSelected: this.state.isSelected |
|
} |
|
}); |
|
|
|
console.log('counter is ' + this.state.counter); |
|
this.setState({counter: (this.state.counter + 1)}); |
|
console.log('counter is ' + this.state.counter); |
|
|
|
this.setState({ |
|
isSelected: !this.state.isSelected |
|
}); |
|
|
|
this.setState({content: `${this.state.x_ase_type} -- \{ this.counter = ${this.state.counter} }`}); |
|
|
|
console.log('handleClick: ' + this.state.x_ase_type); |
|
console.log('handleClick: ' + this.state.content); |
|
|
|
console.log('counter is ' + this.state.counter); |
|
// setTimeout(function () { |
|
Reporter.emit_and_log({ |
|
data: { |
|
date: Date() |
|
, message: "handleClick" |
|
, step: 1 |
|
, counter: this.state.counter |
|
, isSelected: this.state.isSelected |
|
, x_ase_type: this.state.x_ase_type |
|
, deferred: false |
|
, bcast: ['demo-command-bus', 'demo'] |
|
} |
|
}); |
|
// }(), 500); |
|
|
|
}, |
|
interval: null, |
|
run: function () { |
|
// returns function, exec side-effekt |
|
this.interval = setInterval(() => { |
|
// console.log('interval ' + Date()); |
|
this.setState({content: `${this.state.x_ase_type} - ${this.state.counter} @ interval: ${Date()}`}); |
|
}, 500); |
|
}, |
|
kill: function () { |
|
try { |
|
console.log('killing'); |
|
clearInterval(this.interval); |
|
try { |
|
this.props.app.kill(); |
|
} |
|
catch (ex1) { |
|
console.log('cannot this.props.app.kill()'); |
|
} |
|
} catch (ex) { |
|
} |
|
|
|
}, |
|
|
|
render: function () { |
|
// var isSelected = this.state.isSelected; |
|
|
|
// Reporter.log({data: `render @ ${Date()}`}); |
|
|
|
var style = {'background-color': ''}; |
|
if (this.state.isSelected) { |
|
style = {'background-color': '#ccc'}; |
|
} |
|
return ( |
|
<li onClick={this.handleClick} style={style}>{this.state.content}</li> |
|
); |
|
} |
|
}); |
|
|
|
var TestApp2 = React.createClass({ |
|
initial_counter: 21, |
|
// getComponent: function (index) { |
|
// $(this.getDOMNode()).find('li:nth-child(' + index + ')').css({'background-color': '#ccc'}); |
|
// }, |
|
render: function () { |
|
return ( |
|
<div> |
|
<h5>TestApp2</h5> |
|
<ul> |
|
<ListItem content={"Component 1 - // " + this.initial_counter } |
|
counter={ this.initial_counter }/> |
|
<ListItem content={"Component 2 - // " + this.initial_counter } counter="8"/> |
|
<ListItem content={"Component 3 - // " + this.initial_counter} counter="9"/> |
|
</ul> |
|
</div> |
|
); |
|
} |
|
}); |
|
ReactDOM.render( |
|
<TestApp2 /> |
|
, document.getElementById('soln2')); |
|
|
|
var TestApp3 = React.createClass({ |
|
name: '** TestApp3 Name ** ', |
|
getInitialState: function () { |
|
return ({content: '', isSelected: false, name: this.name}); |
|
}, |
|
kill: function () { |
|
console.log('kill in TestApp3'); |
|
}, |
|
setName: function (date) { |
|
this.setState({name: date}); |
|
}, |
|
render: function () { |
|
return ( |
|
<div> |
|
<h5>{ this.state.name } - TestApp3</h5> |
|
<ul> |
|
<ListItem content="Component 1"/> |
|
<ListItem content="Component 2"/> |
|
<ListItem content="Component 3"/> |
|
|
|
</ul> |
|
<Switch1 id="a" content="Component switch" checked="false" socket={socket}/> |
|
</div> |
|
); |
|
} |
|
}); |
|
ReactDOM.render( |
|
<TestApp3 /> |
|
, document.getElementById('soln3')); |
|
|
|
}); |
|
|
|
</script> |
|
</body> |
|
</html> |
