nutella_framework 0.4.27 → 0.4.28

data/framework_components/room-places-interface/js/react/dist/resource-table.js

@@ -0,0 +1,227 @@
+var ResourceTable = React.createClass({displayName: "ResourceTable",
+    table: {
+        resource: "table.resource",
+        addResource: "table.addResource",
+        beacon: "table.beacon",
+        discrete: "table.discrete"
+    },
+    getInitialState: function () {
+        return {
+            resourceData: [],
+            beaconData: [],
+            tableOpen: this.table.resource
+        };
+    },
+    resourcesBuffer: undefined,  // Used for not updating the interface every time a resource change
+    componentDidMount: function () {
+        self = this;
+
+        // Download all resources
+        nutella.net.request("location/resources", {}, function(reply) {
+            self.setState({resourceData: reply.resources});
+        });
+
+        // Wait for new added resources
+        nutella.net.subscribe("location/resources/added", function(message) {
+            var data = self.state.resourceData;
+            data = data.concat(message.resources);
+
+            self.setState({resourceData: data});
+        });
+
+        // Update the interface if the buffer is not empty
+        setInterval(function() {
+            if(self.resourceBuffer == undefined) {
+                return; // Return if buffer empty
+            }
+
+            var data = self.state.resourceData;
+
+            // Remove updated resources
+            data = data.filter(function(d) {
+                return $.inArray(d.rid, self.resourceBuffer.map(function(r) {
+                        return r.rid;
+                    })) == -1;
+            });
+
+            // Add updated resources from the buffer
+            data = data.concat(self.resourceBuffer);
+
+            self.setState({resourceData: data});
+
+            self.resourceBuffer = undefined;    // Empty the buffer
+        }, 200);
+
+        // Wait for updated resources
+        nutella.net.subscribe("location/resources/updated", function(message) {
+            if(self.resourceBuffer == undefined) {
+                self.resourceBuffer = [];
+            }
+            self.resourceBuffer = self.resourceBuffer.filter(function(d) {
+                return $.inArray(d.rid, message.resources.map(function(r) {
+                        return r.rid;
+                    })) == -1;
+            });
+            self.resourceBuffer = self.resourceBuffer.concat(message.resources);
+        });
+
+        // Wait for removed resources
+        nutella.net.subscribe("location/resources/removed", function(message) {
+            var data = self.state.resourceData;
+            data = data.filter(function(d) {
+                return $.inArray(d.rid, message.resources.map(function(r) {
+                        return r.rid;
+                    })) == -1;
+            });
+
+            self.setState({resourceData: data});
+        });
+
+
+        // Download all beacons
+        nutella.net.request("beacon/beacons", {}, function(reply) {
+            self.setState({beaconData: reply.beacons});
+        });
+
+        // Wait for new added beacons
+        nutella.net.subscribe("beacon/beacons/added", function(message) {
+            var data = self.state.beaconData;
+            data = data.concat(message.beacons);
+
+            self.setState({beaconData: data});
+        });
+
+        // Wait for removed beacons
+        nutella.net.subscribe("beacon/beacons/removed", function(message) {
+            var data = self.state.beaconData;
+            data = data.filter(function(d) {
+                return $.inArray(d.rid, message.beacons.map(function(r) {
+                        return r.rid;
+                    })) == -1;
+            });
+
+            self.setState({beaconData: data});
+        });
+    },
+    updateResource: function(resource) {
+        nutella.net.publish("location/resource/update", resource);
+    },
+    removeResource: function(resource) {
+        nutella.net.publish("location/resource/remove", resource);
+    },
+    addResource: function(resource) {
+        nutella.net.publish("location/resource/add", resource);
+    },
+    showTable: function(table) {
+        if(this.state.tableOpen == table) {
+            this.setState({tableOpen: undefined});
+        }
+        else {
+            this.setState({tableOpen: table});
+        }
+    },
+    render: function() {
+        var self = this;
+
+        // Order the resource list
+        var resources = this.state.resourceData;
+        resources = resources.sort(function(a, b) {
+            if(a.type == "STATIC" && b.type == "DYNAMIC") {
+                return -1;
+            }
+            else if(a.type == "DYNAMIC" && b.type == "STATIC") {
+                return 1;
+            }
+            else {
+                return a.rid.localeCompare(b.rid);
+            }
+        });
+
+        var resourceRows = resources.map(function (resource, index) {
+            return (
+                React.createElement(Resource, {resource: resource, 
+                    key: resource.rid, 
+                    updateResource: self.updateResource, 
+                    removeResource: self.removeResource, 
+                    room: self.props.room})
+            );
+        });
+
+        // Order the resource list
+        var beacons = this.state.beaconData;
+        beacons = beacons.sort(function(a, b) {
+            return a.rid.localeCompare(b.rid)
+        });
+        beacons = beacons.filter(function(b) {
+
+            return $.inArray(b.rid, resources.map(function(r) {
+                return r.rid;
+            })) == -1;
+
+        });
+
+        var beaconRows = beacons.map(function (beacon, index) {
+            return (
+                React.createElement(Beacon, {beacon: beacon, 
+                    key: beacon.rid, 
+                    addResource: self.addResource, 
+                    updateResource: self.updateResource})
+            );
+        });
+
+        var resourceTableHeight = "40px";
+        var addResourceTableHeight = "40px";
+        var beaconTableHeight = "40px";
+        var discreteTableHeight = "40px";
+
+        switch(this.state.tableOpen) {
+            case this.table.resource:
+                resourceTableHeight = "500px";
+                break;
+            case this.table.addResource:
+                addResourceTableHeight = "300px";
+                break;
+            case this.table.beacon:
+                beaconTableHeight = "500px";
+                break;
+            case this.table.discrete:
+                discreteTableHeight = "500px";
+                break;
+        }
+
+        return(
+            React.createElement("div", null, 
+                React.createElement("div", {className: "col-md-12 table-responsive table_container animated", style: {"overflowX": "scroll", maxHeight: resourceTableHeight}}, 
+                    React.createElement("table", {className: "table table-bordered table-striped table-hover", id: "resource_table"}, 
+                        React.createElement("thead", {onClick: _.partial(this.showTable, this.table.resource), className: "pointer"}, 
+                            React.createElement("tr", null, 
+                                React.createElement("th", {className: "col-md-12 col-sm-12 col-xs-12 text-center"}, "Resources")
+                            )
+                        ), 
+                        React.createElement("tbody", null, 
+                            resourceRows
+                        )
+                    )
+                ), 
+                React.createElement(ResourceAdd, {room: this.props.room, tableHeight: addResourceTableHeight, showTable: this.showTable}), 
+                React.createElement("div", {className: "col-md-12 table-responsive table_container animated", 
+                     style: {
+                        "overflowX": "scroll",
+                        maxHeight: beaconTableHeight
+                        }}, 
+                    React.createElement("table", {className: "table table-bordered table-striped table-hover", id: "resource_table"}, 
+                        React.createElement("thead", {onClick: _.partial(this.showTable, this.table.beacon), className: "pointer"}, 
+                            React.createElement("tr", null, 
+                                React.createElement("th", {className: "col-md-12 col-sm-12 col-xs-12 text-center"}, "Beacons")
+                            )
+                        ), 
+                        React.createElement("tbody", null, 
+                            beaconRows
+                        )
+                    )
+                ), 
+                React.createElement(Discrete, {room: this.props.room, tableHeight: discreteTableHeight, showTable: this.showTable})
+            )
+        );
+    }
+});

