nutella_framework 0.7.3 → 0.8.0

data/framework_components/roomcast-package-creator/src/app/components/ChannelCard.js

@@ -1,100 +0,0 @@
-var React = require('react');
-var Mui = require('material-ui');
-var Paper = Mui.Paper;
-var $ = require('jquery');
-
-/**
- * @prop selectedChannel
- * @prop channels
- */
-var ChannelCard = React.createClass({
-
-    componentDidMount: function() {
-        // Font-size adaptation based on card width
-        $('.text-fit').each(function() {
-            $(this).css('font-size', '2em');
-            var i =0;
-            while( $(this).width() > $('.name-wrapper').width() - 10 ) {
-                $(this).css('font-size', (parseInt($(this).css('font-size')) - 1) + "px" );
-                i++;
-            }
-        });
-    },
-
-    handleSelectCard: function() {
-
-        if(this.props.currentSelectedChannel && this.props.currentSelectedChannel.id === this.props.channelId) {
-            this.props.onSelectedChannel(null);
-        } else {
-            // set selected channel (state)
-            var newSelected = {
-                id: this.props.channelId,
-                belongsTo: 'channels',
-                imgNode: null,
-                channel: null,
-                channelData: this.props.channelData
-            };
-            this.props.onSelectedChannel(newSelected);
-
-        }
-
-    },
-
-    render: function() {
-
-        var style = {
-            backgroundImage: 'url(' + this.props.channelData.screenshot + ')',
-            backgroundSize: '100% 100%'
-        };
-
-        if(this.props.currentSelectedChannel) {
-            if(this.props.currentSelectedChannel.id !== this.props.channelId) {
-                style.opacity = '0.5';
-            }
-        }
-
-        var iconStyle = {
-            backgroundColor: this.props.channelData.icon
-        };
-
-        var description =
-            <p className='channel-description'> {this.props.channelData.description} </p>;
-
-        return (
-
-            <div className="col-1-3" >
-
-                <Paper className='channel-card'
-                       ref={'channel' + this.props.channelId}
-                       zDepth={3}
-                       style={style}
-                       onTouchTap={this.handleSelectCard} >
-
-                    <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'>
-                                    <span className='channel-name text-fit'>{this.props.channelData.name}</span>
-                                </div>
-
-                            </div>
-
-                        </div>
-
-                    </div>
-
-                </Paper>
-
-            </div>);
-
-    }
-
-});
-
-module.exports = ChannelCard;
-

data/framework_components/roomcast-package-creator/src/app/components/ChannelItem.js

@@ -1,71 +0,0 @@
-var React = require('react');
-var Mui = require('material-ui');
-var d3 = require('d3');
-var Paper = Mui.Paper;
-
-/**
- * @prop id
- * @prop name
- * @prop imgPath
- * @prop onSelectedChannel
- * @prop currentSelectedChannel
- * @prop belongsTo
- */
-var ChannelItem = React.createClass({
-
-    /**
-     * Manages the interactions with the channels.
-     */
-    handleSelectedChannel: function() {
-
-        var imgNode = this.refs.channelIcon.getDOMNode();
-        var currentSelected = this.props.currentSelectedChannel;
-
-        if(currentSelected && currentSelected.imgNode && currentSelected.id === this.props.id && currentSelected.imgNode == imgNode) {
-
-            // set not selected
-            this.props.onSelectedChannel(null);
-
-        } else {
-
-            // set selected channel (state)
-            var newSelected = {
-                id: this.props.id,
-                belongsTo: this.props.belongsTo,
-                imgNode: imgNode,
-                channel: this,
-                channelData: this.props.channelData
-            };
-            this.props.onSelectedChannel(newSelected);
-        }
-
-    },
-
-    render: function() {
-
-        var iconStyle = {
-            backgroundColor: this.props.channelData.icon
-        };
-
-        // style channels in resources list
-        if(this.props.belongsTo==='resources') {
-            var currentSelected = this.props.currentSelectedChannel;
-            if(currentSelected && (currentSelected.channel == this) && currentSelected.id === this.props.id) {
-                iconStyle.border = '3px solid black';
-            }
-
-        }
-
-        return (
-            <div className='channel-item' onClick={this.handleSelectedChannel}>
-                <div className='channel-icon' ref='channelIcon' style={iconStyle} > </div>
-                <span> {this.props.name} </span>
-            </div>
-        );
-
-    }
-
-});
-
-module.exports = ChannelItem;
-

data/framework_components/roomcast-package-creator/src/app/components/ChannelsCatalogue.js

