nutella_framework 0.4.27 → 0.4.28

data/framework_components/room-places-interface/js/react/src/discrete.js

@@ -0,0 +1,282 @@
+var Discrete = React.createClass({
+    getInitialState: function () {
+        return {
+            tracking: undefined
+        };
+    },
+    componentDidMount: function () {
+        var self = this;
+
+        nutella.net.subscribe("location/tracking/discrete/updated", function(message) {
+            var tracking = message["tracking"];
+            if(_.isEmpty(tracking)) {
+                tracking = undefined;
+            }
+            self.setState({tracking: tracking});
+        });
+
+        nutella.net.request("location/tracking/discrete", {}, function(reply) {
+            var tracking = reply["tracking"];
+            if(_.isEmpty(tracking)){
+                tracking = undefined;
+            }
+            self.setState({tracking: tracking});
+        });
+    },
+    handleEnable: function () {
+        var tracking = {
+            x: 0,
+            y: 0,
+            width: this.props.room.x,
+            height: this.props.room.y,
+            n_x: 5,
+            n_y: 5,
+            t_x: 'NUMBER',
+            t_y: 'NUMBER'
+        };
+        nutella.net.publish("location/tracking/discrete/update", {tracking: tracking});
+        self.setState({tracking: tracking});
+    },
+    handleDisable: function () {
+        self.setState({tracking: undefined});
+        nutella.net.publish("location/tracking/discrete/update", {tracking: {}});
+    },
+    handleKeyPress: function (event) {
+        if(event.which == 13) {
+            event.target.textContent = event.target.textContent.trim();
+            event.target.blur();
+        }
+    },
+    handleModifyAttribute: function (name, key, value) {
+
+        var tracking = this.state.tracking;
+
+        switch(key) {
+            case "n_x":
+            case "n_y":
+                tracking[key] = parseInt(value);
+                break;
+
+            case "width":
+            case "height":
+            case "x":
+            case "y":
+                tracking[key] = parseFloat(value);
+                break;
+        }
+
+        nutella.net.publish("location/tracking/discrete/update", {tracking: tracking});
+
+        this.setState({tracking: tracking});
+    },
+    handleTypeChange: function (axis_type, type) {
+        var tracking = this.state.tracking;
+
+        tracking[axis_type] = type;
+
+        nutella.net.publish("location/tracking/discrete/update", {tracking: tracking});
+
+        this.setState({tracking: tracking});
+    },
+    render: function () {
+        var self = this;
+
+        if(self.state.tracking == undefined) {
+            return(
+                <div className="col-md-12 col-sm-12 col-xs-12 table-responsive table_container animated" style={{overflowX: "hide", height: this.props.tableHeight}}>
+                    <table className="table table-bordered table-striped table-hover" id="resource_table" style={{overflowX: "visible"}}>
+                        <thead onClick={_.partial(this.props.showTable, "table.discrete")} className="pointer">
+                        <tr>
+                            <th className="col-md-12 col-sm-12 col-xs-12 text-center">Discrete Tracking</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            <td className="col-md-12 col-sm-12 col-xs-12">
+
+                                <div className="col-md-4 col-sm-4 col-xs-4 btn-group">
+                                    <a className="btn btn-default" onClick={this.handleEnable}><i className="fa fa-ban fa-fw"></i></a>
+                                    <a className="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
+                                        <span className="fa fa-caret-down"></span></a>
+                                    <ul className="dropdown-menu">
+                                        <li><a onClick={self.handleEnable}><i className="fa fa-th-large fa-fw"></i> Enabled</a></li>
+                                        <li><a onClick={self.handleDisable}><i className="fa fa-ban fa-fw"></i> Disabled</a></li>
+                                    </ul>
+                                </div>
+                                <div className="col-md-8 col-sm-8 col-xs-8" style={{marginTop: "6px"}}>Discrete tracking system disabled</div>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            );
+        }
+        else {
+            var t_x = "";
+            var t_y = "";
+            switch(self.state.tracking.t_x) {
+                case 'NUMBER':
+                    t_x = <b>NUMBER</b>;
+                    break;
+                case 'LETTER':
+                    t_x = <b>LETTER</b>;
+                    break;
+            }
+            switch(self.state.tracking.t_y) {
+                case 'NUMBER':
+                    t_y = <b>NUMBER</b>;
+                    break;
+                case 'LETTER':
+                    t_y = <b>LETTER</b>;
+                    break;
+            }
+
+            return(
+                <div className="col-md-12 col-sm-12 col-xs-12 table-responsive table_container animated" style={{overflowX: "hide", height: this.props.tableHeight}}>
+                    <table className="table table-bordered table-striped table-hover" id="resource_table" style={{overflowX: "visible"}}>
+                        <thead onClick={_.partial(this.props.showTable, "table.discrete")} className="pointer">
+                        <tr>
+                            <th className="col-md-12 col-sm-12 col-xs-12 text-center">Discrete Tracking</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            <td className="col-md-12 col-sm-12 col-xs-12">
+
+                                <div className="col-md-4 col-sm-3 col-xs-4 btn-group">
+                                    <a className="btn btn-default" onClick={this.handleDisable}><i className="fa fa-th-large fa-fw"></i></a>
+                                    <a className="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
+                                        <span className="fa fa-caret-down"></span></a>
+                                    <ul className="dropdown-menu">
+                                        <li><a onClick={self.handleEnable}><i className="fa fa-th-large fa-fw"></i> Enabled</a></li>
+                                        <li><a onClick={self.handleDisable}><i className="fa fa-ban fa-fw"></i> Disabled</a></li>
+                                    </ul>
+                                </div>
+
+
+                                <div className="right"  data-toggle="collapse" data-target="#collapseExample2">
+                                    <button type="button" className="btn btn-default"><span className="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></button>
+                                </div>
+
+                                <div className="collapse" id="collapseExample2">
+                                    <div style={{marginTop: "20px", padding: "10px"}}>
+                                        <table className="table table-bordered table-striped table-hover" id="resource_table">
+                                            <tbody>
+                                            <tr>
+                                                <td className="col-md-6 col-sm-6 col-xs-6"><span id="A3">X number</span></td>
+                                                <td className="col-md-6 col-sm-6 col-xs-6">
+                                                    {
+                                                        /*
+                                                        <span contentEditable="true"
+                                                              onKeyUp={self.handleKeyPress}
+                                                              onBlur={self.handleBlur}
+                                                              ref="n_x">
+                                                        {self.state.tracking.n_x}
+                                                        </span>
+                                                        */
+                                                    }
+                                                    <InteractiveLabel
+                                                        onKeyPress={self.handleKeyPress}
+                                                        onValueChange={self.handleModifyAttribute}
+                                                        labelName="value"
+                                                        labelValue={self.state.tracking.n_x}
+                                                        labelKey="n_x"/>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td className="col-md-6 col-sm-6 col-xs-6"><span id="A3">Y number</span></td>
+                                                <td className="col-md-6 col-sm-6 col-xs-6">
+                                                    <InteractiveLabel
+                                                        onKeyPress={self.handleKeyPress}
+                                                        onValueChange={self.handleModifyAttribute}
+                                                        labelName="value"
+                                                        labelValue={self.state.tracking.n_y}
+                                                        labelKey="n_y"/>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td className="col-md-6 col-sm-6 col-xs-6"><span id="A3">Width</span></td>
+                                                <td className="col-md-6 col-sm-6 col-xs-6">
+                                                    <InteractiveLabel
+                                                        onKeyPress={self.handleKeyPress}
+                                                        onValueChange={self.handleModifyAttribute}
+                                                        labelName="value"
+                                                        labelValue={self.state.tracking.width.toFixed(2)}
+                                                        labelKey="width"/>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td className="col-md-6 col-sm-6 col-xs-6"><span id="A3">Height</span></td>
+                                                <td className="col-md-6 col-sm-6 col-xs-6">
+                                                    <InteractiveLabel
+                                                        onKeyPress={self.handleKeyPress}
+                                                        onValueChange={self.handleModifyAttribute}
+                                                        labelName="value"
+                                                        labelValue={self.state.tracking.height.toFixed(2)}
+                                                        labelKey="height"/>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td className="col-md-6 col-sm-6 col-xs-6"><span id="A3">X origin</span></td>
+                                                <td className="col-md-6 col-sm-6 col-xs-6">
+                                                    <InteractiveLabel
+                                                        onKeyPress={self.handleKeyPress}
+                                                        onValueChange={self.handleModifyAttribute}
+                                                        labelName="value"
+                                                        labelValue={self.state.tracking.x.toFixed(2)}
+                                                        labelKey="x"/>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td className="col-md-6 col-sm-6 col-xs-6"><span id="A3">Y origin</span></td>
+                                                <td className="col-md-6 col-sm-6 col-xs-6">
+                                                    <InteractiveLabel
+                                                        onKeyPress={self.handleKeyPress}
+                                                        onValueChange={self.handleModifyAttribute}
+                                                        labelName="value"
+                                                        labelValue={self.state.tracking.y.toFixed(2)}
+                                                        labelKey="y"/>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td className="col-md-6 col-sm-6 col-xs-6" style={{height: "48px"}}><span id="A3">X type</span></td>
+                                                <td className="col-md-6 col-sm-6 col-xs-6">
+                                                    <div className="btn-group dropup">
+                                                        <a className="btn btn-default btn-sm" href="#">{t_x}</a>
+                                                        <a className="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" href="#">
+                                                            <span className="fa fa-caret-up"></span></a>
+                                                        <ul className="dropdown-menu">
+                                                            <li><a onClick={function(){self.handleTypeChange('t_x', 'NUMBER')}}><b>N</b> Number</a></li>
+                                                            <li><a onClick={function(){self.handleTypeChange('t_x', 'LETTER')}}><b>L</b> Letter</a></li>
+                                                        </ul>
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td className="col-md-6 col-sm-6 col-xs-6" style={{height: "48px"}}><span id="A3">Y type</span></td>
+                                                <td className="col-md-6 col-sm-6 col-xs-6">
+                                                    <div className="btn-group dropup">
+                                                        <a className="btn btn-default btn-sm" href="#">{t_y}</a>
+                                                        <a className="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" href="#">
+                                                            <span className="fa fa-caret-up"></span></a>
+                                                        <ul className="dropdown-menu">
+                                                            <li><a onClick={function(){self.handleTypeChange('t_y', 'NUMBER')}}><b>N</b> Number</a></li>
+                                                            <li><a onClick={function(){self.handleTypeChange('t_y', 'LETTER')}}><b>L</b> Letter</a></li>
+                                                        </ul>
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            );
+        }
+    }
+});

