Queue table

by Matias Guijarro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://rawgit.com/react-bootstrap/react-bootstrap-bower/master/react-bootstrap.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var Panel = ReactBootstrap.Panel;
var Button = ReactBootstrap.Button;
var OverlayTrigger = ReactBootstrap.OverlayTrigger;
var Tooltip = ReactBootstrap.Tooltip;
var Glyphicon = ReactBootstrap.Glyphicon;
var ButtonToolbar = ReactBootstrap.ButtonToolbar;

var Tree = React.createClass({
    render: function() {
      return <Panel header={this.props.title} bsStyle="primary">
        {this.props.children}
      </Panel>
    }
})

var TreeNode = React.createClass({
    getInitialState() {
         return {};
     },
     
     getUniqueId() {
       if (TreeNode._uid_count === undefined) {
           TreeNode._uid_count = 0;
       }
       return 'id' + TreeNode._uid_count++;
     },
    
     render() {
        const input_id = this.getUniqueId();
        const scanTooltip = (
            <Tooltip>Scan</Tooltip>
        );
        const selectTooltip = (
            <Tooltip>Select</Tooltip>
        );
        return <li className="treeLi">
           <input type="checkbox" className="treeNode" id={input_id}/>
           <OverlayTrigger placement="top" overlay={selectTooltip}><span><Button bsClass="btn btn-xs btn-link custom-btn-color" bsSize="xsmall"><Glyphicon glyph="record"/></Button></span></OverlayTrigger>
           <label htmlFor={input_id} className="treeNodeLabel">{this.props.label}</label>
           <OverlayTrigger placement="right" overlay={scanTooltip}><Button bsStyle="default" bsSize="xsmall"><Glyphicon glyph="qrcode"/></Button></OverlayTrigger> 
           <ul className="treeUl">
             {this.props.children}
           </ul>
         </li>;
    }
})

var TreeItem = React.createClass({
  getInitialState() {
    this.itemClicked = this.itemClicked.bind(this);
    return { allow_control: false };
  },
  
  itemClicked: function() {
    this.setState({allow_control: !this.state.allow_control})
  },
  
  render: function() {
    const load_tooltip = (<Tooltip>Load this sample</Tooltip>);
    const unload_tooltip = (<Tooltip>Unload sample to this...