nutella_framework 0.4.13 → 0.4.16

data/framework_components/roomcast-channel-creator/src/app/components/Channel.js

@@ -0,0 +1,378 @@
+
+var React = require('react');
+var Mui = require('material-ui');
+var Paper = Mui.Paper;
+var NutellaMixin = require('./NutellaMixin');
+var AnimationMixin = require('./AnimationMixin');
+var ColorPicker = require('./ColorPicker');
+var TextField = Mui.TextField;
+var RadioButtonGroup = Mui.RadioButtonGroup;
+var RadioButton = Mui.RadioButton;
+var FlatButton = Mui.FlatButton;
+//var queue = require("queue-async");
+
+/**
+ * @prop channelId
+ * @prop channel
+ * @prop selected
+ * @prop onselectedChannel
+ */
+var Channel = React.createClass({
+
+    mixins: [NutellaMixin, AnimationMixin],
+
+    componentDidMount: function() {
+        this.imageFile = null;
+        this.imageData_ = null;
+    },
+
+    /**
+     * State
+     * @returns selected: boolean
+     *          side: 'front' or 'back'
+     */
+    getInitialState: function () {
+        return  {
+            selected: false,
+            flipped: false,
+            modifyField: null
+        }
+    },
+
+    setModifyField: function(field) {
+        this.setState({
+            modifyField: field
+        });
+    },
+
+    componentWillReceiveProps: function(nextProps) {
+        if(nextProps.selected) {
+            this.setState({
+                selected: true
+            });
+        } else {
+            this.setState({
+                selected: false
+            });
+            this.setModifyField(null);
+        }
+
+    },
+
+    handleSelectChannel: function() {
+        this.props.onSelectChannel(this.props.channelId);
+    },
+
+    handleModifyIcon: function() {
+        this.setModifyField('icon');
+    },
+
+    flipCard: function() {
+        var self = this;
+        this.setState({
+            flipped: true
+        });
+        function callbackFlip() {
+            self.addCSSClass(self.refs.cardFront.getDOMNode(), 'hidden-card');
+            self.removeCSSClass(self.refs.cardBack.getDOMNode(), 'hidden-card');
+            self.flipY(self.refs.card.getDOMNode(), 90, 180, false);
+        }
+        this.flipY(this.refs.card.getDOMNode(), 0, 90, false, callbackFlip);
+    },
+
+    flipCardBack: function() {
+        var self = this;
+        this.setState({
+            flipped: false
+        });
+        function callbackFlip() {
+            self.addCSSClass(self.refs.cardBack.getDOMNode(), 'hidden-card');
+            self.removeCSSClass(self.refs.cardFront.getDOMNode(), 'hidden-card');
+            self.flipY(self.refs.card.getDOMNode(), 90, 0, true);
+        }
+        this.flipY(this.refs.card.getDOMNode(), 180, 90, true, callbackFlip);
+    },
+
+    handleDeleteCard: function() {
+        this.props.onDeleteCard(this.props.channelId);
+    },
+
+    addCSSClass: function(node, class_) {
+        node.className += ' ' + class_;
+    },
+
+    removeCSSClass: function(node, class_) {
+        var regex = new RegExp("(?:^|\\s)" + class_ + "(?!\\S)", "g");
+        node.className = node.className.replace(regex, '');
+    },
+
+    handleSetName: function() {
+        var value = this.refs['textFieldName' + this.props.channelId].getValue();
+        this.props.onSetName(value);
+    },
+
+    handleSetDescription: function() {
+        var value = this.refs['textFieldDescription' + this.props.channelId].getValue();
+        this.props.onSetDescription(value);
+    },
+
+    handleSetType: function(e, value) {
+        this.props.onSetType(value);
+    },
+
+    handleSetUrl: function() {
+        var value = this.refs['textFieldUrl' + this.props.channelId].getValue();
+        this.props.onSetUrl(value);
+    },
+
+    validateInputName: function() {
+        var value = this.refs['textFieldName' + this.props.channelId].getValue();
+        if(value.length > 30) {
+            event.returnValue = false;
+        }
+    },
+
+    validateInputDescription: function() {
+        var value = this.refs['textFieldDescription' + this.props.channelId].getValue();
+        if(value.length > 50) {
+            event.returnValue = false;
+        }
+    },
+
+    handleUploadImage: function(e) {
+        var node = e.target;
+        if (node.files && node.files[0]) {
+            var reader = new FileReader();
+            reader.onload = this.handleLoadedImage;
+            reader.readAsDataURL(node.files[0]);
+            // Store file for later upload
+            this.imageFile_ = node.files[0];
+        }
+    },
+
+    handleLoadedImage: function(e) {
+        // Set as temporary screenshot
+        var imageData = e.target.result;
+        this.imageData_ = imageData;
+        this.refs['channel' + this.props.channelId].getDOMNode().style.backgroundImage = 'url(' + imageData + ')';
+    },
+
+    /**
+     * Called on every Channel every time Save Changes is pressed
+     */
+    handleStoreImageOnServer: function() {
+        var self = this;
+        if(this.imageFile_) {
+            ReactMain.imagesQueue++;
+            nutella.net.bin.uploadFile(this.imageFile_, function(url) {
+                console.log('got url', url);
+                self.props.onSetScreenshot(self.props.channelId, url);
+                ReactMain.imagesQueue--;
+                if(ReactMain.imagesQueue === 0) {
+                    self.props.onSaveCallback();
+                }
+            });
+        }
+    },
+
+    render: function() {
+
+        var colorPicker = null;
+        var onTouchTapIcon = this.handleModifyIcon;
+
+        var backgroundImage;
+        if(this.imageData_) {
+            backgroundImage = 'url(' + this.imageData_ + ')';
+        } else {
+            backgroundImage = 'url(' + this.props.channel.screenshot + ')';
+        }
+        var style = {
+            backgroundImage: backgroundImage,
+            backgroundSize: '100% 100%'
+        };
+
+        var iconStyle = {
+            backgroundColor: this.props.channel.icon
+        };
+
+        if(this.state.selected) {
+            if (this.state.modifyField === 'icon') {
+                colorPicker =
+                    <ColorPicker ref='colorPicker'
+                                 onPickColor={this.props.onPickColor}/>;
+                onTouchTapIcon = null;
+            }
+        }
+
+        var urlPlaceholder;
+        switch(this.props.channel.type) {
+            case 'web':
+                urlPlaceholder = 'URL:';
+                break;
+            case 'iOS':
+                urlPlaceholder = 'Custom URL:';
+                break;
+            default:
+                urlPlaceholder = 'URL:';
+        }
+
+        var cardBack =
+            <div className='card-back hidden-card' ref='cardBack'>
+
+                <Paper className='channel'>
+
+                    <div className='corner-icon flip-icon'> <i className="ion ion-android-settings" onTouchTap={this.flipCardBack} ></i> </div>
+
+                    <div className='flex-centered' >
+                        <div className='flex-content' >
+
+                            <RadioButtonGroup
+                                name="radio_buttons"
+                                ref={'radioButtons' + this.props.channelId}
+                                defaultSelected={this.props.channel.type}
+                                onChange={this.handleSetType} >
+                                <RadioButton
+                                    value="web"
+                                    label="Web channel"
+                                    defaultChecked={true} />
+                                <RadioButton
+                                    value="iOS"
+                                    label="iOS app channel" />
+                            </RadioButtonGroup>
+
+                            <div className='url-div' >
+
+                                <span> {urlPlaceholder} </span>
+                                <TextField
+                                    ref={'textFieldUrl' + this.props.channelId}
+                                    hintText={''}
+                                    value={this.props.channel.url}
+                                    multiLine={true}
+                                    onChange={this.handleSetUrl} />
+
+                            </div>
+                        </div>
+
+                    </div>
+
+                </Paper>
+
+            </div>;
+
+        var catalogueCard =
+            <div className='card-container hovering-layer catalogue-card-style' ref='cardContainer' >
+
+                <div className='card' ref='card'>
+
+                    <div className='card-front' ref='cardFront'>
+
+                        <div className='corner-icon delete-icon' > <i className="fa fa-times" ref='cornerIcon' onTouchTap={this.handleDeleteCard}></i> </div>
+
+                        <Paper className='channel'
+                               ref={'channel' + this.props.channelId}
+                               style={style}
+                               onTouchTap={this.handleSelectChannel} >
+
+                            <div className='channel-div'>
+
+                                <div className='channel-caption'>
+
+                                    <div className='icon-name-wrapper'>
+
+                                        <div className='channel-icon' ref='channelIcon' style={iconStyle} > </div>
+
+                                        <div className='name-wrapper'>
+                                            <p className='channel-name'> {this.props.channel.name} </p>
+                                            <p className='channel-description'> {this.props.channel.description} </p>
+                                        </div>
+
+                                    </div>
+
+                                </div>
+
+                            </div>
+
+                        </Paper>
+
+                    </div>
+
+                    {cardBack}
+
+                </div>
+
+            </div>;
+
+        var detailCard =
+            <div className='card-container detail-card-style' ref='cardContainer' >
+
+                <div className='card' ref='card'>
+
+                    <div className='card-front' ref='cardFront'>
+
+                        {colorPicker}
+
+
+
+                        <div className='corner-icon flip-icon' > <i className="ion ion-android-settings" ref='cornerIcon' onTouchTap={this.flipCard} ></i> </div>
+
+                        <Paper className='channel'
+                               ref={'channel' + this.props.channelId}
+                               style={style} >
+
+                            <div className='channel-div'>
+
+                                <div className='channel-caption'>
+
+                                    <div className='upload-button-container' >
+                                        <FlatButton secondary={true}>
+                                            <span className="mui-flat-button-label upload-image-button">Upload screenshot</span>
+                                            <input type="file" id="imageButton" className="upload-image-input" onChange={this.handleUploadImage} ></input>
+                                        </FlatButton>
+                                    </div>
+
+                                    <div className='icon-name-wrapper'>
+
+                                        <div className='channel-icon modifiable' ref='channelIcon' style={iconStyle} onTouchTap={onTouchTapIcon} > </div>
+
+                                        <div className='name-wrapper-edit'>
+
+                                            <TextField
+                                                ref={'textFieldName' + this.props.channelId}
+                                                hintText={'Channel name'}
+                                                value={this.props.channel.name}
+                                                onChange={this.handleSetName}
+                                                onKeyPress={this.validateInputName} />
+
+                                            <TextField
+                                                ref={'textFieldDescription' + this.props.channelId}
+                                                hintText={'Channel description'}
+                                                value={this.props.channel.description}
+                                                onChange={this.handleSetDescription}
+                                                onKeyPress={this.validateInputDescription} />
+
+                                        </div>
+
+                                    </div>
+
+                                </div>
+
+                            </div>
+
+                        </Paper>
+
+                    </div>
+
+                    {cardBack}
+
+                </div>
+
+            </div>;
+
+        return this.state.selected? detailCard : catalogueCard;
+
+    }
+
+});
+
+module.exports = Channel;
+

