GUI for createing strategies with parametersTemplate #34

public/js/components/strategy/CreateStrategy.jsx

@@ -1,64 +0,0 @@
-var React          = require('react');
-
-var CreateStrategy = React.createClass({
-
-    getInitialState: function() {
-        return {
-            parameters: []
-        };
-    },
-
-
-    onSubmit: function(event) {
-        event.preventDefault();
-        console.log(event);
-    },
-
-    handleAddParam: function(event) {
-        event.preventDefault();
-        var id = this.state.parameters.length + 1;
-        var params = this.state.parameters.concat([{id:id, name: "param_" + id, label: "Parameter " +id}]);
-        this.setState({parameters: params});
-    },
-
-    render: function() {
-        var parameters = (this.state.parameters.map(function(param) {
-            return <div className="formelement">
-                <label className="t4">{param.label}</label>
-                <div className="input">
-                    <input type="text" name={param.name} />
-                </div>
-            </div>
-        }));
-
-        return (
-            <div className="line pam bg-blue-xlt">
-                <div className="unit r-size1of2">
-                    <form onSubmit={this.onSubmit}>
-                        <fieldset>
-                            <legend>Create strategy</legend>
-                            <div className="formelement">
-                                <label for="strategy_name" className="t4">Name</label>
-                                <div className="input">
-                                    <input id="trategy_name" type="text" name="name" />
-                                </div>
-                            </div>
-
-                            {parameters}
-
-                            <div className="formelement">
-                                <a href="#add" onClick={this.handleAddParam}>+ Add required parameter</a>
-                            </div>
-                            <div className="actions">
-                                <input type="submit" value="Save" className="primary mrs" />
-                                <button onClick={this.props.handleCancelNewStrategy}>Cancel</button>
-                            </div>
-                        </fieldset>
-                    </form>
-                </div>
-            </div>
-        );
-    }
-});
-
-module.exports = CreateStrategy;

public/js/components/strategy/StrategyComponent.jsx

@@ -1,6 +1,6 @@
 var React          = require('react'),
     StrategyList   = require('./StrategyList'),
-    CreateStrategy = require('./CreateStrategy'),
+    StrategyForm = require('./StrategyForm'),
     strategyStore  = require('../../stores/StrategyStore'),
     ErrorMessages  = require('../ErrorMessages');
 
@@ -40,6 +40,15 @@ var StrategyComponent = React.createClass({
         this.setState({createView: false});
     },
 
+    handleSave: function(strategy) {
+        var strategies = this.state.strategies.concat([strategy]);
+        this.setState({
+            createView: false,
+            strategies: strategies
+        });
+        console.log("Saved strategy: ", strategy);
+    },
+
     render: function() {
         return (
             <div>
@@ -55,7 +64,7 @@ var StrategyComponent = React.createClass({
     },
 
     renderCreateView: function() {
-        return (<CreateStrategy handleCancelNewStrategy={this.handleCancelNewStrategy} />)
+        return (<StrategyForm handleCancelNewStrategy={this.handleCancelNewStrategy} handleSave={this.handleSave} />)
     },
 
     renderCreateButton: function() {

public/js/components/strategy/StrategyForm.jsx

@@ -0,0 +1,132 @@
+var React          = require('react');
+
+var StrategyForm = React.createClass({
+
+    getDefaultProps: function() {
+        return {
+            maxParams: 4
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            parameters: []
+        };
+    },
+
+    onSubmit: function(event) {
+        event.preventDefault();
+
+        var strategy = {};
+        strategy.name = this.refs.strategy_name.getDOMNode().value.trim();
+        strategy.parametersTemplate = {};
+
+        var that = this;
+
+        this.state.parameters.forEach(function(parameter) {
+           var name = that.refs[parameter.name].getDOMNode().value.trim();
+            if(name) {
+                strategy.parametersTemplate[name] = "string";
+            }
+        });
+
+        this.props.handleSave(strategy);
+    },
+
+    handleAddParam: function(event) {
+        event.preventDefault();
+        var id = this.state.parameters.length + 1;
+        var params = this.state.parameters.concat([{id:id, name: "param_" + id, label: "Parameter " +id}]);
+        this.setState({parameters: params});
+    },
+
+    handleRemoveParam: function(event) {
+        event.preventDefault();
+        var id = this.state.parameters.length + 1;
+        var params = this.state.parameters.slice(0, -1);
+
+        this.setState({parameters: params});
+    },
+
+    render: function() {
+        return (
+            <div className="line pam bg-blue-xlt">
+                <div className="unit r-size1of2">
+                    <form onSubmit={this.onSubmit}>
+                        <fieldset>
+                            <legend>Create strategy</legend>
+                            <div className="formelement">
+                                <label htmlFor="strategy_name" className="t4">Name</label>
+                                <div className="input">
+                                    <input
+                                        id="trategy_name"
+                                        ref="strategy_name"
+                                        type="text"
+                                        name="name"
+                                        placeholder="Strategy name"
+                                    />
+                                </div>
+                            </div>
+
+                            {this.renderParameters()}
+                            {this.renderRemoveLink()}
+
+
+                            <div className="actions">
+                                <input type="submit" value="Save" className="primary mrs" />
+                                <button onClick={this.props.handleCancelNewStrategy} className="mrs">Cancel</button>
+                                {this.renderAddLink()}
+                            </div>
+                        </fieldset>
+                    </form>
+                </div>
+            </div>
+        );
+    },
+
+    renderParameters: function() {
+        return this.state.parameters.map(function(param) {
+            return (
+                <div className="formelement" key={param.name}>
+                    <label className="t4">{param.label}</label>
+                    <div className="input">
+                        <div className="line">
+
+                            <div className="unit size2of3">
+                                <input
+                                    type="text"
+                                    name={param.name}
+                                    ref={param.name}
+                                    placeholder="Parameter name"
+                                />
+                            </div>
+
+                            <div className="unit size1of3">
+                                <select defaultValue="string">
+                                    <option value="string">string</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                )
+        });
+    },
+
+    renderAddLink: function() {
+        if(this.state.parameters.length < this.props.maxParams) {
+            return <a href="#add" onClick={this.handleAddParam}>+ Add required parameter</a>;
+        }
+    },
+    renderRemoveLink: function() {
+        if(this.state.parameters.length > 0) {
+            return (
+                <div className="formelement mtn">
+                    <a href="#add" className="negative" onClick={this.handleRemoveParam}>- Remove parameter</a>
+                </div>
+                );
+        }
+    }
+});
+
+module.exports = StrategyForm;

webpack.config.js

@@ -17,7 +17,7 @@ module.exports = {
 
     module: {
         loaders: [
-            { test: /\.jsx$/, loader: 'jsx' }
+            { test: /\.jsx$/, loader: 'jsx?harmony' }
         ]
     },