nutella_framework 0.6.6 → 0.6.7

data/framework_components/roomcast-main-app/src/app/components/login/BrokerPage.js

@@ -0,0 +1,139 @@
+
+var React = require('react');
+var Mui = require('material-ui');
+var TextField = Mui.TextField;
+var RaisedButton = Mui.RaisedButton;
+var NUTELLA = require('nutella_lib');
+
+var BrokerPage = React.createClass({
+
+    componentWillMount: function() {
+        this.updateDimensions();
+    },
+
+    componentDidMount: function() {
+        window.addEventListener("resize", this.updateDimensions);
+    },
+
+    componentWillUnmount: function() {
+        window.removeEventListener("resize", this.updateDimensions);
+    },
+
+    updateDimensions: function() {
+        this.setState({innerHeight: window.innerHeight});
+    },
+
+    handleSetBroker: function() {
+        var self = this;
+        var broker = this.refs.textFieldBroker.getValue();
+
+        if(broker.length !== 0) {
+
+            // Start nutella
+            window.nutella = NUTELLA.init(broker, 'app_id', 'run_id', 'login-screens', function(connected) {
+                if(connected) {
+
+                    var callback = function() {
+                        if(!self.state.app_ids) {
+                            self.setErrorText('Invalid broker.');
+                        } else {
+                            window.ReactMain.login.broker = broker;
+                            self.props.onSwitchPage(2, {app_ids: self.state.app_ids});
+                        }
+                    };
+
+                    nutella.net.request('runs_list', 'req', function (response) {
+                        var app_ids = [];
+                        for (var app_id in response) {
+                            if (response.hasOwnProperty(app_id)) {
+                                app_ids.push(app_id);
+                            }
+                        }
+                        self.setState({
+                            app_ids: app_ids
+                        }, callback);
+                    });
+
+                } else {
+                    self.setErrorText('Invalid broker.');
+                }
+            });
+
+        } else {
+            this.setErrorText('You must set a broker.');
+        }
+    },
+
+    getInitialState: function () {
+        return  {
+            errorText: null,
+            innerHeight: window.innerHeight,
+            app_ids: undefined
+        }
+    },
+
+    setErrorText: function(value) {
+        this.setState({
+            errorText: value
+        });
+    },
+
+    validateInput:  function() {
+        var input = this.refs.textFieldBroker.getValue();
+        if (input.length === 0) {
+            this.setErrorText('You must set a broker.');
+        } else {
+            this.setErrorText(null);
+        }
+    },
+
+    render: function () {
+        var self = this;
+
+        var titlesDivStyle = {
+            height: this.state.innerHeight * (0.4)
+        };
+
+        var gridDivStyle = {
+            height: this.state.innerHeight * (0.6)
+        };
+
+        return (
+
+            <div className='main-div' >
+
+                <div className='titles-div' style={titlesDivStyle} >
+
+                    <span className='title' > RoomCast login </span>
+                    <span className='title' > broker: </span>
+
+                </div>
+
+                <div className='broker-div titles-div' style={gridDivStyle} >
+
+                    <div className='text-field-broker'>
+                        <TextField
+                            ref='textFieldBroker'
+                            hintText={'broker IP address'}
+                            multiLine={false}
+                            errorText={this.state.errorText}
+                            onChange={this.validateInput} />
+                    </div>
+
+                </div>
+
+                <div className='submit-broker'>
+                    <RaisedButton
+                        label='Submit'
+                        secondary={true}
+                        onTouchTap={this.handleSetBroker} />
+                </div>
+
+            </div>
+
+        );
+    }
+
+});
+
+module.exports = BrokerPage;

data/framework_components/roomcast-main-app/src/app/components/login/IdentitiesGrid.js

@@ -0,0 +1,93 @@
+
+var React = require('react');
+var IdentityCard = require('./IdentityCard');
+
+var IdentitiesGrid = React.createClass({
+
+    componentWillMount: function() {
+        this._externalMargin = 20;
+        this._cardMargin = 20;
+        this._heightRatio = 0.6;
+
+        this.computeGrid(this.props.identities);
+    },
+
+    componentWillReceiveProps: function(nextProps) {
+        this.computeGrid(nextProps.identities);
+    },
+
+    getInitialState: function () {
+        return  {
+            hasBeenSelected: false
+        }
+    },
+
+    setHasBeenSelected: function(b) {
+        this.setState({
+            hasBeenSelected: b
+        });
+    },
+
+    /**
+     * Computes grid size based on given number of configs.
+     */
+    computeGrid: function(identities) {
+        var N = identities.length; // num of total cards
+        var i = 1;  // num of rows
+        var j = 2;  // num of columns
+        for(var n=1; n<=N; n++) {
+            var p = i * j;
+            if(n > p) {
+                if(i < j) {
+                    i++;
+                } else {
+                    j++;
+                }
+            }
+        }
+        var cardWidth = (window.innerWidth - this._externalMargin*2 - this._cardMargin*2*j) / j;
+        var cardHeight = (window.innerHeight*this._heightRatio - this._externalMargin - this._cardMargin*2*i) / i;
+        this._cardSize = [cardWidth, cardHeight];
+
+    },
+
+    render: function () {
+        var self = this;
+
+        var cards = [];
+
+        var height = window.innerHeight * this._heightRatio;
+        var gridStyle = {height: height};
+
+        var cardStyle = {
+            width: this._cardSize[0],
+            height: this._cardSize[1],
+            //position: 'absolute',
+            flexBasis: this._cardSize[0]
+        };
+
+        this.props.identities.forEach(function(i, key) {
+            cards.push(
+                <IdentityCard
+                    key={key}
+                    name={i}
+                    type={self.props.type}
+                    cardStyle={cardStyle}
+                    hasBeenSelected={self.state.hasBeenSelected}
+                    onSelectedIdentity={self.setHasBeenSelected}
+                    onSwitchPage={self.props.onSwitchPage}
+                    onLogin={self.props.onLogin} />);
+        });
+
+        return (
+
+            <div className='identities-grid' style={gridStyle} >
+                {cards}
+            </div>
+
+        );
+    }
+
+});
+
+module.exports = IdentitiesGrid;