data/framework_components/roomcast-channel-creator/src/app/components/ColorCell.js

@@ -0,0 +1,28 @@
+
+var React = require('react');
+var Mui = require('material-ui');
+var Paper = Mui.Paper;
+
+var ColorCell = React.createClass({
+
+    handlePickColor: function() {
+        this.props.onPickColor(this.props.color);
+    },
+
+    render: function() {
+
+        var style = {
+            backgroundColor: this.props.color
+        };
+
+        return (
+
+            <div className='color-cell' style={style} onTouchTap={this.handlePickColor} > </div>
+
+        );
+
+    }
+
+});
+
+module.exports = ColorCell;

data/framework_components/roomcast-channel-creator/src/app/components/ColorPicker.js

@@ -0,0 +1,53 @@
+
+var React = require('react');
+var Mui = require('material-ui');
+var ColorCell = require('./ColorCell');
+
+var ColorPicker = React.createClass({
+
+    componentWillMount: function() {
+
+        this.palette_ = [];
+        this.palette_.push(
+            '#f6e8c3',
+            '#c7eae5',
+            '#fde0ef',
+            '#e6f5d0',
+            '#e7d4e8',
+            '#fee0b6',
+            '#d1e5f0',
+            '#f46d43',
+            '#bdbdbd',
+            '#a8ddb5'
+        );
+
+    },
+
+    render: function() {
+        var self = this;
+
+        var colorsGrid = [];
+        this.palette_.forEach(function(c) {
+            colorsGrid.push(
+                <ColorCell color={c}
+                           size={self.props.cellSize}
+                           onPickColor={self.props.onPickColor}/>
+            );
+        });
+
+        return (
+
+                <div className='color-picker' >
+
+                    {colorsGrid}
+
+                </div>
+
+        );
+
+    }
+
+});
+
+module.exports = ColorPicker;
+

