nutella_framework 0.4.13 → 0.4.16

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

@@ -0,0 +1,168 @@
+var React = require('react');
+var PoolHeader = require('./PoolHeader');
+var PoolRow = require('./PoolRow');
+var Mui = require('material-ui');
+var Paper = Mui.Paper;
+var ButtonInteractionsMixin = require('./ButtonInteractionsMixin');
+var d3 = require('d3');
+
+var ResourceFamilyPool = React.createClass({
+
+    mixins: [ButtonInteractionsMixin],
+
+    handleAddRow: function() {
+        this.props.onAddRow(this.props.familyName);
+    },
+
+    handleSelectedChannel: function(ch) {
+        this.props.onSelectedChannel(ch);
+    },
+
+    handleRemovedAllChannels: function() {
+        var familyItems=[];
+        this.props.resourcesWithChannels.forEach(function(res) {
+            familyItems.push({
+                name: res.name,
+                channels: []
+            });
+        });
+        this.handleUpdatedFamily(familyItems);
+    },
+
+    handleAddedChannelToPool: function(chId) {
+        var self=this;
+        var familyItems=[];
+        this.props.resourcesWithChannels.forEach(function(res) {
+            var newChannels = self.insertNewChannel(res.channels, chId);
+            familyItems.push({
+                name: res.name,
+                channels: newChannels
+            });
+        });
+        this.handleUpdatedFamily(familyItems);
+    },
+
+    handleRemovedChannelFromPool: function(chId) {
+        var self=this;
+        var familyItems=[];
+        this.props.resourcesWithChannels.forEach(function(res) {
+            var newChannels = self.removeChannel(res.channels, chId);
+            familyItems.push({
+                name: res.name,
+                channels: newChannels
+            });
+        });
+        this.handleUpdatedFamily(familyItems);
+    },
+
+    /**
+     * Handles updates at row level and pushes them upwards.
+     * @param resourceMapping
+     * @param rowIndex
+     */
+    handleUpdatedMapping: function(resourceMapping, rowIndex) {
+
+        // create new object for single family of resources
+        var familyItems = [];
+        var added = false;
+        if(rowIndex != null) {
+            this.props.resourcesWithChannels.forEach(function(item, i) {
+                if(i===rowIndex) {
+                    familyItems.push(resourceMapping);
+                    added = true;
+                } else {
+                    familyItems.push({
+                        name: item.name,
+                        channels: item.channels
+                    });
+                }
+            });
+        } else {
+            // handle new empty row
+            if(!added) {
+                familyItems.push(resourceMapping);
+            }
+        }
+        this.handleUpdatedFamily(familyItems);
+    },
+
+    /**
+     * Wraps the items and pushes new data upwards.
+     * @param familyItems
+     */
+    handleUpdatedFamily: function(familyItems) {
+        var familyMapping = {
+            family: this.props.familyName,
+            items: familyItems
+        };
+        this.props.onUpdatedMapping(familyMapping);
+    },
+
+    handleDeleteRow: function(rowIndex) {
+        var familyItems = [];
+        this.props.resourcesWithChannels.forEach(function(item, i) {
+            if(i!==rowIndex) {
+                familyItems.push(item)
+            }
+        });
+        this.handleUpdatedFamily(familyItems);
+    },
+
+    render: function() {
+
+        var self=this;
+        var rows=[];
+        var i = 0;
+        this.props.resourcesWithChannels.forEach(function(resource, k) {
+            rows.push(<PoolRow
+                    key={k}
+                    mapping={self.props.mapping}
+                    resourceWithChannels={resource}
+                    channels={self.props.channels}
+                    selectedChannel={self.props.selectedChannel}
+                    onSelectedChannel={self.handleSelectedChannel}
+                    onUpdatedMapping={self.handleUpdatedMapping}
+                    onDeleteRow={self.handleDeleteRow}
+                    rowIndex={i} />
+            );
+            i++;
+        });
+
+        return (
+
+            <div className="resource-family-pool">
+
+                <Paper>
+
+                    <table>
+
+                        <thead>
+
+                        <PoolHeader familyName={this.props.familyName}
+                                    selectedChannel={self.props.selectedChannel}
+                                    onRemovedAllChannels={this.handleRemovedAllChannels}
+                                    onAddedChannelToPool={this.handleAddedChannelToPool}
+                                    onRemovedChannelFromPool={this.handleRemovedChannelFromPool} />
+
+                        </thead>
+
+                        <tbody>
+
+                        {rows}
+                        <tr className='pool-row pool-add-row' ref={this.props.familyName + 'pool'} onTouchTap={this.handleAddRow}> <td colSpan='4'> Add Row </td> </tr>
+
+                        </tbody>
+
+                    </table>
+
+                </Paper>
+
+
+            </div> );
+
+    }
+
+});
+
+module.exports = ResourceFamilyPool;
+

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