data/framework_components/room-places-interface/js/react/dist/resource.js

@@ -0,0 +1,433 @@
+
+var Resource = React.createClass({displayName: "Resource",
+    componentDidMount: function () {
+
+    },
+    handleParameterChange: function(event) {
+        var text = $("#"+event.target.id).text();
+
+        // Pressed return
+        if(event.which == 13) {
+            $("#"+event.target.id).blur();
+            $("#"+event.target.id).text(text);
+        }
+    },
+    handleUpdateParameters: function() {
+        var resource = this.props.resource;
+        delete resource["parameters"];
+
+        if(resource.continuous != undefined) {
+            if(resource.continuous.x != undefined) {
+                var number = parseFloat($("#"+this.props.resource.rid+"_parameter_x").attr("v"));
+                if(!isNaN(number))
+                    resource.continuous.x = number;
+            }
+            if(resource.continuous.y != undefined) {
+                var number = parseFloat($("#"+this.props.resource.rid+"_parameter_y").attr("v"));
+                if(!isNaN(number))
+                    resource.continuous.y = number;
+            }
+        }
+
+        if(resource.discrete != undefined) {
+            if(resource.discrete.x != undefined) {
+                var value = $("#"+this.props.resource.rid+"_parameter_x").attr("v");
+                value = value || $("#"+this.props.resource.rid+"_parameter_x").attr("value");
+                var number = parseFloat(value);
+                if(!isNaN(number))
+                    resource.discrete.x = number;
+                else if(value.length > 0)
+                    resource.discrete.x = value;
+            }
+            if(resource.discrete.y != undefined) {
+                var value = $("#"+this.props.resource.rid+"_parameter_y").attr("v");
+                value = value || $("#"+this.props.resource.rid+"_parameter_y").attr("value");
+                var number = parseFloat(value);
+                if(!isNaN(number))
+                    resource.discrete.y = number;
+                else if(value.length > 0)
+                    resource.discrete.y = value;
+            }
+        }
+
+        if(resource.proximity_range != undefined) {
+            var number = parseFloat($("#"+this.props.resource.rid+"_parameter_proximity").attr("v"));
+            if(!isNaN(number))
+                resource.proximity_range = number;
+            else
+                $("#"+this.props.resource.rid+"_parameter_proximity").val(resource.proximity_range);
+        }
+        this.props.updateResource(resource);
+    },
+    handleContinousPressed: function() {
+        var resource = this.props.resource;
+        delete resource["discrete"];
+        delete resource["proximity"];
+        delete resource["parameters"];
+        resource.continuous = {
+            x: this.props.room.x/2,
+            y: this.props.room.y/2
+        };
+        this.props.updateResource(resource);
+    },
+    handleDiscretePressed: function() {
+        var resource = this.props.resource;
+        delete resource["parameters"];
+        delete resource["continuous"];
+        delete resource["proximity"];
+        resource.discrete = {
+            x: 0,
+            y: 0
+        };
+        this.props.updateResource(resource);
+    },
+    handleProximityPressed: function() {
+        var resource = this.props.resource;
+        delete resource["parameters"];
+        delete resource["continuous"];
+        delete resource["discrete"];
+        resource.proximity = {};
+        this.props.updateResource(resource);
+    },
+    handleDisablePressed: function() {
+        var resource = this.props.resource;
+        delete resource["continuous"];
+        delete resource["discrete"];
+        delete resource["parameters"];
+        this.props.updateResource(resource);
+    },
+    handleDeletePressed: function() {
+        this.props.removeResource(this.props.resource);
+    },
+    handleStaticPressed: function() {
+        var resource = this.props.resource;
+        delete resource["parameters"];
+        if(resource.type == "STATIC")
+            return;
+
+        resource.type = "STATIC";
+        resource.proximity_range = 1;
+        delete resource["proximity"];
+        delete resource["parameters"];
+        this.props.updateResource(resource);
+    },
+    handleDynamicPressed: function() {
+        var resource = this.props.resource;
+        delete resource["parameters"];
+        if(resource.type == "DYNAMIC")
+            return;
+
+        resource.type = "DYNAMIC";
+        delete resource["proximity_range"];
+        this.props.updateResource(resource);
+    },
+    handleAddKey: function() {
+        var key = this.refs.key.getDOMNode().value.trim();
+        var value = this.refs.value.getDOMNode().value.trim();
+
+        this.refs.key.getDOMNode().value = "";
+        this.refs.value.getDOMNode().value = "";
+
+        var resource = this.props.resource;
+
+        resource.parameters = [];
+
+        resource.parameters.push({key: key, value: value});
+
+        this.props.updateResource(resource);
+    },
+    handleKeyEnterPressed: function(event) {
+        // Pressed return
+        if(event.which == 13) {
+            this.handleAddKey();
+        }
+    },
+    handleModifyKey: function(name, _key, _value) {
+        var key, value, prev_key = undefined;
+
+        var resource = this.props.resource;
+
+        switch(name) {
+            case "key":
+                key = _value;
+                prev_key = _key;
+                value = resource.parameters[prev_key];
+                break;
+            case "value":
+                prev_key = _key;
+                key = _key;
+                value = _value;
+                break;
+        }
+
+        /*
+        if(key == "") {
+            $("#" + event.target.id.substring(0, event.target.id.length - 1) + "k").focus();
+            return;
+        }
+        if(value == "") {
+            $("#" + event.target.id.substring(0, event.target.id.length - 1) + "v").focus();
+            return;
+        }
+        */
+
+
+        resource.parameters = [];
+
+        resource.parameters.push({key: prev_key, delete: true});
+        resource.parameters.push({key: key, value: value});
+
+        this.props.updateResource(resource);
+    },
+    handleDeleteKey: function(event) {
+        var key = event.target.id;
+
+        var resource = this.props.resource;
+
+        resource.parameters = [];
+
+        resource.parameters.push({key: key, delete: true});
+
+        this.props.updateResource(resource);
+    },
+    render: function () {
+        var self = this;
+
+         var parameters = [];
+
+         if(this.props.resource.continuous != undefined ) {
+
+             if(this.props.resource.continuous.x != undefined) {
+                 parameters.push({key: "x", value: parseFloat(this.props.resource.continuous.x).toFixed(2)});
+             }
+
+             if(this.props.resource.continuous.y != undefined) {
+                 parameters.push({key: "y", value: parseFloat(this.props.resource.continuous.y).toFixed(2)});
+             }
+         }
+
+        if(this.props.resource.discrete != undefined ) {
+
+            if(this.props.resource.discrete.x != undefined) {
+                var value = this.props.resource.discrete.x;
+
+                if(!isNaN(parseInt(value))) {
+                    // Reduce precision
+                    value = parseInt(value);
+                }
+
+                parameters.push({key: "x", value: value});
+            }
+
+            if(this.props.resource.discrete.y != undefined) {
+                var value = this.props.resource.discrete.y;
+
+                if(!isNaN(parseInt(value))) {
+                    // Reduce precision
+                    value = parseInt(value);
+                }
+
+                parameters.push({key: "y", value: value});
+            }
+        }
+
+         if(this.props.resource.proximity_range != undefined) {
+             parameters.push({key: "proximity", value: parseFloat(this.props.resource.proximity_range).toFixed(2)});
+         }
+
+
+
+         var parameterRows = parameters.map(function (parameter, index) {
+             return(
+                 React.createElement("tr", null, 
+                     React.createElement("td", {className: "col-md-6 col-sm-6 col-xs-6"}, React.createElement("span", null, parameter.key)), 
+                     React.createElement("td", {className: "col-md-6 col-sm-6 col-xs-6"}, 
+                         React.createElement(InteractiveLabel, {
+                             id: self.props.resource.rid+"_parameter_"+parameter.key, 
+                             onKeyPress: self.handleParameterChange, 
+                             onValueChange: self.handleUpdateParameters, 
+                             labelValue: parameter.value, 
+                             labelKey: parameter.key})
+                     )
+                 )
+             );
+         });
+
+        var parameterTable =
+            React.createElement("table", {className: "table table-bordered table-striped table-hover", id: "resource_table"}, 
+                React.createElement("thead", null, 
+                    React.createElement("tr", null, 
+                        React.createElement("td", {className: "col-md-6 col-sm-6 col-xs-6"}, "Variable"), 
+                        React.createElement("td", {className: "col-md-6 col-sm-6 col-xs-6"}, "Value")
+                    )
+                ), 
+                React.createElement("tbody", null, 
+                    parameterRows
+                )
+            );
+
+        if(parameterRows.length == 0)
+            parameterTable = [];
+
+        var keyValueRows = [];
+
+        if(this.props.resource.parameters != undefined) {
+            keyValueRows = Object.keys(this.props.resource.parameters).map(function (key, index) {
+                return (
+                    React.createElement("tr", null, 
+                        React.createElement("td", {className: "col-md-6 key-values"}, 
+                            React.createElement(InteractiveLabel, {
+                                id: self.props.resource.rid+"_"+key+"_k", 
+                                onKeyPress: self.handleParameterChange, 
+                                onValueChange: self.handleModifyKey, 
+                                labelName: "key", 
+                                labelValue: key, 
+                                labelKey: key})
+                        ), 
+                        React.createElement("td", {className: "col-md-6 key-values"}, 
+                            React.createElement(InteractiveLabel, {
+                                id: self.props.resource.rid+"_"+key+"_k", 
+                                onKeyPress: self.handleParameterChange, 
+                                onValueChange: self.handleModifyKey, 
+                                labelName: "value", 
+                                labelValue: self.props.resource.parameters[key], 
+                                labelKey: key}), 
+                            React.createElement("button", {
+                                type: "button", 
+                                onClick: self.handleDeleteKey, 
+                                id: key, className: "btn btn-default btn-xs right"}, 
+                                React.createElement("span", {className: "glyphicon glyphicon-remove", id: key, "aria-hidden": "true"})
+                            )
+                        )
+                    )
+                );
+            });
+        }
+
+        var type = "";
+
+        if(this.props.resource.type == "STATIC") {
+            type = React.createElement("b", null, "S");
+        }
+        else if(this.props.resource.type == "DYNAMIC") {
+            type = React.createElement("b", null, "D");
+        }
+
+        var trackingSystem = "";
+
+        if(this.props.resource.continuous != undefined) {
+            trackingSystem = React.createElement("i", {className: "fa fa-arrows fa-fw"});
+        }
+        else if(this.props.resource.discrete != undefined) {
+            trackingSystem = React.createElement("i", {className: "fa fa-th-large fa-fw"});
+        }
+        else if(this.props.resource.proximity != undefined) {
+            trackingSystem = React.createElement("i", {className: "fa fa-location-arrow fa-fw"});
+        }
+        else {
+            trackingSystem = React.createElement("i", {className: "fa fa-ban fa-fw"});
+        }
+
+        var model = "";
+        switch(this.props.resource.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;
+        }
+
+        var proximity = {};
+        if(this.props.resource.type == "DYNAMIC")
+            proximity = React.createElement("li", {onClick: this.handleProximityPressed}, React.createElement("a", {href: "#"}, React.createElement("i", {className: "fa fa-location-arrow fa-fw"}), " Proximity"));
+
+        return(
+
+            React.createElement("tr", null, 
+                React.createElement("td", {className: "col-md-12 col-sm-12 col-xs-12"}, 
+                    React.createElement("div", {className: "col-md-4 col-sm-4 col-xs-4"}, 
+                        React.createElement("div", {className: "vertical-center"}, 
+                            React.createElement("span", {className: model, style: {fontSize: "20"}}), 
+                            React.createElement("span", null, "  ", this.props.resource.rid)
+                        )
+                    ), 
+
+                    React.createElement("div", {className: "col-md-8 col-sm-8 col-xs-8 right"}, 
+                        React.createElement("div", {className: "btn-group"}, 
+                            React.createElement("a", {className: "btn btn-default", href: "#"}, trackingSystem), 
+                            React.createElement("a", {className: "btn btn-default dropdown-toggle", "data-toggle": "dropdown", href: "#"}, 
+                                React.createElement("span", {className: "fa fa-caret-down"})), 
+                            React.createElement("ul", {className: "dropdown-menu"}, 
+                                React.createElement("li", {onClick: this.handleContinousPressed}, React.createElement("a", {href: "#"}, React.createElement("i", {className: "fa fa-arrows fa-fw"}), " Continuous")), 
+                                React.createElement("li", {onClick: this.handleDiscretePressed}, React.createElement("a", {href: "#"}, React.createElement("i", {className: "fa fa-th-large fa-fw"}), " Discrete")), 
+                                proximity, 
+                                /*<li onClick={this.handleDisablePressed}><a href="#"><i className="fa fa-ban fa-fw"></i> Disable</a></li>*/
+                                React.createElement("li", {className: "divider"}), 
+                                React.createElement("li", {onClick: this.handleDeletePressed}, React.createElement("a", {href: "#"}, React.createElement("i", {className: "fa fa-trash-o fa-fw"}), " Delete"))
+                            )
+                        ), 
+
+                        React.createElement("div", {className: "btn-group", role: "group"}, 
+                            React.createElement("div", {className: "btn-group", role: "group"}, 
+                                React.createElement("button", {type: "button", className: "btn btn-default dropdown-toggle", "data-toggle": "dropdown", "aria-expanded": "false"}, 
+                                    type, 
+                                    React.createElement("span", {className: "caret"})
+                                ), 
+                                React.createElement("ul", {className: "dropdown-menu", role: "menu"}, 
+                                    React.createElement("li", {onClick: this.handleStaticPressed}, React.createElement("a", {href: "#"}, React.createElement("b", null, "S"), " Static")), 
+                                    React.createElement("li", {onClick: this.handleDynamicPressed}, React.createElement("a", {href: "#"}, React.createElement("b", null, "D"), " Dynamic"))
+                                )
+                            )
+                        ), 
+
+                        React.createElement("div", {className: "right", "data-toggle": "collapse", "data-target": "#collapse-"+this.props.resource.rid}, 
+                            React.createElement("button", {type: "button", className: "btn btn-default"}, React.createElement("span", {className: "glyphicon glyphicon-chevron-down", "aria-hidden": "true"}))
+                        )
+                    ), 
+
+                    React.createElement("div", {className: "collapse", id: "collapse-"+this.props.resource.rid}, 
+                        React.createElement("div", {style: {"padding": "20px"}}, 
+                            parameterTable, 
+                            React.createElement("table", {className: "table table-bordered table-striped table-hover", id: "resource_table"}, 
+                                React.createElement("thead", null, 
+                                    React.createElement("tr", null, 
+                                        React.createElement("td", {className: "col-md-6 col-sm-6 col-xs-6"}, "Key"), 
+                                        React.createElement("td", {className: "col-md-6 col-sm-6 col-xs-6"}, "Value")
+                                    )
+                                ), 
+                                React.createElement("tbody", null, 
+                                    keyValueRows, 
+                                    React.createElement("tr", null, 
+                                        React.createElement("form", {onSubmit: this.handleAddKey}, 
+                                            React.createElement("td", {className: "col-md-6"}, React.createElement("input", {onKeyPress: this.handleKeyEnterPressed, type: "text", className: "form-control", placeholder: "key", ref: "key"})), 
+                                            React.createElement("td", {className: "col-md-6"}, React.createElement("input", {onKeyPress: this.handleKeyEnterPressed, type: "text", className: "form-control", placeholder: "value", ref: "value"}))
+                                        )
+                                    )
+                                )
+                            )
+                        )
+                    )
+
+                )
+            )
+        );
+
+    }
+});
+

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

@@ -0,0 +1,30 @@
+
+var Beacon = React.createClass({
+    componentDidMount: function () {
+
+    },
+    handleAddPressed: function() {
+        var resource = {rid: this.props.beacon.rid, type: "DYNAMIC", model: "IBEACON", proximity: {}};
+
+        this.props.addResource(resource);
+        this.props.updateResource(resource);
+    },
+    render: function () {
+        var self = this;
+
+        return(
+            <tr>
+                <td className="col-md-12 col-sm-12 col-xs-12">
+                    <div className="col-md-4 col-sm-4 col-xs-4"><div className="vertical-center"><span>{this.props.beacon.rid}</span></div></div>
+
+                    <div className="right">
+                        <button type="button" className="btn btn-default" onClick={this.handleAddPressed}><span className="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
+                    </div>
+
+                </td>
+            </tr>
+        );
+
+    }
+});
+