data/framework_components/roomcast-channel-creator/src/app/components/DetailPage.js

@@ -0,0 +1,66 @@
+
+var React = require('react');
+var Channel = require('./Channel');
+
+var DetailPage = React.createClass({
+
+    componentWillMount: function() {
+        this.updateDimensions();
+    },
+
+    componentDidMount: function() {
+        this.setState({
+            channel: this.props.channel
+        });
+
+        window.addEventListener("resize", this.updateDimensions);
+
+    },
+
+    componentWillUnmount: function() {
+        window.removeEventListener("resize", this.updateDimensions);
+    },
+
+    componentWillReceiveProps: function(nextProps) {
+        this.setState({
+            channel: nextProps.channel
+        });
+    },
+
+    getInitialState: function () {
+        return  {
+            channel: this.props.channel,
+            windowSize: []
+        }
+    },
+
+    updateDimensions: function() {
+        this.setState({windowSize: [window.innerWidth, window.innerHeight]});
+    },
+
+    render: function() {
+
+        var channel =
+                <Channel
+                    channel={this.state.channel}
+                    selected={true} />;
+
+        var rightBarStyle = {
+            height: this.state.windowSize[1]
+        };
+
+        return (
+
+            <div className='detail-page' >
+                <div className="card-detail"> {channel} </div>
+                <div className="right-bar-detail" style={rightBarStyle} >  </div>
+            </div>
+
+        );
+
+    }
+
+});
+
+module.exports = DetailPage;
+