@@ -0,0 +1,76 @@
+var React = require('react');
+var ResourceFamilyPool = require('./ResourceFamilyPool');
+var ConfigurationsPanel = require('./ConfigurationsPanel');
+
+var ResourcesPanel = React.createClass({
+
+    handleSelectedChannel: function(ch) {
+        this.props.onSelectedChannel(ch);
+    },
+
+    handleUpdatedMapping: function(familyMapping) {
+
+        // create new object to update complete data structure (RESOURCES)
+        var mapping = [];
+        this.props.mapping.forEach(function(family) {
+            if(family.family===familyMapping.family) {
+                mapping.push(familyMapping);
+            } else {
+                mapping.push({
+                    family: family.family,
+                    items: family.items
+                });
+            }
+        });
+
+        this.props.onUpdatedMapping(mapping);
+    },
+
+    handleAddRow: function(family) {
+        this.props.onAddRow(family);
+    },
+
+    handleUpdateConfigName: function(id, value) {
+        this.props.onUpdateConfigName(id, value);
+    },
+
+    render: function(){
+
+        var {...other} = this.props;
+
+        var self=this;
+        var pools = [];
+        var channels = this.props.channels;
+        this.props.mapping.forEach(function(family, i) {
+            pools.push(<ResourceFamilyPool
+                    key={i}
+                    mapping={self.props.mapping}
+                    familyName={family.family}
+                    resourcesWithChannels={family.items}
+                    channels={channels}
+                    selectedChannel={self.props.selectedChannel}
+                    onSelectedChannel={self.handleSelectedChannel}
+                    onUpdatedMapping={self.handleUpdatedMapping}
+                    onAddRow={self.handleAddRow} />
+            );
+        });
+
+        return (
+            <div className="resources-panel">
+
+                <ConfigurationsPanel
+                    configs={this.props.configs}
+                    onChangeConfig={this.props.onChangeConfig}
+                    onDeleteConfig={this.props.onDeleteConfig}
+                    onAddEmptyConfig={this.props.onAddEmptyConfig}
+                    onUpdateConfigName={this.handleUpdateConfigName} />
+
+                {pools}
+
+            </div> );
+    }
+
+});
+
+module.exports = ResourcesPanel;
+

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