@@ -1,51 +0,0 @@
-var React = require('react');
-var Mui = require('material-ui');
-var ChannelCard = require('./ChannelCard');
-
-var ChannelsCatalogue = React.createClass({
-
-    handleSelectedChannel: function(ch) {
-        this.props.onSelectedChannel(ch);
-    },
-
-    render: function() {
-
-        var channels = [];
-        var chs = this.props.channels;
-        var keys = Object.keys(chs).sort();
-        keys = keys.sort(function(a, b) {
-            return (+a) - (+b);
-        });
-        for(var i = 0; i < keys.length; i++) {
-            var key = keys[i];
-
-            // set respective selected channel in channels list
-            var respectiveSelected = null;
-            if(this.props.selectedChannel && key===this.props.selectedChannel.id) {
-                respectiveSelected = true;
-            }
-
-            channels.push(<ChannelCard
-                id={key}
-                key={key}
-                channelData={chs[key]}
-                channelId={key}
-                currentSelectedChannel={this.props.selectedChannel}
-                respectiveSelected={respectiveSelected}
-                onSelectedChannel={this.handleSelectedChannel} />
-            );
-        }
-
-        return (
-            <div className='content-div'>
-                <div className="grid" ref='gridRef' >
-                    {channels}
-                </div>
-            </div>
-        )
-    }
-
-});
-
-module.exports = ChannelsCatalogue;
-

data/framework_components/roomcast-package-creator/src/app/components/ChannelsPanel.js

@@ -1,127 +0,0 @@
-var React = require('react');
-var Mui = require('material-ui');
-var Paper = Mui.Paper;
-var ChannelInfo = require('./ChannelCard');
-var ChannelsCatalogue = require('./ChannelsCatalogue');
-var RaisedButton = require('./material-ui/raised-button_.jsx');
-var Dialog = require('./material-ui/dialog_.jsx');
-var FlatButton = Mui.FlatButton;
-
-var ChannelsPanel = React.createClass({
-
-    handleSaveChanges: function() {
-        this.props.onSaveChanges();
-    },
-
-    handleUndoChanges: function() {
-        this.props.onUndoChanges();
-    },
-
-    enableUndoDialog: function() {
-        this.refs.undoDialog.show();
-    },
-
-    disableUndoDialog: function() {
-        this.refs.undoDialog.dismiss();
-    },
-
-    handleSelectedChannel: function(ch) {
-        this.props.onSelectedChannel(ch);
-    },
-
-    enableSaveDialog: function() {
-        this.refs.saveDialog.show();
-    },
-
-    disableSaveDialog: function() {
-        this.refs.saveDialog.dismiss();
-    },
-
-
-    render: function() {
-
-        var self = this;
-
-        var handleOnSave = function() {
-            self.handleSaveChanges();
-            self.disableSaveDialog();
-        };
-
-        var customActionsSave = [
-            React.createElement(FlatButton, {
-                key: 2,
-                label: "Confirm",
-                secondary: true,
-                onTouchTap: handleOnSave}),
-            React.createElement(FlatButton, {
-                key: 1,
-                label: "Cancel",
-                primary: true,
-                onTouchTap: this.disableSaveDialog})
-        ];
-
-        var handleOnUndo = function() {
-            self.handleUndoChanges();
-            self.disableUndoDialog();
-        };
-
-        var customActionsUndo = [
-            React.createElement(FlatButton, {
-                key: 2,
-                label: "Confirm",
-                secondary: true,
-                onTouchTap: handleOnUndo}),
-            React.createElement(FlatButton, {
-                key: 1,
-                label: "Cancel",
-                primary: true,
-                onTouchTap: this.disableUndoDialog})
-        ];
-
-        return (
-
-            <div className="channels-panel">
-
-                <Paper className='channels-panel-paper'>
-
-                    <div className='channels-catalogue-title-div-outer'>
-                        <div className='channels-catalogue-title-div-middle'>
-                            <div className='channels-catalogue-title-div-inner'>
-                                <p> Channels Catalogue </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <ChannelsCatalogue
-                        channels={this.props.channels}
-                        onSelectedChannel={this.handleSelectedChannel}
-                        selectedChannel={this.props.selectedChannel} />
-
-                    <div className='channels-panel-save-buttons-div-outer' >
-
-                        <div className='channels-panel-save-buttons-div-inner' >
-
-                            <div className='div-button-container-final-button'>
-                                <RaisedButton className='save-button' label='Save changes' secondary={true} saveButton={true} onTouchTap={this.enableSaveDialog} />
-                            </div>
-
-                            <div className='div-button-container-final-button'>
-                                <RaisedButton className='undo-button' label='Undo changes' primary={true} undoButton={true} onTouchTap={this.enableUndoDialog} />
-                            </div>
-
-                        </div>
-
-                    </div>
-
-                </Paper>
-
-                <Dialog ref='saveDialog' actions={customActionsSave} > Do you want to save this configuration? </Dialog>
-                <Dialog ref='undoDialog' actions={customActionsUndo} > Do you want to reload the starting configuration? </Dialog>
-
-            </div> );
-    }
-
-});
-
-module.exports = ChannelsPanel;
-