data/framework_components/roomcast-channel-creator/src/app/components/NutellaMixin.js

@@ -0,0 +1,40 @@
+
+var NutellaMixin = {
+
+    getChannelsForRid: function(message, rid) {
+        var myChannelsId = [];
+        var myChannels = [];
+        message.forEach(function(f) {
+            for (var i in f.items) {
+                var item = f.items[i];
+                if (item.name === 'iPad1') {
+                    myChannelsId = item.channels;
+                    break;
+                }
+            }
+        });
+        myChannelsId.forEach(function(id) {
+            myChannels.push(CHANNELS[id]);
+        });
+    },
+
+    getUrlForAsset: function(assetName, assetType) {
+
+        var broker = null;
+        if(query_parameters.broker) {
+            broker = query_parameters.broker;
+        } else {
+            broker = '52.1.142.215';    // TODO hardcoded broker
+        }
+
+        var runId = 'RoomQuake';    // TODO hardcoded runid
+        if(assetType == null) {
+            return 'http://' + broker + ':57880/roomcast/main-interface/assets/channels/'  + '/' + assetName;
+        }
+        return 'http://' + broker + ':57880/roomcast/main-interface/assets/channels/' + runId + '/' + assetType + '/' + assetName;
+
+    }
+
+};
+
+module.exports = NutellaMixin;

data/framework_components/roomcast-channel-creator/src/app/components/PageSliderMixin.js

@@ -0,0 +1,68 @@
+
+var PageSliderMixin = {
+
+    getInitialState: function () {
+        return {
+            history: [],
+            pages: [],
+            animating: false
+        }
+    },
+    componentDidUpdate: function() {
+        var skippedCurrentFrame = false,
+            pageEl = this.getDOMNode().lastChild,
+            pages = this.state.pages,
+            l = pages.length,
+            transitionEndHandler = function() {
+                pageEl.removeEventListener('webkitTransitionEnd', transitionEndHandler);
+                pages.shift();
+                this.setState({pages: pages});
+            }.bind(this),
+            animate = function() {
+                if (!skippedCurrentFrame) {
+                    skippedCurrentFrame = true;
+                    requestAnimationFrame(animate.bind(this));
+                } else if (l > 0) {
+                    pages[l - 1].props.position = "center transition";
+                    this.setState({pages: pages, animating: false});
+                    pageEl.addEventListener('webkitTransitionEnd', transitionEndHandler);
+                }
+            };
+
+        if (this.state.animating) {
+            requestAnimationFrame(animate.bind(this));
+        }
+    },
+    slidePage: function (page) {
+        var history = this.state.history,
+            pages = this.state.pages,
+            l = history.length,
+            hash = window.location.hash,
+            position = "center";
+
+        if (l === 0) {
+            history.push(hash);
+        } else if (hash === history[l - 2]) {
+            history.pop();
+            position = "left";
+        } else {
+            history.push(hash);
+            position = "right";
+        }
+
+        page.props.position = position;
+        pages.push(page);
+
+        this.setState({history: history, pages: pages, animating: position!=="center"});
+
+    },
+    render: function () {
+        return (
+            <div className="pageslider-container">
+                {this.state.pages}
+            </div>
+        );
+    }
+};
+
+module.exports = PageSliderMixin;

data/framework_components/roomcast-channel-creator/src/app/components/Router.js

@@ -0,0 +1,52 @@
+
+var Router = (function () {
+
+    "use strict";
+
+    var routes = [];
+
+    function addRoute(route, handler) {
+
+        routes.push({parts: route.split('/'), handler: handler});
+    }
+
+    function load(route) {
+        window.location.hash = route;
+    }
+
+    function start() {
+
+        var path = window.location.hash.substr(1),
+            parts = path.split('/'),
+            partsLength = parts.length;
+
+        for (var i = 0; i < routes.length; i++) {
+            var route = routes[i];
+            if (route.parts.length === partsLength) {
+                var params = [];
+                for (var j = 0; j < partsLength; j++) {
+                    if (route.parts[j].substr(0, 1) === ':') {
+                        params.push(parts[j]);
+                    } else if (route.parts[j] !== parts[j]) {
+                        break;
+                    }
+                }
+                if (j === partsLength) {
+                    route.handler.apply(undefined, params);
+                    return;
+                }
+            }
+        }
+    }
+
+    window.onhashchange = start;
+
+    return {
+        addRoute: addRoute,
+        load: load,
+        start: start
+    };
+
+}());
+
+module.exports = Router;