@@ -0,0 +1,222 @@
+var React = require('react'),
+    mui = require('material-ui'),
+    RaisedButton = mui.RaisedButton;
+
+var ResourcesPanel = require('./ResourcesPanel.js');
+var ChannelsPanel = require('./ChannelsPanel');
+
+var Main = React.createClass({
+
+    componentDidMount: function() {
+        var self = this;
+
+        // Get current channels catalogue
+        nutella.net.request('channels/retrieve', 'all', function (response) {
+            self.handleUpdatedChannelsCatalogue(response);
+            self.nutellaRequestConfigs();
+
+            nutella.net.subscribe('channels/updated', function (message, from) {
+                self.handleUpdatedChannelsCatalogue(message);
+            });
+
+        });
+
+        // TODO subscribe to changed configs
+
+    },
+
+    /**
+     * @state selectedChannel: the current selected channel from UI
+     * @state configs: the list of configurations fetched from server
+     * @state currentConfig: the current selected configuration, also called 'mapping'
+     * @state channelsCatalogue: the list of available channels fetched from server
+     */
+    getInitialState: function() {
+        return {
+            selectedChannel: null,
+            configs: [],
+            currentConfigId: null,
+            currentConfig: [],
+            channelsCatalogue: {}
+        };
+    },
+
+    nutellaRequestConfigs: function() {
+        var self = this;
+        nutella.net.request('configs/retrieve', 'all', function(response) {
+            self.handleUpdatedConfigs(response);
+            self.handleUpdatedCurrentConfigId(+Object.keys(response)[Object.keys(response).length - 1]);
+            self.handleUpdatedCurrentConfig(response[Object.keys(response)[Object.keys(response).length - 1]].mapping)
+        });
+    },
+
+    handleSelection: function(selectedChannel) {
+        this.setState({
+            selectedChannel: selectedChannel
+        });
+    },
+
+    handleUpdatedConfigs: function(configs, publish) {
+        var self = this;
+        var callback = function() {
+            if(publish) {
+                nutella.net.publish('configs/update', self.state.configs);
+            }
+        };
+        this.setState({
+            configs: configs
+        }, callback());
+    },
+
+    handleUpdatedCurrentConfigId: function(id) {
+        this.setState({
+            currentConfigId: id
+        });
+    },
+
+    handleUpdatedCurrentConfig: function(config) {
+        this.setState({
+            currentConfig: config
+        });
+    },
+
+    handleUpdatedChannelsCatalogue: function(cat) {
+        this.setState({
+            channelsCatalogue: cat
+        });
+    },
+
+    handleSaveChanges: function() {
+        var publish = true;
+        this.saveLocalConfigs(publish);
+    },
+
+    handleUndoChanges: function() {
+        this.nutellaRequestConfigs();
+    },
+
+    handleAddRow: function(family) {
+        var mapping = this.state.currentConfig;
+        var newMapping = [];
+        mapping.forEach(function(f) {
+            if(f.family === family) {
+                f.items.push({name:'', channels:[]});
+            }
+            newMapping.push(f);
+        });
+        this.handleUpdatedCurrentConfig(newMapping);
+    },
+
+    /**
+     * Synchronizes the local copy of the current mapping with the shared state configs
+     * @param publish true if you also want to save the changes to the server
+     */
+    saveLocalConfigs: function(publish) {
+        var configs = this.state.configs;
+        configs[this.state.currentConfigId].mapping = this.state.currentConfig;
+        if (publish) {
+            this.handleUpdatedConfigs(configs, publish);
+        } else {
+            this.handleUpdatedConfigs(configs);
+        }
+    },
+
+    handleChangeConfig: function(configId) {
+
+        // update local configs copy
+        this.saveLocalConfigs();
+
+        // update current local configuration to selected one
+        this.handleUpdatedCurrentConfigId(configId);
+        this.handleUpdatedCurrentConfig(this.state.configs[configId].mapping)
+    },
+
+    handleDeleteConfig: function(configId) {
+        var configs = this.state.configs;
+        delete configs[configId];
+        this.handleUpdatedConfigs(configs);
+    },
+
+    handleAddEmptyConfig: function(configName) {
+        var configs = this.state.configs;
+        var newConfigId = 1;
+
+        // Find max id
+        if(configs.length !== 0) {
+            var ids = [];
+            for (var c in configs) {
+                if (configs.hasOwnProperty(c)) {
+                    ids.push(+c);
+                }
+            }
+            newConfigId = Math.max.apply(null, ids) + 1;
+        }
+
+        // Save current config
+        this.saveLocalConfigs();
+
+        // Add new config
+        configs[newConfigId] = {
+            "name": configName,
+            "mapping": [{
+                "family": "iPad",
+                "items": [{
+                    "name": "",
+                    "channels": []
+                }]
+            }, {
+                "family": "Mac",
+                "items": [{
+                    "name": "",
+                    "channels": []
+                }]
+            }]
+        };
+        this.handleUpdatedConfigs(configs);
+
+        console.log('new assigned id', newConfigId);
+
+        // Update current local configuration to selected one
+        this.handleUpdatedCurrentConfigId(newConfigId);
+        this.handleUpdatedCurrentConfig(this.state.configs[newConfigId].mapping)
+    },
+
+    handleUpdateConfigName: function(id, value) {
+        var configs = this.state.configs;
+        configs[id].name = value;
+        this.handleUpdatedConfigs(configs);
+    },
+
+    render: function () {
+
+        return (
+            <div className='outer-div'>
+
+                <ResourcesPanel
+                    configs={this.state.configs}
+                    mapping={this.state.currentConfig}
+                    onUpdatedMapping={this.handleUpdatedCurrentConfig}
+                    channels={this.state.channelsCatalogue}
+                    selectedChannel={this.state.selectedChannel}
+                    onSelectedChannel={this.handleSelection}
+                    onAddRow={this.handleAddRow}
+                    onChangeConfig={this.handleChangeConfig}
+                    onDeleteConfig={this.handleDeleteConfig}
+                    onAddEmptyConfig={this.handleAddEmptyConfig}
+                    onUpdateConfigName={this.handleUpdateConfigName} />
+
+                <ChannelsPanel
+                    ref={'channelsPanel'}
+                    channels={this.state.channelsCatalogue}
+                    selectedChannel={this.state.selectedChannel}
+                    onSelectedChannel={this.handleSelection}
+                    onSaveChanges={this.handleSaveChanges}
+                    onUndoChanges={this.handleUndoChanges} />
+
+            </div>
+        );
+    }
+
+});
+
+module.exports = Main;