data/framework_components/roomcast-main-app/src/app/components/login/IdentityCard.js

@@ -0,0 +1,99 @@
+
+var React = require('react');
+var Mui = require('material-ui');
+var Paper = Mui.Paper;
+var iOSMixin = require('./iOSMixin');
+
+var IdentityCard = React.createClass({
+
+    mixins: [iOSMixin],
+
+    componentDidMount: function() {
+        var self= this;
+        this._colorSelected = '#00bcd4';
+
+    },
+
+    getInitialState: function () {
+        return  {
+            isSelected: false
+        }
+    },
+
+    handleSelectedIdentity: function() {
+        var self = this;
+
+        if(!this.props.hasBeenSelected) {
+
+            this.props.onSelectedIdentity(true);
+
+            // Show selection
+            this.setState({
+                isSelected: true
+            });
+
+            var callback = function() {
+
+                if(self.props.type === 'app_id') {
+                    ReactMain.login.app_id = self.props.name;
+                    self.props.onSwitchPage(3, {app_id: self.props.name});
+
+                } else {
+
+                    if(self.props.type === 'run_id') {
+                        var actionParameters = {
+                            broker: ReactMain.login.broker,
+                            app_id: ReactMain.login.app_id,
+                            run_id: self.props.name
+                        };
+                        // Exit point from login
+                        self.props.onLogin(actionParameters);
+                    }
+
+                }
+            };
+            setTimeout(callback, 500);
+        }
+
+    },
+
+    render: function () {
+
+        var selectedCardStyle = {
+            backgroundColor: this._colorSelected,
+            color: 'white'
+        };
+
+        // Copy
+        var cardStyle = {};
+        for(var p_ in this.props.cardStyle) {
+            cardStyle[p_] = this.props.cardStyle[p_];
+        }
+
+        var className='identity-card';
+
+        // Add properties if selected
+        if(this.state.isSelected) {
+            className += ' identity-card-selected';
+            for(var p in selectedCardStyle) {
+                cardStyle[p] = selectedCardStyle[p];
+            }
+
+        }
+
+        return (
+
+            <Paper className={className} style={cardStyle} onTouchTap={this.handleSelectedIdentity}  >
+
+                <div className='card-name'>
+
+                    <span> {this.props.name} </span>
+
+                </div>
+
+            </Paper>);
+    }
+
+});
+
+module.exports = IdentityCard;

data/framework_components/roomcast-main-app/src/app/components/login/RunIdPage.js

@@ -0,0 +1,78 @@
+
+var React = require('react');
+var IdentitiesGrid = require('./IdentitiesGrid');
+
+var RunIdPage = React.createClass({
+
+    componentWillMount: function() {
+        var self = this;
+        var run_ids = [];
+        nutella.net.request('runs_list', 'req', function(response) {
+            response[self.props.app_id].runs.forEach(function(run_id) {
+                run_ids.push(run_id);
+            });
+            self.setState({
+                values: run_ids
+            });
+        });
+    },
+
+    getInitialState: function () {
+        return  {
+            hasBeenSelected: false,
+            values: undefined
+        }
+    },
+
+    render: function () {
+
+        var titlesDivStyle = {
+            height: window.innerHeight * (0.4)
+        };
+
+        var gridDivStyle = {
+            height: window.innerHeight * (0.6)
+        };
+
+        var run_ids_grid = null;
+
+        if(this.state.values) {
+            var backgroundMessage = null;
+            if(this.state.values.length === 0) {
+                backgroundMessage = <p className='backgroundMessage' > No available runs </p>;
+            }
+
+            run_ids_grid = (
+                <div className='grid-div' style={gridDivStyle} >
+
+                    {backgroundMessage}
+                    <IdentitiesGrid
+                        identities={this.state.values}
+                        type='run_id'
+                        onLogin={this.props.onLogin} />
+
+                </div>
+            );
+        }
+
+        return (
+
+            <div className='main-div' >
+
+                <div className='titles-div' style={titlesDivStyle} >
+
+                    <img src='dist/assets/Logo_alpha.png' className='rc-logo' />
+                    <span className='title' > run name: </span>
+
+                </div>
+
+                {run_ids_grid}
+
+            </div>
+
+        );
+    }
+
+});
+
+module.exports = RunIdPage;

