nutella_framework 0.4.13 → 0.4.16

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

@@ -0,0 +1,127 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,114 @@
+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) {
+        console.log('deleting configId', menuItem.configId);
+        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 configuration'});
+
+            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'> Configuration: </span>
+
+                {dropdown}
+
+                </Paper>
+
+            </div>);
+
+    }
+
+});
+
+module.exports = ConfigurationsPanel;
+

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

@@ -0,0 +1,37 @@
+var React = require('react');
+var Mui = require('material-ui');
+var FloatingActionButton_ = require('./material-ui/floating-action-button_.jsx');
+
+/**
+ * @prop type
+ * @prop selectedChannel
+ * @prop onAddedChannel
+ * @prop onRemovedChannel
+ */
+var ContextButton = React.createClass({
+
+    addChannel: function() {
+        this.props.onAddedChannel(this.props.selectedChannel.id);
+    },
+
+    removeChannel: function() {
+        this.props.onRemovedChannel(this.props.selectedChannel.id);
+    },
+
+    render: function() {
+
+        var button = this.props.type==='add'? <FloatingActionButton_ icon='content-add' secondary={true} onTouchTap={this.addChannel} /> :
+            <FloatingActionButton_ icon='content-remove' primary={true} onTouchTap={this.removeChannel} />;
+
+        return (
+            <div className='div-button-container'>
+                {button}
+            </div>
+        );
+
+    }
+
+});
+
+module.exports = ContextButton;
+

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

@@ -0,0 +1,26 @@
+var React = require('react');
+var Mui = require('material-ui');
+var RaisedButton = require('./material-ui/raised-button_.jsx');
+
+/**
+ * @prop type
+ * @prop onRemovedChannels
+ */
+var GlobalButton = React.createClass({
+
+    removeChannels: function() {
+      this.props.onRemovedChannels();
+    },
+
+    render: function(){
+
+        var button = this.props.type==='add'? <RaisedButton label='Add' secondary={true} /> : <RaisedButton label='Remove' primary={true} onTouchTap={this.removeChannels} />;
+        return (<div className='div-button-container'>
+                    {button}
+                </div>);
+    }
+
+});
+
+module.exports = GlobalButton;
+

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

@@ -0,0 +1,23 @@
+
+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]);
+        });
+    }
+
+};
+
+module.exports = NutellaMixin;

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

@@ -0,0 +1,67 @@
+var React = require('react');
+var Mui = require('material-ui');
+var RaisedButton_ = require('./material-ui/raised-button_.jsx');
+var ContextButton = require('./ContextButton');
+var GlobalButton = require('./GlobalButton');
+
+/**
+ * @prop familyName
+ * @prop selectedChannel
+ * @prop onRemovedAllChannels
+ * @prop onAddedChannelToPool
+ * @prop onRemovedChannelFromPool
+ */
+var PoolHeader = React.createClass({
+
+    handleAddedChannel: function(chId) {
+        this.props.onAddedChannelToPool(chId);
+    },
+
+    handleRemovedChannel: function(chId) {
+        this.props.onRemovedChannelFromPool(chId);
+    },
+
+    handleRemovedChannels: function() {
+        this.props.onRemovedAllChannels();
+    },
+
+    render: function() {
+
+        var buttonStyle = {
+            marginRight:'10px'
+        };
+
+        var buttonAdd, buttonRemove, headerButtons;
+        if(this.props.selectedChannel) {
+            buttonAdd = <ContextButton
+                type='add'
+                onAddedChannel={this.handleAddedChannel}
+                selectedChannel={this.props.selectedChannel} />;
+            buttonRemove = <ContextButton
+                type='remove'
+                onRemovedChannel={this.handleRemovedChannel}
+                selectedChannel={this.props.selectedChannel} />;
+            headerButtons = <th>
+                    {buttonAdd}
+                    {buttonRemove}
+            </th>
+        } else {
+            buttonRemove = <GlobalButton type='remove' onRemovedChannels={this.handleRemovedChannels} />;
+            headerButtons = <th>
+                    {buttonRemove}
+            </th>
+        }
+
+        return (
+
+            <tr className='pool-header'>
+                <th></th>
+                <th> {this.props.familyName} </th>
+                    {headerButtons}
+                <th></th>
+            </tr>);
+
+    }
+});
+
+module.exports = PoolHeader;

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