data/framework_components/roomcast-package-creator/src/app/components/material-ui/dialog_.jsx

@@ -0,0 +1,66 @@
+var React = require('react');
+var Classable = require('../../../../node_modules/material-ui/src/js/mixins/classable');
+var DialogWindow = require('../../../../node_modules/material-ui/src/js/dialog-window.jsx');
+
+/**
+ * Version extracted from website.
+ * @type {*|Function}
+ * @private
+ */
+var Dialog_ = React.createClass({
+
+  displayName: "Dialog",
+
+  mixins: [Classable],
+
+  propTypes: {
+    title: React.PropTypes.string
+  },
+
+  render: function() {
+
+    var $__0 = this.props,
+      className = $__0.className,
+      title = $__0.title,
+      other = (function(source, exclusion) {
+        var rest = {};
+        var hasOwn = Object.prototype.hasOwnProperty;
+        if (source == null) {
+          throw new TypeError();
+        }
+        for (var key in source) {
+          if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {
+            rest[key] = source[key];
+          }
+        }
+        return rest;
+      }) ($__0, {className:1, title:1});
+
+    var classes = this.getClasses('mui-dialog');
+
+    return (
+      React.createElement(DialogWindow, React.__spread({},
+          other,
+          {ref: "dialogWindow",
+            className: classes}),
+
+        //React.createElement("h3", {className: "mui-dialog-title"}, this.props.title),
+        React.createElement("div", {ref: "dialogContent", className: "mui-dialog-content"},
+          this.props.children
+        )
+
+      )
+    );
+  },
+
+  dismiss: function() {
+    this.refs.dialogWindow.dismiss();
+  },
+
+  show: function() {
+    this.refs.dialogWindow.show();
+  }
+
+});
+
+module.exports = Dialog_;

data/framework_components/roomcast-package-creator/src/app/components/material-ui/drop-down-menu.jsx