data/framework_components/roomcast-main-app/src/app/components/login/iOSMixin.js

@@ -0,0 +1,23 @@
+
+var iOSMixin = {
+
+    iOScall: function(actionType, actionParameters) {
+
+        // JavaScript to send an action to iOS code
+        var appName = 'roomcast';
+        var url;
+        if(actionParameters) {
+            var jsonString = (JSON.stringify(actionParameters));
+            var escapedJsonParameters = escape(jsonString);
+            url = appName + '://' + actionType + "#" + escapedJsonParameters;
+        } else {
+            url = appName + '://' + actionType;
+        }
+        document.location.href = url;
+        console.log('launching url: ', url);
+    }
+
+
+};
+
+module.exports = iOSMixin;

data/framework_components/roomcast-main-app/src/app/components/login/main.js

@@ -0,0 +1,121 @@
+
+var React = require('react');
+var Mui = require('material-ui');
+var IdentitiesGrid = require('./IdentitiesGrid');
+
+var BrokerPage = require('./BrokerPage');
+var AppIdPage = require('./AppIdPage');
+var RunIdPage = require('./RunIdPage');
+var NUTELLA = require('nutella_lib');
+
+var Main = React.createClass({
+
+    componentDidMount: function() {
+        var broker = '52.1.142.215';
+        this.initWithBroker(broker);
+    },
+
+    initWithBroker: function(broker) {
+        var self = this;
+
+        // Start nutella
+        window.nutella = NUTELLA.init(broker, 'app_id', 'run_id', 'login', function(connected) {
+            if(connected) {
+
+                nutella.net.request('runs_list', 'req', function (response) {
+                    var app_ids = [];
+                    for (var app_id in response) {
+                        if (response.hasOwnProperty(app_id)) {
+                            app_ids.push(app_id);
+                        }
+                    }
+                    self.setState({
+                        app_ids: app_ids
+                    }, callback);
+                });
+
+                var callback = function() {
+                    if(!self.state.app_ids) {
+                        console.log('Invalid broker.');
+                    } else {
+                        window.ReactMain.login.broker = broker;
+                    }
+                };
+
+            } else {
+                console.log('Invalid broker.');
+            }
+        });
+    },
+
+    getInitialState: function () {
+        return  {
+            identities: [],
+            page: 2,
+            app_ids: undefined,
+            app_id: undefined
+        }
+    },
+
+    setIdentities: function(ids) {
+        this.setState({
+            identities: ids
+        });
+    },
+
+    setPage: function(page) {
+        this.setState({
+            page: page
+        });
+    },
+
+    handleSwitchPage: function(page, params) {
+        this.setPage(page);
+        if(params) {
+            if(params.app_ids) {
+                this.setState({
+                    app_ids: params.app_ids
+                });
+            }
+            if(params.app_id) {
+                this.setState({
+                    app_id: params.app_id
+                });
+            }
+        }
+    },
+
+    handleLogin: function(params) {
+      this.props.onSwitchPage(2, params);
+    },
+
+    render: function () {
+
+        var page = null;
+        switch(this.state.page) {
+            case 1:
+                page = <BrokerPage
+                    onSwitchPage={this.handleSwitchPage} />;
+                break;
+            case 2:
+                page = <AppIdPage
+                    onSwitchPage={this.handleSwitchPage}
+                    values={this.state.app_ids}
+                    initWithBroker={this.initWithBroker} />;
+                break;
+            case 3:
+                page = <RunIdPage
+                    onSwitchPage={this.handleSwitchPage}
+                    app_id={this.state.app_id}
+                    values={[]}
+                    onLogin={this.handleLogin} />;
+                break;
+            default:
+        }
+
+        return page;
+    }
+
+});
+
+module.exports = Main;

data/framework_components/roomcast-main-app/src/app/components/main.js

@@ -0,0 +1,64 @@
+
+var React = require('react');
+var Mui = require('material-ui');
+
+var Login = require('./login/main');
+var App = require('./app/main');
+var NUTELLA = require('nutella_lib');
+
+var Main = React.createClass({
+
+    componentDidMount: function() {
+
+    },
+
+    getInitialState: function () {
+        return  {
+            page: 1,
+            params: undefined
+        }
+    },
+
+    setPage: function(page) {
+        this.setState({
+            page: page
+        });
+    },
+
+    handleSwitchPage: function(page, params) {
+        if(params) {
+            if(params) {
+                this.setState({
+                    page: page,
+                    params: params
+                });
+            }
+        } else {
+            this.setState({
+                page: page
+            });
+        }
+    },
+
+    render: function () {
+
+        var page = null;
+        switch(this.state.page) {
+            case 1:
+                page = <Login
+                    onSwitchPage={this.handleSwitchPage} />;
+                break;
+            case 2:
+                page = <App
+                    onSwitchPage={this.handleSwitchPage}
+                    params={this.state.params} />;
+                break;
+            default:
+        }
+
+        return page;
+    }
+
+});
+
+module.exports = Main;