@@ -0,0 +1,160 @@
+var React = require('react');
+var Mui = require('material-ui');
+var ChannelItem = require('./ChannelItem');
+var ContextButton = require('./ContextButton');
+var GlobalButton = require('./GlobalButton');
+var ButtonInteractionsMixin = require('./ButtonInteractionsMixin');
+var TextField = require('./material-ui/text-field.jsx');
+var FloatingActionButton = Mui.FloatingActionButton;
+
+var PoolRow = React.createClass({
+
+    mixins: [ButtonInteractionsMixin],
+
+    handleSelectedChannel: function(ch) {
+        this.props.onSelectedChannel(ch);
+    },
+
+    handleAddedChannel: function(chId) {
+        var newChannels = this.insertNewChannel(this.props.resourceWithChannels.channels, chId);
+        this.handleUpdatedChannel(newChannels);
+    },
+
+    handleRemovedChannel: function(chId) {
+        var newChannels = this.removeChannel(this.props.resourceWithChannels.channels, chId);
+        this.handleUpdatedChannel(newChannels);
+    },
+
+    /**
+     * Deep copies data structure at this level with the local changes.
+     * Has to be reimplemented at each level of the hierarchy.
+     * @param newChannels
+     */
+    handleUpdatedChannel: function(newChannels) {
+
+        var textFieldValue = this.refs['textField' + this.props.rowIndex].getValue();
+
+        // create new object for single resource
+        var resourceMapping = {
+            name: textFieldValue,
+            channels: newChannels
+        };
+
+        // pass update upwards
+        this.props.onUpdatedMapping(resourceMapping, this.props.rowIndex);
+    },
+
+    /**
+     * Removes all the channels from this row.
+     */
+    handleRemovedChannels: function() {
+        var newChannels = [];
+        this.handleUpdatedChannel(newChannels);
+    },
+
+    /**
+     * Updates the mapping structure at each text field input change.
+     * TODO performance?
+     */
+    handleTextFieldChange: function() {
+        this.handleUpdatedChannel(this.props.resourceWithChannels.channels);
+    },
+
+    handleDeleteRow: function() {
+        this.props.onDeleteRow(this.props.rowIndex);
+    },
+
+    render: function () {
+
+        var self=this;
+
+        // populate row of channels
+        var channelsList = [];
+        this.props.resourceWithChannels.channels.forEach(function (chId) {
+
+            // set selected channel in resources list
+            var resourcesSelected = null;
+            if(self.props.selectedChannel && self.props.selectedChannel.imgNode == self.refs.channel) {
+                resourcesSelected = true;
+            }
+
+            var itsChannel = self.props.channels[chId];
+            if(itsChannel) {
+                channelsList.push(<ChannelItem
+                    ref={'channel'}
+                    id={chId}
+                    key={chId}
+                    channelData={itsChannel}
+                    name={itsChannel.name}
+                    imgPath={itsChannel.screenshot}
+                    onSelectedChannel={self.handleSelectedChannel}
+                    currentSelectedChannel={self.props.selectedChannel}
+                    belongsTo='resources'
+                    resourcesSelected={true} />);
+            }
+        });
+
+        // check if the selected channel is already present in this row
+        var itsChannels = self.props.resourceWithChannels.channels;
+        var isChannelAllowed = function(ch) {
+            if(!self.props.selectedChannel.id) return;
+            for(var i=0; i<itsChannels.length; i++){
+                if(itsChannels[i]===self.props.selectedChannel.id) return true;
+            }
+            return false;
+        };
+
+        // set type of button based on context
+        var button;
+        if( this.props.selectedChannel ) {
+            if( isChannelAllowed(this.props.selectedChannel) ) {
+                button=<ContextButton
+                    type='remove'
+                    selectedChannel={self.props.selectedChannel}
+                    onRemovedChannel={self.handleRemovedChannel} />;
+            } else {
+                button=<ContextButton
+                    type='add'
+                    selectedChannel={self.props.selectedChannel}
+                    onAddedChannel={self.handleAddedChannel} />;
+            }
+        } else {
+            button=<GlobalButton
+                type='remove'
+                onRemovedChannels={self.handleRemovedChannels} />;
+        }
+
+        var tdButtonStyle = {
+            'textAlign': 'center'
+        };
+
+        return (
+
+            <tr className='pool-row'>
+
+                <td>
+
+                    <div className='remove-row-div' onTouchTap={this.handleDeleteRow}> </div>
+
+                </td>
+
+                <td>
+                    <div className='text-field-div'>
+                        <TextField
+                            ref={'textField' + this.props.rowIndex}
+                            hintText={'Group name'}
+                            value={this.props.resourceWithChannels.name}
+                            multiLine={true}
+                            onChange={this.handleTextFieldChange}/>
+                    </div>
+                </td>
+
+                <td> {channelsList} </td>
+                <td style={tdButtonStyle}> {button} </td>
+
+            </tr>);
+
+    }
+});
+
+module.exports = PoolRow;