data/framework_components/room-places-interface/js/react/src/interactive-label.js

@@ -0,0 +1,54 @@
+var InteractiveLabel = React.createClass({
+    getInitialState: function () {
+        return {
+            value: this.props.labelValue
+        };
+    },
+    componentWillReceiveProps: function(nextProps) {
+        this.setState({
+            value: nextProps.labelValue
+        });
+    },
+    onBlur: function(event) {
+        this.onSubmit();
+
+        return false;
+    },
+    onSubmit: function(event) {
+        if(this.props.id != undefined) {
+            $("#"+this.props.id).attr("v", this.state.value);
+        }
+        this.props.onValueChange(this.props.labelName, this.props.labelKey, this.state.value);
+
+        if(event != undefined) {
+            event.preventDefault();
+        }
+
+        return false;
+    },
+    handleChange: function(event) {
+        this.setState({value: event.target.value});
+    },
+    render: function() {
+        return (
+            <form onSubmit={this.onSubmit}>
+                {this.props.id != undefined ?
+                    <input
+                        id={this.props.id}
+                        className="pointer"
+                        value={this.state.value}
+                        onKeyPress={this.props.onKeyPress}
+                        onChange={this.handleChange}
+                        onBlur={this.onBlur}/>
+                    :
+                    <input
+                        className="pointer"
+                        value={this.state.value}
+                        onKeyPress={this.props.onKeyPress}
+                        onChange={this.handleChange}
+                        onBlur={this.onBlur}/>
+                }
+            </form>
+        )
+    }
+});