@@ -0,0 +1,163 @@
+var React = require('react');
+var Mui = require('material-ui');
+var Paper = Mui.Paper;
+var Menu = require('./menu.jsx');
+var DropDownArrow = require('./svg-icons/drop-down-arrow.jsx');
+var ClickAwayable = require('../../../../node_modules/material-ui/src/js/mixins/click-awayable');
+
+var DropDownMenu = React.createClass({
+
+    mixins: [ClickAwayable],
+
+    propTypes: {
+        autoWidth: React.PropTypes.bool,
+        onChange: React.PropTypes.func,
+        menuItems: React.PropTypes.array.isRequired
+    },
+
+    getDefaultProps: function() {
+        return {
+            autoWidth: true
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            open: false,
+            selectedIndex: this.props.selectedIndex || 0
+        }
+    },
+
+    componentClickAway: function() {
+        this.setState({ open: false });
+    },
+
+    componentDidMount: function() {
+        if (this.props.autoWidth) this._setWidth();
+        this._setWidth();
+    },
+
+    componentWillReceiveProps: function(nextProps) {
+        if (nextProps.hasOwnProperty('selectedIndex')) {
+            this.setState({selectedIndex: nextProps.selectedIndex});
+        }
+    },
+
+    render: function() {
+
+        var classes = 'mui-drop-down-menu';
+        if(this.state.open) {
+            classes += ' mui-open';
+        }
+
+        //console.log('selected:', this.state.selectedIndex, this.props.menuItems); // TODO check performance
+
+        return (
+            <div className={classes}>
+                <div className="mui-menu-control" onClick={this._onControlClick}>
+                    <Paper className="mui-menu-control-bg" zDepth={0} />
+                    <div className="mui-menu-label">
+                        {this.props.menuItems[this.state.selectedIndex].text}
+                    </div>
+                    <DropDownArrow className="mui-menu-drop-down-icon" />
+                    <div className="mui-menu-control-underline" />
+                </div>
+                <Menu
+                    ref="menu"
+                    autoWidth={this.props.autoWidth}
+                    selectedIndex={this.state.selectedIndex}
+                    menuItems={this.props.menuItems}
+                    hideable={true}
+                    visible={this.state.open}
+                    configMenu={this.props.configMenu}
+                    onItemTap={this._onMenuItemClick}
+                    onInputChange={this.handleInputChange} />
+            </div>
+        );
+    },
+
+    handleInputChange: function(id, value) {
+        this.props.onInputChange(id, value);
+    },
+
+    _setWidth: function() {
+        var el = this.getDOMNode(),
+            menuItemsDom = this.refs.menu.getDOMNode();
+
+        el.style.width = menuItemsDom.offsetWidth + 'px';
+    },
+
+    _onControlClick: function(e) {
+        this.setState({ open: !this.state.open });
+    },
+
+    _onMenuItemClick: function(e, key, payload, action) {
+
+        if(action === 'change') {
+
+            if (this.props.onChange && this.state.selectedIndex !== key) this.props.onChange(e, null, payload);
+            this.setState({
+                selectedIndex: key,
+                open: false
+            });
+
+        } else {
+
+            if(action === 'delete') {
+
+                var nextKey, nextConfigId;
+                var currentIndex = this.state.selectedIndex;
+
+                if(currentIndex !== key) {
+
+                    // We're not deleting the current selected item, just delete
+                    var newIndex = key < currentIndex ? currentIndex - 1 : currentIndex;
+                    this.setState({
+                        selectedIndex: newIndex
+                    });
+
+                } else {
+
+                    // If it's the last actual menu item
+                    if(key === this.props.menuItems.length - 2) {
+                        nextKey = key - 1;
+                        nextConfigId = nextKey;
+                    } else {
+                        nextKey = key;
+                        nextConfigId = nextKey + 1;
+                    }
+
+                    // Update menu selected item
+                    this.setState({
+                        selectedIndex: nextKey
+                    });
+
+                    // Update actual shown configuration
+                    if (this.props.onChange) this.props.onChange(e, null, this.props.menuItems[nextConfigId]);
+
+                }
+
+                // Apply actual deletion
+                this.props.onDeleteConfig(payload);
+
+            } else {
+
+                if(action === 'add') {
+
+                    // Update menu selected item
+                    this.setState({
+                        selectedIndex: 0
+                    });
+
+                    console.log(this.refs.menu);
+                    this.props.onAddEmptyConfig(this.refs.menu.refs['configField_true'].getValue());
+
+                }
+            }
+        }
+
+    }
+
+});
+
+module.exports = DropDownMenu;