data/framework_components/roomcast-package-creator/src/app/components/ConfigField.js

@@ -1,50 +0,0 @@
-var React = require('react');
-var Mui = require('material-ui');
-
-var ConfigField = React.createClass({
-
-    componentDidMount: function() {
-        this.setValue(this.props.value);
-    },
-
-    componentDidUpdate: function() {
-        if(this.props.hasToUpdateValues) {
-            this.setValue();
-            this.props.onUpdatedValues();
-        }
-    },
-
-    handleChange: function() {
-        if(!this.props.lastItem) {
-            this.props.onChange(this.props.configId, this.refs.configInput.getDOMNode().value);
-        }
-    },
-
-    setValue: function() {
-        this.refs.configInput.getDOMNode().value = this.props.value;
-    },
-
-    getValue: function() {
-        return this.refs.configInput.getDOMNode().value;
-    },
-
-    render: function() {
-
-        return (
-
-            <div className='config-text-field-div'>
-                <input
-                    ref='configInput'
-                    type='text'
-                    className='config-input'
-                    placeholder={this.props.placeholder}
-                    onChange={this.handleChange}
-                    required={true} />
-            </div>);
-
-    }
-
-});
-
-module.exports = ConfigField;
-

data/framework_components/roomcast-package-creator/src/app/components/ConfigurationsPanel.js

@@ -1,112 +0,0 @@
-var React = require('react');
-var Mui = require('material-ui');
-var NutellaMixin = require('./NutellaMixin');
-var Paper = Mui.Paper;
-var DropDownMenu = require('./material-ui/drop-down-menu.jsx');
-
-/**
- */
-var ConfigurationsPanel = React.createClass({
-
-    mixins: [NutellaMixin],
-
-    componentDidMount: function() {
-        var self = this;
-        self.didReceivedFirstConfigs = false;
-        self.lastSavedNames = {};
-
-        // Subscribe for future changes
-        nutella.net.subscribe('configs/update', function (message, from) {
-            if(message.length !== 0) {
-                self.updatePlaceholders(message);
-            }
-        });
-    },
-
-    componentWillReceiveProps: function() {
-        if(!this.didReceivedFirstConfigs && this.props.configs.length !== 0) {
-            // Set initial placeholders
-            this.updatePlaceholders(this.props.configs);
-            this.didReceivedFirstConfigs = true;
-        }
-    },
-
-    updatePlaceholders: function(configs) {
-            for (var c in configs) {
-                if (configs.hasOwnProperty(c)) {
-                    this.lastSavedNames[c] = configs[c].name;
-                }
-            }
-    },
-
-    shouldComponentUpdate: function() {
-        return this.props.configs.length !== 0;
-    },
-
-    handleChangeConfig: function(e, selectedIndex, menuItem) {
-        this.props.onChangeConfig(menuItem.configId);
-    },
-
-    handleDeleteConfig: function(menuItem) {
-        this.props.onDeleteConfig(menuItem.configId);
-    },
-
-    handleInputChange: function(id, value) {
-        this.props.onUpdateConfigName(id, value);
-    },
-
-    render: function() {
-        var self = this;
-        var dropdown = null;
-        var menuItems = [];
-
-        var configs = this.props.configs;
-        if(configs.length !== 0) {
-            var ids = [];
-            for(var c in configs) {
-                if(configs.hasOwnProperty(c)) {
-                    ids.push(+c);
-                }
-            }
-
-            function sortNumber(a,b) {
-                return b - a;
-            }
-            ids.sort(sortNumber);
-
-            ids.forEach(function(id, i) {
-                menuItems.push({configId: id, text: configs[id].name, lastSavedName: self.lastSavedNames[id]});
-            });
-
-            // Add last item: new configuration
-            menuItems.push({configId: 0, text: '', lastSavedName: 'Add activity'});
-
-            dropdown = (<DropDownMenu
-                menuItems={menuItems}
-                configMenu={true}
-                autoWidth={false}
-                onChange={this.handleChangeConfig}
-                onDeleteConfig={this.handleDeleteConfig}
-                onAddEmptyConfig={this.props.onAddEmptyConfig}
-                onInputChange={this.handleInputChange} />);
-        }
-
-        return (
-            <div className='configurations-panel-div'>
-
-                <Paper>
-
-                    <span className='config-title'> Activity: </span>
-
-                {dropdown}
-
-                </Paper>
-
-            </div>);
-
-    }
-
-});
-
-module.exports = ConfigurationsPanel;
-