data/framework_components/room-places-interface/js/react/src/resource-add.js

@@ -0,0 +1,203 @@
+
+var ResourceAdd = React.createClass({
+    componentDidMount: function () {
+
+    },
+    getInitialState: function() {
+        return {name: "", model: "IPAD", type: "DYNAMIC", tracking: "CONTINUOUS"};
+    },
+    handleSubmit: function(e) {
+        e.preventDefault();
+
+        var resource = {rid: this.state.name, model: this.state.model, type: this.state.type};
+
+        nutella.net.publish("location/resource/add", resource);
+
+        if(this.state.tracking == "CONTINUOUS") {
+            if(this.state.type == "STATIC")
+                resource.proximity_range = 0;
+            resource.continuous = {x: this.props.room.x/2, y: this.props.room.y/2};
+        }
+        else if(this.state.tracking == "DISCRETE") {
+            resource.discrete = {x: 0, y: 0};
+        }
+        else if(this.state.tracking == "PROXIMITY") {
+            resource.proximity = {};
+        }
+
+
+        nutella.net.publish("location/resource/update", resource);
+
+        // Clean the form
+        this.setState({name: ""});
+    },
+    handleChangeName: function(e) {
+        this.setState({name: event.target.value});
+    },
+    handleChangeTypeDynamic: function(e) {
+        this.setState({type: "DYNAMIC"});
+    },
+    handleChangeTypeStatic: function(e) {
+        this.setState({type: "STATIC"});
+        if(this.state.tracking == "PROXIMITY") {
+            this.setState({tracking: "NONE"});
+        }
+    },
+    handleChangeTrackingContinuous: function(e) {
+        this.setState({tracking: "CONTINUOUS"});
+    },
+    handleChangeTrackingDiscrete: function(e) {
+        this.setState({tracking: "DISCRETE"});
+    },
+    handleTrackingProximity: function(e) {
+        this.setState({tracking: "PROXIMITY"});
+    },
+    handleChangeTrackingNone: function(e) {
+        this.setState({tracking: "NONE"});
+    },
+    handleChangeModelIMAC: function(e) {
+        this.setState({model: "IMAC"});
+    },
+    handleChangeModelIPHONE: function(e) {
+        this.setState({model: "IPHONE"});
+    },
+    handleChangeModelIPAD: function(e) {
+        this.setState({model: "IPAD"});
+    },
+    handleChangeModelIBEACON: function(e) {
+        this.setState({model: "IBEACON"});
+    },
+    handleChangeModelADISPLAY: function(e) {
+        this.setState({model: "ADISPLAY"});
+    },
+    handleChangeModelTTABLE: function(e) {
+        this.setState({model: "TTABLE"});
+    },
+    handleChangeModelOTHER: function(e) {
+        this.setState({model: "OTHER"});
+    },
+    handleChangeModel: function(e) {
+        this.setState({model: event.target.value});
+    },
+    render: function () {
+
+        var type = "";
+
+        if(this.state.type == "STATIC") {
+            type = <b>S</b>;
+        }
+        else if(this.state.type == "DYNAMIC") {
+            type = <b>D</b>;
+        }
+
+        var proximity = {};
+        if(this.state.type == "DYNAMIC")
+            proximity = <li onClick={this.handleTrackingProximity}><a href="#"><i className="fa fa-location-arrow fa-fw"></i> Proximity</a></li>;
+
+        var tracking = "";
+
+        if(this.state.tracking == "CONTINUOUS")
+            tracking = "fa-arrows";
+        else if(this.state.tracking == "DISCRETE")
+            tracking = "fa-th-large";
+        else if(this.state.tracking == "PROXIMITY")
+            tracking = "fa-location-arrow";
+        else
+            tracking = "fa-ban";
+
+        var model = "";
+
+        switch(this.state.model) {
+            case "IMAC":
+                model = "icon-iMac";
+                break;
+            case "IPHONE":
+                model = "icon-iPhone";
+                break;
+            case "IPAD":
+                model = "icon-iPad";
+                break;
+            case "IBEACON":
+                model = "icon-iBeacon";
+                break;
+            case "ADISPLAY":
+                model = "icon-aDisplay";
+                break;
+            case "TTABLE":
+                model = "icon-tTable";
+                break;
+            case "OTHER":
+                model = "icon-other";
+                break;
+        }
+
+        return(
+            <div className="col-md-12 col-sm-12 col-xs-12 table-responsive table_container animated" style={{"overflowX": "hide", height: this.props.tableHeight}}>
+                <table className="table table-bordered table-striped table-hover" id="resource_table" style={{"overflowX": "visible"}}>
+                    <thead onClick={_.partial(this.props.showTable, "table.addResource")} className="pointer">
+                        <tr>
+                            <th className="col-md-12 col-sm-12 col-xs-12 text-center">Add resource</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td className="col-md-12 col-sm-12 col-xs-12">
+                                <form onSubmit={this.handleSubmit}>
+                                    <div className="col-md-4 col-sm-4 col-xs-4">
+                                        <input type="text" className="form-control" placeholder="resource-id" value={this.state.name} onChange={this.handleChangeName}/>
+                                    </div>
+
+                                    <div className="btn-group">
+                                        <a className="btn btn-default" href="#"><i className={"fa " + model + " fa-fw"}></i></a>
+                                        <a className="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
+                                            <span className="fa fa-caret-down"></span>
+                                        </a>
+                                        <ul className="dropdown-menu">
+                                            <li onClick={this.handleChangeModelIMAC}><a href="#"><i className="icon-iMac"></i> iMac</a></li>
+                                            <li onClick={this.handleChangeModelIPHONE}><a href="#"><i className="icon-iPhone"></i> iPhone</a></li>
+                                            <li onClick={this.handleChangeModelIPAD}><a href="#"><i className="icon-iPad"></i> iPad</a></li>
+                                            <li onClick={this.handleChangeModelIBEACON}><a href="#"><i className="icon-iBeacon"></i> iBeacon</a></li>
+                                            <li onClick={this.handleChangeModelADISPLAY}><a href="#"><i className="icon-aDisplay"></i> Ambient Display</a></li>
+                                            <li onClick={this.handleChangeModelTTABLE}><a href="#"><i className="icon-tTable"></i> Touch Table</a></li>
+                                            <li onClick={this.handleChangeModelOTHER}><a href="#"><i className="icon-other"></i> Other</a></li>
+                                        </ul>
+                                    </div>
+
+                                    <div className="btn-group">
+                                        <a className="btn btn-default" href="#"><i className={"fa " + tracking + " fa-fw"}></i></a>
+                                        <a className="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
+                                            <span className="fa fa-caret-down"></span>
+                                        </a>
+                                        <ul className="dropdown-menu">
+                                            <li onClick={this.handleChangeTrackingContinuous}><a href="#"><i className="fa fa-arrows fa-fw"></i> Continuous</a></li>
+                                            <li onClick={this.handleChangeTrackingDiscrete}>  <a href="#"><i className="fa fa-th-large fa-fw"></i> Discrete</a></li>
+                                            {proximity}
+                                            <li onClick={this.handleChangeTrackingNone}>      <a href="#"><i className="fa fa-ban fa-fw"></i> Disabled</a></li>
+                                        </ul>
+                                    </div>
+
+                                    <div className="btn-group" role="group">
+                                        <div className="btn-group" role="group">
+                                            <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+                                                {type}
+                                                <span className="caret"></span>
+                                            </button>
+                                            <ul className="dropdown-menu" role="menu">
+                                                <li onClick={this.handleChangeTypeStatic}> <a href="#"><b>S</b> Static</a></li>
+                                                <li onClick={this.handleChangeTypeDynamic}><a href="#"><b>D</b> Dynamic</a></li>
+                                            </ul>
+                                        </div>
+                                    </div>
+
+                                    <button onClick={this.handleSubmit} type="button" className="btn btn-default right">
+                                        <span className="glyphicon glyphicon-plus" aria-hidden="true"></span>
+                                    </button>
+                                </form>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
+});